chore(router-e2e): extend with lazy loaded named outlet

Author: ADjenkov

e2e/router/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
-import { NativeScriptRouterModule } from "nativescript-angular/router";
+import { NativeScriptRouterModule, NSEmptyOutletComponent } from "nativescript-angular/router";
 
 import { FirstComponent } from "./first/first.component"
 import { SecondComponent } from "./second/second.component"
@@ -17,10 +17,17 @@ export const routes = [
         component: FirstComponent,
     },
     {
-        path: "second/:depth", component: SecondComponent,
+        path: "second/:depth",
+        component: SecondComponent,
         children: [
             { path: "", component: MasterComponent },
-            { path: "detail/:id", component: DetailComponent }
+            { path: "detail/:id", component: DetailComponent },
+            {
+                path: "lazy-named",
+                outlet: "lazyNameOutlet",
+                component: NSEmptyOutletComponent,
+                loadChildren: "./lazy-named/lazy-named.module#LazyNamedModule",
+            }
         ]
     },
     {
@@ -50,7 +57,7 @@ export const navigatableComponents = [
 ];
 
 @NgModule({
-    imports: [NativeScriptRouterModule.forRoot(routes)],
+    imports: [NativeScriptRouterModule, NativeScriptRouterModule.forRoot(routes)],
     exports: [NativeScriptRouterModule],
 })
 export class AppRoutingModule { }

e2e/router/app/first/first.component.ts

@@ -14,7 +14,6 @@ import { Page } from "ui/page";
         <Button text="GO TO SECOND" [nsRouterLink]="['/second','1']"></Button>
         <Button text="GO TO C-LESS SECOND" [nsRouterLink]="['/c-less', 'deep', '100', 'detail', '200']"></Button>
         
-
         <Button text="GO TO LAZY HOME" [nsRouterLink]="['/lazy','home']"></Button>
         <Button text="GO TO C-LESS LAZY" [nsRouterLink]="['/lazy','nest','more']"></Button>
         

e2e/router/app/lazy-named/lazy-named.module.ts

@@ -0,0 +1,31 @@
+import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
+import { Route } from "@angular/router";
+
+import { NativeScriptCommonModule } from "nativescript-angular/common";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+
+import { NestedMasterComponent } from "./nested-master.component"
+import { NestedDetailComponent } from "./nested-detail.component"
+
+const routes: Route[] = [
+    { path: "", component: NestedMasterComponent },
+    { path: "detail/:id", component: NestedDetailComponent }
+];
+
+@NgModule({
+    schemas: [NO_ERRORS_SCHEMA],
+    imports: [
+        NativeScriptCommonModule,
+        NativeScriptRouterModule,
+        NativeScriptRouterModule.forChild(routes)
+    ],
+    declarations: [
+        NestedMasterComponent,
+        NestedDetailComponent
+    ],
+    exports:[
+        NestedMasterComponent,
+        NestedDetailComponent
+    ]
+})
+export class LazyNamedModule { }

e2e/router/app/lazy-named/nested-detail.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnInit, OnDestroy } from "@angular/core";
+import { ActivatedRoute, Router, Route } from "@angular/router";
+import { Location } from "@angular/common";
+import { Observable } from "rxjs";
+import { map } from "rxjs/operators";
+import { Page } from "tns-core-modules/ui/page";
+import { RouterExtensions } from "nativescript-angular/router";
+
+@Component({
+    selector: "detail",
+    template: `
+    <GridLayout rows="auto, auto">
+        <Label [text]="'nested-named-param: ' + (id$ | async)"></Label>
+        <Button row="1" text="BACK-NESTED" (tap)="goBack()"></Button>
+    </GridLayout>
+    `
+})
+export class NestedDetailComponent {
+    public id$: Observable<string>;
+
+    constructor(private router: Router, private route: ActivatedRoute, private page: Page, private routerExt: RouterExtensions) {
+        this.page.actionBar.title = "NamedNestedDetail";
+        console.log("DetailComponent - constructor()");
+        this.id$ = route.params.pipe(map(r => r["id"]));
+    }
+
+    ngOnInit() {
+        console.log("DetailComponent - ngOnInit()");
+    }
+
+    ngOnDestroy() {
+        console.log("DetailComponent - ngOnDestroy()");
+    }
+
+    goBack(){
+        this.routerExt.back();
+    }
+}

e2e/router/app/lazy-named/nested-master.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, OnDestroy } from "@angular/core";
+import { Page } from "tns-core-modules/ui/page";
+@Component({
+    selector: "master",
+    template: `
+    <GridLayout rows="auto">   
+        <StackLayout row="1" orientation="horizontal">
+            <Button *ngFor="let detail of details" [text]="'DETAIL-NAMED ' + detail" [nsRouterLink]="['detail', detail]"></Button>
+        </StackLayout>
+    </GridLayout>
+    `
+})
+export class NestedMasterComponent implements OnInit, OnDestroy {
+    public details: Array<number> = [1, 2, 3];
+
+    constructor(private page: Page) {
+        this.page.actionBar.title = "NamedNestedMaster";
+        console.log("MasterComponent - constructor()");
+    }
+
+    ngOnInit() {
+        console.log("MasterComponent - ngOnInit()");
+    }
+
+    ngOnDestroy() {
+        console.log("MasterComponent - ngOnDestroy()");
+    }
+}

e2e/router/app/second/detail.component.ts

@@ -1,9 +1,9 @@
 import { Component, OnInit, OnDestroy } from "@angular/core";
 import { ActivatedRoute, Router, Route } from "@angular/router";
 import { Location } from "@angular/common";
-import { Page } from "ui/page";
 import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
+import { Page } from "tns-core-modules/ui/page";
 
 @Component({
     selector: "detail",
@@ -18,7 +18,8 @@ import { map } from "rxjs/operators";
 export class DetailComponent {
     public id$: Observable<string>;
 
-    constructor(private router: Router, private route: ActivatedRoute) {
+    constructor(private router: Router, private route: ActivatedRoute, private page: Page) {
+        page.actionBarHidden = true;
         console.log("DetailComponent - constructor()");
         this.id$ = route.params.pipe(map(r => r["id"]));
     }

e2e/router/app/second/master.component.ts

@@ -1,19 +1,22 @@
 import { Component, OnInit, OnDestroy } from "@angular/core";
-
+import { Page } from "tns-core-modules/ui/page";
 @Component({
     selector: "master",
     template: `
-    <StackLayout>
+    <GridLayout rows="auto, auto">
         <Label text="NestedMaster" class="nested-header"></Label>
-            
-        <Button *ngFor="let detail of details" [text]="'DETAIL ' + detail" [nsRouterLink]="['detail', detail]"></Button>
-    </StackLayout>
+                
+        <StackLayout row="1" orientation="horizontal">
+            <Button *ngFor="let detail of details" [text]="'DETAIL ' + detail" [nsRouterLink]="['detail', detail]"></Button>
+        </StackLayout>
+    </GridLayout>
     `
 })
 export class MasterComponent implements OnInit, OnDestroy {
     public details: Array<number> = [1, 2, 3];
 
-    constructor() {
+    constructor(private page: Page) {
+        this.page.actionBarHidden = true;
         console.log("MasterComponent - constructor()");
     }
 

e2e/router/app/second/second.component.ts

@@ -16,18 +16,24 @@ import { map } from "rxjs/operators";
         <Button text="GO TO FIRST" [nsRouterLink]="['/first']"></Button>
         <Button text="GO TO FIRST(CLEAR)" [nsRouterLink]="['/first']" clearHistory="true" pageTransition="flipRight"></Button>
         <Button text="GO TO NEXT SECOND" [nsRouterLink]="['/second', (nextDepth$ | async)]"></Button>
+        <Button text="LOAD NESTED NAMED OUTLET" (tap)="loadNestedNamedOutlet()"></Button>
         <Button text="BACK" (tap)="goBack()"></Button>
-
-        <StackLayout class="nested-outlet">
-            <router-outlet></router-outlet>
-        </StackLayout>
+        
+        <GridLayout row="1" rows="*,*">
+            <GridLayout row="0" class="nested-outlet">
+                <router-outlet></router-outlet>
+            </GridLayout>
+            <GridLayout row="1">
+                <page-router-outlet name="lazyNameOutlet"></page-router-outlet>
+            </GridLayout>
+        </GridLayout>
     </StackLayout>`
 })
 export class SecondComponent implements OnInit, OnDestroy {
     public depth$: Observable<string>;
     public nextDepth$: Observable<number>;
 
-    constructor(private routerExt: RouterExtensions, route: ActivatedRoute, page: Page) {
+    constructor(private routerExt: RouterExtensions, private route: ActivatedRoute, page: Page) {
         console.log("SecondComponent - constructor() page: " + page);
         this.depth$ = route.params.pipe(map(r => r["depth"]));
         this.nextDepth$ = route.params.pipe(map(r => +r["depth"] + 1));
@@ -42,6 +48,10 @@ export class SecondComponent implements OnInit, OnDestroy {
     }
 
     goBack() {
-        this.routerExt.back();
+        this.routerExt.back({ relativeTo: this.route });
+    }
+
+    loadNestedNamedOutlet() {
+        this.routerExt.navigate([{ outlets: { lazyNameOutlet: ["lazy-named"] } }], { relativeTo: this.route });
     }
 }

e2e/router/e2e/router.e2e-spec.ts

@@ -190,6 +190,53 @@ describe("Nested navigation + page navigation", () => {
     });
 });
 
+describe("Nested name navigation + page navigation", () => {
+    let driver: AppiumDriver;
+
+    before(async () => {
+        driver = await createDriver();
+        await driver.resetApp();
+    });
+
+    it("should find First", async () => {
+        await assureFirstComponent(driver);
+    });
+
+    it("should navigate to Second(1)/master", async () => {
+        await findAndClick(driver, "GO TO SECOND");
+
+        await assureSecondComponent(driver, 1)
+        await assureNestedMasterComponent(driver);
+    });
+
+    it("should load nested named Master", async () => {
+        await findAndClick(driver, "LOAD NESTED NAMED OUTLET");
+        await assureNamedNestedMasterComponent(driver);
+    });
+
+    it("should navigate to nested named Master Detail/1", async () => {
+        const navigationButton =
+            await driver.findElementByText("DETAIL-NAMED 1", SearchOptions.exact);
+        navigationButton.click();
+
+        await assureNamedNestedDetailComponent(driver, 1);
+    });
+
+    it("should navigate back to Master and navigate to Detail/2", async () => {
+        let navigationButton =
+            await driver.findElementByText("BACK-NESTED", SearchOptions.exact);
+        navigationButton.click();
+
+        await assureNamedNestedMasterComponent(driver);
+
+        navigationButton =
+            await driver.findElementByText("DETAIL-NAMED 2", SearchOptions.exact);
+        navigationButton.click();
+
+        await assureNamedNestedDetailComponent(driver, 2);
+    });
+});
+
 describe("Shouldn't be able to navigate back on startup", () => {
     let driver: AppiumDriver;
 
@@ -371,6 +418,16 @@ async function assureComponentlessLazyComponent(driver: AppiumDriver) {
     await driver.findElementByText("Lazy Componentless Route", SearchOptions.exact);
 }
 
+async function assureNamedNestedMasterComponent(driver: AppiumDriver) {
+    await driver.findElementByText("NamedNestedMaster", SearchOptions.exact);
+}
+
+async function assureNamedNestedDetailComponent(driver: AppiumDriver, param: number) {
+    await driver.findElementByText("NamedNestedDetail", SearchOptions.exact);
+    await driver.findElementByText(`nested-named-param: ${param}`, SearchOptions.exact);
+
+}
+
 async function assureSecondComponent(driver: AppiumDriver, param: number) {
     await driver.findElementByText("SecondComponent", SearchOptions.exact);
     await driver.findElementByText(`param: ${param}`, SearchOptions.exact);