Test router hook logs

Author: hdeshev

tests/app/base.component.ts

@@ -1,13 +1,14 @@
 import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
     RouteParams, ComponentInstruction, RouteConfig } from '@angular/router-deprecated';
-import {Component} from "@angular/core";
-
-
-export const hooksLog = [];
+import {Component, OpaqueToken} from "@angular/core";
+export const HOOKS_LOG = new OpaqueToken("Hooks log");
 
 export class BaseComponent implements OnActivate, OnDeactivate {
     protected name: string = "";
 
+    constructor(protected hooksLog: string[]) {
+    }
+
     routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {
         this.log("activate", nextInstruction, prevInstruction);
     }
@@ -17,6 +18,6 @@ export class BaseComponent implements OnActivate, OnDeactivate {
     }
 
     private log(method: string, nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) {
-        hooksLog.push(this.name + "." + method + " " + nextInstruction.urlPath + " " + (prevInstruction ? prevInstruction.urlPath : null));
+        this.hooksLog.push(this.name + "." + method + " " + nextInstruction.urlPath + " " + (prevInstruction ? prevInstruction.urlPath : null));
     }
 }

tests/app/first.component.ts

@@ -1,20 +1,24 @@
 import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
     RouteParams, RouteData, ComponentInstruction, RouteConfig } from '@angular/router-deprecated';
-import {Component} from "@angular/core";
-import {BaseComponent} from "./base.component";
+import {Component, Inject} from "@angular/core";
+import {HOOKS_LOG, BaseComponent} from "./base.component";
 
 @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 [text]="'hooks-log-' + id"></TextView>
 </StackLayout>
     `
 })
 export class FirstComponent extends BaseComponent {
-    constructor(private router: Router, private routeData: RouteData) {
-        super();
+    name = "first";
+
+    constructor(private router: Router, private routeData: RouteData, @Inject(HOOKS_LOG) hooksLog: string[]) {
+        super(hooksLog);
     }
 
     ngOnInit() {

tests/app/main.ts

@@ -11,9 +11,10 @@ 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 {provide} from "@angular/core";
+import {provide, OpaqueToken} from "@angular/core";
 
 import { rendererTraceCategory, routerTraceCategory } from "nativescript-angular/trace";
 
@@ -40,8 +41,12 @@ application.start({
             console.log('BOOTSTRAPPING TEST APPS...');
             //bootstrap(MultiPageMain, [NS_ROUTER_PROVIDERS]);
             const rootViewProvider = provide(APP_ROOT_VIEW, { useValue: root });
-            bootstrap(SinglePageMain, [rootViewProvider, NS_ROUTER_PROVIDERS]);
-            bootstrap(MultiPageMain, [rootViewProvider, NS_ROUTER_PROVIDERS]);
+            let singlePageHooksLog = []
+            const singlePageHooksLogProvider = provide(HOOKS_LOG, { useValue: singlePageHooksLog });
+            bootstrap(SinglePageMain, [rootViewProvider, singlePageHooksLogProvider, NS_ROUTER_PROVIDERS]);
+            let multiPageHooksLog = []
+            const multiPageHooksLogProvider = provide(HOOKS_LOG, { useValue: multiPageHooksLog });
+            bootstrap(MultiPageMain, [rootViewProvider, multiPageHooksLogProvider, NS_ROUTER_PROVIDERS]);
         }
 
         page.on('loaded', onLoadedHandler);

tests/app/second.component.ts

@@ -1,27 +1,30 @@
 import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
     RouteParams, RouteData, ComponentInstruction, RouteConfig } from '@angular/router-deprecated';
-import {Component} from "@angular/core";
-import {BaseComponent} from "./base.component";
+import {Component, Inject} from "@angular/core";
+import {HOOKS_LOG, BaseComponent} from "./base.component";
 
 @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>
+    <TextView [text]="'hooks-log-' + id"></TextView>
 </StackLayout>
     `
 })
 export class SecondComponent extends BaseComponent {
-    constructor(private router: Router, private routeData: RouteData) {
-        super();
+    constructor(private router: Router, private routeData: RouteData, @Inject(HOOKS_LOG) hooksLog: string[]) {
+        super(hooksLog);
     }
 
     ngOnInit() {
         this.id = this.routeData.get('id');
     }
 
     public id: string = ""
+    name = "second";
 
     gotoFirst() {
         this.router.navigateByUrl("/first");

tests/e2e-tests/multi-page-routing.js

@@ -25,6 +25,12 @@ 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(",");
         return driver
             .elementByAccessibilityId("first-navigate-multi-page")
                 .should.eventually.exist
@@ -37,6 +43,8 @@ describe("multi page routing", function () {
             .tap()
             .elementByAccessibilityId("first-multi-page")
                 .should.eventually.exist
-            .text().should.eventually.equal("First: multi-page")
+                .text().should.eventually.equal("First: multi-page")
+            .elementByAccessibilityId("hooks-log-multi-page")
+                .text().should.eventually.equal(expectedHookLog)
     });
 });

tests/e2e-tests/single-page-routing.js

@@ -24,7 +24,15 @@ describe("single page routing", function () {
             .text().should.eventually.equal("First: single-page")
     });
 
-    it("navigates and returns", function () {
+    it("navigates, returns and fires hooks", function () {
+        var expectedHookLog = [
+            "first.activate first null",
+            "first.deactivate second first",
+            "second.activate second first",
+            "second.deactivate first second",
+            "first.activate first second"].join(",");
+
+
         return driver
             .elementByAccessibilityId("first-navigate-single-page")
                 .should.eventually.exist
@@ -38,5 +46,7 @@ describe("single page routing", function () {
             .elementByAccessibilityId("first-single-page")
                 .should.eventually.exist
             .text().should.eventually.equal("First: single-page")
+            .elementByAccessibilityId("hooks-log-single-page")
+                .text().should.eventually.equal(expectedHookLog)
     });
 });