Add publishEvent documentation and tests

client/luigi-element.d.ts

@@ -419,6 +419,69 @@ export interface LuigiClient {
   getCurrentLocale: () => string;
   linkManager: () => LinkManager;
   uxManager: () => UxManager;
+  /**
+   * Publish an event that can be listened to on the core side.
+   *
+   * Similar to LuigiClient.sendCustomMessage(...) but for WebComponent based microfrontends.
+   *
+   * @param event Custom Event to be published
+   * @returns
+   * @memberof LuigiClient
+   *
+   * @example
+   * WC Container Scenario
+   * Sending a message from a WC based microfrontend to parent host
+   *
+   * // wcComponent.js
+   * this.LuigiClient.publishEvent(new CustomEvent('sendSomeMsg', { detail: 'My own message' }));
+   *
+   * // host.html
+   * myContainer.addEventListener('custom-message', event => {
+   *   console.log('My custom message from microfrontend', event.detail.data);
+   * }
+   *
+   * Compound Container Scenario
+   *
+   * // Sending a message from child compound microfrontend (secondChild.js) to its parent (main.html) and siblings (firstChild.js) through the event bus
+   *
+   *
+   * // secondChild.js
+   * // Set the custom event name = sendInput
+   * this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own message' }));
+   *
+   * // main.html
+   * myContainer.addEventListener('custom-message', event => {
+   *   console.log('My custom message from microfrontend', event.detail.data);
+   * }
+   *
+   * // Note eventListeners.name must match CustomEvent name above
+   * // eventListeners.source = input1 = id of sibling.js, which is where the message being sent from
+   * compoundConfig = {
+   *  ...
+   *  children: [
+   *   {
+   *     viewUrl: 'firstChild.js'
+   *     ...
+   *     eventListeners: [
+   *           {
+   *             source: 'input1',
+   *             name: 'sendInput',
+   *             action: 'update',
+   *             dataConverter: data => {
+   *               console.log(
+   *                 'dataConverter(): Received Custom Message from "input1" MF ' + data
+   *               );
+   *               return 'new text: ' + data;
+   *             }
+   *           }
+   *      ]
+   *   },
+   *   {
+   *     viewUrl: 'secondChild.js',
+   *     id: 'input1',
+   *   }
+   *
+   */
   publishEvent: (event: Event) => void;
   /**
    * Sets node parameters in Luigi Core. The parameters will be added to the URL.

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

@@ -132,5 +132,26 @@ describe('Compound Container Tests', () => {
 
       cy.get('#defer-init-flag').should('exist');
     });
+
+    it('LuigiClient API publishEvent', () => {
+      cy.on('window:alert', stub);
+
+      // Set up a spy on console.log
+      cy.window().then(win => {
+        cy.spy(win.console, 'log').as('consoleLogSpy');
+      });
+
+      cy.get(containerSelector)
+        .shadow()
+        .contains('Publish event')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith('sendInput');
+          cy.get('@consoleLogSpy').should(
+            'be.calledWith',
+            'dataConverter(): Received Custom Message from "input1" MF My own event data'
+          );
+        });
+    });
   });
 });

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

@@ -137,12 +137,23 @@ describe('Web Container Test', () => {
         .find('#customMessageDiv')
         .should('have.text', 'Received Custom Message: ');
 
-      cy.get('#sendCustomMessageBtn')
-        .click()
+      cy.get('#sendCustomMessageBtn').click();
       cy.get(containerSelector)
         .shadow()
         .find('#customMessageDiv')
         .should('have.text', 'Received Custom Message: cool custom Message');
+    });
+
+    it('receive custom message from WC', () => {
+      cy.on('window:alert', stub);
+
+      cy.get('[data-test-id="luigi-client-api-test-01"]')
+        .shadow()
+        .contains('Publish event')
+        .click()
+        .then(() => {
+          expect(stub.getCall(0)).to.be.calledWith('My Custom Message from Microfrontend');
         });
+    });
   });
 });

container/src/services/webcomponents.service.ts

@@ -277,6 +277,7 @@ export class WebComponentService {
       },
       publishEvent: ev => {
         if (eventBusElement && eventBusElement.eventBus) {
+          // compound component use case only
           eventBusElement.eventBus.onPublishEvent(ev, nodeId, wc_id);
         }
         const payload = {

container/test-app/compound/compoundClientAPI.html

@@ -58,9 +58,11 @@ <h3>
       import MFEventID from '../bundle.js';
 
       const compoundContainer = document.getElementById('dashboard');
+
       compoundContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, e => {
-        console.log('Publish Event', e.detail);
+        console.log('CUSTOM_MESSAGE Listener picked up: ', e.detail);
       });
+
       compoundContainer.compoundConfig = {
         renderer: {
           use: 'grid',
@@ -99,6 +101,9 @@ <h3>
                 name: 'sendInput',
                 action: 'update',
                 dataConverter: data => {
+                  console.log(
+                    'dataConverter(): Received Custom Message from "input1" MF ' + data
+                  );
                   return 'new text: ' + data;
                 }
               }
@@ -164,7 +169,6 @@ <h3>
         }
       );
       compoundContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, event => {
-        console.log('Custom Event', event);
         if (event.detail.id !== 'timer') {
           alert(event.detail.id);
         }

container/test-app/compound/helloWorldWC.js

@@ -14,7 +14,7 @@ export default class extends HTMLElement {
     templateBtn.innerHTML = '<button id="aButton">Click me!</button>';
 
     const templateBtn2 = document.createElement('template');
-    templateBtn2.innerHTML = '<button class="button2">Publish event</button>';
+    templateBtn2.innerHTML = '<button id="publishEvent">Publish event</button>';
 
     const addNodeParamsBtn = document.createElement('template');
     addNodeParamsBtn.innerHTML = '<button id="addNodeParams">add node params</button>';
@@ -128,20 +128,22 @@ export default class extends HTMLElement {
         });
       }
     });
-    this._shadowRoot.querySelector('.button2').addEventListener('click', () => {
+
+    this.$publishEventBtn = this._shadowRoot.querySelector('#publishEvent');
+    this.$publishEventBtn.addEventListener('click', () => {
       if (this.LuigiClient) {
-        this.LuigiClient.publishEvent(new CustomEvent('btnClick'));
+        this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own event data' }));
       }
     });
 
-    this.$button2 = this._shadowRoot.querySelector('#addNodeParams');
-    this.$button2.addEventListener('click', () => {
+    this.$addNodeParamsBtn = this._shadowRoot.querySelector('#addNodeParams');
+    this.$addNodeParamsBtn.addEventListener('click', () => {
       if (this.LuigiClient) {
         this.LuigiClient.addNodeParams({ Luigi: 'rocks' }, true);
       }
     });
-    this.$button3 = this._shadowRoot.querySelector('#getNodeParams');
-    this.$button3.addEventListener('click', () => {
+    this.$getNodeParamsBtn = this._shadowRoot.querySelector('#getNodeParams');
+    this.$getNodeParamsBtn.addEventListener('click', () => {
       if (this.LuigiClient) {
         let nodeParams = this.LuigiClient.getNodeParams(false);
         this.LuigiClient.uxManager().showAlert({

container/test-app/wc/clientAPI.html

@@ -10,7 +10,9 @@ <h3>
       component based microfrontend
     </h3>
     <button id="luigi-update-context" type="button">Update context</button>
-    <button id="sendCustomMessageBtn" style="margin: 25px 0 15px">sendCustomMessage</button>
+    <button id="sendCustomMessageBtn" style="margin: 25px 0 15px">
+      sendCustomMessage
+    </button>
 
     <div style="height: fit-content;">
       <div style="border: 1px solid blue">
@@ -49,7 +51,7 @@ <h3>
           defer-init="true"
         ></luigi-container>
       </div>
-      
+
       <!-- Used for testing dynamic compound container creation -->
       <div class="content"></div>
 
@@ -70,10 +72,14 @@ <h3>
         deferInitContainer.init();
       });
       // document.querySelector('luigi-container');
-      const container = document.querySelector('[data-test-id="luigi-client-api-test-01"]')
+      const container = document.querySelector(
+        '[data-test-id="luigi-client-api-test-01"]'
+      );
       const sendCustomMsgBtn = document.getElementById('sendCustomMessageBtn');
       sendCustomMsgBtn.addEventListener('click', () => {
-        container.sendCustomMessage('custom-message-id', {dataToSend: 'cool custom Message'});
+        container.sendCustomMessage('custom-message-id', {
+          dataToSend: 'cool custom Message'
+        });
       });
 
       [...document.querySelectorAll('luigi-container')].forEach(luigiContainer => {
@@ -96,9 +102,8 @@ <h3>
           }
         );
         luigiContainer.addEventListener(MFEventID.CUSTOM_MESSAGE, event => {
-          console.log('Custom Event', event);
           if (event.detail.id !== 'timer') {
-            alert(event.detail.id);
+            alert(event.detail.data);
           }
         });
 

container/test-app/wc/helloWorldWC.js

@@ -14,7 +14,7 @@ export default class extends HTMLElement {
     templateBtn.innerHTML = '<button id="aButton">Click me!</button>';
 
     const templateBtn2 = document.createElement('template');
-    templateBtn2.innerHTML = '<button class="button2">Publish event</button>';
+    templateBtn2.innerHTML = '<button id="publishEvent">Publish event</button>';
 
     const addNodeParamsBtn = document.createElement('template');
     addNodeParamsBtn.innerHTML = '<button id="addNodeParams">add node params</button>';
@@ -90,7 +90,6 @@ export default class extends HTMLElement {
 
     const customMessageDiv = document.createElement('template');
     customMessageDiv.innerHTML = '<div id="customMessageDiv">Received Custom Message: </div>';
-
 
     this._shadowRoot = this.attachShadow({
       mode: 'open',
@@ -141,20 +140,21 @@ export default class extends HTMLElement {
         });
       }
     });
-    this._shadowRoot.querySelector('.button2').addEventListener('click', () => {
+    this._shadowRoot.querySelector('#publishEvent').addEventListener('click', () => {
       if (this.LuigiClient) {
-        this.LuigiClient.publishEvent(new CustomEvent('btnClick'));
+        // send a custom event (similar to sendCustomMessage)
+        this.LuigiClient.publishEvent(new CustomEvent('sendMSG', { detail: 'My Custom Message from Microfrontend' }));
       }
     });
 
-    this.$button2 = this._shadowRoot.querySelector('#addNodeParams');
-    this.$button2.addEventListener('click', () => {
+    this.$addNodeParamsBtn = this._shadowRoot.querySelector('#addNodeParams');
+    this.$addNodeParamsBtn.addEventListener('click', () => {
       if (this.LuigiClient) {
         this.LuigiClient.addNodeParams({ Luigi: 'rocks' }, true);
       }
     });
-    this.$button3 = this._shadowRoot.querySelector('#getNodeParams');
-    this.$button3.addEventListener('click', () => {
+    this.$getNodeParamsBtn = this._shadowRoot.querySelector('#getNodeParams');
+    this.$getNodeParamsBtn.addEventListener('click', () => {
       if (this.LuigiClient) {
         let nodeParams = this.LuigiClient.getNodeParams(false);
         this.LuigiClient.uxManager().showAlert({
@@ -313,13 +313,12 @@ export default class extends HTMLElement {
       }
     });
 
-    this.addEventListener('custom-message-id', (event) => {
-      console.log('custom message received: ', event.detail)
+    this.addEventListener('custom-message-id', event => {
+      console.log('custom message received: ', event.detail);
       const customMessageDiv = this._shadowRoot.querySelector('#customMessageDiv');
       customMessageDiv.textContent = `Received Custom Message: ${event.detail.dataToSend}`;
-      customMessageDiv.style = "color: red;";
-    })
-
+      customMessageDiv.style = 'color: red;';
+    });
   }
 
   get context() {