Adds Cypress tests for 'updateContext' method

container/cypress/e2e/test-app/compound/wc-compound-container.cy.js

@@ -1,26 +1,29 @@
 describe('Compound Container Tests', () => {
   describe('LuigiClient API - LuigiCompoundContainer', () => {
+    const container = '[data-test-id="luigi-client-api-test-compound-01"]';
     let stub;
+
     beforeEach(() => {
       cy.visit('http://localhost:8080/compound/compoundClientAPI.html');
       stub = cy.stub();
     });
 
     it('LuigiClient API getUserSettings for LuigiCompoundContainer', () => {
-      const stub = cy.stub();
       cy.on('window:alert', stub);
-      cy.get('[data-test-id="luigi-client-api-test-compound-01"]')
+
+      cy.get(container)
         .shadow()
         .contains('getUserSettings')
         .click()
         .then(() => {
           expect(stub.getCall(0)).to.be.calledWith('LuigiClient.getUserSettings()={"language":"it","date":""}');
         });
     });
+
     it('LuigiClient API getAnchor for LuigiCompoundContainer', () => {
-      const stub = cy.stub();
       cy.on('window:alert', stub);
-      cy.get('[data-test-id="luigi-client-api-test-compound-01"]')
+
+      cy.get(container)
         .shadow()
         .contains('getAnchor')
         .click()

container/cypress/e2e/test-app/iframe/iframe-container.cy.js

@@ -1,8 +1,14 @@
 describe('Iframe Container Test', () => {
-  it('navigation sent', () => {
+  const container = '[data-test-id="iframe-based-container-test"]';
+  let stub;
+
+  beforeEach(() => {
     cy.visit('http://localhost:8080/iframe/iframeContainer.html');
+    stub = cy.stub();
+  });
 
-    cy.get('[data-test-id="iframe-based-container-test"]')
+  it('navigation sent', () => {
+    cy.get(container)
       .shadow()
       .get('iframe')
       .then(iframe => {
@@ -18,12 +24,9 @@ describe('Iframe Container Test', () => {
   });
 
   it('custom message sent', () => {
-    const stub = cy.stub();
     cy.on('window:alert', stub);
 
-    cy.visit('http://localhost:8080/iframe/iframeContainer.html');
-
-    cy.get('[data-test-id="iframe-based-container-test"]')
+    cy.get(container)
       .shadow()
       .get('iframe')
       .then(iframe => {
@@ -39,4 +42,29 @@ describe('Iframe Container Test', () => {
           });
       });
   });
+
+  it('updateContext', () => {
+    cy.on('window:alert', stub);
+
+    cy.get('#update-ctx')
+      .click()
+      .then(() => {
+        cy.get(container)
+          .shadow()
+          .get('iframe')
+          .then(iframe => {
+            const $body = iframe.contents().find('body');
+
+            cy.wrap($body)
+              .contains('Get Context')
+              .click()
+              .then(() => {
+                cy.wrap(stub).should(
+                  'have.been.calledWith',
+                  'Custom message recieved: {"id":"my.contextMessage","_metaData":{},"data":{"myContext":"some context data"}}'
+                );
+              });
+          });
+      });
+  });
 });

container/cypress/e2e/test-app/wc/wc-container.cy.js

@@ -1,6 +1,8 @@
 describe('Web Container Test', () => {
   describe('LuigiClient API LuigiContainer', () => {
+    const container = '[data-test-id="luigi-client-api-test-01"]';
     let stub;
+
     beforeEach(() => {
       cy.visit('http://localhost:8080/wc/clientAPI.html');
       stub = cy.stub();
@@ -9,7 +11,7 @@ describe('Web Container Test', () => {
     it('getCurrentLocale, getActiveFeatureToggles, getCurrentTheme', () => {
       cy.on('window:alert', stub);
 
-      cy.get('[data-test-id="luigi-client-api-test-01"]')
+      cy.get(container)
         .shadow()
         .contains('Click me')
         .click()
@@ -21,11 +23,9 @@ describe('Web Container Test', () => {
     });
 
     it('getCoreSearchParams', () => {
-      const stub = cy.stub();
-
       cy.on('window:alert', stub);
 
-      cy.get('[data-test-id="luigi-client-api-test-01"]')
+      cy.get(container)
         .shadow()
         .contains('getCoreSearchParams')
         .click()
@@ -35,10 +35,9 @@ describe('Web Container Test', () => {
     });
 
     it('getPathParams', () => {
-      const stub = cy.stub();
       cy.on('window:alert', stub);
 
-      cy.get('[data-test-id="luigi-client-api-test-01"]')
+      cy.get(container)
         .shadow()
         .contains('getPathParams')
         .click()
@@ -48,9 +47,9 @@ describe('Web Container Test', () => {
     });
 
     it('getClientPermissions', () => {
-      const stub = cy.stub();
       cy.on('window:alert', stub);
-      cy.get('[data-test-id="luigi-client-api-test-01"]')
+
+      cy.get(container)
         .shadow()
         .contains('getClientPermissions')
         .click()
@@ -60,10 +59,9 @@ describe('Web Container Test', () => {
     });
 
     it('LuigiClient API getUserSettings for LuigiContainer', () => {
-      const stub = cy.stub();
       cy.on('window:alert', stub);
 
-      cy.get('[data-test-id="luigi-client-api-test-01"]')
+      cy.get(container)
         .shadow()
         .contains('getUserSettings')
         .click()
@@ -73,17 +71,17 @@ describe('Web Container Test', () => {
     });
 
     it('LuigiClient API getAnchor for LuigiContainer', () => {
-      const stub = cy.stub();
       cy.on('window:alert', stub);
 
-      cy.get('[data-test-id="luigi-client-api-test-01"]')
+      cy.get(container)
         .shadow()
         .contains('getAnchor')
         .click()
         .then(() => {
           expect(stub.getCall(0)).to.be.calledWith('LuigiClient.getAnchor()="testanchor"');
         });
     });
+
     it('LuigiClient API getCurrentRoute for LuigiContainer', () => {
       const stub = cy.stub();
       cy.on('window:alert', stub);
@@ -95,5 +93,22 @@ describe('Web Container Test', () => {
           expect(stub.getCall(0)).to.be.calledWith('current route: /wc/clientAPI.html');
         });
     });
+
+    it('updateContext', () => {
+      cy.on('window:alert', stub);
+
+      cy.wait(500);
+      cy.get('#luigi-update-context')
+        .click()
+        .then(() => {
+          cy.get(container)
+            .shadow()
+            .contains('updateContext')
+            .click()
+            .then(() => {
+              expect(stub.getCall(0)).to.be.calledWith('WC.ctx={"newContextData":"some data"}');
+            });
+        });
+    });
   });
 });

container/src/LuigiCompoundContainer.svelte

@@ -98,7 +98,7 @@
       anchor &&
       dirtyStatus &&
       hasBack &&
-      documentTitle && 
+      documentTitle &&
       noShadow
     );
   };

container/test-app/compound/compoundClientAPI.html

@@ -164,7 +164,7 @@ <h3>
         console.log('params', params);
       });
       compoundContainer.addEventListener(MFEventID.SET_ANCHOR_LINK_REQUEST, event => {
-        console.log('anhor', event.detail);
+        console.log('anchor', event.detail);
       });
 
       // uxManager(). closeUserSettings openUserSettings collapseLeftSideNav

container/test-app/compound/helloWorldWC.js

@@ -4,6 +4,9 @@
 export default class extends HTMLElement {
   constructor() {
     super();
+
+    this.ctx = {};
+
     const template = document.createElement('template');
     template.innerHTML = `<section><p>Hello World!</p></section>`;
 
@@ -262,7 +265,12 @@ export default class extends HTMLElement {
     });
   }
 
+  get context() {
+    return this.ctx;
+  }
+
   set context(ctx) {
+    this.ctx = ctx;
     this.$paragraph.innerHTML = ctx.title;
   }
 }

container/test-app/iframe/microfrontend.html

@@ -102,9 +102,10 @@ <h1 id="title">Multi purpose demo page</h1>
       }
 
       function testGetContext() {
-        alert(
-          'LuigiClient.getContext()() called' + JSON.stringify(LuigiClient.getContext())
-        );
+        LuigiClient.sendCustomMessage({
+          id: 'my.contextMessage',
+          ...LuigiClient.getContext()
+        });
       }
 
       function testSetCurrentLocale() {

container/test-app/wc/clientAPI.html

@@ -9,6 +9,8 @@ <h3>
       This page is used to test Container Luigi CLient API functionalities for web
       component based microfrontend
     </h3>
+    <button id="luigi-update-context" type="button">Update context</button>
+
     <div style="height: fit-content; border:solid 1px blue">
       <luigi-container
         data-test-id="luigi-client-api-test-01"
@@ -79,7 +81,7 @@ <h3>
           console.log('params', params);
         });
         luigiContainer.addEventListener(MFEventID.SET_ANCHOR_LINK_REQUEST, event => {
-          console.log('anhor', event.detail);
+          console.log('anchor', event.detail);
         });
 
         // uxManager(). closeUserSettings openUserSettings collapseLeftSideNav
@@ -124,6 +126,13 @@ <h3>
           event.callback(window.location.pathname);
         });
       });
+
+      // update container context
+      document.querySelector('#luigi-update-context').addEventListener('click', () => {
+        document
+          .querySelector('[data-test-id="luigi-client-api-test-01"]')
+          .updateContext({ newContextData: 'some data' });
+      });
     </script>
   </body>
 </html>

container/test-app/wc/helloWorldWC.js

@@ -4,6 +4,9 @@
 export default class extends HTMLElement {
   constructor() {
     super();
+
+    this.ctx = {};
+
     const template = document.createElement('template');
     template.innerHTML = `<section><p>Hello World!</p></section>`;
 
@@ -46,6 +49,9 @@ export default class extends HTMLElement {
     const getDirtyStatusBtn = document.createElement('template');
     getDirtyStatusBtn.innerHTML = '<button id="getDirtyStatus">getDirtyStatus</button>';
 
+    const updateContextBtn = document.createElement('template');
+    updateContextBtn.innerHTML = '<button id="updateContext">updateContext</button>';
+
     const getCurrentRouteBtn = document.createElement('template');
     getCurrentRouteBtn.innerHTML = '<button id="getCurrentRoute">getCurrentRoute</button>';
 
@@ -95,6 +101,7 @@ export default class extends HTMLElement {
     this._shadowRoot.appendChild(getUserSettingsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(getAnchorBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(getDirtyStatusBtn.content.cloneNode(true));
+    this._shadowRoot.appendChild(updateContextBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(uxManagerMultipleRequestsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(linkManagerChainedFunctionsRequestsBtn.content.cloneNode(true));
     this._shadowRoot.appendChild(linkManagerOpenAsRequestsBtn.content.cloneNode(true));
@@ -204,6 +211,14 @@ export default class extends HTMLElement {
       });
     });
 
+    this.$updateContextBtn = this._shadowRoot.querySelector('#updateContext');
+    this.$updateContextBtn.addEventListener('click', () => {
+      this.LuigiClient.uxManager().showAlert({
+        text: `WC.ctx=${JSON.stringify(this.ctx)}`,
+        type: 'info'
+      });
+    });
+
     this.$uxManagerManyRequests = this._shadowRoot.querySelector('#uxManagerManyRequests');
     this.$uxManagerManyRequests.addEventListener('click', () => {
       this.LuigiClient.uxManager().closeUserSettings();
@@ -236,9 +251,15 @@ export default class extends HTMLElement {
 
     this.$linkManagerOpenAsRequests = this._shadowRoot.querySelector('#linkManagerOpenAsRequests');
     this.$linkManagerOpenAsRequests.addEventListener('click', () => {
-      this.LuigiClient.linkManager().openAsDrawer('hello-world-wc', { size: 's' });
-      this.LuigiClient.linkManager().openAsModal('hello-world-wc', { size: 'm' });
-      this.LuigiClient.linkManager().openAsSplitView('hello-world-wc', { size: 'l' });
+      this.LuigiClient.linkManager().openAsDrawer('hello-world-wc', {
+        size: 's'
+      });
+      this.LuigiClient.linkManager().openAsModal('hello-world-wc', {
+        size: 'm'
+      });
+      this.LuigiClient.linkManager().openAsSplitView('hello-world-wc', {
+        size: 'l'
+      });
     });
 
     this.$linkManagerUpdateTopPathExistsBack = this._shadowRoot.querySelector('#linkManagerUpdateTopPathExistsBack');
@@ -276,7 +297,12 @@ export default class extends HTMLElement {
     });
   }
 
+  get context() {
+    return this.ctx;
+  }
+
   set context(ctx) {
+    this.ctx = ctx;
     this.$paragraph.innerHTML = ctx.title;
   }
 }