Adds possibility to change route/viewUrl in iframe based mfe (#4031)

walmazacn · web-flow · commit e751ffb32ec3 · 2024-11-29T11:48:12.000+01:00
diff --git a/container/cypress/e2e/test-app/iframe/iframe-container.cy.js b/container/cypress/e2e/test-app/iframe/iframe-container.cy.js
@@ -40,16 +40,13 @@ describe('Iframe Container Test', () => {
     cy.get(containerSelector)
       .shadow()
       .get('iframe')
-      .then(iframe => {
+      .then((iframe) => {
         const $body = iframe.contents().find('body');
         cy.wrap($body)
           .contains('test showAlert')
           .click()
           .then(() => {
-            cy.wrap(stub).should(
-              'have.been.calledWith',
-              'show-alert-request message received: {\"isTrusted\":true}'
-            );
+            cy.wrap(stub).should('have.been.calledWith', 'show-alert-request message received: {"isTrusted":true}');
           });
       });
   });
@@ -60,17 +57,14 @@ describe('Iframe Container Test', () => {
     cy.get(containerSelector)
       .shadow()
       .get('iframe')
-      .then(iframe => {
+      .then((iframe) => {
         const $body = iframe.contents().find('body');
         cy.wrap($body)
           .contains('test goBack')
           .click()
           .then(() => {
             console.log(cy.wrap(stub));
-            cy.wrap(stub).should(
-              'have.been.calledWith',
-              'navigate-back-request'
-            );
+            cy.wrap(stub).should('have.been.calledWith', 'navigate-back-request');
           });
       });
   });
@@ -131,6 +125,31 @@ describe('Iframe Container Test', () => {
       });
   });
 
+  it('update viewUrl', () => {
+    cy.on('window:alert', stub);
+
+    cy.get('#update-view-url')
+      .click()
+      .then(() => {
+        cy.get(containerSelector)
+          .shadow()
+          .get('iframe')
+          .then((iframe) => {
+            const $body = iframe.contents().find('body');
+
+            cy.wrap($body)
+              .contains('test history state')
+              .click()
+              .then(() => {
+                cy.wrap(stub).should(
+                  'have.been.calledWith',
+                  'Custom message received: {"id":"my.historyMessage","_metaData":{},"data":{"state":{"luigiInduced":true}}}'
+                );
+              });
+          });
+      });
+  });
+
   it('set auth token', () => {
     cy.on('window:alert', stub);
 
diff --git a/container/src/LuigiContainer.svelte b/container/src/LuigiContainer.svelte
@@ -36,6 +36,7 @@
       return class extends customElementConstructor {
         sendCustomMessage = notInitFn('sendCustomMessage');
         updateContext = notInitFn('updateContext');
+        updateViewUrl = notInitFn('updateViewUrl');
         closeAlert = notInitFn('closeAlert');
         attributeChangedCallback(name, oldValue, newValue) {
           if (this.containerInitialized) {
@@ -151,6 +152,13 @@
       webcomponentService.thisComponent = thisComponent;
 
       const ctx = GenericHelperFunctions.resolveContext(context);
+
+      thisComponent.updateViewUrl = (viewUrl: string, internal?: object) => {
+        if (viewUrl?.length) {
+          ContainerAPI.updateViewUrl(viewUrl, GenericHelperFunctions.resolveContext(context), internal, iframeHandle);
+        }
+      };
+
       if (webcomponent && webcomponent != 'false') {
         if (!thisComponent.getNoShadow()) {
           mainComponent.innerHTML = '';
diff --git a/container/src/api/container-api.ts b/container/src/api/container-api.ts
@@ -27,6 +27,31 @@ export class ContainerAPIFunctions {
     }
   };
 
+  /**
+   * Updates route of the microfrontend by sending a message to the iframe that sets new view URL
+   * @param viewUrl new view URL
+   * @param context context data
+   * @param internal internal luigi legacy data
+   * @param iframeHandle a reference to the iframe that is needed to send a message to it internally
+   */
+  updateViewUrl = (viewUrl: string, context: object, internal?: object, iframeHandle?: IframeHandle) => {
+    if (iframeHandle) {
+      const internalParameter = internal || {};
+      containerService.sendCustomMessageToIframe(
+        iframeHandle,
+        {
+          context,
+          internal: internalParameter,
+          withoutSync: false,
+          viewUrl
+        },
+        LuigiInternalMessageID.SEND_CONTEXT_OBJECT
+      );
+    } else {
+      console.warn('Attempting to update route on inexisting iframe');
+    }
+  };
+
   /**
    * Updates the auth data of the microfrontend by sending a message to the iframe that sets the authData of the microfrontend
    * @param iframeHandle a reference to the iframe that is needed to send a message to it internally
diff --git a/container/test-app/iframe/iframeContainer.html b/container/test-app/iframe/iframeContainer.html
@@ -11,6 +11,7 @@ <h3>
     </h3>
     <button id="btn-1">Send Custom Message to iFrame Container</button>
     <button id="update-ctx">Update Ctx</button>
+    <button id="update-view-url" type="button">Update viewUrl</button>
     <button id="update-token">Update Access Token</button>
 
     <div style="border: solid 1px blue; height: 400px">
@@ -44,17 +45,19 @@ <h3>
       });
 
       luigiContainer.addEventListener(Events.UPDATE_TOP_NAVIGATION_REQUEST, (event) => {
-        alert("UPDATE_TOP_NAVIGATION_REQUEST event received");
+        alert('UPDATE_TOP_NAVIGATION_REQUEST event received');
       });
 
       luigiContainer.addEventListener(Events.CUSTOM_MESSAGE, (event) => {
         alert('Custom message received: ' + JSON.stringify(event.detail));
       });
 
       var alertSettings;
+
       // Some glue code
       const sendCustomMessageBtn = document.getElementById('btn-1');
       const updateContextButton = document.getElementById('update-ctx');
+      const updateViewUrlButton = document.getElementById('update-view-url');
       const updateAccessTokenButton = document.getElementById('update-token');
 
       // for testing send Custom message functionality
@@ -66,6 +69,10 @@ <h3>
         luigiContainer.updateContext({ myContext: 'some context data' });
       });
 
+      updateViewUrlButton.addEventListener('click', () => {
+        luigiContainer.updateViewUrl('/');
+      });
+
       updateAccessTokenButton.addEventListener('click', () => {
         luigiContainer.setAttribute('auth-data', '{"accessToken": "updated token"}');
       });
diff --git a/container/test-app/iframe/microfrontend.html b/container/test-app/iframe/microfrontend.html
@@ -44,6 +44,7 @@ <h1 id="title">Multi purpose demo page</h1>
       <button onclick="testShowConfirmationModal()">test show confirmation modal</button>
       <button onclick="testShowLoadingIndicator()">test show loading indicator</button>
       <button onclick="testHideLoadingIndicator()">test hide loading indicator</button>
+      <button onclick="testGetHistoryState()">test history state</button>
       <button onclick="testGetContext()">Get Context</button>
 
       <button onclick="testSetCurrentLocale()">test set current locale</button>
@@ -91,11 +92,11 @@ <h1 id="title">Multi purpose demo page</h1>
         });
       }
 
-      function goBack(){
+      function goBack() {
         LuigiClient.linkManager().goBack();
       }
 
-      function updateTopNavigation(){
+      function updateTopNavigation() {
         LuigiClient.LuigiClient.linkManager().updateTopNavigation();
       }
 
@@ -134,6 +135,13 @@ <h1 id="title">Multi purpose demo page</h1>
         LuigiClient.uxManager().hideLoadingIndicator();
       }
 
+      function testGetHistoryState() {
+        LuigiClient.sendCustomMessage({
+          id: 'my.historyMessage',
+          ...{ state: window.history.state },
+        });
+      }
+
       function testGetContext() {
         LuigiClient.sendCustomMessage({
           id: 'my.contextMessage',
diff --git a/container/test/api/container-api.spec.ts b/container/test/api/container-api.spec.ts
@@ -67,6 +67,72 @@ describe('Container Service', () => {
     });
   });
 
+  describe('updateViewUrl', () => {
+    const containerAPI = new ContainerAPIFunctions();
+
+    it('iframeHandle exists, WITH internalParam', () => {
+      // mock and spy
+      const viewUrl = '/';
+      const context = {};
+      const internal = { empty: false };
+      const iframeHandle = {
+        data: 'test'
+      } as unknown as IframeHandle;
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const spy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+
+      // act
+      containerAPI.updateViewUrl(viewUrl, context, internal, iframeHandle);
+
+      // assert
+      expect(spy).toHaveBeenCalledWith(
+        iframeHandle,
+        { viewUrl, context, internal, withoutSync: false },
+        LuigiInternalMessageID.SEND_CONTEXT_OBJECT
+      );
+    });
+
+    it('iframeHandle exists, UNDEFINED internalParam ', () => {
+      // mock and spy
+      const viewUrl = '/';
+      const context = {};
+      const internal = undefined;
+      const iframeHandle = {
+        data: 'test'
+      } as unknown as IframeHandle;
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const spy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+
+      // act
+      containerAPI.updateViewUrl(viewUrl, context, internal, iframeHandle);
+
+      // assert
+      expect(spy).toHaveBeenCalledWith(
+        iframeHandle,
+        { viewUrl, context, internal: {}, withoutSync: false },
+        LuigiInternalMessageID.SEND_CONTEXT_OBJECT
+      );
+    });
+
+    it('iframeHandle NOT exists', () => {
+      // mock and spy
+      const viewUrl = '/';
+      const context = {};
+      const internal = {};
+      const iframeHandle = undefined;
+      containerService.sendCustomMessageToIframe = jest.fn();
+      const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
+      const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation(jest.fn());
+
+      // act
+      containerAPI.updateViewUrl(viewUrl, context, internal, iframeHandle);
+
+      // assert
+      expect(sendCustomMSGSpy).not.toHaveBeenCalled();
+      expect(consoleWarnSpy).toHaveBeenCalledWith('Attempting to update route on inexisting iframe');
+    });
+  });
+
   describe('updateAuthData', () => {
     const containerAPI = new ContainerAPIFunctions();
 
@@ -88,7 +154,7 @@ describe('Container Service', () => {
 
     it('iframeHandle undefined, authData exists', () => {
       // mock and spy
-      const authData = undefined;
+      const authData = { someData: 'mytoken' };
       const iframeHandle = undefined;
       containerService.sendCustomMessageToIframe = jest.fn();
       const sendCustomMSGSpy = jest.spyOn(containerService, 'sendCustomMessageToIframe');
