@luigi-project/testing-utilities 2.14.2-dev.202407240028 → 2.14.2-dev.202407260027

package/README.md

@@ -79,20 +79,19 @@ describe('Another test using cypress', () => {
     cy.get('.pathExists').click().then(() => {
       luigiMockUtil.mockPathExists('/test', false);
     });
-    cy.getAllSessionStorage().then((result: any) => {
-      expect(result).to.deep.equal({
-        "http://localhost:4200": {
-          luigiMockData: '{"pathExists":{"/test":false}}'
-        },
-      });
-    })
+    cy.getAllSessionStorage().then((storage: any) => {
+      const result = luigiMockUtil.getCleanSessionStorageData(storage);
+
+      expect(result).to.contains(luigiMockUtil.getMockedPathExistsOutput('/test', false));
+    });
   });
 
   it('should mock context update', () => {
+    const visualizationContainerId = luigiMockUtil.getVisualizationContainerId();
     const context = {ctxKey: 'ctxValue'};
 
     luigiMockUtil.mockContext(context);
-    cy.get('#luigi-debug-vis-cnt').contains('{"msg":"luigi.get-context","context":{"ctxKey":"ctxValue"}}');
+    cy.get('#' + visualizationContainerId).contains(luigiMockUtil.getMockedContextOutput(context));
   });
 });
 ```
@@ -113,22 +112,25 @@ describe('Another test using nightwatch', function () {
     await browser.expect.element('.pathExists').to.be.present;
     await browser.element('.pathExists').click().then(() => {
       luigiMockUtil.mockPathExists('/test', false);
-      browser.execute(() => window.sessionStorage.getItem('luigiMockData'), [], function (result) {
-        expect(result.value).to.contains('{"pathExists":{"/test":false}}');
+      browser.execute(() => window.sessionStorage, [], function (storage) {
+        const result = luigiMockUtil.getCleanSessionStorageData(storage.value);
+
+        expect(result).to.contains(luigiMockUtil.getMockedPathExistsOutput('/test', false));
       });
     });
   });
 
   it('should mock context update', async () => {
+    const visualizationContainerId = luigiMockUtil.getVisualizationContainerId();
     const context = {ctxKey: 'ctxValue'};
 
     await luigiMockUtil.mockContext(context);
-    // Wait until '#luigi-debug-vis-cnt' element is present
-    await browser.waitForElementPresent('#luigi-debug-vis-cnt', undefined, undefined, false, () => {
-      const wrapper = browser.expect.element('#luigi-debug-vis-cnt');
+    // Wait until Luigi visualization container is present
+    await browser.waitForElementPresent('#' + visualizationContainerId, undefined, undefined, false, () => {
+      const wrapper = browser.expect.element('#' + visualizationContainerId);
 
       wrapper.to.be.present;
-      wrapper.text.to.contains('{"msg":"luigi.get-context","context":{"ctxKey":"ctxValue"}}');
+      wrapper.text.to.contains(luigiMockUtil.getMockedContextOutput(context));
     });
   });
 
@@ -158,21 +160,23 @@ describe('Another test using webdriverio', () => {
     // Wait until session storage item is set
     await browser.setTimeout(defaultTimeout);
 
-    const result = await browser.execute(() => window.sessionStorage.getItem('luigiMockData'));
+    const storage = await browser.execute(() => window.sessionStorage);
+    const result = await luigiMockUtil.getCleanSessionStorageData(storage);
 
-    await expect(result).toEqual('{"pathExists":{"/test":false}}');
+    await expect(result).toContain(luigiMockUtil.getMockedPathExistsOutput('/test', false));
   });
 
   it('should mock context update', async () => {
     luigiMockUtil = new LuigiMockUtil(browser);
 
+    const visualizationContainerId = luigiMockUtil.getVisualizationContainerId();
     const context = {ctxKey: 'ctxValue'};
 
     await browser.url(baseUrl);
     await luigiMockUtil.mockContext(context);
-    // Wait until '#luigi-debug-vis-cnt' element is present
+    // Wait until Luigi visualization container is present
     await browser.setTimeout(defaultTimeout);
-    await expect($('#luigi-debug-vis-cnt')).toHaveHTML(expect.stringContaining('{"msg":"luigi.get-context","context":{"ctxKey":"ctxValue"}}'));
+    await expect($('#' + visualizationContainerId)).toHaveHTML(expect.stringContaining(luigiMockUtil.getMockedContextOutput(context)));
   });
 });
 ```
@@ -221,25 +225,27 @@ describe('Another test using puppeteer ->', () => {
         // Wait until session storage item is set
         await new Promise(resolve => setTimeout(resolve, 500));
 
-        const result = await page.evaluate(() => window.sessionStorage.getItem('luigiMockData'));
+        const storage = await page.evaluate(() => JSON.stringify(window.sessionStorage));
+        const result = await luigiMockUtil.getCleanSessionStorageData(storage);
 
-        await expect(result).toContain('{"pathExists":{"/test":false}}');
+        await expect(result).toContain(luigiMockUtil.getMockedPathExistsOutput('/test', false));
       });
     });
   });
 
   it('should mock context update', async () => {
+    const visualizationContainerId = luigiMockUtil.getVisualizationContainerId();
     const context = {ctxKey: 'ctxValue'};
 
     await luigiMockUtil.mockContext(context);
-    // Wait until '#luigi-debug-vis-cnt' element is present
-    await page.waitForSelector('#luigi-debug-vis-cnt').then(async () => {
+    // Wait until Luigi visualization container is present
+    await page.waitForSelector('#' + visualizationContainerId).then(async () => {
       const result = await page
-        .locator('#luigi-debug-vis-cnt div:nth-child(1)')
+        .locator(`#${visualizationContainerId} div:nth-child(1)`)
         .map(div => div.innerText)
         .wait();
 
-      expect(result).toContain('{"msg":"luigi.get-context","context":{"ctxKey":"ctxValue"}}');
+      expect(result).toContain(luigiMockUtil.getMockedContextOutput(context));
     });
   });
 });
@@ -247,7 +253,11 @@ describe('Another test using puppeteer ->', () => {
 
 #### Functions provided
 - **mockContext**: Mocks the context by sending Luigi context messages with the desired mocked context as parameter.
-- **mockPathExists**: This method serves as a mock for the Luigi Client `pathExists()` function. It is used in e2e tests when component being tested utilizes a call to `LuigiClient.linkManager().pathExists()`
+- **mockPathExists**: This method serves as a mock for the Luigi Client `pathExists()` function. It is used in e2e tests when component being tested utilizes a call to `LuigiClient.linkManager().pathExists()`.
 - **modalOpenedWithTitle**: Checks on the printed DOM Luigi message responses for a modal with given title being opened. In such a case, a message would be printed containing a `modal.title`. Returns `false` if such element was not found.
-- **getMSG**: Return list of messages, representing message elements added in the DOM for testing.
-- **parseLuigiMockedMessages**: Parses the elements added by LuigiMockModule into the DOM and assigns them to the local messages variable
+- **getMockedContextOutput**: Returns output of 'mockContext' method with given data.
+- **getMockedPathExistsOutput**: Returns output of 'mockPathExists' method with given arguments.
+- **getCleanSessionStorageData**: Returns parsed session storage data used for testing.
+- **getVisualizationContainerId**: Returns ID of Luigi visualization container added in the DOM for testing.
+- **getMSG**: Returns list of messages, representing message elements added in the DOM for testing.
+- **parseLuigiMockedMessages**: Parses the elements added by LuigiMockModule into the DOM and assigns them to the local messages variable.

package/luigi-mock-engine.js

@@ -135,17 +135,18 @@ export class LuigiMockEngine {
      * which holds data that is useful for e2e testing.
      */
     static visualize(data) {
-        let luigiVisualizationContainer = document.querySelector('#luigi-debug-vis-cnt');
+        const visualizationContainerId = 'luigi-debug-vis-cnt';
+        const dataWrapper = document.createElement('div');
+        let luigiVisualizationContainer = document.querySelector('#' + visualizationContainerId);
         // Construct element structure if not already constructed
         if (!luigiVisualizationContainer) {
             luigiVisualizationContainer = document.createElement('div');
-            luigiVisualizationContainer.setAttribute('id', 'luigi-debug-vis-cnt');
+            luigiVisualizationContainer.setAttribute('id', visualizationContainerId);
             // Hide the added DOM element to avoid interferring/overlapping with other elements during testing.
             luigiVisualizationContainer.setAttribute('style', 'display:none');
             document.body.appendChild(luigiVisualizationContainer);
         }
-        const line = document.createElement('div');
-        line.textContent = data;
-        luigiVisualizationContainer.appendChild(line);
+        dataWrapper.textContent = data;
+        luigiVisualizationContainer.appendChild(dataWrapper);
     }
 }

package/luigi-mock-util.d.ts

@@ -1,13 +1,10 @@
 export declare class LuigiMockUtil {
+    private sessionStorageItemName;
+    private visualizationContainerId;
     private messages;
     private browser;
     private win;
     constructor(browser: any, win?: any);
-    /**
-     * Returns the global window object.
-     * @returns the glboal win object
-     */
-    private getGlobalThis;
     /**
      * Parses the elements added by LuigiMockModule into the DOM and assigns them to the local this.messages variable
      *  @returns {Promise<void>} - A Promise that resolves when parsing is complete.
@@ -17,7 +14,7 @@ export declare class LuigiMockUtil {
      * Mocks the context by sending luigi context messages with the desired mocked context as parameter.
      * @param mockContext an object representing the context to be mocked
      */
-    mockContext: (mockContext: Record<string, any>) => void;
+    mockContext(mockContext: Record<string, any>): void;
     /**
      * This method serves as a mock for the luigi client pathExists() function.
      * It is used in e2e tests when component being tested utilizes a call to `LuigiClient.linkManager().pathExists()`
@@ -34,7 +31,7 @@ export declare class LuigiMockUtil {
      * await mockPathExists('pathToCheck', false);
      *
      */
-    mockPathExists: (path: string, exists: boolean) => void;
+    mockPathExists(path: string, exists: boolean): void;
     /**
      * Checks on the printed DOM Luigi message responses for a modal with given title
      * having been opened. In such a case a message would be printed containing a modal.title.
@@ -63,7 +60,37 @@ export declare class LuigiMockUtil {
      */
     modalOpenedWithTitle(title: string): Promise<boolean>;
     /**
-     * Return list of messages, representing message elements added in the DOM for testing.
+     * Returns output of 'mockContext' method with given data.
+     * @param {Object} context - Object representing the context to be mocked.
+     * @returns {string} - Stringified output of 'mockContext' method.
+     */
+    getMockedContextOutput(context: Record<string, any>): string;
+    /**
+     * Returns output of 'mockPathExists' method with given arguments.
+     * @param {string} path - The path for which mock data is to be set.
+     * @param {boolean} exists - Boolean indicating whether the path exists.
+     * @returns {string} - Stringified output of 'mockPathExists' method.
+     */
+    getMockedPathExistsOutput(path: string, exists: boolean): string;
+    /**
+     * Returns parsed session storage data used for testing.
+     * @param {Object} data - Object or string representing the data to be cleaned.
+     * @returns {string} - Stringified session storage data.
+     */
+    getCleanSessionStorageData(data: any): string;
+    /**
+     * Returns ID of Luigi visualization container added in the DOM for testing.
+     * @returns {string} - ID of Luigi visualization container.
+     */
+    getVisualizationContainerId(): string;
+    /**
+     * Returns list of messages, representing message elements added in the DOM for testing.
+     * @returns {Array} - Array of message elements.
      */
     getMSG(): any[];
+    /**
+     * Returns the global window object.
+     * @returns the global win object
+     */
+    private getGlobalThis;
 }

package/luigi-mock-util.js

@@ -1,101 +1,11 @@
 export class LuigiMockUtil {
     constructor(browser, win) {
-        /**
-         * Mocks the context by sending luigi context messages with the desired mocked context as parameter.
-         * @param mockContext an object representing the context to be mocked
-         */
-        this.mockContext = (mockContext) => {
-            const window = this.getGlobalThis();
-            const postMessageToLuigi = (context) => {
-                window.postMessage({ msg: 'luigi.get-context', context }, '*');
-                return Object.assign(Object.assign({}, context), { windowMessage: 'isPosted' });
-            };
-            try {
-                switch (true) {
-                    case 'evaluate' in this.browser:
-                        this.browser.evaluate(postMessageToLuigi, mockContext);
-                        break;
-                    case 'execute' in this.browser:
-                        this.browser.execute(postMessageToLuigi, mockContext);
-                        break;
-                    case 'executeScript' in this.browser:
-                        this.browser.executeScript(postMessageToLuigi, mockContext);
-                        break;
-                    default:
-                        this.browser(postMessageToLuigi.bind(this, mockContext));
-                        break;
-                }
-            }
-            catch (error) {
-                console.debug('Failed to mock context: ', error);
-            }
-        };
-        /**
-         * This method serves as a mock for the luigi client pathExists() function.
-         * It is used in e2e tests when component being tested utilizes a call to `LuigiClient.linkManager().pathExists()`
-         *
-         * @param path the path to check
-         * @param exists mocked boolean representing if path should exist or not
-         * @example For the following call in your angular component:
-         * `LuigiClient.linkManager().pathExists('pathToCheck')`
-         *
-         * // You need to call the following to mock pathExists() returning `true` for a given 'pathToCheck':
-         * await mockPathExists('pathToCheck', true);
-         *
-         * // You need to call the following to mock pathExists() returning `false` for a given 'pathToCheck':
-         * await mockPathExists('pathToCheck', false);
-         *
-         */
-        this.mockPathExists = (path, exists) => {
-            const window = this.getGlobalThis();
-            const mockContext = { path, exists };
-            /**
-             * Sets the path exists mock data in sessionStorage.
-             * @param {string} path - The path for which mock data is to be set.
-             * @param {boolean} exists - Boolean indicating whether the path exists.
-             * @returns {Object} - Object indicating session storage item.
-             */
-            const setPathExistsMockData = (context) => {
-                window.sessionStorage.clear();
-                const pathExistsMockData = {
-                    pathExists: {
-                        [context['path']]: context['exists']
-                    }
-                };
-                window.sessionStorage.setItem('luigiMockData', JSON.stringify(pathExistsMockData));
-                return Object.assign(Object.assign({}, pathExistsMockData), { sessionItem: 'isStored' });
-            };
-            try {
-                switch (true) {
-                    case 'evaluate' in this.browser:
-                        this.browser.evaluate(setPathExistsMockData, mockContext);
-                        break;
-                    case 'execute' in this.browser:
-                        this.browser.execute(setPathExistsMockData, mockContext);
-                        break;
-                    case 'executeScript' in this.browser:
-                        this.browser.executeScript(setPathExistsMockData, mockContext);
-                        break;
-                    default:
-                        this.browser(setPathExistsMockData.bind(this, mockContext));
-                        break;
-                }
-            }
-            catch (error) {
-                console.debug('Failed to mock path exists: ', error);
-            }
-        };
+        this.sessionStorageItemName = 'luigiMockData';
+        this.visualizationContainerId = 'luigi-debug-vis-cnt';
         this.messages = [];
         this.browser = browser;
         this.win = win;
     }
-    /**
-     * Returns the global window object.
-     * @returns the glboal win object
-     */
-    getGlobalThis() {
-        return this.win || globalThis;
-    }
     /**
      * Parses the elements added by LuigiMockModule into the DOM and assigns them to the local this.messages variable
      *  @returns {Promise<void>} - A Promise that resolves when parsing is complete.
@@ -103,7 +13,7 @@ export class LuigiMockUtil {
     async parseLuigiMockedMessages() {
         const window = this.getGlobalThis();
         const getTextNodeValues = () => {
-            const debugCtn = window.getElementById('luigi-debug-vis-cnt');
+            const debugCtn = window.getElementById(this.visualizationContainerId);
             return Array.from((debugCtn === null || debugCtn === void 0 ? void 0 : debugCtn.childNodes) || []).map((item) => item.textContent || '');
         };
         let textElements;
@@ -137,6 +47,91 @@ export class LuigiMockUtil {
             console.debug('Failed to parse luigi mocked messages: ', error);
         }
     }
+    /**
+     * Mocks the context by sending luigi context messages with the desired mocked context as parameter.
+     * @param mockContext an object representing the context to be mocked
+     */
+    mockContext(mockContext) {
+        const window = this.getGlobalThis();
+        const postMessageToLuigi = (context) => {
+            window.postMessage({ msg: 'luigi.get-context', context }, '*');
+            return Object.assign(Object.assign({}, context), { windowMessage: 'isPosted' });
+        };
+        try {
+            switch (true) {
+                case 'evaluate' in this.browser:
+                    this.browser.evaluate(postMessageToLuigi, mockContext);
+                    break;
+                case 'execute' in this.browser:
+                    this.browser.execute(postMessageToLuigi, mockContext);
+                    break;
+                case 'executeScript' in this.browser:
+                    this.browser.executeScript(postMessageToLuigi, mockContext);
+                    break;
+                default:
+                    this.browser(postMessageToLuigi.bind(this, mockContext));
+                    break;
+            }
+        }
+        catch (error) {
+            console.debug('Failed to mock context: ', error);
+        }
+    }
+    /**
+     * This method serves as a mock for the luigi client pathExists() function.
+     * It is used in e2e tests when component being tested utilizes a call to `LuigiClient.linkManager().pathExists()`
+     *
+     * @param path the path to check
+     * @param exists mocked boolean representing if path should exist or not
+     * @example For the following call in your angular component:
+     * `LuigiClient.linkManager().pathExists('pathToCheck')`
+     *
+     * // You need to call the following to mock pathExists() returning `true` for a given 'pathToCheck':
+     * await mockPathExists('pathToCheck', true);
+     *
+     * // You need to call the following to mock pathExists() returning `false` for a given 'pathToCheck':
+     * await mockPathExists('pathToCheck', false);
+     *
+     */
+    mockPathExists(path, exists) {
+        const window = this.getGlobalThis();
+        const mockContext = { path, exists };
+        /**
+         * Sets the path exists mock data in sessionStorage.
+         * @param {string} path - The path for which mock data is to be set.
+         * @param {boolean} exists - Boolean indicating whether the path exists.
+         * @returns {Object} - Object indicating session storage item.
+         */
+        const setPathExistsMockData = (context) => {
+            window.sessionStorage.clear();
+            const pathExistsMockData = {
+                pathExists: {
+                    [context['path']]: context['exists']
+                }
+            };
+            window.sessionStorage.setItem(this.sessionStorageItemName, JSON.stringify(pathExistsMockData));
+            return Object.assign(Object.assign({}, pathExistsMockData), { sessionItem: 'isStored' });
+        };
+        try {
+            switch (true) {
+                case 'evaluate' in this.browser:
+                    this.browser.evaluate(setPathExistsMockData, mockContext);
+                    break;
+                case 'execute' in this.browser:
+                    this.browser.execute(setPathExistsMockData, mockContext);
+                    break;
+                case 'executeScript' in this.browser:
+                    this.browser.executeScript(setPathExistsMockData, mockContext);
+                    break;
+                default:
+                    this.browser(setPathExistsMockData.bind(this, mockContext));
+                    break;
+            }
+        }
+        catch (error) {
+            console.debug('Failed to mock path exists: ', error);
+        }
+    }
     /**
      * Checks on the printed DOM Luigi message responses for a modal with given title
      * having been opened. In such a case a message would be printed containing a modal.title.
@@ -186,9 +181,55 @@ export class LuigiMockUtil {
         return false;
     }
     /**
-     * Return list of messages, representing message elements added in the DOM for testing.
+     * Returns output of 'mockContext' method with given data.
+     * @param {Object} context - Object representing the context to be mocked.
+     * @returns {string} - Stringified output of 'mockContext' method.
+     */
+    getMockedContextOutput(context) {
+        return `{"msg":"luigi.get-context","context":${JSON.stringify(context)}}`;
+    }
+    /**
+     * Returns output of 'mockPathExists' method with given arguments.
+     * @param {string} path - The path for which mock data is to be set.
+     * @param {boolean} exists - Boolean indicating whether the path exists.
+     * @returns {string} - Stringified output of 'mockPathExists' method.
+     */
+    getMockedPathExistsOutput(path, exists) {
+        return JSON.stringify({ [this.sessionStorageItemName]: { pathExists: { [path]: exists } } }).slice(1, -1);
+    }
+    /**
+     * Returns parsed session storage data used for testing.
+     * @param {Object} data - Object or string representing the data to be cleaned.
+     * @returns {string} - Stringified session storage data.
+     */
+    getCleanSessionStorageData(data) {
+        if (typeof data === 'string') {
+            data = JSON.parse(data);
+        }
+        return JSON.stringify(data)
+            .replace(/\\/g, '')
+            .replace(/"{/g, '{')
+            .replace(/}"/g, '}');
+    }
+    /**
+     * Returns ID of Luigi visualization container added in the DOM for testing.
+     * @returns {string} - ID of Luigi visualization container.
+     */
+    getVisualizationContainerId() {
+        return this.visualizationContainerId;
+    }
+    /**
+     * Returns list of messages, representing message elements added in the DOM for testing.
+     * @returns {Array} - Array of message elements.
      */
     getMSG() {
         return this.messages;
     }
+    /**
+     * Returns the global window object.
+     * @returns the global win object
+     */
+    getGlobalThis() {
+        return this.win || globalThis;
+    }
 }

package/package.json

@@ -19,7 +19,7 @@
     "microfrontends",
     "testing"
   ],
-  "version": "2.14.2-dev.202407240028",
+  "version": "2.14.2-dev.202407260027",
   "engines": {
     "node": ">=18"
   }