e2e test updated to use router v.3

Author: vakrilov

Diff for: tests/app/base.component.ts

@@ -1,23 +1,23 @@
-import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
-    RouteParams, ComponentInstruction, RouteConfig } from '@angular/router-deprecated';
-import {Component, OpaqueToken} from "@angular/core";
+import {ROUTER_DIRECTIVES, Router } from '@angular/router';
+import {Component, OpaqueToken, OnInit, OnDestroy} from "@angular/core";
 export const HOOKS_LOG = new OpaqueToken("Hooks log");
+import {BehaviorSubject} from "rxjs";
 
-export class BaseComponent implements OnActivate, OnDeactivate {
+export class BaseComponent implements OnInit, OnDestroy {
     protected name: string = "";
 
-    constructor(protected hooksLog: string[]) {
+    constructor(protected hooksLog: BehaviorSubject<Array<string>>) {
     }
 
-    routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {
-        this.log("activate", nextInstruction, prevInstruction);
+    ngOnInit() {
+        this.log("init");
     }
 
-    routerOnDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {
-        this.log("deactivate", nextInstruction, prevInstruction);
+    ngOnDestroy() {
+        this.log("destroy");
     }
 
-    private log(method: string, nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) {
-        this.hooksLog.push(this.name + "." + method + " " + nextInstruction.urlPath + " " + (prevInstruction ? prevInstruction.urlPath : null));
+    private log(method: string) {
+        this.hooksLog.next([...this.hooksLog.value, this.name + "." + method]);
     }
 }

Diff for: tests/app/first.component.ts

@@ -1,33 +1,29 @@
-import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
-    RouteParams, RouteData, ComponentInstruction, RouteConfig } from '@angular/router-deprecated';
+import {ROUTER_DIRECTIVES, Router, ActivatedRoute } from '@angular/router';
 import {Component, Inject} from "@angular/core";
 import {HOOKS_LOG, BaseComponent} from "./base.component";
+import {BehaviorSubject} from "rxjs";
 
 @Component({
     selector: "first-comp",
     template: `
 <StackLayout>
     <Label [automationText]="'first-' + id" [text]="'First: ' + id"></Label>
     <Button [automationText]="'first-navigate-' + id" text="Go to second" (tap)="gotoSecond()"></Button>
-    <TextView [automationText]="'hooks-log-' + id" [text]="hooksLog"></TextView>
+    <TextView [automationText]="'hooks-log-' + id" [text]="hooksLog | async"></TextView>
     <TextView [text]="'hooks-log-' + id"></TextView>
 </StackLayout>
     `
 })
 export class FirstComponent extends BaseComponent {
-    name = "first";
+    protected name = "first";
+    public id: string = "";
 
-    constructor(private router: Router, private routeData: RouteData, @Inject(HOOKS_LOG) hooksLog: string[]) {
+    constructor(private router: Router, private routeData: ActivatedRoute, @Inject(HOOKS_LOG) hooksLog: BehaviorSubject<Array<string>>) {
         super(hooksLog);
+        this.id = routeData.snapshot.params["id"];
     }
 
-    ngOnInit() {
-        this.id = this.routeData.get('id');
-    }
-
-    public id: string = ""
-
     gotoSecond() {
-        this.router.navigateByUrl("/second");
+        this.router.navigateByUrl("/second/" + this.id);
     }
 }

Diff for: tests/app/main.ts

@@ -4,20 +4,22 @@ import {AppComponent} from "./app.component";
 import {GestureComponent} from "./snippets/gestures.component";
 import {LayoutsComponent} from "./snippets/layouts.component";
 import {IconFontComponent} from "./snippets/icon-font.component";
-import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router-deprecated";
+// import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router-deprecated";
 import {APP_ROOT_VIEW} from "nativescript-angular/platform-providers";
 import {Page} from "ui/page";
 import {Label} from "ui/label";
 import {StackLayout} from "ui/layouts/stack-layout";
 import * as application from "application";
 //nativeScriptBootstrap(AppComponent, [NS_ROUTER_PROVIDERS]);
 import {HOOKS_LOG} from "./base.component";
-import {MultiPageMain} from "./multi-page-main.component";
-import {SinglePageMain} from "./single-page-main.component";
+import {MultiPageMain, MultiPageRouterProviders} from "./multi-page-main.component";
+import {SinglePageMain, SinglePageRouterProviders} from "./single-page-main.component";
 import {provide, OpaqueToken} from "@angular/core";
 
 import { rendererTraceCategory, routerTraceCategory } from "nativescript-angular/trace";
 
+import {BehaviorSubject} from "rxjs";
+
 import trace = require("trace");
 //trace.setCategories(rendererTraceCategory + "," + routerTraceCategory);
 trace.enable();
@@ -40,13 +42,16 @@ application.start({
             //profiling.start('ng-bootstrap');
             console.log('BOOTSTRAPPING TEST APPS...');
             //bootstrap(MultiPageMain, [NS_ROUTER_PROVIDERS]);
+
             const rootViewProvider = provide(APP_ROOT_VIEW, { useValue: root });
-            let singlePageHooksLog = []
+            
+            let singlePageHooksLog = new BehaviorSubject([]);
             const singlePageHooksLogProvider = provide(HOOKS_LOG, { useValue: singlePageHooksLog });
-            bootstrap(SinglePageMain, [rootViewProvider, singlePageHooksLogProvider, NS_ROUTER_PROVIDERS]);
-            let multiPageHooksLog = []
+            bootstrap(SinglePageMain, [rootViewProvider, singlePageHooksLogProvider, SinglePageRouterProviders]);
+
+            let multiPageHooksLog = new BehaviorSubject([]);
             const multiPageHooksLogProvider = provide(HOOKS_LOG, { useValue: multiPageHooksLog });
-            bootstrap(MultiPageMain, [rootViewProvider, multiPageHooksLogProvider, NS_ROUTER_PROVIDERS]);
+            bootstrap(MultiPageMain, [rootViewProvider, multiPageHooksLogProvider, MultiPageRouterProviders]);
         }
 
         page.on('loaded', onLoadedHandler);

Diff for: tests/app/multi-page-main.component.ts

@@ -1,6 +1,5 @@
-import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
-    RouteParams, ComponentInstruction, RouteConfig } from '@angular/router-deprecated';
-import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router-deprecated";
+import {ROUTER_DIRECTIVES, Router, RouterConfig } from '@angular/router';
+import {nsProvideRouter, NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
 import {Component, ElementRef} from "@angular/core";
 import {Location, LocationStrategy} from '@angular/common';
 import {FirstComponent} from "./first.component";
@@ -15,14 +14,19 @@ import {SecondComponent} from "./second.component";
     `
 
 })
-@RouteConfig([
-    { path: '/first', name: 'First', component: FirstComponent, useAsDefault: true , data: {id: "multi-page"}},
-    { path: '/second', name: 'Second', component: SecondComponent, data: {id: "multi-page"} }
-])
 export class MultiPageMain {
     constructor(
         public elementRef: ElementRef,
         public router: Router,
         public location: LocationStrategy) {
     }
 }
+
+const routes: RouterConfig = [
+    { path: "/first/:id", component: FirstComponent },
+    { path: "/", redirectTo: "/first/multi-page", terminal: true },
+    { path: "/second/:id", component: SecondComponent },
+];
+export const MultiPageRouterProviders = [
+    nsProvideRouter(routes, { enableTracing: false })
+];

Diff for: tests/app/second.component.ts

@@ -1,32 +1,30 @@
-import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
-    RouteParams, RouteData, ComponentInstruction, RouteConfig } from '@angular/router-deprecated';
+import {ROUTER_DIRECTIVES, Router, ActivatedRoute } from '@angular/router';
 import {Component, Inject} from "@angular/core";
+import {Location} from "@angular/common";
 import {HOOKS_LOG, BaseComponent} from "./base.component";
+import {BehaviorSubject} from "rxjs";
 
 @Component({
     selector: "second-comp",
     template: `
 <StackLayout>
     <Label [automationText]="'second-' + id" [text]="'Second: ' + id"></Label>
-    <Button [automationText]="'second-navigate-' + id" text="Go to first" (tap)="gotoFirst()"></Button>
-    <TextView [automationText]="'hooks-log-' + id" [text]="hooksLog"></TextView>
+    <Button [automationText]="'second-navigate-back-' + id" text="Go to first" (tap)="goBack()"></Button>
+    <TextView [automationText]="'hooks-log-' + id" [text]="hooksLog | async"></TextView>
     <TextView [text]="'hooks-log-' + id"></TextView>
 </StackLayout>
     `
 })
 export class SecondComponent extends BaseComponent {
-    constructor(private router: Router, private routeData: RouteData, @Inject(HOOKS_LOG) hooksLog: string[]) {
-        super(hooksLog);
-    }
+    protected name = "second";
+    public id: string = ""
 
-    ngOnInit() {
-        this.id = this.routeData.get('id');
+    constructor(private router: Router, private location: Location, private routeData: ActivatedRoute, @Inject(HOOKS_LOG) hooksLog: BehaviorSubject<Array<string>>) {
+        super(hooksLog);
+        this.id = routeData.snapshot.params["id"];
     }
 
-    public id: string = ""
-    name = "second";
-
-    gotoFirst() {
-        this.router.navigateByUrl("/first");
+    goBack() {
+        this.location.back();
     }
 }

Diff for: tests/app/single-page-main.component.ts

@@ -1,5 +1,5 @@
-import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
-    RouteParams, ComponentInstruction, RouteConfig } from '@angular/router-deprecated';
+import {ROUTER_DIRECTIVES, Router, RouterConfig } from '@angular/router';
+import {nsProvideRouter} from 'nativescript-angular/router';
 import {Component, ElementRef} from "@angular/core";
 import {Location, LocationStrategy} from '@angular/common';
 import {FirstComponent} from "./first.component";
@@ -14,14 +14,19 @@ import {SecondComponent} from "./second.component";
     `
 
 })
-@RouteConfig([
-    { path: '/first', name: 'First', component: FirstComponent, useAsDefault: true , data: {id: "single-page"}},
-    { path: '/second', name: 'Second', component: SecondComponent, data: {id: "single-page"} }
-])
 export class SinglePageMain {
     constructor(
         public elementRef: ElementRef,
         public router: Router,
         public location: LocationStrategy) {
     }
 }
+
+const routes: RouterConfig = [
+    { path: "/first/:id", component: FirstComponent },
+    { path: "/", redirectTo: "/first/single-page", terminal: true },
+    { path: "/second/:id", component: SecondComponent },
+];
+export const SinglePageRouterProviders = [
+    nsProvideRouter(routes, { enableTracing: false })
+];

Diff for: tests/e2e-tests/multi-page-routing.js

@@ -26,19 +26,18 @@ describe("multi page routing", function () {
 
     it("navigates and returns", function () {
         var expectedHookLog = [
-            "first.activate first null",
-            "first.deactivate second first",
-            "second.activate second first",
-            "second.deactivate first second",
-            "first.activate first second"].join(",");
+            "first.init", // <-- load
+            "second.init", // <-- forward (first component is not destroyed)
+            "second.destroy"] // <-- back (first component is reused)
+            .join(",");
         return driver
             .elementByAccessibilityId("first-navigate-multi-page")
                 .should.eventually.exist
             .tap()
             .elementByAccessibilityId("second-multi-page")
                 .should.eventually.exist
             .text().should.eventually.equal("Second: multi-page")
-            .elementByAccessibilityId("second-navigate-multi-page")
+            .elementByAccessibilityId("second-navigate-back-multi-page")
                 .should.eventually.exist
             .tap()
             .elementByAccessibilityId("first-multi-page")

Diff for: tests/e2e-tests/single-page-routing.js

@@ -24,14 +24,13 @@ describe("single page routing", function () {
             .text().should.eventually.equal("First: single-page")
     });
 
-    it("navigates, returns and fires hooks", function () {
+    it("navigates and returns", function () {
         var expectedHookLog = [
-            "first.activate first null",
-            "first.deactivate second first",
-            "second.activate second first",
-            "second.deactivate first second",
-            "first.activate first second"].join(",");
-
+            "first.init", // <--load
+            "first.destroy", // <--forward
+            "second.init",
+            "second.destroy", // <--back
+            "first.init"].join(",");
 
         return driver
             .elementByAccessibilityId("first-navigate-single-page")
@@ -40,7 +39,7 @@ describe("single page routing", function () {
             .elementByAccessibilityId("second-single-page")
                 .should.eventually.exist
             .text().should.eventually.equal("Second: single-page")
-            .elementByAccessibilityId("second-navigate-single-page")
+            .elementByAccessibilityId("second-navigate-back-single-page")
                 .should.eventually.exist
             .tap()
             .elementByAccessibilityId("first-single-page")