feat(platform/router-outlet): set name of the iframe to the name of t…

…he outlet

The iframe name can be used in end-to-end tests to refer to the iframe of a router outlet.

projects/scion/microfrontend-platform.e2e/src/router-outlet/router-outlet-page.po.ts

@@ -61,6 +61,20 @@ export class RouterOutletPagePO implements OutletPageObject {
     };
   }
 
+  /**
+   * Returns the name of the router outlet.
+   */
+  public getRouterOutletName(): Promise<string> {
+    return this._locator.locator(ElementSelectors.routerOutlet()).getAttribute('name');
+  }
+
+  /**
+   * Returns the name of the iframe of the router outlet.
+   */
+  public getRouterOutletFrameName(): Promise<string> {
+    return this._locator.locator(ElementSelectors.routerOutletFrame()).getAttribute('name');
+  }
+
   /**
    * Returns `true` if the outlet is showing no content, or `false` otherwise.
    */

projects/scion/microfrontend-platform.e2e/src/router-outlet/router-outlet.e2e-spec.ts

@@ -24,6 +24,30 @@ import {expect} from '@playwright/test';
 
 test.describe('RouterOutlet', () => {
 
+  test('should set the name of the router outlet element', async ({testingAppPO}) => {
+    const pagePOs = await testingAppPO.navigateTo({
+      routerOutlet: RouterOutletPagePO,
+    });
+
+    const routerOutletPO = pagePOs.get<RouterOutletPagePO>('routerOutlet');
+    await routerOutletPO.enterOutletName('microfrontend-outlet');
+    await routerOutletPO.clickApply();
+
+    expect(await routerOutletPO.getRouterOutletName()).toEqual('microfrontend-outlet');
+  });
+
+  test('should set the iframe name to the outlet name', async ({testingAppPO}) => {
+    const pagePOs = await testingAppPO.navigateTo({
+      routerOutlet: RouterOutletPagePO,
+    });
+
+    const routerOutletPO = pagePOs.get<RouterOutletPagePO>('routerOutlet');
+    await routerOutletPO.enterOutletName('microfrontend-outlet');
+    await routerOutletPO.clickApply();
+
+    expect(await routerOutletPO.getRouterOutletFrameName()).toEqual('microfrontend-outlet');
+  });
+
   test('should allow navigating within the outlet (self navigation)', async ({testingAppPO}) => {
     const pagePOs = await testingAppPO.navigateTo({
       router: OutletRouterPagePO,

projects/scion/microfrontend-platform/src/lib/client/router-outlet/router-outlet.element.ts

@@ -362,6 +362,7 @@ export class SciRouterOutletElement extends HTMLElement {
       .pipe(takeUntil(this._disconnect$))
       .subscribe((name: string) => {
         const outletContext: OutletContext = {name: name, uid: this._uid};
+        this.iframe.name = name;
         this.setContextValue(OUTLET_CONTEXT, outletContext);
       });
   }