Skip to content

Commit

Permalink
Add container tests show alert go back update top nav (#4021)
Browse files Browse the repository at this point in the history 
Add container tests for showAlert, goBack, updateTopNavigation
---------

Co-authored-by: Waldemar Mazurek <waldemar.mazurek@sap.com>
Co-authored-by: Waldemar Mazurek <waldemar.mazurek@accenture.com>
  • Loading branch information
@VincentUllal @walmazacn
3 people authored Nov 13, 2024
1 parent 3262bdd commit 274d7ab
Show file tree
Hide file tree
Showing 9 changed files with 147 additions and 34 deletions.
26 changes: 22 additions & 4 deletions container/cypress/e2e/test-app/compound/wc-compound-container.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -164,17 +164,35 @@ describe('Compound Container Tests', () => {
});
});

it('LuigiClient API - pathExists', () => {
it('LuigiClient API - pathExists, goBack, updateTopNavigation', () => {
cy.on('window:alert', stub);

const alertMessages = [
'UPDATE_TOP_NAVIGATION_REQUEST event received',
'some goBackValue',
'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false',
];

cy.get(containerSelector)
.shadow()
.get('#linkManagerUpdateTopPathExistsBack')
.click()
.then(() => {
expect(stub.getCall(0)).to.be.calledWith(
'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false'
);
alertMessages.forEach((msg, index) => {
expect(stub.getCall(index)).to.be.calledWith(msg);
});
});
});

it('LuigiClient API - showAlert', () => {
cy.on('window:alert', stub);

cy.get(containerSelector)
.shadow()
.get('#showAlert')
.click()
.then(() => {
expect(stub.getCall(0)).to.be.calledWith("uxManager().showAlert() test");
});
});

Expand Down
41 changes: 41 additions & 0 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 @@ -34,6 +34,47 @@ describe('Iframe Container Test', () => {
});
});

it('showAlert', () => {
cy.on('window:alert', stub);

cy.get(containerSelector)
.shadow()
.get('iframe')
.then(iframe => {
const $body = iframe.contents().find('body');
cy.wrap($body)
.contains('test showAlert')
.click()
.then(() => {
cy.wrap(stub).should(
'have.been.calledWith',
'show-alert-request message received: {\"isTrusted\":true}'
);
});
});
});

it('goBack', () => {
cy.on('window:alert', stub);

cy.get(containerSelector)
.shadow()
.get('iframe')
.then(iframe => {
const $body = iframe.contents().find('body');
cy.wrap($body)
.contains('test goBack')
.click()
.then(() => {
console.log(cy.wrap(stub));
cy.wrap(stub).should(
'have.been.calledWith',
'navigate-back-request'
);
});
});
});

it('sendCustomMessage', () => {
cy.get('#btn-1').click();
cy.get(containerSelector)
Expand Down
26 changes: 22 additions & 4 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 @@ -189,17 +189,35 @@ describe('Web Container Test', () => {
});
});

it('pathExists', () => {
it('pathExists, goBack, updateTopNavigation', () => {
cy.on('window:alert', stub);

const alertMessages = [
'UPDATE_TOP_NAVIGATION_REQUEST event received',
'some goBackValue',
'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false',
];

cy.get(containerSelector)
.shadow()
.get('#linkManagerUpdateTopPathExistsBack')
.click()
.then(() => {
expect(stub.getCall(0)).to.be.calledWith(
'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false'
);
alertMessages.forEach((msg, index) => {
expect(stub.getCall(index)).to.be.calledWith(msg);
});
});
});

it('showAlert', () => {
cy.on('window:alert', stub);

cy.get(containerSelector)
.shadow()
.get('#showAlert')
.click()
.then(() => {
expect(stub.getCall(0)).to.be.calledWith("uxManager().showAlert() test");
});
});

Expand Down
7 changes: 7 additions & 0 deletions container/test-app/compound/compoundClientAPI.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,13 @@ <h3>
console.log(event.detail);
window.location.hash = event.detail.link;
});
compoundContainer.addEventListener(MFEventID.GO_BACK_REQUEST, event => {
console.log(event.detail);
alert(event.detail.goBackValue);
});
compoundContainer.addEventListener(MFEventID.UPDATE_TOP_NAVIGATION_REQUEST, event => {
alert("UPDATE_TOP_NAVIGATION_REQUEST event received");
});
compoundContainer.addEventListener(MFEventID.ALERT_REQUEST, (event) => {
console.log(event.detail);
alert(event.detail.text);
Expand Down
14 changes: 13 additions & 1 deletion container/test-app/compound/helloWorldWC.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ export default class extends HTMLElement {
const templateBtn = document.createElement('template');
templateBtn.innerHTML = '<button id="aButton">Click me!</button>';

const showAlertBtn = document.createElement('template');
showAlertBtn.innerHTML = '<button id="showAlert">showAlert</button>';

const current_locale = document.createElement('template');
current_locale.innerHTML = '<button id="current_locale">getCurrentLocale</button>';

Expand Down Expand Up @@ -111,6 +114,7 @@ export default class extends HTMLElement {
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.appendChild(templateBtn.content.cloneNode(true));
this._shadowRoot.appendChild(templateBtn2.content.cloneNode(true));
this._shadowRoot.appendChild(showAlertBtn.content.cloneNode(true));
this._shadowRoot.appendChild(addNodeParamsBtn.content.cloneNode(true));
this._shadowRoot.appendChild(getNodeParamsBtn.content.cloneNode(true));
this._shadowRoot.appendChild(setAnchorBtn.content.cloneNode(true));
Expand Down Expand Up @@ -171,6 +175,14 @@ export default class extends HTMLElement {
}
});

this.$showAlert = this._shadowRoot.querySelector('#showAlert');
this.$showAlert.addEventListener('click', () => {
this.LuigiClient.uxManager().showAlert({
text: 'uxManager().showAlert() test',
type: 'info'
});
})

this.$publishEventBtn = this._shadowRoot.querySelector('#publishEvent');
this.$publishEventBtn.addEventListener('click', () => {
if (this.LuigiClient) {
Expand Down Expand Up @@ -347,7 +359,7 @@ export default class extends HTMLElement {
type: 'info'
});
});
this.LuigiClient.linkManager().goBack();
this.LuigiClient.linkManager().goBack({ goBackValue: 'some goBackValue' });
});

this.$setViewGroupData = this._shadowRoot.querySelector('#setViewGroupData');
Expand Down
10 changes: 10 additions & 0 deletions container/test-app/iframe/iframeContainer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ <h3>
const luigiContainer = document.querySelector(
'[data-test-id="iframe-based-container-test"]',
);

luigiContainer.addEventListener(Events.NAVIGATION_REQUEST, (event) => {
console.log(event.detail);
window.location.hash = event.detail.link;
Expand All @@ -37,6 +38,15 @@ <h3>
}
});

luigiContainer.addEventListener(Events.GO_BACK_REQUEST, (event) => {
console.log(event.detail);
alert(event.detail.goBackValue);
});

luigiContainer.addEventListener(Events.UPDATE_TOP_NAVIGATION_REQUEST, (event) => {
alert("UPDATE_TOP_NAVIGATION_REQUEST event received");
});

luigiContainer.addEventListener(Events.CUSTOM_MESSAGE, (event) => {
alert('Custom message received: ' + JSON.stringify(event.detail));
});
Expand Down
11 changes: 11 additions & 0 deletions container/test-app/iframe/microfrontend.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@ <h1 id="title">Multi purpose demo page</h1>
<button onclick="testSetDirtyStatus()">test set dirty status</button>
<button onclick="testShowAlert()">test show alert</button>
<button onclick="testGetToken()">test get token</button>
<button onclick="testShowAlert()">test showAlert</button>
<button onclick="goBack()">test goBack()</button>
<button onclick="updateTopNavigation()">test updateTopNavigation()</button>

<button onclick="openAsModal()">test openAsModal()</button>
<button onclick="openAsDrawer()">test openAsDrawer()</button>
Expand Down Expand Up @@ -88,6 +91,14 @@ <h1 id="title">Multi purpose demo page</h1>
});
}

function goBack(){
LuigiClient.linkManager().goBack();
}

function updateTopNavigation(){
LuigiClient.LuigiClient.linkManager().updateTopNavigation();
}

function testNav() {
LuigiClient.linkManager().navigate('/');
}
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 @@ -91,6 +91,13 @@ <h3>
console.log(event.detail);
alert(event.detail.text);
});
luigiContainer.addEventListener(MFEventID.GO_BACK_REQUEST, event => {
console.log(event.detail)
alert(event.detail.goBackValue);
});
luigiContainer.addEventListener(MFEventID.UPDATE_TOP_NAVIGATION_REQUEST, event => {
alert("UPDATE_TOP_NAVIGATION_REQUEST event received");
});
luigiContainer.addEventListener(
MFEventID.SHOW_CONFIRMATION_MODAL_REQUEST,
(event) => {
Expand Down
39 changes: 14 additions & 25 deletions container/test-app/wc/helloWorldWC.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ export default class extends HTMLElement {
const templateBtn = document.createElement('template');
templateBtn.innerHTML = '<button id="aButton">Click me!</button>';

const showAlertBtn = document.createElement('template');
showAlertBtn.innerHTML = '<button id="showAlert">showAlert</button>';

const templateBtn2 = document.createElement('template');
templateBtn2.innerHTML = '<button id="publishEvent">Publish event</button>';

Expand Down Expand Up @@ -78,12 +81,6 @@ export default class extends HTMLElement {
hasBack(), updateTopNavigation(), goBack(), pathExists()
</button>`;

const goBackBtn = document.createElement('template');
goBackBtn.innerHTML = '<button id="goBackBtn">lm.GOBACK()</button>';

const updateTopNavigationBtn = document.createElement('template');
updateTopNavigationBtn.innerHTML = '<button id="updateTopNavigationBtn">lm.UPDATETOPNAV</button>';

const openAsModalBtn = document.createElement('template');
openAsModalBtn.innerHTML = '<button id="openAsModalBtn">lm.openAsModal</button>';

Expand All @@ -94,7 +91,7 @@ export default class extends HTMLElement {
openAsSplitviewBtn.innerHTML = '<button id="openAsSplitviewBtn">lm.openAsSplitview</button>';

const navigateBtn = document.createElement('template');
navigateBtn.innerHTML = '<button id="navigateBtn">---navigate---</button>';
navigateBtn.innerHTML = '<button id="navigateBtn">navigate</button>';

const alertBtn = document.createElement('template');
alertBtn.innerHTML = '<button id="alertBtn">uxManager.showAlert()</button';
Expand All @@ -115,6 +112,7 @@ export default class extends HTMLElement {
this._shadowRoot.appendChild(template.content.cloneNode(true));
this._shadowRoot.appendChild(templateBtn.content.cloneNode(true));
this._shadowRoot.appendChild(templateBtn2.content.cloneNode(true));
this._shadowRoot.appendChild(showAlertBtn.content.cloneNode(true));
this._shadowRoot.appendChild(addNodeParamsBtn.content.cloneNode(true));
this._shadowRoot.appendChild(getNodeParamsBtn.content.cloneNode(true));
this._shadowRoot.appendChild(setAnchorBtn.content.cloneNode(true));
Expand All @@ -127,15 +125,11 @@ export default class extends HTMLElement {
this._shadowRoot.appendChild(updateContextBtn.content.cloneNode(true));
this._shadowRoot.appendChild(uxManagerMultipleRequestsBtn.content.cloneNode(true));
this._shadowRoot.appendChild(linkManagerChainedFunctionsRequestsBtn.content.cloneNode(true));

this._shadowRoot.appendChild(goBackBtn.content.cloneNode(true));
this._shadowRoot.appendChild(updateTopNavigationBtn.content.cloneNode(true));
this._shadowRoot.appendChild(openAsModalBtn.content.cloneNode(true));
this._shadowRoot.appendChild(openAsDrawerBtn.content.cloneNode(true));
this._shadowRoot.appendChild(openAsSplitviewBtn.content.cloneNode(true));
this._shadowRoot.appendChild(navigateBtn.content.cloneNode(true));
this._shadowRoot.appendChild(alertBtn.content.cloneNode(true));

this._shadowRoot.appendChild(linkManagerUpdateTopPathExistsBackBtn.content.cloneNode(true));
this._shadowRoot.appendChild(setViewGroupDataBtn.content.cloneNode(true));
this._shadowRoot.appendChild(getCurrentRouteBtn.content.cloneNode(true));
Expand All @@ -144,6 +138,14 @@ export default class extends HTMLElement {
this._shadowRoot.appendChild(customMessageDiv.content.cloneNode(true));
this._shadowRoot.appendChild(empty.content.cloneNode(true));

this.$showAlert = this._shadowRoot.querySelector('#showAlert');
this.$showAlert.addEventListener('click', () => {
this.LuigiClient.uxManager().showAlert({
text: 'uxManager().showAlert() test',
type: 'info'
});
});

this.$paragraph = this._shadowRoot.querySelector('p');
this.$button = this._shadowRoot.querySelector('#aButton');
this.$button.addEventListener('click', () => {
Expand Down Expand Up @@ -338,20 +340,7 @@ export default class extends HTMLElement {
type: 'info'
});
});
this.LuigiClient.linkManager().goBack();
});

this.$goBackBtn = this._shadowRoot.querySelector('#goBackBtn');
this.$goBackBtn.addEventListener('click', () => {
this.LuigiClient.linkManager().goBack();
console.log('goBack() CLICKED');
});

this.$updateTopNavigationBtn = this._shadowRoot.querySelector('#updateTopNavigationBtn');
this.$updateTopNavigationBtn.addEventListener('click', () => {
console.log('updateTopNavigation() CLICKED 1');
this.LuigiClient.linkManager().updateTopNavigationBtn();
console.log('updateTopNavigation() CLICKED 2');
this.LuigiClient.linkManager().goBack({ goBackValue: 'some goBackValue' });
});

this.$setViewGroupData = this._shadowRoot.querySelector('#setViewGroupData');
Expand Down

0 comments on commit 274d7ab

Please sign in to comment.