tests(e2e): test nested primary p-r-o navigation

Author: ADjenkov

e2e/nested-router-tab-view/app/about/about-nested.component.html

@@ -0,0 +1,3 @@
+<GridLayout rows="auto">
+    <Label text="Nested About Component"></Label>
+</GridLayout>

e2e/nested-router-tab-view/app/about/about-nested.component.ts

@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+@Component({
+    moduleId: module.id,
+    selector: "about-nested-page",
+    templateUrl: "./about-nested.component.html"
+})
+export class AboutNestedComponent {
+}

e2e/nested-router-tab-view/app/about/about.component.html

@@ -4,4 +4,7 @@
 
 <GridLayout rows="auto, *">
     <Button text="Back(ActivatedRoute)" automationText="Back(ActivatedRoute)" (tap)="backActivatedRoute()"></Button>
+    <GridLayout row="1">
+        <page-router-outlet actionBarVisibility="never"></page-router-outlet>
+    </GridLayout>
 </GridLayout>

e2e/nested-router-tab-view/app/about/about.component.ts

@@ -1,5 +1,4 @@
-import { Component, ViewContainerRef } from "@angular/core";
-import { ModalDialogService, ModalDialogOptions } from "nativescript-angular/directives/dialogs";
+import { Component } from "@angular/core";
 import { RouterExtensions } from "nativescript-angular/router";
 import { ActivatedRoute } from "@angular/router";
 
@@ -10,8 +9,6 @@ import { ActivatedRoute } from "@angular/router";
 })
 export class AboutComponent {
     constructor(
-        private modal: ModalDialogService,
-        private vcRef: ViewContainerRef,
         private activeRoute: ActivatedRoute,
         private routerExtension: RouterExtensions) { }
 

e2e/nested-router-tab-view/app/app.component.html

@@ -1,13 +1 @@
-<page-router-outlet tag="mainPRO"></page-router-outlet>
-
-<!-- <TabView androidTabsPosition="bottom">
-    <page-router-outlet 
-        *tabItem="{title: 'Players'}" 
-        name="playerTab">
-    </page-router-outlet>
-
-    <page-router-outlet
-        *tabItem="{title: 'Teams'}" 
-        name="teamTab">
-    </page-router-outlet>
-</TabView> -->
+<page-router-outlet></page-router-outlet>

e2e/nested-router-tab-view/app/app.routing.ts

@@ -10,6 +10,7 @@ import { LoginComponent } from "./login/login.component";
 import { TabsComponent } from "./tabs/tabs.component";
 import { HomeComponent } from "./home/home.component";
 import { AboutComponent } from "./about/about.component";
+import { AboutNestedComponent } from "./about/about-nested.component";
 
 import { ModalComponent } from "./modal/modal.component";
 import { NestedModalComponent } from "./modal-nested/modal-nested.component";
@@ -56,7 +57,11 @@ const routes: Routes = [
             { path: "team/:id", component: TeamDetailComponent, outlet: "teamTab" },
         ]
     },
-    { path: "about", component: AboutComponent }
+    {
+        path: "about", component: AboutComponent, children: [
+            { path: "about-nested", component: AboutNestedComponent },
+        ]
+    }
 ];
 
 @NgModule({

e2e/nested-router-tab-view/app/home/home.component.html

@@ -28,7 +28,6 @@
     <GridLayout row="1" columns="*,*">
         <GridLayout col="0">
             <page-router-outlet name="playerTab"></page-router-outlet>
-            <!-- <page-router-outlet></page-router-outlet> -->
         </GridLayout>
         <GridLayout col="1">
             <page-router-outlet name="teamTab"></page-router-outlet>

e2e/nested-router-tab-view/app/shared.module.ts

@@ -8,6 +8,7 @@ import { DataService } from "./data.service";
 
 import { HomeComponent } from "./home/home.component";
 import { AboutComponent } from "./about/about.component";
+import { AboutNestedComponent } from "./about/about-nested.component";
 import { PlayerComponent } from "./player/players.component";
 import { PlayerDetailComponent } from "./player/player-detail.component";
 import { TeamsComponent } from "./team/teams.component";
@@ -21,6 +22,7 @@ import { TeamDetailComponent } from "./team/team-detail.component";
     declarations: [
         HomeComponent,
         AboutComponent,
+        AboutNestedComponent,
         PlayerComponent,
         PlayerDetailComponent,
         TeamsComponent,
@@ -29,6 +31,7 @@ import { TeamDetailComponent } from "./team/team-detail.component";
     exports: [
         HomeComponent,
         AboutComponent,
+        AboutNestedComponent,
         PlayerComponent,
         PlayerDetailComponent,
         TeamsComponent,

e2e/nested-router-tab-view/app/tabs/tabs.component.html

@@ -3,7 +3,7 @@
 <StackLayout>
     <GridLayout rows="auto,*">
         <WrapLayout row="0">
-            <Button text="Go To About Page" [nsRouterLink]="['../about']"></Button>
+            <Button text="Go To About Page" [nsRouterLink]="['../about/about-nested']"></Button>
             <Button text="Back()" (tap)="back()"></Button>
             <Button text="CanGoBack(ActivatedRoute)" (tap)="canGoBack()"></Button>
             <Button text="Back(ActivatedRoute)" (tap)="backActivatedRoute()"></Button>

e2e/nested-router-tab-view/e2e/home-tabs.e2e-spec.ts

@@ -48,6 +48,7 @@ describe("home-tabs:", () => {
                 await screen.loadedPlayersList();
                 await screen.navigateToAboutPage();
                 await screen.loadedAbout();
+                await screen.loadedNestedAbout();
             });
 
             it("should go back to Tabs and then back to Home", async () => {

e2e/nested-router-tab-view/e2e/screen.ts

@@ -3,6 +3,7 @@ import { assert } from "chai";
 
 const home = "Home Component";
 const about = "About Component";
+const aboutNested = "Nested About Component";
 const login = "Login Component";
 const tabs = "Tabs Component";
 
@@ -70,7 +71,13 @@ export class Screen {
     loadedAbout= async () => {
         const lblAbout = await this._driver.findElementByAutomationText(about);
         assert.isTrue(await lblAbout.isDisplayed());
-        console.log(home + " loaded!");
+        console.log(about + " loaded!");
+    }
+
+    loadedNestedAbout= async () => {
+        const lblAboutNested = await this._driver.findElementByAutomationText(aboutNested);
+        assert.isTrue(await lblAboutNested.isDisplayed());
+        console.log(aboutNested + " loaded!");
     }
 
     loadedTabs = async () => {