add container cypress tests for openAsModal, Drawer and Splitview (#4004

) * added container cypress tests for openAsModal, openAsDrawer and openAsSplitview
SAP · Nov 7, 2024 · f1f3481 · f1f3481
1 parent 915b36d
commit f1f3481
Show file tree

Hide file tree

Showing 8 changed files with 262 additions and 29 deletions.
diff --git a/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js b/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js
@@ -217,6 +217,40 @@ describe('Compound Container Tests', () => {
         });
     });
 
+    it('openAsModal webcomponent container', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .get('#openAsModalBtn')
+        .click()
+        .then(() => {
+          cy.hash().should('eq', '#openAsModal-wc');
+        });
+    });
+    it('openAsDrawer webcomponent container', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .get('#openAsDrawerBtn')
+        .click()
+        .then(() => {
+          cy.hash().should('eq', '#openAsDrawer-wc');
+        });
+    });
+    it('openAsSplitview webcomponent container', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .get('#openAsSplitviewBtn')
+        .click()
+        .then(() => {
+          cy.hash().should('eq', '#openAsSplitview-wc');
+        });
+    });
+
     it('LuigiClient API publishEvent', () => {
       cy.on('window:alert', stub);
 

diff --git a/container/cypress/e2e/test-app/iframe/iframe-container.cy.js b/container/cypress/e2e/test-app/iframe/iframe-container.cy.js
@@ -115,4 +115,58 @@ describe('Iframe Container Test', () => {
           });
       });
   });
+
+  it('openAsModal', () => {
+    cy.on('window:confirm', () => false); 
+
+    cy.get(containerSelector)
+      .shadow()
+      .get('iframe')
+      .then(iframe => {
+        const $body = iframe.contents().find('body');
+        cy.wrap($body)
+          .contains('test openAsModal()')
+          .click();
+
+        cy.location().should(loc => {
+          expect(loc.hash).to.eq('#openAsModal-iframe');
+        });
+      });
+  });
+
+  it('openAsDrawer', () => {
+    cy.on('window:confirm', () => false); 
+
+    cy.get(containerSelector)
+      .shadow()
+      .get('iframe')
+      .then(iframe => {
+        const $body = iframe.contents().find('body');
+        cy.wrap($body)
+          .contains('test openAsDrawer')
+          .click();
+
+        cy.location().should(loc => {
+          expect(loc.hash).to.eq('#openAsDrawer-iframe');
+        });
+      });
+  });
+
+  it('openAsSplitview', () => {
+    cy.on('window:confirm', () => false); 
+
+    cy.get(containerSelector)
+      .shadow()
+      .get('iframe')
+      .then(iframe => {
+        const $body = iframe.contents().find('body');
+        cy.wrap($body)
+          .contains('test openAsSplitview')
+          .click();
+
+        cy.location().should(loc => {
+          expect(loc.hash).to.eq('#openAsSplitview-iframe');
+        });
+      });
+  });
 });
diff --git a/container/cypress/e2e/test-app/wc/wc-container.cy.js b/container/cypress/e2e/test-app/wc/wc-container.cy.js
@@ -158,6 +158,40 @@ describe('Web Container Test', () => {
         });
     });
 
+    it('openAsModal webcomponent container', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .get('#openAsModalBtn')
+        .click()
+        .then(() => {
+          cy.hash().should('eq', '#openAsModal-wc');
+        });
+    });
+    it('openAsDrawer webcomponent container', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .get('#openAsDrawerBtn')
+        .click()
+        .then(() => {
+          cy.hash().should('eq', '#openAsDrawer-wc');
+        });
+    });
+    it('openAsSplitview webcomponent container', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .get('#openAsSplitviewBtn')
+        .click()
+        .then(() => {
+          cy.hash().should('eq', '#openAsSplitview-wc');
+        });
+    });
+
     it('pathExists', () => {
       cy.on('window:alert', stub);
 

diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js
@@ -79,12 +79,22 @@ export default class extends HTMLElement {
     withParams().navigate()
     </button>`;
 
+    /*
     const linkManagerOpenAsRequestsBtn = document.createElement('template');
     linkManagerOpenAsRequestsBtn.innerHTML = `<button id="linkManagerOpenAsRequests">linkManager().
     openAsDrawer,
     openAsModal,
     openAsSplitView,
     </button>`;
+    */
+    const openAsModalBtn = document.createElement('template');
+    openAsModalBtn.innerHTML = '<button id="openAsModalBtn">lm.openAsModal</button>';
+
+    const openAsDrawerBtn = document.createElement('template');
+    openAsDrawerBtn.innerHTML = '<button id="openAsDrawerBtn">lm.openAsDrawer</button>';
+
+    const openAsSplitviewBtn = document.createElement('template');
+    openAsSplitviewBtn.innerHTML = '<button id="openAsSplitviewBtn">lm.openAsSplitview</button>';
 
     const linkManagerUpdateTopPathExistsBackBtn = document.createElement('template');
     linkManagerUpdateTopPathExistsBackBtn.innerHTML = `<button id="linkManagerUpdateTopPathExistsBack">linkManager().
@@ -115,7 +125,12 @@ export default class extends HTMLElement {
     this._shadowRoot.appendChild(retrieveContextValueBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(uxManagerMultipleRequestsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(linkManagerChainedFunctionsRequestsBtn.content.cloneNode(true));
-    this._shadowRoot.appendChild(linkManagerOpenAsRequestsBtn.content.cloneNode(true));
+
+    this._shadowRoot.appendChild(openAsModalBtn.content.cloneNode(true));
+    this._shadowRoot.appendChild(openAsDrawerBtn.content.cloneNode(true));
+    this._shadowRoot.appendChild(openAsSplitviewBtn.content.cloneNode(true));
+    // this._shadowRoot.appendChild(linkManagerOpenAsRequestsBtn.content.cloneNode(true));
+
     this._shadowRoot.appendChild(linkManagerUpdateTopPathExistsBackBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(setViewGroupDataBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(confirmationModalBtn.content.cloneNode(true));
@@ -306,11 +321,24 @@ export default class extends HTMLElement {
       });
     });
 
-    this.$linkManagerOpenAsRequests = this._shadowRoot.querySelector('#linkManagerOpenAsRequests');
-    this.$linkManagerOpenAsRequests.addEventListener('click', () => {
-      this.LuigiClient.linkManager().openAsDrawer('hello-world-wc', { size: 's' });
-      this.LuigiClient.linkManager().openAsModal('hello-world-wc', { size: 'm' });
-      this.LuigiClient.linkManager().openAsSplitView('hello-world-wc', { size: 'l' });
+    this.$openAsModalBtn = this._shadowRoot.querySelector('#openAsModalBtn');
+    this.$openAsModalBtn.addEventListener('click', () => {
+      this.LuigiClient.linkManager().openAsModal('openAsModal-wc', {
+        title:'Modal Title',
+        size: 'm'
+      });
+    });
+    this.$openAsDrawerBtn = this._shadowRoot.querySelector('#openAsDrawerBtn');
+    this.$openAsDrawerBtn.addEventListener('click', () => {
+      this.LuigiClient.linkManager().openAsDrawer('openAsDrawer-wc', {
+        size: 's'
+      });
+    });
+    this.$openAsSplitviewBtn = this._shadowRoot.querySelector('#openAsSplitviewBtn');
+    this.$openAsSplitviewBtn.addEventListener('click', () => {
+      this.LuigiClient.linkManager().openAsSplitView('openAsSplitview-wc', {
+        size: 'l'
+      });
     });
 
     this.$linkManagerUpdateTopPathExistsBack = this._shadowRoot.querySelector('#linkManagerUpdateTopPathExistsBack');

diff --git a/container/test-app/iframe/iframeContainer.html b/container/test-app/iframe/iframeContainer.html
@@ -32,6 +32,9 @@ <h3>
       luigiContainer.addEventListener(Events.NAVIGATION_REQUEST, event => {
         console.log(event.detail);
         window.location.hash = event.detail.link;
+        if (confirm('Do you want to leave this page?')) {
+          window.location = event.detail.link;
+        }
       });
 
       luigiContainer.addEventListener(Events.CUSTOM_MESSAGE, event => {
@@ -57,12 +60,6 @@ <h3>
         luigiContainer.setAttribute('auth-data', '{"accessToken": "updated token"}');
       });
 
-      luigiContainer.addEventListener(Events.NAVIGATION_REQUEST, event => {
-        if (confirm('Do you want to leave this page?')) {
-          window.location = event.detail.link;
-        }
-      });
-
       const showAnAlert = alertSettings => {
         var popup = document.createElement('div');
         var text = document.createTextNode(alertSettings.settings.text);

diff --git a/container/test-app/iframe/microfrontend.html b/container/test-app/iframe/microfrontend.html
@@ -60,9 +60,34 @@ <h1 id="title">Multi purpose demo page</h1>
       <button onclick="testSetDirtyStatus()">test set dirty status</button>
       <button onclick="testShowAlert()">test show alert</button>
       <button onclick="testGetToken()">test get token</button>
+
+      <button onclick="openAsModal()">test openAsModal()</button>
+      <button onclick="openAsDrawer()">test openAsDrawer()</button>
+      <button onclick="openAsSplitview()">test openAsSplitview()</button>
     </div>
+
     <script>
       // List of onclick handlers for client calls
+
+      function openAsModal(){
+        LuigiClient.linkManager().openAsModal('openAsModal-iframe', {
+        title:'Modal Title',
+        size: 'm'
+      });
+      }
+
+      function openAsDrawer(){
+        LuigiClient.linkManager().openAsDrawer('openAsDrawer-iframe', {
+        size: 's'
+      });
+      }
+
+      function openAsSplitview(){
+        LuigiClient.linkManager().openAsDrawer('openAsSplitview-iframe', {
+          size: 'l'
+        });
+      }
+
       function testNav() {
         LuigiClient.linkManager().navigate('/');
       }

diff --git a/container/test-app/wc/clientAPI.html b/container/test-app/wc/clientAPI.html
@@ -109,7 +109,9 @@ <h3>
             alert(event.detail.data);
           }
         });
-
+        luigiContainer.addEventListener(MFEventID.GO_BACK_REQUEST, event => {
+          console.log(event);
+        });
         luigiContainer.addEventListener(
           MFEventID.RUNTIME_ERROR_HANDLING_REQUEST,
           event => {