Merge branch 'main' of https://github.com/SAP/luigi into 3791-switch-…

…client-code-from-js-to-ts

client-frameworks-support/testing-utilities/README.md

@@ -251,6 +251,50 @@ describe('Another test using puppeteer ->', () => {
 });
 ```
 
+### Example how to use the library with Playwright
+
+```javascript
+import { test, expect } from '@playwright/test'; // <-- target e2e testing library
+import { LuigiMockUtil } from '@luigi-project/testing-utilities';
+
+let luigiMockUtil: LuigiMockUtil;
+
+test.beforeEach(async ({ page }) => {
+  luigiMockUtil = new LuigiMockUtil(page);
+
+  await page.goto('http://localhost:4200');
+});
+
+test.afterEach(async ({ page }) => {
+  await page?.close();
+});
+
+test('should mock path exists', async ({ page }) => {
+  // Be sure '.pathExists' element is present
+  await page.locator('.pathExists').click().then(async () => {
+    await luigiMockUtil.mockPathExists('/test', false);
+    // 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);
+
+    await expect(result).toContain(luigiMockUtil.getMockedPathExistsOutput('/test', false));
+  });
+});
+
+test('should mock context update', async ({ page }) => {
+  const visualizationContainerId = luigiMockUtil.getVisualizationContainerId();
+  const context = {ctxKey: 'ctxValue'};
+
+  await luigiMockUtil.mockContext(context);
+
+  const container = page.locator(`#${visualizationContainerId} div:nth-child(1)`);
+
+  await expect(container).toHaveText(luigiMockUtil.getMockedContextOutput(context));
+});
+```
+
 #### 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()`.

client/src/lifecycleManager.ts

@@ -404,6 +404,7 @@ class LifecycleManager extends LuigiClientBase {
    * @param {string} id the id that was returned by the `addInitListener` function
    * @memberof Lifecycle
    * @since 0.6.2
+   * @example
    * LuigiClient.removeCustomMessageListener(customMsgId)
    */
   removeCustomMessageListener(id: string): boolean {
@@ -443,6 +444,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Returns a list of active feature toggles
    * @returns {Array} a list of feature toggle names
    * @memberof Lifecycle
@@ -455,6 +457,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sets node parameters in Luigi Core. The parameters will be added to the URL.
    * @param {Object} params
    * @param {boolean} keepBrowserHistory
@@ -473,6 +476,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Returns the node parameters of the active URL.
    * Node parameters are defined like URL query parameters but with a specific prefix allowing Luigi to pass them to the micro frontend view. The default prefix is **~** and you can use it in the following way: `https://my.luigi.app/home/products?~sort=asc&~page=3`.
    * <!-- add-attribute:class:warning -->
@@ -491,6 +495,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Returns the dynamic path parameters of the active URL.
    * Path parameters are defined by navigation nodes with a dynamic **pathSegment** value starting with **:**, such as **productId**.
    * All path parameters in the current navigation path (as defined by the active URL) are returned.
@@ -517,6 +522,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sends search query parameters to Luigi Core. The search parameters will be added to the URL if they are first allowed on a node level using {@link navigation-parameters-reference.md#clientpermissionsurlparameters clientPermissions.urlParameters}.
    * @param {Object} searchParams
    * @param {boolean} keepBrowserHistory
@@ -535,6 +541,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Returns the current client permissions as specified in the navigation node or an empty object. For details, see [Node parameters](navigation-parameters-reference.md).
    * @returns {Object} client permissions as specified in the navigation node
    * @memberof Lifecycle
@@ -575,6 +582,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Returns the current user settings based on the selected node.
    * @returns {Object} current user settings
    * @since 1.7.1
@@ -587,6 +595,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Returns the current anchor based on active URL.
    * @memberof Lifecycle
    * @since 1.21.0
@@ -599,6 +608,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sends anchor to Luigi Core. The anchor will be added to the URL.
    * @param {string} anchor
    * @since 1.21.0
@@ -614,6 +624,7 @@ class LifecycleManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * This function allows you to change node labels within the same {@link navigation-advanced.md#view-groups view group}, e.g. in your node config: `label: 'my Node {viewGroupData.vg1}'`.
    * @since 2.2.0
    * @param {Object} data a data object containing the view group name and desired label

client/src/linkManager.ts

@@ -54,6 +54,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Navigates to the given path in the application hosted by Luigi. It contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is the standard navigation.
    * @memberof linkManager
    * @param {string} path path to be navigated to
@@ -126,6 +127,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Updates path of the modalPathParam when internal navigation occurs.
    * @memberof linkManager
    * @param {string} path
@@ -154,6 +156,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Offers an alternative way of navigating with intents. This involves specifying a semanticSlug and an object containing
    * parameters.
    * This method internally generates a URL of the form `#?intent=<semantic object>-<action>?<param_name>=<param_value>` through the given
@@ -192,6 +195,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Opens a view in a modal. You can specify the modal's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty.  The default size of the modal is `l`, which means 80%. You can also use `m` (60%) and `s` (40%) to set the modal size. Optionally, use it in combination with any of the navigation functions.
    * @memberof linkManager
    * @param {string} path navigation path
@@ -234,7 +238,8 @@ class LinkManager extends LuigiClientBase {
     return modalPromise['promise'];
   }
 
-  /**
+ /**
+   * <!-- label-success: Web Component API  -->
    * Updates the current title and size of a modal. If `routing.showModalPathInUrl` is set to `true`, the URL will be updated with the modal settings data.
    * In addition, you can specify if a new history entry will be created with the updated URL.
    * @memberof linkManager
@@ -258,6 +263,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Opens a view in a split view. You can specify the split view's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty. The default size of the split view is `40`, which means 40% height of the split view.
    * @memberof linkManager
    * @param {string} path navigation path
@@ -278,6 +284,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Opens a view in a drawer. You can specify the size of the drawer, whether the drawer has a header, and whether a backdrop is active in the background. By default, the header is shown. The backdrop is not visible and has to be activated. The size of the drawer is set to `s` by default, which means 25% of the micro frontend size. You can also use `l`(75%), `m`(50%) or `xs`(15.5%). Optionally, use it in combination with any of the navigation functions.
    * @memberof linkManager
    * @param {string} path navigation path
@@ -296,6 +303,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sets the current navigation context to that of a specific parent node which has the {@link navigation-configuration.md navigationContext} field declared in the navigation configuration. This navigation context is then used by the `navigate` function.
    * @memberof linkManager
    * @param {string} navigationContext
@@ -339,6 +347,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sets the current navigation base to the parent node that is defined as virtualTree. This method works only when the currently active micro frontend is inside a virtualTree.
    * @memberof linkManager
    * @returns {linkManager} link manager instance
@@ -355,6 +364,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Enables navigating to sibling nodes without knowing the absolute path.
    * @memberof linkManager
    * @returns {linkManager} link manager instance
@@ -369,6 +379,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sends node parameters to the route. The parameters are used by the `navigate` function. Use it optionally in combination with any of the navigation functions and receive it as part of the context object in Luigi Client.
    * @memberof linkManager
    * @param {Object} nodeParams
@@ -388,6 +399,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Sets options to customise route changing behaviour. The parameters are used by the `navigate` function. Use it optionally in combination with any of the navigation functions and receive it as part of the context object in Luigi Client.
    * @memberof linkManager
    * @param {Object} options navigation options
@@ -416,6 +428,7 @@ class LinkManager extends LuigiClientBase {
 
   /** @lends linkManager */
   /**
+   * <!-- label-success: Web Component API  -->
    * Checks if the path you can navigate to exists in the main application. For example, you can use this helper method conditionally to display a DOM element like a button.
    * @memberof linkManager
    * @param {string} path path which existence you want to check
@@ -473,6 +486,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Checks if there is one or more preserved views. You can use it to show a **back** button.
    * @memberof linkManager
    * @returns {boolean} indicating if there is a preserved view you can return to
@@ -485,6 +499,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Discards the active view and navigates back to the last visited view. Works with preserved views, and also acts as the substitute of the browser **back** button. **goBackContext** is only available when using preserved views.
    * @memberof linkManager
    * @param {any} goBackValue data that is passed in the **goBackContext** field to the last visited view when using preserved views
@@ -500,6 +515,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Disables the navigation handling for a single navigation request.
    * It prevents Luigi Core from handling the URL change after `navigate()`.
    * Used for auto-navigation.
@@ -527,6 +543,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Keeps the URL's query parameters for a navigation request.
    * @param {boolean} preserve By default, it is set to `false`. If it is set to `true`, the URL's query parameters will be kept after navigation.
    * @since 1.19.0
@@ -541,6 +558,7 @@ class LinkManager extends LuigiClientBase {
   }
 
   /**
+   * <!-- label-success: Web Component API  -->
    * Gets the luigi route associated with the current micro frontend.
    * @returns {promise} a promise which resolves to a String value specifying the current luigi route
    * @since 1.23.0