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 099f29cec5..efe5827644 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 @@ -160,6 +160,12 @@ describe('Compound Container Tests', () => { expect(stub.getCall(0)).to.be.calledWith( 'compoundWC.ctx={"label":"Dashboard","title":"Some input","instant":true,"newContextData":"some data"}' ); + //Test if context property on luigi compound container is also updated + cy.get('#cc-ctx') + .invoke('html') + .then((innerHtml) => { + expect(innerHtml).to.include('{"newContextData":"some data"}'); + }); }); }); }); @@ -170,7 +176,7 @@ describe('Compound Container Tests', () => { const alertMessages = [ 'UPDATE_TOP_NAVIGATION_REQUEST event received', 'some goBackValue', - 'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false', + 'LuigiClient.linkManager().pathExists()=true\nthis.LuigiClient.linkManager().hasBack()=false' ]; cy.get(containerSelector) @@ -192,7 +198,7 @@ describe('Compound Container Tests', () => { .get('#showAlert') .click() .then(() => { - expect(stub.getCall(0)).to.be.calledWith("uxManager().showAlert() test"); + expect(stub.getCall(0)).to.be.calledWith('uxManager().showAlert() test'); }); }); @@ -246,7 +252,7 @@ describe('Compound Container Tests', () => { }); it('openAsDrawer webcomponent container', () => { cy.on('window:alert', stub); - + cy.get(containerSelector) .shadow() .get('#openAsDrawerBtn') @@ -257,7 +263,7 @@ describe('Compound Container Tests', () => { }); it('openAsSplitview webcomponent container', () => { cy.on('window:alert', stub); - + cy.get(containerSelector) .shadow() .get('#openAsSplitviewBtn') 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 e742043a27..e2f90edefc 100644 --- a/container/cypress/e2e/test-app/iframe/iframe-container.cy.js +++ b/container/cypress/e2e/test-app/iframe/iframe-container.cy.js @@ -120,6 +120,13 @@ describe('Iframe Container Test', () => { 'have.been.calledWith', 'Custom message received: {"id":"my.contextMessage","_metaData":{},"data":{"myContext":"some context data"}}' ); + + //Test if context property on luigi container is also updated + cy.get('#container-ctx') + .invoke('html') + .then((innerHtml) => { + expect(innerHtml).to.include('{"myContext":"some context data"}'); + }); }); }); }); diff --git a/container/src/LuigiCompoundContainer.svelte b/container/src/LuigiCompoundContainer.svelte index 2360c3dd87..dca344d887 100644 --- a/container/src/LuigiCompoundContainer.svelte +++ b/container/src/LuigiCompoundContainer.svelte @@ -125,6 +125,7 @@ thisComponent.updateContext = (contextObj: object, internal?: object) => { const rootElement = thisComponent.getNoShadow() ? thisComponent : mainComponent; rootElement._luigi_mfe_webcomponent.context = contextObj; + context = contextObj; const compoundChildrenQueryElement = rootElement._luigi_mfe_webcomponent; if (compoundChildrenQueryElement) { diff --git a/container/src/LuigiContainer.svelte b/container/src/LuigiContainer.svelte index c627b1379e..daaa608b9f 100644 --- a/container/src/LuigiContainer.svelte +++ b/container/src/LuigiContainer.svelte @@ -137,6 +137,7 @@ }; thisComponent.updateContext = (contextObj: object, internal?: object) => { + context = contextObj; if (webcomponent) { (thisComponent.getNoShadow() ? thisComponent : mainComponent)._luigi_mfe_webcomponent.context = contextObj; } else { diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html index 463ba713d8..24be5ecafb 100644 --- a/container/test-app/compound/compoundClientAPI.html +++ b/container/test-app/compound/compoundClientAPI.html @@ -19,6 +19,7 @@

compound web component based microfrontend

+ Below is a compound container example for testing functionality @@ -171,13 +172,16 @@

console.log(event.detail); window.location.hash = event.detail.link; }); - compoundContainer.addEventListener(MFEventID.GO_BACK_REQUEST, event => { + 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.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); @@ -316,6 +320,9 @@

document.querySelector('#luigi-update-context').addEventListener('click', () => { compoundContainer.updateContext({ newContextData: 'some data' }); + document.querySelector('#cc-ctx').innerHTML = JSON.stringify( + compoundContainer.context, + ); }); diff --git a/container/test-app/iframe/iframeContainer.html b/container/test-app/iframe/iframeContainer.html index f8b18ac784..cc4924809f 100644 --- a/container/test-app/iframe/iframeContainer.html +++ b/container/test-app/iframe/iframeContainer.html @@ -11,6 +11,7 @@

+ @@ -67,6 +68,9 @@

updateContextButton.addEventListener('click', () => { luigiContainer.updateContext({ myContext: 'some context data' }); + document.querySelector('#container-ctx').innerHTML = JSON.stringify( + luigiContainer.context, + ); }); updateViewUrlButton.addEventListener('click', () => {