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 containerSelector = '[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(containerSelector)
         .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(containerSelector)
         .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 containerSelector = '[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(containerSelector)
       .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(containerSelector)
       .shadow()
       .get('iframe')
       .then(iframe => {
@@ -40,8 +43,32 @@ describe('Iframe Container Test', () => {
       });
   });
 
+  it('update context', () => {
+    cy.on('window:alert', stub);
+
+    cy.get('#update-ctx')
+      .click()
+      .then(() => {
+        cy.get(containerSelector)
+          .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"}}'
+                );
+              });
+          });
+      });
+  });
+
   it('set auth token', () => {
-    const stub = cy.stub();
     cy.on('window:alert', stub);
 
     cy.visit('http://localhost:8080/iframe/iframeContainer.html');

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

@@ -1,6 +1,8 @@
 describe('Web Container Test', () => {
   describe('LuigiClient API LuigiContainer', () => {
+    const containerSelector = '[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(containerSelector)
         .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(containerSelector)
         .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(containerSelector)
         .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(containerSelector)
         .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(containerSelector)
         .shadow()
         .contains('getUserSettings')
         .click()
@@ -73,27 +71,44 @@ 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(containerSelector)
         .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);
-      cy.get('[data-test-id="luigi-client-api-test-01"]')
+      cy.get(containerSelector)
         .shadow()
         .contains('getCurrentRoute')
         .click()
         .then(() => {
           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(containerSelector)
+            .shadow()
+            .contains('updateContext')
+            .click()
+            .then(() => {
+              expect(stub.getCall(0)).to.be.calledWith('WC.ctx={"newContextData":"some data"}');
+            });
+        });
+    });
   });
 });

container/src/LuigiCompoundContainer.svelte

@@ -48,10 +48,10 @@
           if (this.containerInitialized && name === 'context') {
             this.updateContext(JSON.parse(newValue));
           }
-        };
+        }
         getNoShadow(){
           return this.hasAttribute('no-shadow') || this.noShadow;
-        };
+        }
       };
     },
   }}
@@ -98,7 +98,7 @@
       anchor &&
       dirtyStatus &&
       hasBack &&
-      documentTitle && 
+      documentTitle &&
       noShadow
     );
   };

container/src/LuigiContainer.svelte

@@ -44,10 +44,10 @@
               ContainerAPI.updateAuthData(this.iframeHandle, JSON.parse(newValue));
             }
           }
-        };
+        }
         getNoShadow(){
           return this.hasAttribute('no-shadow') || this.noShadow
-        };
+        }
       };
     }
   }}
@@ -113,7 +113,8 @@
       hasBack &&
       documentTitle &&
       allowRules &&
-      sandboxRules
+      sandboxRules &&
+      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

@@ -103,9 +103,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>