Skip to content

Commit

Permalink
Add tests for sendCustomMessage() for container (iframe/wc) (#3861)
Browse files Browse the repository at this point in the history 
* add sendCustomMessage() tests for wc container

* add sendCustomMessage() tests for iframe container

* fix typo

---------

Co-authored-by: Ndricim <ndricim.rrapi@sap.com>
  • Loading branch information
@VincentUllal @ndricimrr
VincentUllal and ndricimrr committed Aug 27, 2024
1 parent 7e02587 commit 3490ba3
Show file tree
Hide file tree
Showing 6 changed files with 72 additions and 33 deletions.
20 changes: 17 additions & 3 deletions container/cypress/e2e/test-app/iframe/iframe-container.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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"}}'
);
});
});
Expand All @@ -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"}}'
);
});
});
Expand All @@ -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"}}'
);
});
});
Expand Down
13 changes: 13 additions & 0 deletions container/cypress/e2e/test-app/wc/wc-container.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
});
40 changes: 19 additions & 21 deletions container/test-app/iframe/iframeContainer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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', () => {
Expand Down Expand Up @@ -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);
Expand All @@ -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)
);
});
Expand All @@ -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)
);
});

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

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

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

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

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

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

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

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

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

Expand All @@ -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>
Expand Down
12 changes: 3 additions & 9 deletions container/test-app/iframe/microfrontend.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 7 additions & 0 deletions container/test-app/wc/clientAPI.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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 => {
Expand Down
13 changes: 13 additions & 0 deletions container/test-app/wc/helloWorldWC.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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');
Expand Down Expand Up @@ -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() {
Expand Down

0 comments on commit 3490ba3

Please sign in to comment.