fix(location-strategy): find the correct outlet when navigating back and forward

e2e/modal-navigation-ng/app/app.css

@@ -10,3 +10,6 @@ of writing your own CSS rules. For a full list of class names in the theme
 refer to http://docs.nativescript.org/ui/theme.
 */
 @import '~nativescript-theme-core/css/core.light.css';
+Button {
+    font-size: 10px;
+}

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];

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);
         }

e2e/modal-navigation-ng/app/home/home.component.html

@@ -1,17 +1,17 @@
 <ActionBar class="action-bar">
-    <Label class="action-bar-title" text="Home"></Label>
+    <Label class="action-bar-title" text="Home Component"></Label>
 </ActionBar>
 
-<StackLayout>
+<WrapLayout>
     <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>
     <Button text="Show Dialog" (tap)="onShowDialog()"></Button>
 
     <Button text="show shared modal" (tap)="onRootModalTap()"></Button>
     <Button text="go to second (to open shared modal)" [nsRouterLink]="['/modal-shared-second-host']"></Button>
-    <Label text="home component" verticalAlignment="bottom"></Label>
-</StackLayout>  
+</WrapLayout>  

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();

e2e/modal-navigation-ng/app/layout.component.html

@@ -1,9 +1,10 @@
-<StackLayout>
-    <Label text="Home" horizontalAlignment="center"></Label>
+<WrapLayout>
+    <Label text="Home Component" 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>
     <Button text="Show Dialog" (tap)="onShowDialog()"></Button>
-</StackLayout>
+</WrapLayout>

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();

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

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

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;
+    }
+}

e2e/modal-navigation-ng/e2e/modal-frame.e2e-spec.ts

@@ -0,0 +1,77 @@
+import { AppiumDriver, createDriver } from "nativescript-dev-appium";
+import { Screen } from "./screen"
+import {
+    roots,
+    modalFrameBackground,
+    testSecondPageBackground,
+    testSecondPageClose,
+    testNestedModalFrameBackground,
+    testNestedModalPageBackground,
+    testDialogBackground
+} from "./shared.e2e-spec"
+
+describe("modal-frame:", () => {
+
+    let driver: AppiumDriver;
+    let screen: Screen;
+
+    before(async () => {
+        driver = await createDriver();
+        screen = new Screen(driver);
+    });
+
+    roots.forEach(root => {
+        describe(`${root} modal frame background scenarios:`, () => {
+
+            before(async () => {
+                await screen[root]();
+            });
+
+            beforeEach(async function () {
+                await screen.loadModalFrame();
+            });
+
+            afterEach(async function () {
+                if (this.currentTest.state === "failed") {
+                    await driver.logPageSource(this.currentTest.title);
+                    await driver.logScreenshot(this.currentTest.title);
+                    await driver.resetApp();
+                    await screen[root]();
+                }
+            });
+
+            after(async () => {
+                await screen.closeModal();
+                await screen.loadedHome();
+            });
+
+            it("should show dialog confirm, run in background", async () => {
+                await testDialogBackground(driver, screen);
+            });
+
+            it("should run modal page with frame in background", async () => {
+                await modalFrameBackground(driver, screen);
+            });
+
+            it("should navigate to second page, run in background, go back", async () => {
+                await testSecondPageBackground(driver, screen);
+            });
+
+            it("should show nested modal page with frame, run in background, close", async () => {
+                await testNestedModalFrameBackground(driver, screen);
+            });
+
+            it("should show nested modal page, run in background, close", async () => {
+                await testNestedModalPageBackground(driver, screen);
+            });
+
+            it("should navigate to second page, close", async () => {
+                await testSecondPageClose(driver, screen);
+            });
+
+            it("should navigate to second page, run in background, go back", async () => {
+                await testSecondPageBackground(driver, screen);
+            });
+        });
+    });
+});

e2e/modal-navigation-ng/e2e/modal-layout.e2e-spec.ts

@@ -0,0 +1,53 @@
+import { AppiumDriver, createDriver } from "nativescript-dev-appium";
+import { Screen } from "./screen"
+import {
+    roots,
+    modalFrameBackground,
+    testSecondPageBackground,
+    testSecondPageClose,
+    testNestedModalFrameBackground,
+    testNestedModalPageBackground,
+    testDialogBackground,
+} from "./shared.e2e-spec"
+
+describe("modal-layout:", () => {
+
+    let driver: AppiumDriver;
+    let screen: Screen;
+
+    before(async () => {
+        driver = await createDriver();
+        screen = new Screen(driver);
+    });
+
+    roots.forEach(root => {
+        describe(`${root} modal no frame background scenarios:`, () => {
+
+            before(async () => {
+                await screen[root]();
+            });
+
+            beforeEach(async function () {
+                await screen.loadModalNoFrame();
+            });
+
+            afterEach(async function () {
+                if (this.currentTest.state === "failed") {
+                    await driver.logPageSource(this.currentTest.title);
+                    await driver.logScreenshot(this.currentTest.title);
+                    await driver.resetApp();
+                    await screen[root]();
+                }
+            });
+
+            after(async () => {
+                await screen.closeModal();
+                await screen.loadedHome();
+            });
+
+            it("should show dialog confirm inside modal view with no frame, run in background", async () => {
+                await testDialogBackground(driver, screen, false);
+            });
+        });
+    });
+});

e2e/modal-navigation-ng/e2e/modal.shared.e2e-spec.ts

@@ -1,6 +1,8 @@
 import { AppiumDriver, createDriver, SearchOptions } from "nativescript-dev-appium";
 import { assert } from "chai";
 
+const homeComponent = "Home Component";
+
 describe("Shared modal from home and back", () => {
     let driver: AppiumDriver;
 
@@ -22,7 +24,7 @@ describe("Shared modal from home and back", () => {
     });
 
     it ("should find home component", async () => {
-        await assertComponent(driver, "home component");
+        await assertComponent(driver, homeComponent);
     });
 
     it("should open/close shared modal from home component", async () => {
@@ -31,7 +33,7 @@ describe("Shared modal from home and back", () => {
     });
 
     it ("should find home component again", async () => {
-        await assertComponent(driver, "home component");
+        await assertComponent(driver, homeComponent);
     });
 });
 
@@ -56,7 +58,7 @@ describe("Shared modal from second and back", () => {
     });
 
     it ("should find home component", async () => {
-        await assertComponent(driver, "home component");
+        await assertComponent(driver, homeComponent);
     });
 
     it ("should navigate to second component", async() => {
@@ -98,7 +100,7 @@ describe("Shared modal from different components", () => {
     });
 
     it ("should find home component", async () => {
-        await assertComponent(driver, "home component");
+        await assertComponent(driver, homeComponent);
     });
 
     it("should open/close shared modal from home component", async () => {
@@ -107,7 +109,7 @@ describe("Shared modal from different components", () => {
     });
 
     it ("should find home component again", async () => {
-        await assertComponent(driver, "home component");
+        await assertComponent(driver, homeComponent);
     });
 
     it ("should navigate to second component", async() => {
@@ -129,7 +131,7 @@ describe("Shared modal from different components", () => {
 
     it ("should navigate back to home component", async () => {
         await goBack(driver);
-        await assertComponent(driver, "home component");
+        await assertComponent(driver, homeComponent);
     });
 
     it("should open/close shared modal from home component after manipulations with second", async () => {
@@ -138,7 +140,7 @@ describe("Shared modal from different components", () => {
     });
 
     it ("should find home component again", async () => {
-        await assertComponent(driver, "home component");
+        await assertComponent(driver, homeComponent);
     });
 });