adjusted jests to requirements

intershop · Aug 17, 2023 · 52ae636 · 52ae636
1 parent fbd9c7d
commit 52ae636
Showing 1 changed file with 29 additions and 8 deletions.
diff --git a/src/app/shared/components/common/in-place-edit/in-place-edit.component.spec.ts b/src/app/shared/components/common/in-place-edit/in-place-edit.component.spec.ts
@@ -55,14 +55,35 @@ describe('In Place Edit Component', () => {
   it('should always render view component by default', () => {
     fixture.detectChanges();
 
-    expect(element.querySelector('input')).toBeFalsy();
+    expect(element).toMatchInlineSnapshot(`
+      <ish-in-place-edit
+        ><div class="d-flex flex-row align-items-baseline" title="inplace_edit.click_to_edit">
+          <p class="form-control-plaintext">VIEW</p>
+          <button class="btn btn-link">
+            <fa-icon class="pl-2 mr-auto btn-link" ng-reflect-icon="fas,pencil-alt"></fa-icon>
+          </button></div
+      ></ish-in-place-edit>
+    `);
   });
 
   it('should render edit component when clicked', () => {
     fixture.detectChanges();
     mousedown({ target: element.querySelector('p') });
 
-    expect(element.querySelector('input')).toBeTruthy();
+    expect(element).toMatchInlineSnapshot(`
+      <ish-in-place-edit
+        ><div class="d-flex flex-row align-items-baseline">
+          <input class="form-control" /><button
+            data-testing-id="confirm"
+            class="btn btn-link"
+            title="inplace_edit.save"
+          >
+            <fa-icon ng-reflect-icon="fas,check"></fa-icon></button
+          ><button data-testing-id="cancel" class="btn btn-link" title="inplace_edit.cancel">
+            <fa-icon ng-reflect-icon="fas,times"></fa-icon>
+          </button></div
+      ></ish-in-place-edit>
+    `);
   });
 
   describe('in edit mode', () => {
@@ -78,7 +99,7 @@ describe('In Place Edit Component', () => {
     it('should switch to view mode when clicked outside', () => {
       mousedown({ target: element });
 
-      expect(element.querySelector('input')).toBeFalsy();
+      expect(element.querySelector('.form-control-plaintext').textContent).toContain('VIEW');
     });
 
     it('should emit edited event when clicked outside', done => {
@@ -90,7 +111,7 @@ describe('In Place Edit Component', () => {
     });
 
     it('should switch to view mode when clicked on confirm', () => {
-      (element.querySelector('[data-testing-id="confirm"') as HTMLButtonElement).click();
+      (element.querySelector('[data-testing-id="confirm"]') as HTMLButtonElement).click();
 
       fixture.detectChanges();
 
@@ -102,23 +123,23 @@ describe('In Place Edit Component', () => {
         done();
       });
 
-      (element.querySelector('[data-testing-id="confirm"') as HTMLButtonElement).click();
+      (element.querySelector('[data-testing-id="confirm"]') as HTMLButtonElement).click();
     });
 
     it('should switch to view mode when clicked on cancel', () => {
-      (element.querySelector('[data-testing-id="cancel"') as HTMLButtonElement).click();
+      (element.querySelector('[data-testing-id="cancel"]') as HTMLButtonElement).click();
 
       fixture.detectChanges();
 
-      expect(element.querySelector('input')).toBeFalsy();
+      expect(element.querySelector('.form-control-plaintext').textContent).toContain('VIEW');
     });
 
     it('should emit aborted event when clicked on cancel', done => {
       inplaceEdit().aborted.subscribe(() => {
         done();
       });
 
-      (element.querySelector('[data-testing-id="cancel"') as HTMLButtonElement).click();
+      (element.querySelector('[data-testing-id="cancel"]') as HTMLButtonElement).click();
     });
   });
 });