chore(modal-navigation-ng): add named p-r-o as root tests

Author: ADjenkov

Diff for: e2e/modal-navigation-ng/app/app.module.ts

@@ -2,6 +2,7 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";
 import { AppRoutingModule } from "./app.routing";
 import { AppComponent } from "./app.component";
+import { NamedRouterComponent } from "./named-router.component";
 import { TabComponent } from "./tab.component";
 import { LayoutComponent } from "./layout.component";
 
@@ -29,16 +30,18 @@ traceEnable();
         AppRoutingModule
     ],
     entryComponents: [
-        AppComponent, 
-        TabComponent, 
-        LayoutComponent, 
-        ModalRouterComponent, 
-        NestedModalComponent, 
-        ModalComponent, 
+        AppComponent,
+        NamedRouterComponent,
+        TabComponent,
+        LayoutComponent,
+        ModalRouterComponent,
+        NestedModalComponent,
+        ModalComponent,
         ModalViewComponent
     ],
     declarations: [
         AppComponent,
+        NamedRouterComponent,
         TabComponent,
         LayoutComponent,
         HomeComponent,
@@ -75,8 +78,9 @@ export class AppModule {
     static bootstrapRootComponent() {
         const options = {
             'page-router': AppComponent,
+            'named-page-router': NamedRouterComponent,
             'tab': TabComponent,
-            'layout': LayoutComponent      
+            'layout': LayoutComponent
         };
 
         const component = options[AppModule.root];

Diff for: e2e/modal-navigation-ng/app/app.routing.ts

@@ -40,6 +40,34 @@ const routes: Routes = [
     }
 ];
 
+const namedOutletRoutes: Routes = [
+    { path: "", redirectTo: "/(namedRouter:home)", pathMatch: "full" },
+    {
+        path: "home", component: HomeComponent, outlet: "namedRouter", children: [
+            {
+                path: "modal", component: ModalComponent, children: [
+                    { path: "nested-frame-modal", component: NestedModalComponent }]
+            },
+            { path: "modal-second", component: ModalSecondComponent }
+        ]
+    },
+    {
+        path: "second", outlet: "namedRouter", component: SecondComponent, children: [
+            {
+                path: "modal", component: ModalComponent, children: [
+                    { path: "nested-frame-modal", component: NestedModalComponent }]
+            },
+            { path: "modal-second", component: ModalSecondComponent }
+        ]
+    },
+    {
+        path: "modal-shared", component: ModalViewContentComponent, outlet: "modalOutlet"
+    },
+    {
+        path: "modal-shared-second-host", outlet: "namedRouter", component: ModalSharedSecondComponent
+    }
+];
+
 const routesTab: Routes = [
     { path: "", redirectTo: "/home(secondOutlet:second)", pathMatch: "full" },
     {
@@ -96,6 +124,8 @@ export class AppRoutingModule {
             this.router.resetConfig(routes);
         } else if (AppModule.root === "layout") {
             this.router.resetConfig(routesLayout);
+        } else if (AppModule.root === "named-page-router") {
+            this.router.resetConfig(namedOutletRoutes);
         } else {
             this.router.resetConfig(routesTab);
         }

Diff for: e2e/modal-navigation-ng/app/home/home.component.html

@@ -6,6 +6,7 @@
     <Button text="Show Modal Without Frame" (tap)="onModalNoFrame()"></Button>
     <Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
     <Button text="Navigate To Second Page" (tap)="onNavigateSecond()"></Button>
+    <Button text="Reset Named Frame Root View" (tap)="onNamedFrameRootViewReset()"></Button>
     <Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()"></Button>
     <Button text="Reset Tab Root View" (tap)="onTabRootViewReset()"></Button>
     <Button text="Reset Layout Root View" (tap)="onLayoutRootViewReset()"></Button>

Diff for: e2e/modal-navigation-ng/app/home/home.component.ts

@@ -61,6 +61,11 @@ export class HomeComponent {
         AppModule.platformRef._livesync();
     }
 
+    onNamedFrameRootViewReset() {
+        AppModule.root = "named-page-router";
+        AppModule.platformRef._livesync();
+    }
+
     onTabRootViewReset() {
         AppModule.root = "tab";
         AppModule.platformRef._livesync();

Diff for: e2e/modal-navigation-ng/app/layout.component.html

@@ -2,6 +2,7 @@
     <Label text="Home" horizontalAlignment="center"></Label>
     <Button text="Show Modal Without Frame" (tap)="onModalNoFrame()"></Button>
     <Button text="Show Modal Page With Frame" (tap)="onModalFrame()"></Button>
+    <Button text="Reset Named Frame Root View" (tap)="onNamedFrameRootViewReset()"></Button>
     <Button text="Reset Frame Root View" (tap)="onFrameRootViewReset()"></Button>
     <Button text="Reset Tab Root View" (tap)="onTabRootViewReset()"></Button>
     <Button text="Reset Layout Root View" (tap)="onLayoutRootViewReset()"></Button>

Diff for: e2e/modal-navigation-ng/app/layout.component.ts

@@ -67,6 +67,11 @@ export class LayoutComponent {
         AppModule.platformRef._livesync();
     }
 
+    onNamedFrameRootViewReset() {
+        AppModule.root = "named-page-router";
+        AppModule.platformRef._livesync();
+    }
+
     onTabRootViewReset() {
         AppModule.root = "tab";
         AppModule.platformRef._livesync();

Diff for: e2e/modal-navigation-ng/app/named-router.component.html

@@ -0,0 +1 @@
+<page-router-outlet name="namedRouter"></page-router-outlet>

Diff for: e2e/modal-navigation-ng/app/named-router.component.ts

@@ -0,0 +1,27 @@
+import { Component, ViewContainerRef } from "@angular/core";
+import { Router, NavigationEnd } from "@angular/router";
+import { NSLocationStrategy } from "nativescript-angular/router/ns-location-strategy";
+
+import { ViewContainerRefService } from "./shared/ViewContainerRefService";
+
+@Component({
+    selector: "named-router",
+    templateUrl: "named-router.component.html",
+})
+
+export class NamedRouterComponent {
+    constructor(
+        router: Router, 
+        location: NSLocationStrategy,
+        private _vcRef: ViewContainerRef,
+        private _viewContainerRefService: ViewContainerRefService) {
+        router.events.subscribe(e => {
+            if (e instanceof NavigationEnd) {
+                console.log("[ROUTER]: " + e.toString());
+               console.log(location.toString());
+            }
+        });
+
+        this._viewContainerRefService.root = this._vcRef;
+    }
+}

Diff for: e2e/modal-navigation-ng/e2e/screen.ts

@@ -16,6 +16,7 @@ const modalTabView = "Show Modal TabView";
 const navToSecondPage = "Navigate To Second Page";
 const showDialog = "Show Dialog";
 const resetFrameRootView = "Reset Frame Root View";
+const resetNamedFrameRootView = "Reset Named Frame Root View";
 const resetTabRootView = "Reset Tab Root View";
 const resetLayoutRootView = "Reset Layout Root View";
 
@@ -48,6 +49,12 @@ export class Screen {
         await btnResetFrameRootView.tap();
     }
 
+    resetNamedFrameRootView = async () => {
+        console.log("Setting named frame root ...");
+        const btnResetFrameRootView = await this._driver.findElementByText(resetNamedFrameRootView);
+        await btnResetFrameRootView.tap();
+    }
+
     resetLayoutRootView = async () => {
         console.log("Setting layout root ...");
         const btnResetLayoutRootView = await this._driver.findElementByText(resetLayoutRootView);
@@ -71,6 +78,12 @@ export class Screen {
         await this.resetFrameRootView();
     }
 
+    setNamedFrameRootView = async () => {
+        // should load named frame root, no need to verify it is loaded
+        await this.loadedHome();
+        await this.resetNamedFrameRootView();
+    }
+
     setTabRootView = async () => {
         // should load tab root
         await this.loadedHome();

Diff for: e2e/modal-navigation-ng/e2e/shared.e2e-spec.ts

@@ -3,7 +3,7 @@ import { Screen } from "./screen"
 
 const time = 1;
 
-export const roots = ["setFrameRootView", "setLayoutRootView", "setTabRootView"];
+export const roots = ["setFrameRootView", "setLayoutRootView", "setTabRootView", "setNamedFrameRootView"];
 
 export async function modalFrameBackground(driver: AppiumDriver, screen: Screen) {
     await driver.backgroundApp(time);