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 c9efc8b209..b659bc112d 100644 --- 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 index 25b00c020a..0ef0ebdf0d 100644 --- 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 index 6014a4da0b..ddfef3486a 100644 --- a/container/test-app/iframe/iframeContainer.html +++ b/container/test-app/iframe/iframeContainer.html @@ -35,7 +35,7 @@

}); 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 @@

// 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 @@

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,28 +98,28 @@

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) ); }); @@ -129,7 +127,7 @@

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 @@

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 @@

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 @@

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 @@

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 @@

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 @@

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 @@

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 @@

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 @@

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 @@

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 @@

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) ); }); diff --git a/container/test-app/iframe/microfrontend.html b/container/test-app/iframe/microfrontend.html index 10b8ee8e4a..80e1159dc7 100644 --- a/container/test-app/iframe/microfrontend.html +++ b/container/test-app/iframe/microfrontend.html @@ -213,16 +213,10 @@

Multi purpose demo page

} 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 index 8e0e597eac..186331bdac 100644 --- a/container/test-app/wc/clientAPI.html +++ b/container/test-app/wc/clientAPI.html @@ -10,6 +10,7 @@

component based microfrontend

+
@@ -68,6 +69,12 @@

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 index 977268b92d..2618d59a0f 100644 --- 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 = ''; + const customMessageDiv = document.createElement('template'); + customMessageDiv.innerHTML = '
Received Custom Message:
'; + + 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() {