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() {