From f1f34811abb1ae894eaa03e9bf41350971a5a272 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vincent=20Tomoaki=20=C3=96ller?=
 <85555471+VincentUllal@users.noreply.github.com>
Date: Thu, 7 Nov 2024 11:40:58 +0100
Subject: [PATCH] add container cypress tests for openAsModal, Drawer and
 Splitview (#4004)

* added container cypress tests for openAsModal, openAsDrawer and openAsSplitview
---
 .../compound/wc-compound-container.cy.js      | 34 +++++++
 .../test-app/iframe/iframe-container.cy.js    | 54 +++++++++++
 .../e2e/test-app/wc/wc-container.cy.js        | 34 +++++++
 container/test-app/compound/helloWorldWC.js   | 40 ++++++--
 .../test-app/iframe/iframeContainer.html      |  9 +-
 container/test-app/iframe/microfrontend.html  | 25 +++++
 container/test-app/wc/clientAPI.html          |  4 +-
 container/test-app/wc/helloWorldWC.js         | 91 +++++++++++++++----
 8 files changed, 262 insertions(+), 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
index 9de337f9ff..942216cfec 100644
--- 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
index 0b6b5013e1..fe2b83d177 100644
--- 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
index 65833119de..5550e977c2 100644
--- 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
index 0bd8936510..59271f5b07 100644
--- 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
index ddfef3486a..acb1797d6d 100644
--- 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
index b69fc1a4e9..b5cbf241e1 100644
--- 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
index 78552f1113..68ca55a58e 100644
--- 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 => {
diff --git a/container/test-app/wc/helloWorldWC.js b/container/test-app/wc/helloWorldWC.js
index 2ecaa8d9fb..b1972174ae 100644
--- a/container/test-app/wc/helloWorldWC.js
+++ b/container/test-app/wc/helloWorldWC.js
@@ -73,18 +73,32 @@ export default class extends HTMLElement {
     withParams().navigate()
     </button>`;
 
-    const linkManagerOpenAsRequestsBtn = document.createElement('template');
-    linkManagerOpenAsRequestsBtn.innerHTML = `<button id="linkManagerOpenAsRequests">linkManager().
-    openAsDrawer,
-    openAsModal,
-    openAsSplitView,
-    </button>`;
-
     const linkManagerUpdateTopPathExistsBackBtn = document.createElement('template');
     linkManagerUpdateTopPathExistsBackBtn.innerHTML = `<button id="linkManagerUpdateTopPathExistsBack">linkManager().
     hasBack(), updateTopNavigation(), goBack(), pathExists()
     </button>`;
 
+    const goBackBtn = document.createElement('template');
+    goBackBtn.innerHTML = '<button id="goBackBtn">lm.GOBACK()</button>';
+
+    const updateTopNavigationBtn = document.createElement('template');
+    updateTopNavigationBtn.innerHTML = '<button id="updateTopNavigationBtn">lm.UPDATETOPNAV</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 navigateBtn = document.createElement('template');
+    navigateBtn.innerHTML = '<button id="navigateBtn">---navigate---</button>';
+
+    const alertBtn = document.createElement('template');
+    alertBtn.innerHTML = '<button id="alertBtn">uxManager.showAlert()</button';
+
     const navigateToIntentBtn = document.createElement('template');
     navigateToIntentBtn.innerHTML = '<button id="navigateToIntent">navigateToIntent</button>';
 
@@ -113,13 +127,20 @@ export default class extends HTMLElement {
     this._shadowRoot.appendChild(updateContextBtn.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(goBackBtn.content.cloneNode(true));
+    this._shadowRoot.appendChild(updateTopNavigationBtn.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(navigateBtn.content.cloneNode(true));
+    this._shadowRoot.appendChild(alertBtn.content.cloneNode(true));
+    
     this._shadowRoot.appendChild(linkManagerUpdateTopPathExistsBackBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(setViewGroupDataBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(getCurrentRouteBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(navigateToIntentBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(confirmationModalBtn.content.cloneNode(true));
-
     this._shadowRoot.appendChild(customMessageDiv.content.cloneNode(true));
     this._shadowRoot.appendChild(empty.content.cloneNode(true));
 
@@ -273,19 +294,44 @@ 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', {
+    this.$openAsModalBtn = this._shadowRoot.querySelector('#openAsModalBtn');
+    this.$openAsModalBtn.addEventListener('click', () => {
+      this.LuigiClient.linkManager().openAsModal('openAsModal-wc', {
+        title:'Modal Title',
         size: 'm'
       });
-      this.LuigiClient.linkManager().openAsSplitView('hello-world-wc', {
+    });
+    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.$alertBtn = this._shadowRoot.querySelector('#alertBtn');
+    this.$alertBtn.addEventListener('click', () => {
+      this.LuigiClient.uxManager().showAlert({
+        text: "showAlert test",
+        type: 'info'
+      });
+    })
+
+    this.$navigateBtn = this._shadowRoot.querySelector('#navigateBtn');
+    this.$navigateBtn.addEventListener('click', () => {
+      const path = "AAA.html";
+      const modalSettings = {
+        title:'Modal Title',
+        size: 'm'
+      }
+      this.LuigiClient.linkManager().navigate(path, 0, true, modalSettings);
+    });
+
     this.$linkManagerUpdateTopPathExistsBack = this._shadowRoot.querySelector('#linkManagerUpdateTopPathExistsBack');
     this.$linkManagerUpdateTopPathExistsBack.addEventListener('click', () => {
       this.LuigiClient.linkManager().updateTopNavigation();
@@ -305,6 +351,19 @@ export default class extends HTMLElement {
       this.LuigiClient.linkManager().goBack();
     });
 
+    this.$goBackBtn = this._shadowRoot.querySelector('#goBackBtn');
+    this.$goBackBtn.addEventListener('click', () => {
+      this.LuigiClient.linkManager().goBack();
+      console.log("goBack() CLICKED");
+    });
+
+    this.$updateTopNavigationBtn = this._shadowRoot.querySelector('#updateTopNavigationBtn');
+    this.$updateTopNavigationBtn.addEventListener('click', () => {
+      console.log("updateTopNavigation() CLICKED 1");
+      this.LuigiClient.linkManager().updateTopNavigationBtn();
+      console.log("updateTopNavigation() CLICKED 2");
+    });
+
     this.$setViewGroupData = this._shadowRoot.querySelector('#setViewGroupData');
     this.$setViewGroupData.addEventListener('click', () => {
       this.LuigiClient.setViewGroupData({ vg: 'some data' });