Container: set svelte component context variable on ctx update (#4051)

SAP · Dec 13, 2024 · 8f23963 · 8f23963
1 parent 5b395a6
commit 8f23963
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 8 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -19,6 +19,7 @@ <h3>
       compound web component based microfrontend
     </h3>
     <button id="luigi-update-context" type="button">Update context</button>
+    <span id="cc-ctx" style="display: none"></span>
 
     <!-- base scenario compound container-->
     <span>Below is a compound container example for testing functionality</span>
@@ -171,13 +172,16 @@ <h3>
         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 @@ <h3>
 
       document.querySelector('#luigi-update-context').addEventListener('click', () => {
         compoundContainer.updateContext({ newContextData: 'some data' });
+        document.querySelector('#cc-ctx').innerHTML = JSON.stringify(
+          compoundContainer.context,
+        );
       });
     </script>
   </body>

diff --git a/container/test-app/iframe/iframeContainer.html b/container/test-app/iframe/iframeContainer.html
@@ -11,6 +11,7 @@ <h3>
     </h3>
     <button id="btn-1">Send Custom Message to iFrame Container</button>
     <button id="update-ctx">Update Ctx</button>
+    <span id="container-ctx" style="display: none"></span>
     <button id="update-view-url" type="button">Update viewUrl</button>
     <button id="update-token">Update Access Token</button>
 
@@ -67,6 +68,9 @@ <h3>
 
       updateContextButton.addEventListener('click', () => {
         luigiContainer.updateContext({ myContext: 'some context data' });
+        document.querySelector('#container-ctx').innerHTML = JSON.stringify(
+          luigiContainer.context,
+        );
       });
 
       updateViewUrlButton.addEventListener('click', () => {