Add tests for sendCustomMessage() for container (iframe/wc) (#3861)

* add sendCustomMessage() tests for wc container * add sendCustomMessage() tests for iframe container * fix typo --------- Co-authored-by: Ndricim <[email protected]>
SAP · Aug 27, 2024 · 3490ba3 · 3490ba3
1 parent 7e02587
commit 3490ba3
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 33 deletions.
diff --git a/container/cypress/e2e/test-app/iframe/iframe-container.cy.js b/container/cypress/e2e/test-app/iframe/iframe-container.cy.js
@@ -23,6 +23,20 @@ describe('Iframe Container Test', () => {
       });
   });
 
+  it('sendCustomMessage', () => {
+    cy.get('#btn-1')
+      .click()
+    cy.get(containerSelector)
+      .shadow()
+      .get('iframe')
+      .then(iframe => {
+        const $body = iframe.contents().find('body')
+        cy.wrap($body)
+          .find('#content')
+          .should('have.text', 'Received Custom Message: some data');
+      });
+  });
+
   it('custom message sent', () => {
     cy.on('window:alert', stub);
 
@@ -37,7 +51,7 @@ describe('Iframe Container Test', () => {
           .then(() => {
             cy.wrap(stub).should(
               'have.been.calledWith',
-              'Custom message recieved: {"id":"my.customMessage","_metaData":{},"data":{"bar":"foo"}}'
+              'Custom message received: {"id":"my.customMessage","_metaData":{},"data":{"bar":"foo"}}'
             );
           });
       });
@@ -61,7 +75,7 @@ describe('Iframe Container Test', () => {
               .then(() => {
                 cy.wrap(stub).should(
                   'have.been.calledWith',
-                  'Custom message recieved: {"id":"my.contextMessage","_metaData":{},"data":{"myContext":"some context data"}}'
+                  'Custom message received: {"id":"my.contextMessage","_metaData":{},"data":{"myContext":"some context data"}}'
                 );
               });
           });
@@ -84,7 +98,7 @@ describe('Iframe Container Test', () => {
           .then(() => {
             cy.wrap(stub).should(
               'have.been.calledWith',
-              'Custom message recieved: {"id":"token.updated","_metaData":{},"data":{"value":"updated token"}}'
+              'Custom message received: {"id":"token.updated","_metaData":{},"data":{"value":"updated token"}}'
             );
           });
       });

diff --git a/container/cypress/e2e/test-app/wc/wc-container.cy.js b/container/cypress/e2e/test-app/wc/wc-container.cy.js
@@ -131,5 +131,18 @@ describe('Web Container Test', () => {
             });
         });
     });
+    it('sendCustomMessage', () => {
+      cy.get(containerSelector)
+        .shadow()
+        .find('#customMessageDiv')
+        .should('have.text', 'Received Custom Message: ');
+
+      cy.get('#sendCustomMessageBtn')
+        .click()
+      cy.get(containerSelector)
+        .shadow()
+        .find('#customMessageDiv')
+        .should('have.text', 'Received Custom Message: cool custom Message');
+        });
   });
 });
diff --git a/container/test-app/iframe/iframeContainer.html b/container/test-app/iframe/iframeContainer.html
@@ -35,7 +35,7 @@ <h3>
       });
 
       luigiContainer.addEventListener(Events.CUSTOM_MESSAGE, event => {
-        alert('Custom message recieved: ' + JSON.stringify(event.detail));
+        alert('Custom message received: ' + JSON.stringify(event.detail));
       });
 
       var alertSettings;
@@ -46,9 +46,7 @@ <h3>
 
       // for testing send Custom message functionality
       sendCustomMessageBtn.addEventListener('click', () => {
-        luigiContainer.sendCustomMessage('update', {
-          milliseconds: new Date().getMilliseconds()
-        });
+        luigiContainer.sendCustomMessage('update', {dataToSend: 'some data'});
       });
 
       updateContextButton.addEventListener('click', () => {
@@ -91,7 +89,7 @@ <h3>
 
       luigiContainer.addEventListener(Events.ALERT_REQUEST, event => {
         console.log('params:', Events.ALERT_REQUEST, event);
-        alert('show-alert-request message recieved: ' + JSON.stringify(event.detail));
+        alert('show-alert-request message received: ' + JSON.stringify(event.detail));
         console.log(event.detail.data.data);
         alertSettings = event.detail.data.data;
         showAnAlert(alertSettings);
@@ -100,36 +98,36 @@ <h3>
       luigiContainer.addEventListener(Events.ADD_SEARCH_PARAMS_REQUEST, event => {
         console.log('params:', Events.ADD_SEARCH_PARAMS_REQUEST, event);
         alert(
-          'add-search-params-request message recieved: ' + JSON.stringify(event.detail)
+          'add-search-params-request message received: ' + JSON.stringify(event.detail)
         );
       });
 
       luigiContainer.addEventListener(Events.ADD_NODE_PARAMS_REQUEST, event => {
         console.log(Events.ADD_NODE_PARAMS_REQUEST, event);
         alert(
-          'add-node-params-request message recieved: ' + JSON.stringify(event.detail)
+          'add-node-params-request message received: ' + JSON.stringify(event.detail)
         );
       });
 
       luigiContainer.addEventListener(Events.SHOW_CONFIRMATION_MODAL_REQUEST, event => {
         console.log(Events.SHOW_CONFIRMATION_MODAL_REQUEST, event);
         alert(
-          'show-confirmation-modal message recieved: ' + JSON.stringify(event.detail)
+          'show-confirmation-modal message received: ' + JSON.stringify(event.detail)
         );
       });
 
       luigiContainer.addEventListener(Events.SHOW_LOADING_INDICATOR_REQUEST, event => {
         console.log(Events.SHOW_LOADING_INDICATOR_REQUEST, event);
         alert(
-          'show-loading-indicator-request message recieved: ' +
+          'show-loading-indicator-request message received: ' +
             JSON.stringify(event.detail.data)
         );
       });
 
       luigiContainer.addEventListener(Events.HIDE_LOADING_INDICATOR_REQUEST, event => {
         console.log(Events.HIDE_LOADING_INDICATOR_REQUEST, event);
         alert(
-          'hide-loading-indicator-request message recieved: ' +
+          'hide-loading-indicator-request message received: ' +
             JSON.stringify(event.detail.data)
         );
       });
@@ -139,7 +137,7 @@ <h3>
         console.log(Events.SET_CURRENT_LOCALE_REQUEST, event);
         alert(
           Events.SET_CURRENT_LOCALE_REQUEST,
-          'message recieved: ' + JSON.stringify(event.detail.data)
+          'message received: ' + JSON.stringify(event.detail.data)
         );
       });
 
@@ -148,7 +146,7 @@ <h3>
         console.log(Events.LOCAL_STORAGE_SET_REQUEST, event);
         alert(
           Events.LOCAL_STORAGE_SET_REQUEST,
-          'message recieved: ' + JSON.stringify(event.detail.data)
+          'message received: ' + JSON.stringify(event.detail.data)
         );
       });
 
@@ -157,7 +155,7 @@ <h3>
         console.log(Events.RUNTIME_ERROR_HANDLING_REQUEST, event);
         alert(
           Events.RUNTIME_ERROR_HANDLING_REQUEST,
-          'message recieved: ' + JSON.stringify(event.detail.data)
+          'message received: ' + JSON.stringify(event.detail.data)
         );
       });
 
@@ -166,7 +164,7 @@ <h3>
         console.log(Events.SET_ANCHOR_LINK_REQUEST, event);
         alert(
           Events.SET_ANCHOR_LINK_REQUEST,
-          'message recieved: ' + JSON.stringify(event.detail.data)
+          'message received: ' + JSON.stringify(event.detail.data)
         );
       });
 
@@ -175,7 +173,7 @@ <h3>
         console.log(Events.SET_THIRD_PARTY_COOKIES_REQUEST, event);
         alert(
           Events.SET_THIRD_PARTY_COOKIES_REQUEST,
-          'message recieved: ' + JSON.stringify(event.detail.data.data)
+          'message received: ' + JSON.stringify(event.detail.data.data)
         );
       });
 
@@ -184,7 +182,7 @@ <h3>
         console.log(Events.BACK_NAVIGATION_REQUEST, event);
         alert(
           Events.BACK_NAVIGATION_REQUEST,
-          'message recieved: ' + JSON.stringify(event.detail.data)
+          'message received: ' + JSON.stringify(event.detail.data)
         );
       });
 
@@ -193,7 +191,7 @@ <h3>
         console.log(Events.GET_CURRENT_ROUTE_REQUEST, event);
         alert(
           Events.GET_CURRENT_ROUTE_REQUEST,
-          'message recieved: ' + JSON.stringify(event.detail.data)
+          'message received: ' + JSON.stringify(event.detail.data)
         );
       });
 
@@ -202,7 +200,7 @@ <h3>
         console.log(Events.NAVIGATION_COMPLETED_REPORT, event);
         alert(
           Events.NAVIGATION_COMPLETED_REPORT,
-          'message recieved: ' + JSON.stringify(event.detail.data)
+          'message received: ' + JSON.stringify(event.detail.data)
         );
       });
 
@@ -211,7 +209,7 @@ <h3>
         console.log(Events.UPDATE_MODAL_PATH_DATA_REQUEST, event);
         alert(
           Events.UPDATE_MODAL_PATH_DATA_REQUEST,
-          'message recieved: ' + JSON.stringify(event.detail.data)
+          'message received: ' + JSON.stringify(event.detail.data)
         );
       });
 
@@ -220,7 +218,7 @@ <h3>
         console.log(Events.CHECK_PATH_EXISTS_REQUEST, event);
         alert(
           Events.CHECK_PATH_EXISTS_REQUEST,
-          'message recieved: ' + JSON.stringify(event.detail.data)
+          'message received: ' + JSON.stringify(event.detail.data)
         );
       });
 
@@ -229,7 +227,7 @@ <h3>
         console.log(Events.SET_DIRTY_STATUS_REQUEST, event);
         alert(
           Events.SET_DIRTY_STATUS_REQUEST,
-          'message recieved: ' + JSON.stringify(event.detail.data)
+          'message received: ' + JSON.stringify(event.detail.data)
         );
       });
     </script>

diff --git a/container/test-app/iframe/microfrontend.html b/container/test-app/iframe/microfrontend.html
@@ -213,16 +213,10 @@ <h1 id="title">Multi purpose demo page</h1>
       }
       LuigiClient.addInitListener(updateFn);
       LuigiClient.addContextUpdateListener(updateFn);
-      LuigiClient.addCustomMessageListener('update', data => {
-        console.log('Custom Message Received inside iframe Container', data);
+      LuigiClient.addCustomMessageListener('update', msg => {
+        console.log('Custom Message Received inside iframe Container', msg);
         document.getElementById('content').innerHTML =
-          'Received Custom Message: ' + data.milliseconds;
-      });
-
-      LuigiClient.addCustomMessageListener('update', data => {
-        console.log('Custom Message Received inside iframe Container', data);
-        document.getElementById('content').innerHTML =
-          'Received Custom Message: ' + data.milliseconds;
+          'Received Custom Message: ' + msg.dataToSend;
       });
 
       // fallback visibility if no initlistener called for 3 seconds

diff --git a/container/test-app/wc/clientAPI.html b/container/test-app/wc/clientAPI.html
@@ -10,6 +10,7 @@ <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>
 
     <div style="height: fit-content;">
       <div style="border: 1px solid blue">
@@ -68,6 +69,12 @@ <h3>
       initButton.addEventListener('click', function() {
         deferInitContainer.init();
       });
+      // document.querySelector('luigi-container');
+      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'});
+      });
 
       [...document.querySelectorAll('luigi-container')].forEach(luigiContainer => {
         luigiContainer.addEventListener(MFEventID.NAVIGATION_REQUEST, event => {

diff --git a/container/test-app/wc/helloWorldWC.js b/container/test-app/wc/helloWorldWC.js
@@ -88,6 +88,10 @@ export default class extends HTMLElement {
     const navigateToIntentBtn = document.createElement('template');
     navigateToIntentBtn.innerHTML = '<button id="navigateToIntent">navigateToIntent</button>';
 
+    const customMessageDiv = document.createElement('template');
+    customMessageDiv.innerHTML = '<div id="customMessageDiv">Received Custom Message: </div>';
+
+
     this._shadowRoot = this.attachShadow({
       mode: 'open',
       delegatesFocus: false
@@ -113,6 +117,7 @@ export default class extends HTMLElement {
     this._shadowRoot.appendChild(getCurrentRouteBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(navigateToIntentBtn.content.cloneNode(true));
 
+    this._shadowRoot.appendChild(customMessageDiv.content.cloneNode(true));
     this._shadowRoot.appendChild(empty.content.cloneNode(true));
 
     this.$paragraph = this._shadowRoot.querySelector('p');
@@ -307,6 +312,14 @@ export default class extends HTMLElement {
         alert('navigated to: #?intent=Sales-settings');
       }
     });
+
+    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;";
+    })
+
   }
 
   get context() {