Added cypress tests for modal on close promise (#3740)

SAP · Jun 7, 2024 · f515e09 · f515e09
1 parent 1eff9f6
commit f515e09
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 1 deletion.
diff --git a/...e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features-3.cy.js b/...e-test-application/cypress/e2e/tests/1-angular/luigi-client-link-manager-features-3.cy.js
@@ -152,6 +152,76 @@ describe('Luigi client linkManager', () => {
     });
   });
 
+  describe('linkManager OpenAsModal() promise functionality', () => {
+    let $iframeBody;
+    beforeEach(() => {
+      // "clear" variables to make sure they are not reused and throw error in case something goes wrong
+      $iframeBody = undefined;
+      cy.visitLoggedIn('/projects/pr2');
+      cy.getIframeBody().then(result => {
+        $iframeBody = result;
+      });
+    });
+    it('Open and Close Modal with Close Button', () => {
+      cy.wrap($iframeBody)
+        .find('[data-testid=open-modal-on-close-promise]')
+        .click()
+        .then(() => {
+          cy.get('[data-testid=lui-modal-index-0]') // X-button
+          .click()
+        })
+      cy.wrap($iframeBody).should('contain', 'promise resolved!');
+    });
+    it('Open and Close Modal With Esc Key', () => {
+      cy.wrap($iframeBody)
+        .find('[data-testid=open-modal-on-close-promise]')
+        .click();
+      cy.get('body').trigger('keydown', { keyCode: 27});  // Esc
+      cy.wrap($iframeBody).should('contain', 'promise resolved!');
+    });
+    it('Open and Close Modal With linkManager.goBack()', () => {
+      cy.wrap($iframeBody)
+        .find('[data-testid=open-modal-on-close-promise]')
+        .click();
+      cy.get('[data-testid=modal-mf] iframe')
+        .iframe()
+        .then($modal => {
+          cy.wrap($modal)
+            .contains('Click here') // linkManager().goBack()
+            .click();
+        });
+      cy.wrap($iframeBody).should('contain', 'promise resolved!');
+    });
+    it('Open and Close Modal With linkManager().navigate()', () => {
+      cy.wrap($iframeBody)
+        .find('[data-testid=open-modal-on-close-promise]')
+        .click();
+      cy.get('[data-testid=modal-mf] iframe')
+        .eq(0)
+        .iframe()
+        .then($modal => {
+          cy.wrap($modal)
+            .contains('absolute: to /projects/pr2') // linkManager().navigate('/projects/pr2')
+            .click();
+        });
+      cy.wrap($iframeBody).should('contain', 'promise resolved!');
+    });
+    it('Open and Close Modal With uxManager().closeCurrentModal()', () => {
+      cy.wrap($iframeBody)
+        .find('[data-testid=open-modal-on-close-promise]')
+        .click();
+      cy.get('[data-testid=modal-mf] iframe')
+        .eq(0)
+        .iframe()
+        .then($modal => {
+          cy.wrap($modal)
+            .contains('Close modal') // uxManager().closeCurrentModal()
+            .click();
+        });
+      cy.wrap($iframeBody).should('contain', 'promise resolved!');
+    });
+  });
+
   describe('linkManager wrong paths navigation', () => {
     let $iframeBody;
     beforeEach(() => {

diff --git a/test/e2e-test-application/src/app/project/project.component.html b/test/e2e-test-application/src/app/project/project.component.html
@@ -585,6 +585,29 @@ <h3 class="fd-layout-panel__title">Navigate</h3>
             >
             </app-code-snippet>
           </li>
+          <li class="fd-list__item">
+            <a
+              href="javascript:void(0)"
+              class="fd-link"
+              data-testid="open-modal-on-close-promise"
+              (click)="openAsModal()"
+              >Open A modal with On Close Promise</a
+            >
+            <app-code-snippet
+              data="
+              linkManager().openAsModal('/projects/pr2/settings', {
+                title: 'microfrontend in a modal',
+                size: 'm',
+              }).then(() => {
+                ...
+              }).catch(() => {
+                ...
+              });
+              "
+            >
+            </app-code-snippet>
+          </li>
+          <div id="promiseTest"></div>
           <li class="fd-list__item">
             <a
               href="javascript:void(0)"
@@ -1169,4 +1192,4 @@ <h3 class="fd-layout-panel__title">Demo time</h3>
   *ngIf="projectId === 'pr1'"
   [modalActive]="modalActive"
   (modalClosed)="toggleModal()"
-></app-modal>
+></app-modal>
diff --git a/test/e2e-test-application/src/app/project/project.component.ts b/test/e2e-test-application/src/app/project/project.component.ts
@@ -128,6 +128,15 @@ export class ProjectComponent implements OnInit, OnDestroy {
     }
   }
 
+  openAsModal() {
+    linkManager().openAsModal('/projects/pr2/settings', {
+      title: 'microfrontend in a modal',
+      size: 'm',
+    }).then(() => {
+      document.getElementById('promiseTest').innerHTML='promise resolved!'
+    })
+  }
+
   showConfirmationModal() {
     this.confirmationModalResult = '';
     const settings = {

diff --git a/test/e2e-test-application/src/app/project/settings/settings.component.html b/test/e2e-test-application/src/app/project/settings/settings.component.html
@@ -223,6 +223,15 @@ <h3 class="fd-layout-panel__title">Navigate</h3>
           >
           <app-code-snippet data="linkManager().navigate('/overview')"></app-code-snippet>
         </li>
+        <li class="fd-list__item">
+          <a
+            href="javascript:void(0)"
+            class="fd-link"
+            (click)="linkManager().navigate('/projects/pr2')"
+            >absolute: to /projects/pr2</a
+          >
+          <app-code-snippet data="linkManager().navigate('/projects/pr2')"></app-code-snippet>
+        </li>
         <li class="fd-list__item">
           <a
             href="javascript:void(0)"