Adds e2e tests for pathExists and showConfirmationModal

container/cypress/e2e/test-app/compound/wc-compound-container.cy.js

@@ -147,7 +147,7 @@ describe('Compound Container Tests', () => {
         });
     });
 
-    it('LuigiClient API updateContext', () => {
+    it('LuigiClient API - updateContext', () => {
       cy.on('window:alert', stub);
 
       cy.wait(500);
@@ -166,6 +166,35 @@ describe('Compound Container Tests', () => {
         });
     });
 
+    it('LuigiClient API - pathExists', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .get('#linkManagerUpdateTopPathExistsBack')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith(
+            'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false'
+          );
+        });
+    });
+
+    it('LuigiClient API - showConfirmationModal', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .contains('showConfirmationModal')
+        .click()
+        .then(() => {
+          cy.on('window:confirm', str => {
+            expect(str).to.equal('Are you sure you want to do this?');
+          });
+          expect(stub.getCall(0)).to.be.calledWith('LuigiClient.uxManager().showConfirmationModal()');
+        });
+    });
+
     it('defer-init flag for LuigiCompoundContainer', () => {
       // the initialized webcomponent has id="defer-init-flag"
       cy.get('#defer-init-flag').should('not.exist');

container/cypress/e2e/test-app/wc/wc-container.cy.js

@@ -106,7 +106,7 @@ describe('Web Container Test', () => {
     it('LuigiClient API navigateToIntent for LuigiContainer', () => {
       cy.on('window:alert', stub);
 
-      cy.get('[data-test-id="luigi-client-api-test-01"]')
+      cy.get(containerSelector)
         .shadow()
         .contains('navigateToIntent')
         .click()
@@ -131,18 +131,47 @@ describe('Web Container Test', () => {
             });
         });
     });
+
     it('sendCustomMessage', () => {
       cy.get(containerSelector)
         .shadow()
         .find('#customMessageDiv')
         .should('have.text', 'Received Custom Message: ');
 
-      cy.get('#sendCustomMessageBtn')
-        .click()
+      cy.get('#sendCustomMessageBtn').click();
       cy.get(containerSelector)
         .shadow()
         .find('#customMessageDiv')
         .should('have.text', 'Received Custom Message: cool custom Message');
+    });
+
+    it('pathExists', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .get('#linkManagerUpdateTopPathExistsBack')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith(
+            'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false'
+          );
         });
+    });
+
+    it('showConfirmationModal', () => {
+      cy.on('window:alert', stub);
+
+      cy.get(containerSelector)
+        .shadow()
+        .contains('showConfirmationModal')
+        .click()
+        .then(() => {
+          cy.on('window:confirm', str => {
+            expect(str).to.equal('Are you sure you want to do this?');
+          });
+          expect(stub.getCall(0)).to.be.calledWith('LuigiClient.uxManager().showConfirmationModal()');
+        });
+    });
   });
 });

container/test-app/compound/compoundClientAPI.html

@@ -160,11 +160,14 @@ <h3>
       compoundContainer.addEventListener(
         MFEventID.SHOW_CONFIRMATION_MODAL_REQUEST,
         event => {
-          console.log(event.detail);
-          const val = confirm(event.detail.body);
+          const data = event.detail;
+          console.log(data);
+          const val = confirm(data.body);
           // send back to mf alert.answer with data
           window.postMessage('alert.answer', data);
-          event.luigiCallback(val);
+          if (event.callback) {
+            event.callback(val);
+          }
         }
       );
       compoundContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, event => {

container/test-app/compound/helloWorldWC.js

@@ -91,6 +91,9 @@ export default class extends HTMLElement {
     hasBack(), updateTopNavigation(), goBack(), pathExists()
     </button>`;
 
+    const confirmationModalBtn = document.createElement('template');
+    confirmationModalBtn.innerHTML = '<button id="confirmationModal">showConfirmationModal</button>';
+
     this._shadowRoot = this.attachShadow({
       mode: 'open',
       delegatesFocus: false
@@ -115,6 +118,7 @@ export default class extends HTMLElement {
     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));
     this._shadowRoot.appendChild(current_locale.content.cloneNode(true));
 
     this._shadowRoot.appendChild(empty.content.cloneNode(true));
@@ -319,6 +323,26 @@ export default class extends HTMLElement {
     this.$setViewGroupData.addEventListener('click', () => {
       this.LuigiClient.setViewGroupData({ vg: 'some data' });
     });
+
+    this.$confirmationModalBtn = this._shadowRoot.querySelector('#confirmationModal');
+    this.$confirmationModalBtn.addEventListener('click', () => {
+      const settings = {
+        type: 'confirmation',
+        header: 'Confirmation',
+        body: 'Are you sure you want to do this?',
+        buttonConfirm: 'Yes',
+        buttonDismiss: 'No'
+      };
+
+      this.LuigiClient.uxManager()
+        .showConfirmationModal(settings)
+        .then(() => {
+          this.LuigiClient.uxManager().showAlert({
+            text: 'LuigiClient.uxManager().showConfirmationModal()',
+            type: 'info'
+          });
+        });
+    });
   }
 
   get context() {

container/test-app/wc/clientAPI.html

@@ -10,7 +10,9 @@ <h3>
       component based microfrontend
     </h3>
     <button id="luigi-update-context" type="button">Update context</button>
-    <button id="sendCustomMessageBtn" style="margin: 25px 0 15px">sendCustomMessage</button>
+    <button id="sendCustomMessageBtn" style="margin: 25px 0 15px">
+      sendCustomMessage
+    </button>
 
     <div style="height: fit-content;">
       <div style="border: 1px solid blue">
@@ -49,7 +51,7 @@ <h3>
           defer-init="true"
         ></luigi-container>
       </div>
-      
+
       <!-- Used for testing dynamic compound container creation -->
       <div class="content"></div>
 
@@ -70,10 +72,14 @@ <h3>
         deferInitContainer.init();
       });
       // document.querySelector('luigi-container');
-      const container = document.querySelector('[data-test-id="luigi-client-api-test-01"]')
+      const container = document.querySelector(
+        '[data-test-id="luigi-client-api-test-01"]'
+      );
       const sendCustomMsgBtn = document.getElementById('sendCustomMessageBtn');
       sendCustomMsgBtn.addEventListener('click', () => {
-        container.sendCustomMessage('custom-message-id', {dataToSend: 'cool custom Message'});
+        container.sendCustomMessage('custom-message-id', {
+          dataToSend: 'cool custom Message'
+        });
       });
 
       [...document.querySelectorAll('luigi-container')].forEach(luigiContainer => {
@@ -88,11 +94,14 @@ <h3>
         luigiContainer.addEventListener(
           MFEventID.SHOW_CONFIRMATION_MODAL_REQUEST,
           event => {
-            console.log(event.detail);
-            const val = confirm(event.detail.body);
+            const data = event.detail;
+            console.log(data);
+            const val = confirm(data.body);
             // send back to mf alert.answer with data
             window.postMessage('alert.answer', data);
-            event.luigiCallback(val);
+            if (event.callback) {
+              event.callback(val);
+            }
           }
         );
         luigiContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, event => {

container/test-app/wc/helloWorldWC.js

@@ -88,9 +88,11 @@ export default class extends HTMLElement {
     const navigateToIntentBtn = document.createElement('template');
     navigateToIntentBtn.innerHTML = '<button id="navigateToIntent">navigateToIntent</button>';
 
+    const confirmationModalBtn = document.createElement('template');
+    confirmationModalBtn.innerHTML = '<button id="confirmationModal">showConfirmationModal</button>';
+
     const customMessageDiv = document.createElement('template');
     customMessageDiv.innerHTML = '<div id="customMessageDiv">Received Custom Message: </div>';
-
 
     this._shadowRoot = this.attachShadow({
       mode: 'open',
@@ -116,6 +118,7 @@ export default class extends HTMLElement {
     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));
@@ -313,13 +316,32 @@ export default class extends HTMLElement {
       }
     });
 
-    this.addEventListener('custom-message-id', (event) => {
-      console.log('custom message received: ', event.detail)
+    this.addEventListener('custom-message-id', event => {
+      console.log('custom message received: ', event.detail);
       const customMessageDiv = this._shadowRoot.querySelector('#customMessageDiv');
       customMessageDiv.textContent = `Received Custom Message: ${event.detail.dataToSend}`;
-      customMessageDiv.style = "color: red;";
-    })
-
+      customMessageDiv.style = 'color: red;';
+    });
+
+    this.$confirmationModalBtn = this._shadowRoot.querySelector('#confirmationModal');
+    this.$confirmationModalBtn.addEventListener('click', () => {
+      const settings = {
+        type: 'confirmation',
+        header: 'Confirmation',
+        body: 'Are you sure you want to do this?',
+        buttonConfirm: 'Yes',
+        buttonDismiss: 'No'
+      };
+
+      this.LuigiClient.uxManager()
+        .showConfirmationModal(settings)
+        .then(() => {
+          this.LuigiClient.uxManager().showAlert({
+            text: 'LuigiClient.uxManager().showConfirmationModal()',
+            type: 'info'
+          });
+        });
+    });
   }
 
   get context() {