Merge branch 'main' into 3791-switch-client-code-from-js-to-ts

SAP · Aug 9, 2024 · fe88774 · fe88774
2 parents 02f8f90 + a902c03
commit fe88774
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 42 deletions.
diff --git a/container/cypress/e2e/test-app/iframe/iframe-container.cy.js b/container/cypress/e2e/test-app/iframe/iframe-container.cy.js
@@ -67,34 +67,13 @@ describe('Iframe Container Test', () => {
           });
       });
   });
-  it('defer-init flag for iframe container', () => {
-    cy.get('#defer-init-test').then(iframe => {
-      const $body = iframe.contents().find('main');
-      expect($body.children()).to.have.length(0);
-
-      // click button that calls container.init()
-      cy.get('#init-button').click();
-
-      cy.get('#defer-init-test')
-        .shadow()
-        .get('iframe')
-        .then(iframe => {
-          const $body = iframe.contents().find('body');
-          cy.wrap($body)
-            .contains('defer-init test for iframes')
-            .should('exist');
-        });
-    });
-  });
 
   it('set auth token', () => {
     cy.on('window:alert', stub);
 
-    cy.visit('http://localhost:8080/iframe/iframeContainer.html');
-
     cy.get('button[id="update-token"]').click();
 
-    cy.get('[data-test-id="iframe-based-container-test"]')
+    cy.get(containerSelector)
       .shadow()
       .get('iframe')
       .then(iframe => {

diff --git a/container/cypress/e2e/test-app/iframe/iframe-settings.cy.js b/container/cypress/e2e/test-app/iframe/iframe-settings.cy.js
@@ -0,0 +1,53 @@
+describe('Iframe Container Test', () => {
+  let stub;
+
+  beforeEach(() => {
+    cy.visit('http://localhost:8080/iframe/iframe-settings.html');
+    stub = cy.stub();
+  });
+
+  it('defer-init flag for iframe container', () => {
+    cy.get('#defer-init-test').then(iframe => {
+      const $body = iframe.contents().find('main');
+      expect($body.children()).to.have.length(0);
+
+      // click button that calls container.init()
+      cy.get('#init-button').click();
+
+      cy.get('#defer-init-test')
+        .shadow()
+        .get('iframe')
+        .then(iframe => {
+          const $body = iframe.contents().find('body');
+          cy.wrap($body)
+            .contains('defer-init test for iframes')
+            .should('exist');
+        });
+    });
+  });
+
+  it('set sandbox rules by property', () => {
+    cy.get('#init-button').click();
+    cy.get('button[id="sandbox-rules"]').click();
+
+    cy.get('#defer-init-test')
+      .shadow()
+      .get('iframe')
+      .then(elements => {
+        cy.get(elements.first())
+          .invoke('attr', 'sandbox')
+          .should('eq', 'allow-modals allow-popups');
+      });
+  });
+
+  it('set sandbox rules by attribute', () => {
+    cy.get('#sandbox-rules-test')
+      .shadow()
+      .get('iframe')
+      .then(elements => {
+        cy.get(elements.last())
+          .invoke('attr', 'sandbox')
+          .should('eq', 'allow-scripts allow-same-origin');
+      });
+  });
+});
diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html
@@ -16,7 +16,7 @@
   <body>
     <h3>
       This page is used to test Compound-Container Luigi CLient API functionalities for
-      web component based microfrontend
+      compound web component based microfrontend
     </h3>
     <button id="luigi-update-context" type="button">Update context</button>
 

diff --git a/container/test-app/iframe/iframe-settings.html b/container/test-app/iframe/iframe-settings.html
@@ -0,0 +1,51 @@
+<html>
+  <head>
+    <script type="module">
+      import '../bundle.js';
+    </script>
+  </head>
+  <body>
+    <h3>
+      This page is used to test Container Luigi CLient API functionalities for web
+      component based microfrontend
+    </h3>
+    <button id="init-button">container.init() defer-init enabled</button>
+    <button id="sandbox-rules">Set sandboxRules</button>
+
+    <!-- Luigi Container to test defer-init flag-->
+    <div style="border: solid 1px red; height: 100px">
+      <luigi-container
+        id="defer-init-test"
+        data-test-id="defer-init-container"
+        viewURL="./microfrontend-defer-init.html"
+        defer-init="true"
+      ></luigi-container>
+    </div>
+
+    <!-- Luigi Container to test sandbox rules -->
+    <div style="border: solid 1px red; height: 100px">
+      <luigi-container
+        id="sandbox-rules-test"
+        viewURL="./microfrontend-sandbox-rules.html"
+        sandbox-rules='["allow-scripts", "allow-same-origin"]'
+      ></luigi-container>
+    </div>
+
+    <script type="module">
+      import Events from '../bundle.js';
+
+      const deferInitContainer = document.getElementById('defer-init-test');
+      const initButton = document.getElementById('init-button');
+
+      initButton.addEventListener('click', function() {
+        deferInitContainer.init();
+      });
+
+      const sandboxRulesButton = document.getElementById('sandbox-rules');
+
+      sandboxRulesButton.addEventListener('click', () => {
+        deferInitContainer.sandboxRules = ['allow-modals', 'allow-popups'];
+      });
+    </script>
+  </body>
+</html>
diff --git a/container/test-app/iframe/iframeContainer.html b/container/test-app/iframe/iframeContainer.html
@@ -6,12 +6,11 @@
   </head>
   <body>
     <h3>
-      This page is used to test Container Luigi CLient API functionalities for web
-      component based microfrontend
+      This page is used to test Container Luigi CLient API functionalities for iframe
+      based microfrontend
     </h3>
     <button id="btn-1">Send Custom Message to iFrame Container</button>
     <button id="update-ctx">Update Ctx</button>
-    <button id="init-button">container.init() defer-init enabled</button>
     <button id="update-token">Update Access Token</button>
 
     <div style="border:solid 1px blue; height: 400px">
@@ -22,25 +21,14 @@ <h3>
         context='{"title": "Projects", "content":" "}'
         auth-data='{ "accessToken": "my-token" }'
       ></luigi-container>
-
-      <!-- Luigi Container to test defer-init flag-->
-      <luigi-container
-        id="defer-init-test"
-        data-test-id="defer-init-container"
-        viewURL="./microfrontend-defer-init.html"
-        defer-init="true"
-      ></luigi-container>
     </div>
 
     <script type="module">
       import Events from '../bundle.js';
-      const deferInitContainer = document.getElementById("defer-init-test");
-      const initButton = document.getElementById("init-button");
-      initButton.addEventListener("click", function() {
-        deferInitContainer.init();
-      });
 
-      const luigiContainer = document.querySelector('luigi-container');
+      const luigiContainer = document.querySelector(
+        '[data-test-id="iframe-based-container-test"]'
+      );
       luigiContainer.addEventListener(Events.NAVIGATION_REQUEST, event => {
         console.log(event.detail);
         window.location.hash = event.detail.link;

diff --git a/container/test-app/iframe/microfrontend-sandbox-rules.html b/container/test-app/iframe/microfrontend-sandbox-rules.html
@@ -0,0 +1,14 @@
+<!-- This microfrontend HTML file is used to test sandbox rules functionality -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title></title>
+    <meta charset="utf-8" />
+  </head>
+
+  <body style="border: solid blue 2px;">
+    <div>
+      <h1>sandbox rules test for iframes</h1>
+    </div>
+  </body>
+</html>
diff --git a/container/test-app/index.html b/container/test-app/index.html
@@ -65,8 +65,8 @@ <h1>Container Test-App</h1>
           </tr>
           <tr>
             <td><a href="#">-</a></td>
-            <td><a href="#">-</a></td>
-            <td><a href="compound/nested.html">Nested </a></td>
+            <td><a href="iframe/iframe-settings.html">iFrame Settings</a></td>
+            <td><a href="compound/nested.html">Nested</a></td>
           </tr>
           <!-- Add more rows as needed -->
         </tbody>