Skip to content

Commit f285889

Browse files
author
vakrilov
committed
e2e test updated to use router v.3
1 parent dfb90c5 commit f285889

8 files changed

+77
-71
lines changed

‎tests/app/base.component.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
2-
RouteParams, ComponentInstruction, RouteConfig } from '@angular/router-deprecated';
3-
import {Component, OpaqueToken} from "@angular/core";
1+
import {ROUTER_DIRECTIVES, Router } from '@angular/router';
2+
import {Component, OpaqueToken, OnInit, OnDestroy} from "@angular/core";
43
export const HOOKS_LOG = new OpaqueToken("Hooks log");
4+
import {BehaviorSubject} from "rxjs";
55

6-
export class BaseComponent implements OnActivate, OnDeactivate {
6+
export class BaseComponent implements OnInit, OnDestroy {
77
protected name: string = "";
88

9-
constructor(protected hooksLog: string[]) {
9+
constructor(protected hooksLog: BehaviorSubject<Array<string>>) {
1010
}
1111

12-
routerOnActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {
13-
this.log("activate", nextInstruction, prevInstruction);
12+
ngOnInit() {
13+
this.log("init");
1414
}
1515

16-
routerOnDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any {
17-
this.log("deactivate", nextInstruction, prevInstruction);
16+
ngOnDestroy() {
17+
this.log("destroy");
1818
}
1919

20-
private log(method: string, nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction) {
21-
this.hooksLog.push(this.name + "." + method + " " + nextInstruction.urlPath + " " + (prevInstruction ? prevInstruction.urlPath : null));
20+
private log(method: string) {
21+
this.hooksLog.next([...this.hooksLog.value, this.name + "." + method]);
2222
}
2323
}

‎tests/app/first.component.ts

+8-12
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,29 @@
1-
import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
2-
RouteParams, RouteData, ComponentInstruction, RouteConfig } from '@angular/router-deprecated';
1+
import {ROUTER_DIRECTIVES, Router, ActivatedRoute } from '@angular/router';
32
import {Component, Inject} from "@angular/core";
43
import {HOOKS_LOG, BaseComponent} from "./base.component";
4+
import {BehaviorSubject} from "rxjs";
55

66
@Component({
77
selector: "first-comp",
88
template: `
99
<StackLayout>
1010
<Label [automationText]="'first-' + id" [text]="'First: ' + id"></Label>
1111
<Button [automationText]="'first-navigate-' + id" text="Go to second" (tap)="gotoSecond()"></Button>
12-
<TextView [automationText]="'hooks-log-' + id" [text]="hooksLog"></TextView>
12+
<TextView [automationText]="'hooks-log-' + id" [text]="hooksLog | async"></TextView>
1313
<TextView [text]="'hooks-log-' + id"></TextView>
1414
</StackLayout>
1515
`
1616
})
1717
export class FirstComponent extends BaseComponent {
18-
name = "first";
18+
protected name = "first";
19+
public id: string = "";
1920

20-
constructor(private router: Router, private routeData: RouteData, @Inject(HOOKS_LOG) hooksLog: string[]) {
21+
constructor(private router: Router, private routeData: ActivatedRoute, @Inject(HOOKS_LOG) hooksLog: BehaviorSubject<Array<string>>) {
2122
super(hooksLog);
23+
this.id = routeData.snapshot.params["id"];
2224
}
2325

24-
ngOnInit() {
25-
this.id = this.routeData.get('id');
26-
}
27-
28-
public id: string = ""
29-
3026
gotoSecond() {
31-
this.router.navigateByUrl("/second");
27+
this.router.navigateByUrl("/second/" + this.id);
3228
}
3329
}

‎tests/app/main.ts

+12-7
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,22 @@ import {AppComponent} from "./app.component";
44
import {GestureComponent} from "./snippets/gestures.component";
55
import {LayoutsComponent} from "./snippets/layouts.component";
66
import {IconFontComponent} from "./snippets/icon-font.component";
7-
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router-deprecated";
7+
// import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router-deprecated";
88
import {APP_ROOT_VIEW} from "nativescript-angular/platform-providers";
99
import {Page} from "ui/page";
1010
import {Label} from "ui/label";
1111
import {StackLayout} from "ui/layouts/stack-layout";
1212
import * as application from "application";
1313
//nativeScriptBootstrap(AppComponent, [NS_ROUTER_PROVIDERS]);
1414
import {HOOKS_LOG} from "./base.component";
15-
import {MultiPageMain} from "./multi-page-main.component";
16-
import {SinglePageMain} from "./single-page-main.component";
15+
import {MultiPageMain, MultiPageRouterProviders} from "./multi-page-main.component";
16+
import {SinglePageMain, SinglePageRouterProviders} from "./single-page-main.component";
1717
import {provide, OpaqueToken} from "@angular/core";
1818

1919
import { rendererTraceCategory, routerTraceCategory } from "nativescript-angular/trace";
2020

21+
import {BehaviorSubject} from "rxjs";
22+
2123
import trace = require("trace");
2224
//trace.setCategories(rendererTraceCategory + "," + routerTraceCategory);
2325
trace.enable();
@@ -40,13 +42,16 @@ application.start({
4042
//profiling.start('ng-bootstrap');
4143
console.log('BOOTSTRAPPING TEST APPS...');
4244
//bootstrap(MultiPageMain, [NS_ROUTER_PROVIDERS]);
45+
4346
const rootViewProvider = provide(APP_ROOT_VIEW, { useValue: root });
44-
let singlePageHooksLog = []
47+
48+
let singlePageHooksLog = new BehaviorSubject([]);
4549
const singlePageHooksLogProvider = provide(HOOKS_LOG, { useValue: singlePageHooksLog });
46-
bootstrap(SinglePageMain, [rootViewProvider, singlePageHooksLogProvider, NS_ROUTER_PROVIDERS]);
47-
let multiPageHooksLog = []
50+
bootstrap(SinglePageMain, [rootViewProvider, singlePageHooksLogProvider, SinglePageRouterProviders]);
51+
52+
let multiPageHooksLog = new BehaviorSubject([]);
4853
const multiPageHooksLogProvider = provide(HOOKS_LOG, { useValue: multiPageHooksLog });
49-
bootstrap(MultiPageMain, [rootViewProvider, multiPageHooksLogProvider, NS_ROUTER_PROVIDERS]);
54+
bootstrap(MultiPageMain, [rootViewProvider, multiPageHooksLogProvider, MultiPageRouterProviders]);
5055
}
5156

5257
page.on('loaded', onLoadedHandler);

‎tests/app/multi-page-main.component.ts

+11-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
2-
RouteParams, ComponentInstruction, RouteConfig } from '@angular/router-deprecated';
3-
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router-deprecated";
1+
import {ROUTER_DIRECTIVES, Router, RouterConfig } from '@angular/router';
2+
import {nsProvideRouter, NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
43
import {Component, ElementRef} from "@angular/core";
54
import {Location, LocationStrategy} from '@angular/common';
65
import {FirstComponent} from "./first.component";
@@ -15,14 +14,19 @@ import {SecondComponent} from "./second.component";
1514
`
1615

1716
})
18-
@RouteConfig([
19-
{ path: '/first', name: 'First', component: FirstComponent, useAsDefault: true , data: {id: "multi-page"}},
20-
{ path: '/second', name: 'Second', component: SecondComponent, data: {id: "multi-page"} }
21-
])
2217
export class MultiPageMain {
2318
constructor(
2419
public elementRef: ElementRef,
2520
public router: Router,
2621
public location: LocationStrategy) {
2722
}
2823
}
24+
25+
const routes: RouterConfig = [
26+
{ path: "/first/:id", component: FirstComponent },
27+
{ path: "/", redirectTo: "/first/multi-page", terminal: true },
28+
{ path: "/second/:id", component: SecondComponent },
29+
];
30+
export const MultiPageRouterProviders = [
31+
nsProvideRouter(routes, { enableTracing: false })
32+
];

‎tests/app/second.component.ts

+12-14
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,30 @@
1-
import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
2-
RouteParams, RouteData, ComponentInstruction, RouteConfig } from '@angular/router-deprecated';
1+
import {ROUTER_DIRECTIVES, Router, ActivatedRoute } from '@angular/router';
32
import {Component, Inject} from "@angular/core";
3+
import {Location} from "@angular/common";
44
import {HOOKS_LOG, BaseComponent} from "./base.component";
5+
import {BehaviorSubject} from "rxjs";
56

67
@Component({
78
selector: "second-comp",
89
template: `
910
<StackLayout>
1011
<Label [automationText]="'second-' + id" [text]="'Second: ' + id"></Label>
11-
<Button [automationText]="'second-navigate-' + id" text="Go to first" (tap)="gotoFirst()"></Button>
12-
<TextView [automationText]="'hooks-log-' + id" [text]="hooksLog"></TextView>
12+
<Button [automationText]="'second-navigate-back-' + id" text="Go to first" (tap)="goBack()"></Button>
13+
<TextView [automationText]="'hooks-log-' + id" [text]="hooksLog | async"></TextView>
1314
<TextView [text]="'hooks-log-' + id"></TextView>
1415
</StackLayout>
1516
`
1617
})
1718
export class SecondComponent extends BaseComponent {
18-
constructor(private router: Router, private routeData: RouteData, @Inject(HOOKS_LOG) hooksLog: string[]) {
19-
super(hooksLog);
20-
}
19+
protected name = "second";
20+
public id: string = ""
2121

22-
ngOnInit() {
23-
this.id = this.routeData.get('id');
22+
constructor(private router: Router, private location: Location, private routeData: ActivatedRoute, @Inject(HOOKS_LOG) hooksLog: BehaviorSubject<Array<string>>) {
23+
super(hooksLog);
24+
this.id = routeData.snapshot.params["id"];
2425
}
2526

26-
public id: string = ""
27-
name = "second";
28-
29-
gotoFirst() {
30-
this.router.navigateByUrl("/first");
27+
goBack() {
28+
this.location.back();
3129
}
3230
}

‎tests/app/single-page-main.component.ts

+11-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {ROUTER_DIRECTIVES, Router, OnActivate, OnDeactivate, CanReuse, OnReuse,
2-
RouteParams, ComponentInstruction, RouteConfig } from '@angular/router-deprecated';
1+
import {ROUTER_DIRECTIVES, Router, RouterConfig } from '@angular/router';
2+
import {nsProvideRouter} from 'nativescript-angular/router';
33
import {Component, ElementRef} from "@angular/core";
44
import {Location, LocationStrategy} from '@angular/common';
55
import {FirstComponent} from "./first.component";
@@ -14,14 +14,19 @@ import {SecondComponent} from "./second.component";
1414
`
1515

1616
})
17-
@RouteConfig([
18-
{ path: '/first', name: 'First', component: FirstComponent, useAsDefault: true , data: {id: "single-page"}},
19-
{ path: '/second', name: 'Second', component: SecondComponent, data: {id: "single-page"} }
20-
])
2117
export class SinglePageMain {
2218
constructor(
2319
public elementRef: ElementRef,
2420
public router: Router,
2521
public location: LocationStrategy) {
2622
}
2723
}
24+
25+
const routes: RouterConfig = [
26+
{ path: "/first/:id", component: FirstComponent },
27+
{ path: "/", redirectTo: "/first/single-page", terminal: true },
28+
{ path: "/second/:id", component: SecondComponent },
29+
];
30+
export const SinglePageRouterProviders = [
31+
nsProvideRouter(routes, { enableTracing: false })
32+
];

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

+5-6
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,18 @@ describe("multi page routing", function () {
2626

2727
it("navigates and returns", function () {
2828
var expectedHookLog = [
29-
"first.activate first null",
30-
"first.deactivate second first",
31-
"second.activate second first",
32-
"second.deactivate first second",
33-
"first.activate first second"].join(",");
29+
"first.init", // <-- load
30+
"second.init", // <-- forward (first component is not destroyed)
31+
"second.destroy"] // <-- back (first component is reused)
32+
.join(",");
3433
return driver
3534
.elementByAccessibilityId("first-navigate-multi-page")
3635
.should.eventually.exist
3736
.tap()
3837
.elementByAccessibilityId("second-multi-page")
3938
.should.eventually.exist
4039
.text().should.eventually.equal("Second: multi-page")
41-
.elementByAccessibilityId("second-navigate-multi-page")
40+
.elementByAccessibilityId("second-navigate-back-multi-page")
4241
.should.eventually.exist
4342
.tap()
4443
.elementByAccessibilityId("first-multi-page")

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

+7-8
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,13 @@ describe("single page routing", function () {
2424
.text().should.eventually.equal("First: single-page")
2525
});
2626

27-
it("navigates, returns and fires hooks", function () {
27+
it("navigates and returns", function () {
2828
var expectedHookLog = [
29-
"first.activate first null",
30-
"first.deactivate second first",
31-
"second.activate second first",
32-
"second.deactivate first second",
33-
"first.activate first second"].join(",");
34-
29+
"first.init", // <--load
30+
"first.destroy", // <--forward
31+
"second.init",
32+
"second.destroy", // <--back
33+
"first.init"].join(",");
3534

3635
return driver
3736
.elementByAccessibilityId("first-navigate-single-page")
@@ -40,7 +39,7 @@ describe("single page routing", function () {
4039
.elementByAccessibilityId("second-single-page")
4140
.should.eventually.exist
4241
.text().should.eventually.equal("Second: single-page")
43-
.elementByAccessibilityId("second-navigate-single-page")
42+
.elementByAccessibilityId("second-navigate-back-single-page")
4443
.should.eventually.exist
4544
.tap()
4645
.elementByAccessibilityId("first-single-page")

0 commit comments

Comments
 (0)