@luigi-project/testing-utilities 2.13.1-dev.202406240829 → 2.13.1-dev.202406260026

package/README.md

@@ -3,16 +3,14 @@
 The [Luigi Testing Utilities](https://github.com/SAP/luigi/tree/main/client-frameworks-support/testing-utilities) are a set of auxiliary functions used to enhance the user experience while testing Luigi-based micro frontends. The functions abstract away Luigi-specific logic from the tester so that it is easier for them to mock and assert Luigi functionality.
 
 ## LuigiMockUtil
-This class contains certain utility helper functions needed when writing e2e tests with different test frameworks. You can simply import this module into you project and then use an instance of it to test micro frontend functionality.
+Since version 2.9.0 this class contains certain utility helper functions needed when writing e2e tests with Cypress or Protractor. You can simply import this module into you project and then use an instance of it to test micro frontend functionality.
 Before version 2.9.0 this class could only be used for [protractor-based](https://www.npmjs.com/package/protractor) e2e tests.
-Since version 2.9.0 this class supports both Cypress and Protractor.
-Since version 2.14.0 this class supports also Nightwatch, WebdriverIO and Puppeteer.
 
 ## How to use the library
 
 **Prerequisites:**
 
-_In order to use this utility library, you need to import LuigiMockModule into your Angular application's entry point - more details [here](https://docs.luigi-project.io/docs/framework-support-libraries/?section=luigicontextservice). You also have to install [Cypress](https://www.npmjs.com/package/cypress) or [Nightwatch](https://www.npmjs.com/package/nightwatch) or [WebdriverIO](https://www.npmjs.com/package/webdriverio) or [Puppeteer](https://www.npmjs.com/package/puppeteer) or [Protractor](https://www.npmjs.com/package/protractor) locally as a dev dependency for your project. Bear in mind Protractor is deprecated in Angular since version 15._
+_In order to use this utility library, you need to import LuigiMockModule into your Angular application's entry point. See more [here](https://docs.luigi-project.io/docs/framework-support-libraries/?section=luigicontextservice). You also have to install [Cypress](https://www.npmjs.com/package/cypress) or [Protractor](https://www.npmjs.com/package/protractor) locally as a dev dependency for your project. Bear in mind Protractor is deprecated in Angular since version 15._
 
 
 1. Import the library in the `package.json`:
@@ -22,14 +20,14 @@ npm install @luigi-project/testing-utilities -s
 
 2. Once the library is imported and saved in your Angular project, you can now import the module `LuigiMockUtil` into your test:
 ```javascript
-import { LuigiMockUtil } from '@luigi-project/testing-utilities';
+import { LuigiMockUtil } from "@luigi-project/testing-utilities";
 ```
 
 ### Example how to use the library with Protractor
 
 ```javascript
 import { browser } from 'protractor'; // <-- target e2e testing library
-import { LuigiMockUtil } from '@luigi-project/testing-utilities';
+import { LuigiMockUtil } from "@luigi-project/testing-utilities";
 
 describe('Another test using protractor', () => {
   let luigiMockUtil: LuigiMockUtil;
@@ -50,7 +48,7 @@ describe('Another test using protractor', () => {
 ### Example how to use the library with Cypress
 
 ```javascript
-import { LuigiMockUtil } from '@luigi-project/testing-utilities';
+import { LuigiMockUtil } from "@luigi-project/testing-utilities";
 
 describe('Another test using cypress', () => {
   let luigiMockUtil: LuigiMockUtil;
@@ -97,154 +95,6 @@ describe('Another test using cypress', () => {
 });
 ```
 
-### Example how to use the library with Nightwatch
-
-```javascript
-import { browser } from 'nightwatch'; // <-- target e2e testing library
-import { LuigiMockUtil } from '@luigi-project/testing-utilities';
-
-describe('Another test using nightwatch', function () {
-  const luigiMockUtil: LuigiMockUtil = new LuigiMockUtil(browser);
-
-  before((browser) => browser.navigateTo('http://localhost:4200'));
-
-  it('should mock path exists', async () => {
-    // Be sure '.pathExists' element is present
-    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}}');
-      });
-    });
-  });
-
-  it('should mock context update', async () => {
-    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');
-
-      wrapper.to.be.present;
-      wrapper.text.to.contains('{"msg":"luigi.get-context","context":{"ctxKey":"ctxValue"}}');
-    });
-  });
-
-  after((browser) => browser.end());
-});
-```
-
-### Example how to use the library with WebdriverIO
-
-```javascript
-import { browser } from '@wdio/globals'; // <-- target e2e testing library
-import { LuigiMockUtil } from '@luigi-project/testing-utilities';
-
-describe('Another test using webdriverio', () => {
-  const baseUrl = 'http://localhost:4200';
-  const defaultTimeout = { 'implicit': 500 };
-  let luigiMockUtil: LuigiMockUtil;
-
-  it('should mock path exists', async () => {
-    luigiMockUtil = new LuigiMockUtil(browser);
-
-    await browser.url(baseUrl);
-    // Be sure '.pathExists' element is present
-    await $('.pathExists').click().then(() => {
-        luigiMockUtil.mockPathExists('/test', false);
-    });
-    // Wait until session storage item is set
-    await browser.setTimeout(defaultTimeout);
-
-    const result = await browser.execute(() => window.sessionStorage.getItem('luigiMockData'));
-
-    await expect(result).toEqual('{"pathExists":{"/test":false}}');
-  });
-
-  it('should mock context update', async () => {
-    luigiMockUtil = new LuigiMockUtil(browser);
-
-    const context = {ctxKey: 'ctxValue'};
-
-    await browser.url(baseUrl);
-    await luigiMockUtil.mockContext(context);
-    // Wait until '#luigi-debug-vis-cnt' element is present
-    await browser.setTimeout(defaultTimeout);
-    await expect($('#luigi-debug-vis-cnt')).toHaveHTML(expect.stringContaining('{"msg":"luigi.get-context","context":{"ctxKey":"ctxValue"}}'));
-  });
-});
-```
-
-### Example how to use the library with Puppeteer
-
-```javascript
-import * as puppeteer from 'puppeteer'; // <-- target e2e testing library
-import { LuigiMockUtil } from '@luigi-project/testing-utilities';
-
-let luigiMockUtil: LuigiMockUtil;
-let browser: puppeteer.Browser;
-let page: puppeteer.Page;
-
-describe('Another test using puppeteer ->', () => {
-  beforeAll(async () => {
-    browser = await puppeteer.launch({
-      args: ['--no-sandbox'],
-      headless: false,
-      ignoreDefaultArgs: ['--disable-extensions'],
-    });
-  });
-
-  beforeEach(async () => {
-    page = await browser.newPage();
-    luigiMockUtil = new LuigiMockUtil(page);
-
-    await page?.goto('http://localhost:4200', {timeout: 0});
-  });
-
-  afterEach(async () => {
-    await page?.close();
-  });
-
-  afterAll(async () => {
-    await browser?.close();
-  });
-
-  it('should mock path exists', async () => {
-    // Be sure '.pathExists' element is present
-    await page.waitForSelector('.pathExists').then(async () => {
-      await expect(page.locator('.pathExists').wait()).toBeTruthy();
-
-      await page.click('.pathExists').then(async () => {
-        await luigiMockUtil.mockPathExists('/test', false);
-        // Wait until session storage item is set
-        await new Promise(resolve => setTimeout(resolve, 500));
-
-        const result = await page.evaluate(() => window.sessionStorage.getItem('luigiMockData'));
-
-        await expect(result).toContain('{"pathExists":{"/test":false}}');
-      });
-    });
-  });
-
-  it('should mock context update', async () => {
-    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 () => {
-      const result = await page
-        .locator('#luigi-debug-vis-cnt div:nth-child(1)')
-        .map(div => div.innerText)
-        .wait();
-
-      expect(result).toContain('{"msg":"luigi.get-context","context":{"ctxKey":"ctxValue"}}');
-    });
-  });
-});
-```
-
 #### 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()`

package/luigi-mock-util.d.ts

@@ -17,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: 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()`

package/luigi-mock-util.js

@@ -5,29 +5,21 @@ export class LuigiMockUtil {
          * @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' });
+            const context = mockContext;
+            const targetDocument = this.getGlobalThis();
+            const postMessageToLuigi = () => {
+                targetDocument.postMessage({ msg: 'luigi.get-context', context }, '*');
             };
             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;
+                if (this.browser.executeScript) {
+                    this.browser.executeScript(postMessageToLuigi, context);
+                }
+                else {
+                    this.browser(postMessageToLuigi);
                 }
             }
-            catch (error) {
-                console.debug('Failed to mock context: ', error);
+            catch (e) {
+                console.debug('Failed to mock context: ', e);
             }
         };
         /**
@@ -47,42 +39,32 @@ export class LuigiMockUtil {
          *
          */
         this.mockPathExists = (path, exists) => {
-            const window = this.getGlobalThis();
-            const mockContext = { path, exists };
+            const targetDocument = this.getGlobalThis();
             /**
             * 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.
+            * @returns {void}
             */
-            const setPathExistsMockData = (context) => {
-                window.sessionStorage.clear();
-                const pathExistsMockData = {
+            const setPathExistsMockData = () => {
+                targetDocument.sessionStorage.clear();
+                let pathExistsMockData = {
                     pathExists: {
-                        [context['path']]: context['exists']
+                        [path]: exists
                     }
                 };
-                window.sessionStorage.setItem('luigiMockData', JSON.stringify(pathExistsMockData));
-                return Object.assign(Object.assign({}, pathExistsMockData), { sessionItem: 'isStored' });
+                targetDocument.sessionStorage.setItem('luigiMockData', JSON.stringify(pathExistsMockData));
             };
             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;
+                if (this.browser.executeScript) {
+                    this.browser.executeScript(setPathExistsMockData, path, exists);
+                }
+                else {
+                    this.browser(setPathExistsMockData, path, exists);
                 }
             }
-            catch (error) {
-                console.debug('Failed to mock path exists: ', error);
+            catch (e) {
+                console.debug('Failed to mock path exists: ', e);
             }
         };
         this.messages = [];
@@ -101,27 +83,15 @@ export class LuigiMockUtil {
      *  @returns {Promise<void>} - A Promise that resolves when parsing is complete.
      */
     async parseLuigiMockedMessages() {
-        const window = this.getGlobalThis();
-        const getTextNodeValues = () => {
-            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;
         try {
-            switch (true) {
-                case 'evaluate' in this.browser:
-                    this.browser.evaluate(getTextNodeValues);
-                    break;
-                case 'execute' in this.browser:
-                    this.browser.execute(getTextNodeValues);
-                    break;
-                case 'executeScript' in this.browser:
-                    this.browser.executeScript(getTextNodeValues);
-                    break;
-                default:
-                    this.browser(getTextNodeValues);
-                    break;
-            }
+            const getTextNodeValues = () => {
+                const targetDocument = this.getGlobalThis();
+                const debugCtn = targetDocument.getElementById('luigi-debug-vis-cnt');
+                return Array.from((debugCtn === null || debugCtn === void 0 ? void 0 : debugCtn.childNodes) || []).map((item) => item.textContent || '');
+            };
+            const textElements = this.browser.executeScript
+                ? await this.browser.executeScript(getTextNodeValues)
+                : await this.browser(getTextNodeValues);
             this.messages = textElements
                 .map((item) => {
                 try {
@@ -133,8 +103,8 @@ export class LuigiMockUtil {
             })
                 .filter((item) => item !== undefined);
         }
-        catch (error) {
-            console.debug('Failed to parse luigi mocked messages: ', error);
+        catch (e) {
+            console.debug('Failed to parse luigi mocked messages: ', e);
         }
     }
     /**

package/package.json

@@ -19,7 +19,7 @@
     "microfrontends",
     "testing"
   ],
-  "version": "2.13.1-dev.202406240829",
+  "version": "2.13.1-dev.202406260026",
   "engines": {
     "node": ">=18"
   }