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

package/README.md

@@ -79,19 +79,20 @@ describe('Another test using cypress', () => {
     cy.get('.pathExists').click().then(() => {
       luigiMockUtil.mockPathExists('/test', false);
     });
-    cy.getAllSessionStorage().then((storage: any) => {
-      const result = luigiMockUtil.getCleanSessionStorageData(storage);
-
-      expect(result).to.contains(luigiMockUtil.getMockedPathExistsOutput('/test', false));
-    });
+    cy.getAllSessionStorage().then((result: any) => {
+      expect(result).to.deep.equal({
+        "http://localhost:4200": {
+          luigiMockData: '{"pathExists":{"/test":false}}'
+        },
+      });
+    })
   });
 
   it('should mock context update', () => {
-    const visualizationContainerId = luigiMockUtil.getVisualizationContainerId();
     const context = {ctxKey: 'ctxValue'};
 
     luigiMockUtil.mockContext(context);
-    cy.get('#' + visualizationContainerId).contains(luigiMockUtil.getMockedContextOutput(context));
+    cy.get('#luigi-debug-vis-cnt').contains('{"msg":"luigi.get-context","context":{"ctxKey":"ctxValue"}}');
   });
 });
 ```
@@ -112,25 +113,22 @@ 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, [], function (storage) {
-        const result = luigiMockUtil.getCleanSessionStorageData(storage.value);
-
-        expect(result).to.contains(luigiMockUtil.getMockedPathExistsOutput('/test', false));
+      browser.execute(() => window.sessionStorage.getItem('luigiMockData'), [], function (result) {
+        expect(result.value).to.contains('{"pathExists":{"/test":false}}');
       });
     });
   });
 
   it('should mock context update', async () => {
-    const visualizationContainerId = luigiMockUtil.getVisualizationContainerId();
     const context = {ctxKey: 'ctxValue'};
 
     await luigiMockUtil.mockContext(context);
-    // Wait until Luigi visualization container is present
-    await browser.waitForElementPresent('#' + visualizationContainerId, undefined, undefined, false, () => {
-      const wrapper = browser.expect.element('#' + visualizationContainerId);
+    // 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');
 
       wrapper.to.be.present;
-      wrapper.text.to.contains(luigiMockUtil.getMockedContextOutput(context));
+      wrapper.text.to.contains('{"msg":"luigi.get-context","context":{"ctxKey":"ctxValue"}}');
     });
   });
 
@@ -160,23 +158,21 @@ describe('Another test using webdriverio', () => {
     // Wait until session storage item is set
     await browser.setTimeout(defaultTimeout);
 
-    const storage = await browser.execute(() => window.sessionStorage);
-    const result = await luigiMockUtil.getCleanSessionStorageData(storage);
+    const result = await browser.execute(() => window.sessionStorage.getItem('luigiMockData'));
 
-    await expect(result).toContain(luigiMockUtil.getMockedPathExistsOutput('/test', false));
+    await expect(result).toEqual('{"pathExists":{"/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 visualization container is present
+    // Wait until '#luigi-debug-vis-cnt' element is present
     await browser.setTimeout(defaultTimeout);
-    await expect($('#' + visualizationContainerId)).toHaveHTML(expect.stringContaining(luigiMockUtil.getMockedContextOutput(context)));
+    await expect($('#luigi-debug-vis-cnt')).toHaveHTML(expect.stringContaining('{"msg":"luigi.get-context","context":{"ctxKey":"ctxValue"}}'));
   });
 });
 ```
@@ -225,27 +221,25 @@ describe('Another test using puppeteer ->', () => {
         // Wait until session storage item is set
         await new Promise(resolve => setTimeout(resolve, 500));
 
-        const storage = await page.evaluate(() => JSON.stringify(window.sessionStorage));
-        const result = await luigiMockUtil.getCleanSessionStorageData(storage);
+        const result = await page.evaluate(() => window.sessionStorage.getItem('luigiMockData'));
 
-        await expect(result).toContain(luigiMockUtil.getMockedPathExistsOutput('/test', false));
+        await expect(result).toContain('{"pathExists":{"/test":false}}');
       });
     });
   });
 
   it('should mock context update', async () => {
-    const visualizationContainerId = luigiMockUtil.getVisualizationContainerId();
     const context = {ctxKey: 'ctxValue'};
 
     await luigiMockUtil.mockContext(context);
-    // Wait until Luigi visualization container is present
-    await page.waitForSelector('#' + visualizationContainerId).then(async () => {
+    // Wait until '#luigi-debug-vis-cnt' element is present
+    await page.waitForSelector('#luigi-debug-vis-cnt').then(async () => {
       const result = await page
-        .locator(`#${visualizationContainerId} div:nth-child(1)`)
+        .locator('#luigi-debug-vis-cnt div:nth-child(1)')
         .map(div => div.innerText)
         .wait();
 
-      expect(result).toContain(luigiMockUtil.getMockedContextOutput(context));
+      expect(result).toContain('{"msg":"luigi.get-context","context":{"ctxKey":"ctxValue"}}');
     });
   });
 });
@@ -253,11 +247,7 @@ 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.
-- **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.
+- **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

package/luigi-mock-engine.js

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

package/luigi-mock-util.d.ts

@@ -1,10 +1,13 @@
 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.
@@ -14,7 +17,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()`
@@ -31,7 +34,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.
@@ -60,28 +63,7 @@ export declare class LuigiMockUtil {
      */
     modalOpenedWithTitle(title: string): Promise<boolean>;
     /**
-     * Returns output of 'mockContext' method with given data.
-     */
-    getMockedContextOutput(context: Record<string, any>): string;
-    /**
-     * Returns output of 'mockPathExists' method with given arguments.
-     */
-    getMockedPathExistsOutput(path: string, exists: boolean): string;
-    /**
-     * Returns parsed session storage data used for testing.
-     */
-    getCleanSessionStorageData(data: any): string;
-    /**
-     * Returns ID of Luigi visualization container added in the DOM for testing.
-     */
-    getVisualizationContainerId(): string;
-    /**
-     * Returns list of messages, representing message elements added in the DOM for testing.
+     * Return list of messages, representing message elements added in the DOM for testing.
      */
     getMSG(): any[];
-    /**
-     * Returns the global window object.
-     * @returns the global win object
-     */
-    private getGlobalThis;
 }

package/luigi-mock-util.js

@@ -1,11 +1,101 @@
 export class LuigiMockUtil {
     constructor(browser, win) {
-        this.sessionStorageItemName = 'luigiMockData';
-        this.visualizationContainerId = 'luigi-debug-vis-cnt';
+        /**
+         * 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.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.
@@ -13,7 +103,7 @@ export class LuigiMockUtil {
     async parseLuigiMockedMessages() {
         const window = this.getGlobalThis();
         const getTextNodeValues = () => {
-            const debugCtn = window.getElementById(this.visualizationContainerId);
+            const debugCtn = window.getElementById('luigi-debug-vis-cnt');
             return Array.from((debugCtn === null || debugCtn === void 0 ? void 0 : debugCtn.childNodes) || []).map((item) => item.textContent || '');
         };
         let textElements;
@@ -47,91 +137,6 @@ 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.
@@ -181,46 +186,9 @@ export class LuigiMockUtil {
         return false;
     }
     /**
-     * Returns output of 'mockContext' method with given data.
-     */
-    getMockedContextOutput(context) {
-        return `{"msg":"luigi.get-context","context":${JSON.stringify(context)}}`;
-    }
-    /**
-     * Returns output of 'mockPathExists' method with given arguments.
-     */
-    getMockedPathExistsOutput(path, exists) {
-        return JSON.stringify({ [this.sessionStorageItemName]: { pathExists: { [path]: exists } } }).slice(1, -1);
-    }
-    /**
-     * Returns parsed session storage data used for testing.
-     */
-    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.
-     */
-    getVisualizationContainerId() {
-        return this.visualizationContainerId;
-    }
-    /**
-     * Returns list of messages, representing message elements added in the DOM for testing.
+     * Return list of messages, representing message elements added in the DOM for testing.
      */
     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.202407220726",
+  "version": "2.14.2-dev.202407240028",
   "engines": {
     "node": ">=18"
   }