From 5c35260232c0eec5acd0e1c6c38a2f8ad5bb5743 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vincent=20Tomoaki=20=C3=96ller?=
 <85555471+VincentUllal@users.noreply.github.com>
Date: Mon, 8 Jul 2024 14:45:21 +0200
Subject: [PATCH] Add defer init flag container test (#3792)

---
 .../compound/wc-compound-container.cy.js      |  8 +++
 .../test-app/iframe/iframe-container.cy.js    | 28 +++++++--
 .../e2e/test-app/wc/wc-container.cy.js        | 10 +++
 .../test-app/compound/compoundClientAPI.html  | 38 ++++++++++++
 .../defer-init-wc/compoundWCDeferInit1.js     | 17 ++++++
 .../defer-init-wc/compoundWCDeferInit2.js     | 13 ++++
 .../test-app/iframe/iframeContainer.html      | 20 +++++-
 .../iframe/microfrontend-defer-init.html      | 14 +++++
 container/test-app/iframe/microfrontend.html  |  6 +-
 container/test-app/wc/clientAPI.html          | 61 +++++++++++++------
 container/test-app/wc/myWebComponent.js       | 17 ++++++
 11 files changed, 202 insertions(+), 30 deletions(-)
 create mode 100644 container/test-app/compound/defer-init-wc/compoundWCDeferInit1.js
 create mode 100644 container/test-app/compound/defer-init-wc/compoundWCDeferInit2.js
 create mode 100644 container/test-app/iframe/microfrontend-defer-init.html
 create mode 100644 container/test-app/wc/myWebComponent.js

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 f273fa7e7e..958f9af56e 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
@@ -28,5 +28,13 @@ describe('Compound Container Tests', () => {
           expect(stub.getCall(0)).to.be.calledWith('LuigiClient.getAnchor()="testAnchorCompound"');
         });
     });
+    it('defer-init flag for LuigiCompoundContainer', () => {
+      // the initialized webcomponent has id="defer-init-flag"
+      cy.get('#defer-init-flag').should('not.exist');
+      // click button that calls container.init()
+      cy.get('#init-button').click();
+
+      cy.get('#defer-init-flag').should('exist');
+    });
   });
 });
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 74724c4ef6..1690e98b65 100644
--- a/container/cypress/e2e/test-app/iframe/iframe-container.cy.js
+++ b/container/cypress/e2e/test-app/iframe/iframe-container.cy.js
@@ -1,7 +1,9 @@
 describe('Iframe Container Test', () => {
-  it('navigation sent', () => {
+  beforeEach(() => {
     cy.visit('http://localhost:8080/iframe/iframeContainer.html');
+  });
 
+  it('navigation sent', () => {
     cy.get('[data-test-id="iframe-based-container-test"]')
       .shadow()
       .get('iframe')
@@ -21,8 +23,6 @@ describe('Iframe Container Test', () => {
     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"]')
       .shadow()
       .get('iframe')
@@ -40,6 +40,26 @@ 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', () => {
     const stub = cy.stub();
     cy.on('window:alert', stub);
@@ -64,4 +84,4 @@ describe('Iframe Container Test', () => {
           });
       });
   });
-});
+});
\ No newline at end of file
diff --git a/container/cypress/e2e/test-app/wc/wc-container.cy.js b/container/cypress/e2e/test-app/wc/wc-container.cy.js
index 47aaf81bd5..41b1b25147 100644
--- a/container/cypress/e2e/test-app/wc/wc-container.cy.js
+++ b/container/cypress/e2e/test-app/wc/wc-container.cy.js
@@ -84,6 +84,16 @@ describe('Web Container Test', () => {
           expect(stub.getCall(0)).to.be.calledWith('LuigiClient.getAnchor()="testanchor"');
         });
     });
+    
+    it('defer-init flag for webcomponent container', () => {
+      // the initialized webcomponent has id="defer-init-flag"
+      cy.get('#defer-init-flag').should('not.exist');
+      // click button that calls container.init()
+      cy.get('#init-button').click();
+  
+      cy.get('#defer-init-flag').should('exist');
+    });
+    
     it('LuigiClient API getCurrentRoute for LuigiContainer', () => {
       const stub = cy.stub();
       cy.on('window:alert', stub);
diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html
index 5dad9b3eec..8f0c13a777 100644
--- a/container/test-app/compound/compoundClientAPI.html
+++ b/container/test-app/compound/compoundClientAPI.html
@@ -18,6 +18,8 @@ <h3>
       This page is used to test Compound-Container Luigi CLient API functionalities for
       web component based microfrontend
     </h3>
+    <!-- base scenario compound container-->
+    <span>Below is a compound container example for testing functionality</span>
     <div style="border:solid 1px blue">
       <luigi-compound-container
         data-test-id="luigi-client-api-test-compound-01"
@@ -32,6 +34,19 @@ <h3>
         defer-init="false"
         webcomponent="true"
       ></luigi-compound-container>
+    </div>
+
+    <!-- defer-init scenario wc container-->
+    <button id="init-button" style="margin: 25px 0 10px;">
+      container.init() - click to initialize defered compound wc
+    </button>
+    <div style="border:solid 1px red; height: 100px;">
+      <luigi-compound-container
+        id="defer-init-test"
+        webcomponent="true"
+        context='{"content":" -- defer-init test --"}'
+        defer-init="true"
+      ></luigi-compound-container>
 
       <!-- Used for testing dynamic compound container creation -->
       <div class="content"></div>
@@ -204,6 +219,29 @@ <h3>
       compoundContainer.addEventListener(MFEventID.SET_VIEW_GROUP_DATA_REQUEST, event => {
         console.log('Set View Group Data Request received', event.detail, event);
       });
+
+      const deferInitContainer = document.getElementById('defer-init-test');
+      const initButton = document.getElementById('init-button');
+      initButton.addEventListener('click', function() {
+        deferInitContainer.init();
+      });
+      deferInitContainer.compoundConfig = {
+        renderer: {
+          use: 'grid',
+          config: {
+            columns: '1fr 1fr',
+            gap: '20px'
+          }
+        },
+        children: [
+          {
+            viewUrl: './compound/defer-init-wc/compoundWCDeferInit1.js'
+          },
+          {
+            viewUrl: './compound/defer-init-wc/compoundWCDeferInit2.js'
+          }
+        ]
+      };
     </script>
   </body>
 </html>
diff --git a/container/test-app/compound/defer-init-wc/compoundWCDeferInit1.js b/container/test-app/compound/defer-init-wc/compoundWCDeferInit1.js
new file mode 100644
index 0000000000..475af7ab20
--- /dev/null
+++ b/container/test-app/compound/defer-init-wc/compoundWCDeferInit1.js
@@ -0,0 +1,17 @@
+/**
+ * This class is used to test Compound Container defer-init functionality
+ */
+export default class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `<section><h3 style="border: solid blue 2px;" id="defer-init-flag"> Hello From Web Component 1 </h3></section>`;
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$paragraph = shadowRoot.getElementById('defer-init-flag');
+  }
+
+  set context(ctx) {
+    this.$paragraph.innerHTML += ctx.content;
+  }
+}
diff --git a/container/test-app/compound/defer-init-wc/compoundWCDeferInit2.js b/container/test-app/compound/defer-init-wc/compoundWCDeferInit2.js
new file mode 100644
index 0000000000..fcc3380f12
--- /dev/null
+++ b/container/test-app/compound/defer-init-wc/compoundWCDeferInit2.js
@@ -0,0 +1,13 @@
+/**
+ * This class is used to test Compound Container defer-init functionality
+ */
+export default class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    const template = document.createElement('template');
+    template.innerHTML = `<section><h3 style="border: solid blue 2px;" id="paragraph"> Hello From Web Component 2 </h3></section>`;
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$paragraph = shadowRoot.getElementById('paragraph');
+  }
+}
diff --git a/container/test-app/iframe/iframeContainer.html b/container/test-app/iframe/iframeContainer.html
index f3e252cdfc..8fcf7cb6ad 100644
--- a/container/test-app/iframe/iframeContainer.html
+++ b/container/test-app/iframe/iframeContainer.html
@@ -11,20 +11,34 @@ <h3>
     </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">
+    <div style="border:solid 1px blue; height: 400px">
+      <!-- Luigi Container to test general functionality-->
       <luigi-container
         data-test-id="iframe-based-container-test"
         viewURL="./microfrontend.html"
         context='{"title": "Projects", "content":" "}'
         auth-data='{ "accessToken": "my-token" }'
-      >
-      </luigi-container>
+      ></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');
       luigiContainer.addEventListener(Events.NAVIGATION_REQUEST, event => {
diff --git a/container/test-app/iframe/microfrontend-defer-init.html b/container/test-app/iframe/microfrontend-defer-init.html
new file mode 100644
index 0000000000..0ae85a2e8b
--- /dev/null
+++ b/container/test-app/iframe/microfrontend-defer-init.html
@@ -0,0 +1,14 @@
+<!-- This microfrontend HTML file is used to test defer init functionality -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title></title>
+    <meta charset="utf-8" />
+  </head>
+
+  <body style="border: solid blue 2px;">
+    <div>
+      <h1>defer-init test for iframes</h1>
+    </div>
+  </body>
+</html>
diff --git a/container/test-app/iframe/microfrontend.html b/container/test-app/iframe/microfrontend.html
index bc88bc581e..54ed910b3f 100644
--- a/container/test-app/iframe/microfrontend.html
+++ b/container/test-app/iframe/microfrontend.html
@@ -1,13 +1,9 @@
+<!-- This microfrontend HTML file is used to test a variety of functionality -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <title></title>
     <meta charset="utf-8" />
-    <link
-      href="https://fiddle.luigi-project.io/vendor/fundamental-styles/dist/fundamental-styles.css"
-      rel="stylesheet"
-    />
-    <!-- <link href="https://fiddle.luigi-project.io/styles/styles.css" rel="stylesheet" /> -->
     <script src="https://fiddle.luigi-project.io/vendor/luigi-client/luigi-client.js"></script>
     <style>
       html,
diff --git a/container/test-app/wc/clientAPI.html b/container/test-app/wc/clientAPI.html
index 1331d61703..119ec400ab 100644
--- a/container/test-app/wc/clientAPI.html
+++ b/container/test-app/wc/clientAPI.html
@@ -9,24 +9,43 @@ <h3>
       This page is used to test Container Luigi CLient API functionalities for web
       component based microfrontend
     </h3>
-    <div style="height: fit-content; border:solid 1px blue">
-      <luigi-container
-        data-test-id="luigi-client-api-test-01"
-        viewURL="./wc/helloWorldWC.js"
-        webcomponent="true"
-        context='{"label": "Hello World WC", "title":"Hello World WC:  Testing Container Web Component Features"}'
-        locale="en"
-        theme="sap_fiori_3"
-        active-feature-toggle-list='["ft1","ft2"]'
-        node-params='{"Luigi":"rocks from attri &<strong>asdf<strong> bute"}'
-        search-params='{"test":"searchParam1"}'
-        path-params='{"path":"param"}'
-        client-permissions='{"permission": "testPermission"}'
-        user-settings='{"language": "de", "date":""}'
-        anchor="testanchor"
-        dirty-status="true"
-        document-title="Perfect Title"
-      ></luigi-container>
+    <div style="height: fit-content;">
+      <div style="border: 1px solid blue">
+        <!-- Luigi Container to test general functionalities, params etc-->
+        <luigi-container
+          data-test-id="luigi-client-api-test-01"
+          viewURL="./wc/helloWorldWC.js"
+          webcomponent="true"
+          context='{"label": "Hello World WC", "title":"Hello World WC:  Testing Container Web Component Features"}'
+          locale="en"
+          theme="sap_fiori_3"
+          active-feature-toggle-list='["ft1","ft2"]'
+          node-params='{"Luigi":"rocks from attri &<strong>asdf<strong> bute"}'
+          search-params='{"test":"searchParam1"}'
+          path-params='{"path":"param"}'
+          client-permissions='{"permission": "testPermission"}'
+          user-settings='{"language": "de", "date":""}'
+          anchor="testanchor"
+          dirty-status="true"
+          document-title="Perfect Title"
+        ></luigi-container>
+      </div>
+
+      <button id="init-button" style="margin: 25px 0 15px">
+        container.init() to initialize defered container
+      </button>
+      <div style="border: 1px solid red">
+        <!-- Luigi Container to test defer-init flag-->
+
+        <luigi-container
+          id="defer-init-test"
+          data-test-id="defer-init-container"
+          viewURL="./wc/myWebComponent.js"
+          webcomponent="true"
+          context='{"content":" -- defer-init test --"}'
+          defer-init="true"
+        ></luigi-container>
+      </div>
 
       <!-- Used for testing dynamic compound container creation -->
       <div class="content"></div>
@@ -40,7 +59,13 @@ <h3>
     </div>
 
     <script type="module">
+      import '../bundle.js';
       import MFEventID from '../bundle.js';
+      const deferInitContainer = document.getElementById('defer-init-test');
+      const initButton = document.getElementById('init-button');
+      initButton.addEventListener('click', function() {
+        deferInitContainer.init();
+      });
 
       [...document.querySelectorAll('luigi-container')].forEach(luigiContainer => {
         luigiContainer.addEventListener(MFEventID.NAVIGATION_REQUEST, event => {
diff --git a/container/test-app/wc/myWebComponent.js b/container/test-app/wc/myWebComponent.js
new file mode 100644
index 0000000000..b63e375b7d
--- /dev/null
+++ b/container/test-app/wc/myWebComponent.js
@@ -0,0 +1,17 @@
+/**
+ * This class is used to test container defer-init functionality
+ */
+export default class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: false });
+    const template = document.createElement('template');
+    template.innerHTML = `<section><h2 style="border: solid blue 2px;" id="defer-init-flag"> This is a webcomponent based microfrontend container </h2></section>`;
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$paragraph = shadowRoot.getElementById('defer-init-flag');
+  }
+
+  set context(ctx) {
+    this.$paragraph.innerHTML += ctx.content;
+  }
+}