From 274d7ab0b6da06dca8c7f46902f931e44b3076dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vincent=20Tomoaki=20=C3=96ller?=
 <85555471+VincentUllal@users.noreply.github.com>
Date: Wed, 13 Nov 2024 14:04:23 +0100
Subject: [PATCH] Add container tests show alert go back update top nav (#4021)

Add container tests for showAlert, goBack, updateTopNavigation
---------

Co-authored-by: Waldemar Mazurek <waldemar.mazurek@sap.com>
Co-authored-by: Waldemar Mazurek <waldemar.mazurek@accenture.com>
---
 .../compound/wc-compound-container.cy.js      | 26 ++++++++++--
 .../test-app/iframe/iframe-container.cy.js    | 41 +++++++++++++++++++
 .../e2e/test-app/wc/wc-container.cy.js        | 26 ++++++++++--
 .../test-app/compound/compoundClientAPI.html  |  7 ++++
 container/test-app/compound/helloWorldWC.js   | 14 ++++++-
 .../test-app/iframe/iframeContainer.html      | 10 +++++
 container/test-app/iframe/microfrontend.html  | 11 +++++
 container/test-app/wc/clientAPI.html          |  7 ++++
 container/test-app/wc/helloWorldWC.js         | 39 +++++++-----------
 9 files changed, 147 insertions(+), 34 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 76cd80d597..099f29cec5 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
@@ -164,17 +164,35 @@ describe('Compound Container Tests', () => {
         });
     });
 
-    it('LuigiClient API - pathExists', () => {
+    it('LuigiClient API - pathExists, goBack, updateTopNavigation', () => {
       cy.on('window:alert', stub);
 
+      const alertMessages = [
+        'UPDATE_TOP_NAVIGATION_REQUEST event received',
+        'some goBackValue',
+        'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false',
+      ];
+
       cy.get(containerSelector)
         .shadow()
         .get('#linkManagerUpdateTopPathExistsBack')
         .click()
         .then(() => {
-          expect(stub.getCall(0)).to.be.calledWith(
-            'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false'
-          );
+          alertMessages.forEach((msg, index) => {
+            expect(stub.getCall(index)).to.be.calledWith(msg);
+          });
+        });
+    });
+
+    it('LuigiClient API - showAlert', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .get('#showAlert')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith("uxManager().showAlert() test");
         });
     });
 
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 a0358ddd91..470e5d60e0 100644
--- a/container/cypress/e2e/test-app/iframe/iframe-container.cy.js
+++ b/container/cypress/e2e/test-app/iframe/iframe-container.cy.js
@@ -34,6 +34,47 @@ describe('Iframe Container Test', () => {
       });
   });
 
+  it('showAlert', () => {
+    cy.on('window:alert', stub);
+
+    cy.get(containerSelector)
+      .shadow()
+      .get('iframe')
+      .then(iframe => {
+        const $body = iframe.contents().find('body');
+        cy.wrap($body)
+          .contains('test showAlert')
+          .click()
+          .then(() => {
+            cy.wrap(stub).should(
+              'have.been.calledWith',
+              'show-alert-request message received: {\"isTrusted\":true}'
+            );
+          });
+      });
+  });
+
+  it('goBack', () => {
+    cy.on('window:alert', stub);
+
+    cy.get(containerSelector)
+      .shadow()
+      .get('iframe')
+      .then(iframe => {
+        const $body = iframe.contents().find('body');
+        cy.wrap($body)
+          .contains('test goBack')
+          .click()
+          .then(() => {
+            console.log(cy.wrap(stub));
+            cy.wrap(stub).should(
+              'have.been.calledWith',
+              'navigate-back-request'
+            );
+          });
+      });
+  });
+
   it('sendCustomMessage', () => {
     cy.get('#btn-1').click();
     cy.get(containerSelector)
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 b13fa31bcb..349c932115 100644
--- a/container/cypress/e2e/test-app/wc/wc-container.cy.js
+++ b/container/cypress/e2e/test-app/wc/wc-container.cy.js
@@ -189,17 +189,35 @@ describe('Web Container Test', () => {
         });
     });
 
-    it('pathExists', () => {
+    it('pathExists, goBack, updateTopNavigation', () => {
       cy.on('window:alert', stub);
 
+      const alertMessages = [
+        'UPDATE_TOP_NAVIGATION_REQUEST event received',
+        'some goBackValue',
+        'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false',
+      ];
+
       cy.get(containerSelector)
         .shadow()
         .get('#linkManagerUpdateTopPathExistsBack')
         .click()
         .then(() => {
-          expect(stub.getCall(0)).to.be.calledWith(
-            'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false'
-          );
+          alertMessages.forEach((msg, index) => {
+            expect(stub.getCall(index)).to.be.calledWith(msg);
+          });
+        });
+    });
+
+    it('showAlert', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .get('#showAlert')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith("uxManager().showAlert() test");
         });
     });
 
diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html
index 24b7ba787f..463ba713d8 100644
--- a/container/test-app/compound/compoundClientAPI.html
+++ b/container/test-app/compound/compoundClientAPI.html
@@ -171,6 +171,13 @@ <h3>
         console.log(event.detail);
         window.location.hash = event.detail.link;
       });
+      compoundContainer.addEventListener(MFEventID.GO_BACK_REQUEST, event => {
+        console.log(event.detail);
+        alert(event.detail.goBackValue);
+      });
+      compoundContainer.addEventListener(MFEventID.UPDATE_TOP_NAVIGATION_REQUEST, event => {
+        alert("UPDATE_TOP_NAVIGATION_REQUEST event received");
+      });
       compoundContainer.addEventListener(MFEventID.ALERT_REQUEST, (event) => {
         console.log(event.detail);
         alert(event.detail.text);
diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js
index 6ad9fafe68..f696f81aed 100644
--- a/container/test-app/compound/helloWorldWC.js
+++ b/container/test-app/compound/helloWorldWC.js
@@ -13,6 +13,9 @@ export default class extends HTMLElement {
     const templateBtn = document.createElement('template');
     templateBtn.innerHTML = '<button id="aButton">Click me!</button>';
 
+    const showAlertBtn = document.createElement('template');
+    showAlertBtn.innerHTML = '<button id="showAlert">showAlert</button>';
+
     const current_locale = document.createElement('template');
     current_locale.innerHTML = '<button id="current_locale">getCurrentLocale</button>';
 
@@ -111,6 +114,7 @@ export default class extends HTMLElement {
     this._shadowRoot.appendChild(template.content.cloneNode(true));
     this._shadowRoot.appendChild(templateBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(templateBtn2.content.cloneNode(true));
+    this._shadowRoot.appendChild(showAlertBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(addNodeParamsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(getNodeParamsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(setAnchorBtn.content.cloneNode(true));
@@ -171,6 +175,14 @@ export default class extends HTMLElement {
       }
     });
 
+    this.$showAlert = this._shadowRoot.querySelector('#showAlert');
+    this.$showAlert.addEventListener('click', () => {
+      this.LuigiClient.uxManager().showAlert({
+        text: 'uxManager().showAlert() test',
+        type: 'info'
+      });
+    })
+
     this.$publishEventBtn = this._shadowRoot.querySelector('#publishEvent');
     this.$publishEventBtn.addEventListener('click', () => {
       if (this.LuigiClient) {
@@ -347,7 +359,7 @@ export default class extends HTMLElement {
             type: 'info'
           });
         });
-      this.LuigiClient.linkManager().goBack();
+        this.LuigiClient.linkManager().goBack({ goBackValue: 'some goBackValue' });
     });
 
     this.$setViewGroupData = this._shadowRoot.querySelector('#setViewGroupData');
diff --git a/container/test-app/iframe/iframeContainer.html b/container/test-app/iframe/iframeContainer.html
index 99a8ef1b17..f58e9f2c2d 100644
--- a/container/test-app/iframe/iframeContainer.html
+++ b/container/test-app/iframe/iframeContainer.html
@@ -29,6 +29,7 @@ <h3>
       const luigiContainer = document.querySelector(
         '[data-test-id="iframe-based-container-test"]',
       );
+
       luigiContainer.addEventListener(Events.NAVIGATION_REQUEST, (event) => {
         console.log(event.detail);
         window.location.hash = event.detail.link;
@@ -37,6 +38,15 @@ <h3>
         }
       });
 
+      luigiContainer.addEventListener(Events.GO_BACK_REQUEST, (event) => {
+        console.log(event.detail);
+        alert(event.detail.goBackValue);
+      });
+
+      luigiContainer.addEventListener(Events.UPDATE_TOP_NAVIGATION_REQUEST, (event) => {
+        alert("UPDATE_TOP_NAVIGATION_REQUEST event received");
+      });
+
       luigiContainer.addEventListener(Events.CUSTOM_MESSAGE, (event) => {
         alert('Custom message received: ' + JSON.stringify(event.detail));
       });
diff --git a/container/test-app/iframe/microfrontend.html b/container/test-app/iframe/microfrontend.html
index 7a865ce525..13b013331f 100644
--- a/container/test-app/iframe/microfrontend.html
+++ b/container/test-app/iframe/microfrontend.html
@@ -60,6 +60,9 @@ <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="testShowAlert()">test showAlert</button>
+      <button onclick="goBack()">test goBack()</button>
+      <button onclick="updateTopNavigation()">test updateTopNavigation()</button>
 
       <button onclick="openAsModal()">test openAsModal()</button>
       <button onclick="openAsDrawer()">test openAsDrawer()</button>
@@ -88,6 +91,14 @@ <h1 id="title">Multi purpose demo page</h1>
         });
       }
 
+      function goBack(){
+        LuigiClient.linkManager().goBack();
+      }
+
+      function updateTopNavigation(){
+        LuigiClient.LuigiClient.linkManager().updateTopNavigation();
+      }
+
       function testNav() {
         LuigiClient.linkManager().navigate('/');
       }
diff --git a/container/test-app/wc/clientAPI.html b/container/test-app/wc/clientAPI.html
index cb5ef01a7c..e890570085 100644
--- a/container/test-app/wc/clientAPI.html
+++ b/container/test-app/wc/clientAPI.html
@@ -91,6 +91,13 @@ <h3>
           console.log(event.detail);
           alert(event.detail.text);
         });
+        luigiContainer.addEventListener(MFEventID.GO_BACK_REQUEST, event => {
+          console.log(event.detail)
+          alert(event.detail.goBackValue);
+        });
+        luigiContainer.addEventListener(MFEventID.UPDATE_TOP_NAVIGATION_REQUEST, event => {
+          alert("UPDATE_TOP_NAVIGATION_REQUEST event received");
+        });
         luigiContainer.addEventListener(
           MFEventID.SHOW_CONFIRMATION_MODAL_REQUEST,
           (event) => {
diff --git a/container/test-app/wc/helloWorldWC.js b/container/test-app/wc/helloWorldWC.js
index b3a401f019..c8658f5d9a 100644
--- a/container/test-app/wc/helloWorldWC.js
+++ b/container/test-app/wc/helloWorldWC.js
@@ -13,6 +13,9 @@ export default class extends HTMLElement {
     const templateBtn = document.createElement('template');
     templateBtn.innerHTML = '<button id="aButton">Click me!</button>';
 
+    const showAlertBtn = document.createElement('template');
+    showAlertBtn.innerHTML = '<button id="showAlert">showAlert</button>';
+
     const templateBtn2 = document.createElement('template');
     templateBtn2.innerHTML = '<button id="publishEvent">Publish event</button>';
 
@@ -78,12 +81,6 @@ export default class extends HTMLElement {
     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>';
 
@@ -94,7 +91,7 @@ export default class extends HTMLElement {
     openAsSplitviewBtn.innerHTML = '<button id="openAsSplitviewBtn">lm.openAsSplitview</button>';
 
     const navigateBtn = document.createElement('template');
-    navigateBtn.innerHTML = '<button id="navigateBtn">---navigate---</button>';
+    navigateBtn.innerHTML = '<button id="navigateBtn">navigate</button>';
 
     const alertBtn = document.createElement('template');
     alertBtn.innerHTML = '<button id="alertBtn">uxManager.showAlert()</button';
@@ -115,6 +112,7 @@ export default class extends HTMLElement {
     this._shadowRoot.appendChild(template.content.cloneNode(true));
     this._shadowRoot.appendChild(templateBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(templateBtn2.content.cloneNode(true));
+    this._shadowRoot.appendChild(showAlertBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(addNodeParamsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(getNodeParamsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(setAnchorBtn.content.cloneNode(true));
@@ -127,15 +125,11 @@ 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(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));
@@ -144,6 +138,14 @@ export default class extends HTMLElement {
     this._shadowRoot.appendChild(customMessageDiv.content.cloneNode(true));
     this._shadowRoot.appendChild(empty.content.cloneNode(true));
 
+    this.$showAlert = this._shadowRoot.querySelector('#showAlert');
+    this.$showAlert.addEventListener('click', () => {
+      this.LuigiClient.uxManager().showAlert({
+        text: 'uxManager().showAlert() test',
+        type: 'info'
+      });
+    });
+
     this.$paragraph = this._shadowRoot.querySelector('p');
     this.$button = this._shadowRoot.querySelector('#aButton');
     this.$button.addEventListener('click', () => {
@@ -338,20 +340,7 @@ export default class extends HTMLElement {
             type: 'info'
           });
         });
-      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.LuigiClient.linkManager().goBack({ goBackValue: 'some goBackValue' });
     });
 
     this.$setViewGroupData = this._shadowRoot.querySelector('#setViewGroupData');