From ba42c68c78bb8d60c69cfabc07e241b79b370170 Mon Sep 17 00:00:00 2001
From: Anna Milewska <94687949+amilewskaa@users.noreply.github.com>
Date: Tue, 22 Oct 2024 11:10:38 +0200
Subject: [PATCH] Add container cypress tests getNodeParams et.al (#3996)

Co-authored-by: Anna Milewska <anna.milewska@sap.com>
---
 .../compound/wc-compound-container.cy.js      |  2 +-
 .../e2e/test-app/iframe/iframe-settings.cy.js | 26 +++++++++--
 .../e2e/test-app/wc/wc-container.cy.js        |  2 +-
 .../test-app/compound/compoundClientAPI.html  | 44 +++++++++++++++++--
 .../luigi-client-init-wc.js                   | 41 +++++++++++++++++
 .../test-app/iframe/iframe-settings.html      | 16 +++++--
 .../microfrontend-luigi-client-init.html      | 34 ++++++++++++++
 container/test-app/wc/clientAPI.html          |  6 +--
 8 files changed, 155 insertions(+), 16 deletions(-)
 create mode 100644 container/test-app/compound/luigi-client-init-wc/luigi-client-init-wc.js
 create mode 100644 container/test-app/iframe/microfrontend-luigi-client-init.html

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 37d0cb97f1..9de337f9ff 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
@@ -199,7 +199,7 @@ describe('Compound Container Tests', () => {
       // 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-button').click();
 
       cy.get('#defer-init-flag').should('exist');
     });
diff --git a/container/cypress/e2e/test-app/iframe/iframe-settings.cy.js b/container/cypress/e2e/test-app/iframe/iframe-settings.cy.js
index 1c0a93fb80..1cfa540c4d 100644
--- a/container/cypress/e2e/test-app/iframe/iframe-settings.cy.js
+++ b/container/cypress/e2e/test-app/iframe/iframe-settings.cy.js
@@ -12,7 +12,7 @@ describe('Iframe Settings Test', () => {
       expect($body.children()).to.have.length(0);
 
       // click button that calls container.init()
-      cy.get('#init-button').click();
+      cy.get('#defer-init-button').click();
 
       cy.get('#defer-init-test')
         .shadow()
@@ -27,7 +27,7 @@ describe('Iframe Settings Test', () => {
   });
 
   it('set sandbox rules by property', () => {
-    cy.get('#init-button').click();
+    cy.get('#defer-init-button').click();
     cy.get('button[id="sandbox-rules"]').click();
 
     cy.get('#defer-init-test')
@@ -53,7 +53,7 @@ describe('Iframe Settings Test', () => {
 
   describe('Allow Rules Test', () => {
     it('set allow rules by property', () => {
-      cy.get('#init-button').click();
+      cy.get('#defer-init-button').click();
       cy.get('#set-allow-rules-button').click();
       cy.get('#defer-init-test')
         .find('iframe')
@@ -71,4 +71,24 @@ describe('Iframe Settings Test', () => {
         .should('eq', 'fullscreen; microphone;');
     });
   });
+
+  describe('Luigi Client Initialization', () => {
+    it('should initialize Luigi Client', () => {
+      cy.get('iframe').then(($iframe) => {
+        const iframeBody = $iframe.contents().find('body');
+        
+        const checkLuigiClientStatus = (expectedStatus) => {
+          cy.wrap(iframeBody)
+            .find('#luigiClientStatus')
+            .should('exist')
+            .invoke('text')
+            .should('eq', expectedStatus);
+        };
+  
+        checkLuigiClientStatus('Luigi Client Initialized: Unknown');
+        cy.wait(2000);
+        checkLuigiClientStatus('Luigi Client Initialized: true');
+      });
+    });
+  });
 });
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 f8c4e78b4c..65833119de 100644
--- a/container/cypress/e2e/test-app/wc/wc-container.cy.js
+++ b/container/cypress/e2e/test-app/wc/wc-container.cy.js
@@ -86,7 +86,7 @@ describe('Web Container Test', () => {
       // 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-button').click();
 
       cy.get('#defer-init-flag').should('exist');
     });
diff --git a/container/test-app/compound/compoundClientAPI.html b/container/test-app/compound/compoundClientAPI.html
index 9071cc17e2..197694f6cb 100644
--- a/container/test-app/compound/compoundClientAPI.html
+++ b/container/test-app/compound/compoundClientAPI.html
@@ -15,7 +15,7 @@
   </head>
   <body>
     <h3>
-      This page is used to test Compound-Container Luigi CLient API functionalities for
+      This page is used to test Compound-Container Luigi Client API functionalities for
       compound web component based microfrontend
     </h3>
     <button id="luigi-update-context" type="button">Update context</button>
@@ -42,8 +42,21 @@ <h3>
       ></luigi-compound-container>
     </div>
 
+
+      <!-- luigi-client-init scenario wc container-->
+    <button id="luigi-client-init-button" style="margin: 25px 0 10px;">
+      this.LuigiClient.luigiClientInit();
+    </button>
+    <div style="border:solid 1px red; height: 100px;">
+      <luigi-compound-container
+        id="luigi-client-init-test"
+        webcomponent="true"
+        context='{"content":" -- luigi-client-init-test --"}'
+        defer-init="false"
+      ></luigi-compound-container>
+  
     <!-- defer-init scenario wc container-->
-    <button id="init-button" style="margin: 25px 0 10px;">
+    <button id="defer-init-button" style="margin: 25px 0 10px;">
       container.init() - click to initialize defered compound wc
     </button>
     <div style="border:solid 1px red; height: 100px;">
@@ -238,8 +251,8 @@ <h3>
       });
 
       const deferInitContainer = document.getElementById('defer-init-test');
-      const initButton = document.getElementById('init-button');
-      initButton.addEventListener('click', function() {
+      const deferInitButton = document.getElementById('defer-init-button');
+      deferInitButton.addEventListener('click', function() {
         deferInitContainer.init();
       });
       deferInitContainer.compoundConfig = {
@@ -260,9 +273,32 @@ <h3>
         ]
       };
 
+      const luigiClientInitContainer = document.getElementById('luigi-client-init-test');
+      const luigiClientInitButton = document.getElementById('luigi-client-init-button');
+      luigiClientInitButton.addEventListener('click', function() {
+        console.log('luigi-client-init');
+        luigiClientInitContainer.init();
+      });
+
+      luigiClientInitContainer.compoundConfig = {
+        renderer: {
+          use: 'grid',
+          config: {
+            columns: '1fr 1fr',
+            gap: '20px'
+          }
+        },
+        children: [
+          {
+            viewUrl: './compound/luigi-client-init-wc/luigi-client-init-wc.js'
+          }
+        ]
+      };
+
       document.querySelector('#luigi-update-context').addEventListener('click', () => {
         compoundContainer.updateContext({ newContextData: 'some data' });
       });
+
     </script>
   </body>
 </html>
diff --git a/container/test-app/compound/luigi-client-init-wc/luigi-client-init-wc.js b/container/test-app/compound/luigi-client-init-wc/luigi-client-init-wc.js
new file mode 100644
index 0000000000..afbb815eb1
--- /dev/null
+++ b/container/test-app/compound/luigi-client-init-wc/luigi-client-init-wc.js
@@ -0,0 +1,41 @@
+import { LuigiElement } from './../luigi-element.js';
+export default class extends LuigiElement {
+  constructor() {
+    super({ openShadow: 'open', deferLuigiClientWCInit: false });
+    const template = document.createElement('template');
+
+    //remove buttons after review/AC
+    template.innerHTML = `
+        <section style="display: flex; height: 100%; flex-direction: column">
+          <button id="addNodeParams">addNodeParams</button>
+          <button id="getNodeParams">getNodeParams</button>
+          <header><slot name="header">header</slot></header>
+          <main style="flex: auto; overflow: auto">
+            <slot name="content">content</slot>
+            <slot name="helloWorldSelfRegistered"></slot>
+          </main>
+          <footer><slot name="footer">footer</slot></footer>
+        </section>
+      `;
+    this._shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$button = this._shadowRoot.querySelector('#addNodeParams');
+    this.$button.addEventListener('click', () => {
+      this.LuigiClient.addNodeParams({ Luigi: 'rocks' }, true);
+    });
+    this.$button2 = this._shadowRoot.querySelector('#getNodeParams');
+    this.$button2.addEventListener('click', () => {
+      console.log('getNodeParams', this.LuigiClient.getNodeParams());
+    });
+  }
+
+  connectedCallback() {
+    setTimeout(() => {
+      this.LuigiClient.luigiClientInit();
+      console.log('LuigiClient initialized for LuigiElement Compount WC');
+    }, 8000);
+  }
+
+  set context(ctx) {
+    console.log('context', ctx);
+  }
+}
diff --git a/container/test-app/iframe/iframe-settings.html b/container/test-app/iframe/iframe-settings.html
index a5d598953b..9a5b804938 100644
--- a/container/test-app/iframe/iframe-settings.html
+++ b/container/test-app/iframe/iframe-settings.html
@@ -9,7 +9,7 @@ <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="defer-init-button">container.init() defer-init enabled</button>
     <button id="sandbox-rules">Set sandboxRules</button>
     <button id="set-allow-rules-button">Set allowRules</button>
 
@@ -41,13 +41,21 @@ <h3>
       ></luigi-container>
     </div>
 
+    <!-- Luigi Container to test luigi client init  -->
+    <div style="border: solid 1px red; height: 150px">
+      <luigi-container
+        id="luigi-client-init"
+        viewURL="./microfrontend-luigi-client-init.html"
+      ></luigi-container>
+    </div>
+
     <script type="module">
       import Events from '../bundle.js';
 
       const deferInitContainer = document.getElementById('defer-init-test');
-      const initButton = document.getElementById('init-button');
+      const deferInitButton = document.getElementById('defer-init-button');
 
-      initButton.addEventListener('click', function() {
+      deferInitButton.addEventListener('click', function() {
         deferInitContainer.init();
       });
 
@@ -60,7 +68,7 @@ <h3>
       const allowRulesContainer = document.getElementById('allow-rules-test');
       const setAllowRulesButton = document.getElementById('set-allow-rules-button');
 
-      initButton.addEventListener('click', () => {
+      deferInitButton.addEventListener('click', () => {
         deferInitContainer.allowRules = [
           'microphone',
           "camera 'none'",
diff --git a/container/test-app/iframe/microfrontend-luigi-client-init.html b/container/test-app/iframe/microfrontend-luigi-client-init.html
new file mode 100644
index 0000000000..dc66e55b08
--- /dev/null
+++ b/container/test-app/iframe/microfrontend-luigi-client-init.html
@@ -0,0 +1,34 @@
+<!-- This microfrontend HTML file is used to test luigi-client-init functionality -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <title>Luigi Client Init Test</title>
+    <script src="./luigi-client.js"></script>
+    <script>
+      setTimeout(() => testIsLuigiClientInitialized(), 2000);
+
+      function testLuigiClientInit() {
+        LuigiClient.luigiClientInit();
+      }
+
+      function testIsLuigiClientInitialized() {
+        const isInitialized = LuigiClient.isLuigiClientInitialized();
+        console.log('isInitialized: ' + isInitialized);
+        if (document.getElementById('luigiClientStatus')) {
+        document.getElementById('luigiClientStatus').innerText = `Luigi Client Initialized: ${isInitialized}`;
+
+        }
+        return isInitialized;
+      }
+    </script>
+</head>
+<body style="border: solid green 2px;">
+    <div>
+        <h1>Luigi Client Init Test for Iframes</h1>
+        <button id="testLuigiClientInitButton" onclick="testLuigiClientInit()">Test luigiClientInit</button>
+        <button id="testIsLuigiClientInitializedButton" onclick="testIsLuigiClientInitialized()">Test isLuigiClientInitialized</button>
+         <p id="luigiClientStatus">Luigi Client Initialized: Unknown</p>
+    </div>
+</body>
+</html>
diff --git a/container/test-app/wc/clientAPI.html b/container/test-app/wc/clientAPI.html
index 7944f307cf..78552f1113 100644
--- a/container/test-app/wc/clientAPI.html
+++ b/container/test-app/wc/clientAPI.html
@@ -36,7 +36,7 @@ <h3>
         ></luigi-container>
       </div>
 
-      <button id="init-button" style="margin: 25px 0 15px">
+      <button id="defer-init-button" style="margin: 25px 0 15px">
         container.init() to initialize defered container
       </button>
       <div style="border: 1px solid red">
@@ -67,8 +67,8 @@ <h3>
       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() {
+      const deferInitButton = document.getElementById('defer-init-button');
+      deferInitButton.addEventListener('click', function() {
         deferInitContainer.init();
       });
       // document.querySelector('luigi-container');