diff --git a/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js b/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js index ed5894b384..37d0cb97f1 100644 --- a/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js +++ b/container/cypress/e2e/test-app/compound/wc-compound-container.cy.js @@ -204,6 +204,19 @@ describe('Compound Container Tests', () => { cy.get('#defer-init-flag').should('exist'); }); + it('linkManagerChainRequests for navigation', () => { + cy.on('window:alert', stub); + + cy.get(containerSelector) + .shadow() + .get('#linkManagerChainRequests') + .click() + .then(() => { + expect(stub.getCall(0)).to.be.calledWith('LuigiClient.linkManager().navigate()'); + cy.hash().should('eq', '#hello-world-wc'); + }); + }); + it('LuigiClient API publishEvent', () => { cy.on('window:alert', stub); @@ -224,5 +237,28 @@ describe('Compound Container Tests', () => { ); }); }); + + it('LuigiClient API uxManagerChainRequests', () => { + const alertMessages = [ + 'LuigiClient.uxManager().openUserSettings()', + 'LuigiClient.uxManager().closeUserSettings()', + 'LuigiClient.uxManager().removeBackdrop()', + 'LuigiClient.uxManager().collapseLeftSideNav()', + 'LuigiClient.uxManager().hideAppLoadingIndicator()', + 'LuigiClient.uxManager().getDocumentTitle()=my-title' + ]; + + cy.on('window:alert', stub); + + cy.get(containerSelector) + .shadow() + .get('#uxManagerManyRequests') + .click() + .then(() => { + alertMessages.forEach((msg, index) => { + expect(stub.getCall(index)).to.be.calledWith(msg); + }); + }); + }); }); }); 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 608cbaf424..f8c4e78b4c 100644 --- a/container/cypress/e2e/test-app/wc/wc-container.cy.js +++ b/container/cypress/e2e/test-app/wc/wc-container.cy.js @@ -145,6 +145,19 @@ describe('Web Container Test', () => { .should('have.text', 'Received Custom Message: cool custom Message'); }); + it('linkManagerChainRequests for navigation', () => { + cy.on('window:alert', stub); + + cy.get(containerSelector) + .shadow() + .get('#linkManagerChainRequests') + .click() + .then(() => { + expect(stub.getCall(0)).to.be.calledWith('LuigiClient.linkManager().navigate()'); + cy.hash().should('eq', '#hello-world-wc'); + }); + }); + it('pathExists', () => { cy.on('window:alert', stub); @@ -185,5 +198,28 @@ describe('Web Container Test', () => { expect(stub.getCall(0)).to.be.calledWith('My Custom Message from Microfrontend'); }); }); + + it('LuigiClient API uxManagerChainRequests', () => { + const alertMessages = [ + 'LuigiClient.uxManager().openUserSettings()', + 'LuigiClient.uxManager().closeUserSettings()', + 'LuigiClient.uxManager().removeBackdrop()', + 'LuigiClient.uxManager().collapseLeftSideNav()', + 'LuigiClient.uxManager().hideAppLoadingIndicator()', + 'LuigiClient.uxManager().getDocumentTitle()=my-title' + ]; + + cy.on('window:alert', stub); + + cy.get(containerSelector) + .shadow() + .get('#uxManagerManyRequests') + .click() + .then(() => { + alertMessages.forEach((msg, index) => { + expect(stub.getCall(index)).to.be.calledWith(msg); + }); + }); + }); }); }); diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html index 134e3b1f02..9071cc17e2 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -194,35 +194,38 @@

compoundContainer.addEventListener(MFEventID.SET_ANCHOR_LINK_REQUEST, event => { console.log('anchor', event.detail); }); - - // uxManager(). closeUserSettings openUserSettings collapseLeftSideNav - // setDocumentTitle removeBackdrop hideAppLoadingIndicator + compoundContainer.addEventListener(MFEventID.OPEN_USER_SETTINGS_REQUEST, event => { + console.log('Open User Settings Request received', event.detail); + alert('LuigiClient.uxManager().openUserSettings()'); + }); compoundContainer.addEventListener(MFEventID.CLOSE_USER_SETTINGS_REQUEST, event => { console.log('Close User Settings Request received', event.detail); + alert('LuigiClient.uxManager().closeUserSettings()'); }); - compoundContainer.addEventListener(MFEventID.OPEN_USER_SETTINGS_REQUEST, event => { - console.log('Open User Settings Request received', event.detail); + compoundContainer.addEventListener(MFEventID.REMOVE_BACKDROP_REQUEST, event => { + console.log('Remove Backdrop Request received', event.detail); + alert('LuigiClient.uxManager().removeBackdrop()'); }); compoundContainer.addEventListener(MFEventID.COLLAPSE_LEFT_NAV_REQUEST, event => { console.log('Collapse Left Side Nav Request received', event.detail); + alert('LuigiClient.uxManager().collapseLeftSideNav()'); }); compoundContainer.addEventListener(MFEventID.SET_DOCUMENT_TITLE_REQUEST, event => { console.log('Set Document Title Request received', event.detail); - }); - compoundContainer.addEventListener(MFEventID.REMOVE_BACKDROP_REQUEST, event => { - console.log('Remove Backdrop Request received', event.detail); + compoundContainer.documentTitle = event.detail; }); compoundContainer.addEventListener( MFEventID.HIDE_LOADING_INDICATOR_REQUEST, event => { console.log('Hide Loading Indicator Request received', event.detail); + alert('LuigiClient.uxManager().hideAppLoadingIndicator()'); } ); // linkManager listeners: // path exists compoundContainer.addEventListener(MFEventID.PATH_EXISTS_REQUEST, event => { - console.log('Remove Backdrop Request received', event.detail, event); + console.log('Path Exists Request received', event.detail, event); // send back result with defined 'callback' // event: MFEventID.PathExistsEvent can be used as an event type to get the callback function event.callback(true); diff --git a/container/test-app/compound/helloWorldWC.js b/container/test-app/compound/helloWorldWC.js index 265ed9b199..0bd8936510 100644 --- a/container/test-app/compound/helloWorldWC.js +++ b/container/test-app/compound/helloWorldWC.js @@ -267,12 +267,12 @@ export default class extends HTMLElement { this.$uxManagerManyRequests = this._shadowRoot.querySelector('#uxManagerManyRequests'); this.$uxManagerManyRequests.addEventListener('click', () => { - this.LuigiClient.uxManager().closeUserSettings(); this.LuigiClient.uxManager().openUserSettings(); - this.LuigiClient.uxManager().collapseLeftSideNav(); - this.LuigiClient.uxManager().setDocumentTitle('my-title'); + this.LuigiClient.uxManager().closeUserSettings(); this.LuigiClient.uxManager().removeBackdrop(); + this.LuigiClient.uxManager().collapseLeftSideNav(); this.LuigiClient.uxManager().hideAppLoadingIndicator(); + this.LuigiClient.uxManager().setDocumentTitle('my-title'); this.LuigiClient.uxManager().showAlert({ text: 'LuigiClient.uxManager().getDocumentTitle()=' + this.LuigiClient.uxManager().getDocumentTitle(), type: 'info' @@ -281,18 +281,29 @@ export default class extends HTMLElement { this.$linkManagerChainRequests = this._shadowRoot.querySelector('#linkManagerChainRequests'); this.$linkManagerChainRequests.addEventListener('click', () => { + const path = 'hello-world-wc'; + const ctx = { ctx: 123 }; + this.LuigiClient.linkManager() - .fromContext({ ctx: 123 }) - .navigate('hello-world-wc'); + .fromContext(ctx) + .navigate(); this.LuigiClient.linkManager() .fromClosestContext() - .navigate('hello-world-wc'); + .navigate(path); this.LuigiClient.linkManager() .fromVirtualTreeRoot() - .navigate('hello-world-wc'); + .navigate(path); + this.LuigiClient.linkManager() + .fromParent(ctx) + .navigate(path); this.LuigiClient.linkManager() .withParams('my-params') - .navigate('hello-world-wc'); + .navigate(path); + this.LuigiClient.linkManager().navigate(path); + this.LuigiClient.uxManager().showAlert({ + text: 'LuigiClient.linkManager().navigate()', + type: 'info' + }); }); this.$linkManagerOpenAsRequests = this._shadowRoot.querySelector('#linkManagerOpenAsRequests'); diff --git a/container/test-app/wc/clientAPI.html b/container/test-app/wc/clientAPI.html index 2685fe82c2..7944f307cf 100644 --- a/container/test-app/wc/clientAPI.html +++ b/container/test-app/wc/clientAPI.html @@ -123,35 +123,38 @@

luigiContainer.addEventListener(MFEventID.SET_ANCHOR_LINK_REQUEST, event => { console.log('anchor', event.detail); }); - - // uxManager(). closeUserSettings openUserSettings collapseLeftSideNav - // setDocumentTitle removeBackdrop hideAppLoadingIndicator + luigiContainer.addEventListener(MFEventID.OPEN_USER_SETTINGS_REQUEST, event => { + console.log('Open User Settings Request received', event.detail); + alert('LuigiClient.uxManager().openUserSettings()'); + }); luigiContainer.addEventListener(MFEventID.CLOSE_USER_SETTINGS_REQUEST, event => { console.log('Close User Settings Request received', event.detail); + alert('LuigiClient.uxManager().closeUserSettings()'); }); - luigiContainer.addEventListener(MFEventID.OPEN_USER_SETTINGS_REQUEST, event => { - console.log('Open User Settings Request received', event.detail); + luigiContainer.addEventListener(MFEventID.REMOVE_BACKDROP_REQUEST, event => { + console.log('Remove Backdrop Request received', event.detail); + alert('LuigiClient.uxManager().removeBackdrop()'); }); luigiContainer.addEventListener(MFEventID.COLLAPSE_LEFT_NAV_REQUEST, event => { console.log('Collapse Left Side Nav Request received', event.detail); + alert('LuigiClient.uxManager().collapseLeftSideNav()'); }); luigiContainer.addEventListener(MFEventID.SET_DOCUMENT_TITLE_REQUEST, event => { console.log('Set Document Title Request received', event.detail); - }); - luigiContainer.addEventListener(MFEventID.REMOVE_BACKDROP_REQUEST, event => { - console.log('Remove Backdrop Request received', event.detail); + luigiContainer.documentTitle = event.detail; }); luigiContainer.addEventListener( MFEventID.HIDE_LOADING_INDICATOR_REQUEST, event => { console.log('Hide Loading Indicator Request received', event.detail); + alert('LuigiClient.uxManager().hideAppLoadingIndicator()'); } ); // linkManager listeners: // path exists luigiContainer.addEventListener(MFEventID.PATH_EXISTS_REQUEST, event => { - console.log('Remove Backdrop Request received', event.detail, event); + console.log('Path Exists Request received', event.detail, event); // send back result with defined 'callback' // event: MFEventID.PathExistsEvent can be used as an event type to get the callback function event.callback(true); diff --git a/container/test-app/wc/helloWorldWC.js b/container/test-app/wc/helloWorldWC.js index 93464af71a..2ecaa8d9fb 100644 --- a/container/test-app/wc/helloWorldWC.js +++ b/container/test-app/wc/helloWorldWC.js @@ -234,12 +234,12 @@ export default class extends HTMLElement { this.$uxManagerManyRequests = this._shadowRoot.querySelector('#uxManagerManyRequests'); this.$uxManagerManyRequests.addEventListener('click', () => { - this.LuigiClient.uxManager().closeUserSettings(); this.LuigiClient.uxManager().openUserSettings(); - this.LuigiClient.uxManager().collapseLeftSideNav(); - this.LuigiClient.uxManager().setDocumentTitle('my-title'); + this.LuigiClient.uxManager().closeUserSettings(); this.LuigiClient.uxManager().removeBackdrop(); + this.LuigiClient.uxManager().collapseLeftSideNav(); this.LuigiClient.uxManager().hideAppLoadingIndicator(); + this.LuigiClient.uxManager().setDocumentTitle('my-title'); this.LuigiClient.uxManager().showAlert({ text: 'LuigiClient.uxManager().getDocumentTitle()=' + this.LuigiClient.uxManager().getDocumentTitle(), type: 'info' @@ -248,18 +248,29 @@ export default class extends HTMLElement { this.$linkManagerChainRequests = this._shadowRoot.querySelector('#linkManagerChainRequests'); this.$linkManagerChainRequests.addEventListener('click', () => { + const path = 'hello-world-wc'; + const ctx = { ctx: 123 }; + this.LuigiClient.linkManager() - .fromContext({ ctx: 123 }) - .navigate('hello-world-wc'); + .fromContext(ctx) + .navigate(); this.LuigiClient.linkManager() .fromClosestContext() - .navigate('hello-world-wc'); + .navigate(path); this.LuigiClient.linkManager() .fromVirtualTreeRoot() - .navigate('hello-world-wc'); + .navigate(path); + this.LuigiClient.linkManager() + .fromParent(ctx) + .navigate(path); this.LuigiClient.linkManager() .withParams('my-params') - .navigate('hello-world-wc'); + .navigate(path); + this.LuigiClient.linkManager().navigate(path); + this.LuigiClient.uxManager().showAlert({ + text: 'LuigiClient.linkManager().navigate()', + type: 'info' + }); }); this.$linkManagerOpenAsRequests = this._shadowRoot.querySelector('#linkManagerOpenAsRequests');