Skip to content

Commit 99394b3

Browse files
author
Alexander Vakrilov
authored
Merge pull request NativeScript#319 from NativeScript/snippets-router-3
Tests and snippets for the angular-router documentation
2 parents 0c6a195 + 825d202 commit 99394b3

File tree

9 files changed

+260
-7
lines changed

9 files changed

+260
-7
lines changed

‎tests/app/main.ts

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,34 @@ 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";
87
import {APP_ROOT_VIEW} from "nativescript-angular/platform-providers";
98
import {Page} from "ui/page";
10-
import {Label} from "ui/label";
119
import {StackLayout} from "ui/layouts/stack-layout";
10+
1211
import * as application from "application";
13-
//nativeScriptBootstrap(AppComponent, [NS_ROUTER_PROVIDERS]);
1412
import {HOOKS_LOG} from "./base.component";
1513
import {MultiPageMain, MultiPageRouterProviders} from "./multi-page-main.component";
1614
import {SinglePageMain, SinglePageRouterProviders} from "./single-page-main.component";
1715
import {provide, OpaqueToken} from "@angular/core";
1816

17+
import {APP_ROUTER_PROVIDERS} from "./snippets/navigation/app.routes";
18+
import {PageNavigationApp} from "./snippets/navigation/page-outlet";
19+
import {NavigationApp} from "./snippets/navigation/router-outlet";
20+
1921
import { rendererTraceCategory, routerTraceCategory } from "nativescript-angular/trace";
2022

2123
import {BehaviorSubject} from "rxjs";
2224

2325
import trace = require("trace");
24-
//trace.setCategories(rendererTraceCategory + "," + routerTraceCategory);
26+
// trace.setCategories(rendererTraceCategory + "," + routerTraceCategory);
27+
trace.setCategories(routerTraceCategory);
2528
trace.enable();
2629

27-
//nativeScriptBootstrap(MultiPageMain, [NS_ROUTER_PROVIDERS]);
30+
// nativeScriptBootstrap(NavigationApp, [APP_ROUTER_PROVIDERS]);
31+
// nativeScriptBootstrap(PageRouterNavigationApp, [APP_ROUTER_PROVIDERS]);
32+
33+
34+
// nativeScriptBootstrap(MultiPageMain, [NS_ROUTER_PROVIDERS]);
2835
// nativeScriptBootstrap(GestureComponent);
2936
// nativeScriptBootstrap(LayoutsComponent);
3037
// nativeScriptBootstrap(IconFontComponent);

‎tests/app/snippets/navigation/app.routes.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {FirstComponent, SecondComponent} from "./navigation-common";
2+
// >> router-config-all
3+
import {RouterConfig} from '@angular/router';
4+
import {nsProvideRouter} from 'nativescript-angular/router';
5+
6+
const routes: RouterConfig = [
7+
{ path: "", redirectTo: "/first", terminal: true },
8+
{ path: "first", component: FirstComponent },
9+
{ path: "second", component: SecondComponent },
10+
];
11+
12+
export const APP_ROUTER_PROVIDERS = [
13+
nsProvideRouter(routes, { enableTracing: false })
14+
];
15+
// << router-config-all

‎tests/app/snippets/navigation/config-snippets.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// Just fake routes for config snippets
2+
class LoginComponent { }
3+
class GroceryListComponent { }
4+
class GroceryComponent { }
5+
class GroceriesApp { }
6+
7+
// >> router-config
8+
import {RouterConfig} from '@angular/router';
9+
const routes: RouterConfig = [
10+
{ path: "login", component: LoginComponent },
11+
{ path: "groceries", component: GroceryListComponent },
12+
{ path: "grocery/:id", component: GroceryComponent },
13+
];
14+
// << router-config
15+
16+
// >> router-provider
17+
import {nsProvideRouter} from 'nativescript-angular/router';
18+
export const APP_ROUTER_PROVIDERS = [
19+
nsProvideRouter(routes, { enableTracing: false })
20+
];
21+
// << router-provider
22+
23+
// >> router-bootstrap
24+
import {nativeScriptBootstrap} from 'nativescript-angular/application';
25+
// >> (hide)
26+
function start_snippet() {
27+
// << (hide)
28+
nativeScriptBootstrap(GroceriesApp, [APP_ROUTER_PROVIDERS]);
29+
// << router-bootstrap
30+
}

‎tests/app/snippets/navigation/navigation-common.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* >> router-content-components */
2+
.title {
3+
font-size: 30;
4+
margin: 16;
5+
}
6+
7+
.nav {
8+
orientation: horizontal;
9+
horizontal-align: stretch;
10+
padding: 4;
11+
background-color: lightblue;
12+
}
13+
14+
.link {
15+
margin: 10 30;
16+
}
17+
/* << router-content-components */

‎tests/app/snippets/navigation/navigation-common.ts

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
// >> router-content-components
2+
import {Component} from '@angular/core';
3+
import {NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
4+
5+
@Component({
6+
selector: "first",
7+
directives: [NS_ROUTER_DIRECTIVES],
8+
template: `
9+
<StackLayout>
10+
<Label text="First component" class="title"></Label>
11+
<Button text="GO TO SECOND" [nsRouterLink]="['/second']" class="link"></Button>
12+
</StackLayout>`
13+
})
14+
export class FirstComponent { }
15+
16+
@Component({
17+
selector: "second",
18+
directives: [NS_ROUTER_DIRECTIVES],
19+
template: `
20+
<StackLayout>
21+
<Label text="Second component" class="title"></Label>
22+
<Button text="GO TO FIRST" [nsRouterLink]="['/first']" class="link"></Button>
23+
</StackLayout>`
24+
})
25+
export class SecondComponent { }
26+
// << router-content-components
27+
28+
29+
// >> router-location-back
30+
import {Location} from '@angular/common';
31+
32+
@Component({
33+
// ...
34+
// >> (hide)
35+
template: '', selector:"go-back"
36+
// << (hide)
37+
})
38+
export class MyComponent {
39+
constructor(private location: Location) { }
40+
41+
public goBack() {
42+
this.location.back();
43+
}
44+
}
45+
// << router-location-back

‎tests/app/snippets/navigation/page-outlet.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// >> page-outlet-example
2+
import {Component} from '@angular/core';
3+
import {nativeScriptBootstrap} from 'nativescript-angular/application';
4+
import {Router} from '@angular/router';
5+
import {NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
6+
7+
import {APP_ROUTER_PROVIDERS} from "./app.routes";
8+
9+
@Component({
10+
selector: 'page-navigation-test',
11+
directives: [NS_ROUTER_DIRECTIVES],
12+
template: `<page-router-outlet></page-router-outlet>`
13+
})
14+
export class PageNavigationApp {
15+
// >> (hide)
16+
constructor(public router: Router) { }
17+
// << (hide)
18+
}
19+
20+
// >> (hide)
21+
function start_snippet_() {
22+
// << (hide)
23+
nativeScriptBootstrap(PageNavigationApp, [APP_ROUTER_PROVIDERS]);
24+
// >> (hide)
25+
}
26+
// << (hide)
27+
// << page-outlet-example

‎tests/app/snippets/navigation/router-outlet.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// >> router-outlet-example
2+
import {Component} from '@angular/core';
3+
import {nativeScriptBootstrap} from 'nativescript-angular/application';
4+
import {ROUTER_DIRECTIVES, Router} from '@angular/router';
5+
import {NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
6+
7+
import {APP_ROUTER_PROVIDERS} from "./app.routes";
8+
9+
@Component({
10+
selector: 'navigation-test',
11+
directives: [ROUTER_DIRECTIVES, NS_ROUTER_DIRECTIVES],
12+
template: `
13+
<StackLayout>
14+
<StackLayout class="nav">
15+
<Button text="First"
16+
[nsRouterLink]="['/first']"></Button>
17+
<Button text="Second"
18+
[nsRouterLink]="['/second']"></Button>
19+
</StackLayout>
20+
21+
<router-outlet></router-outlet>
22+
</StackLayout>
23+
`
24+
})
25+
export class NavigationApp {
26+
// >> (hide)
27+
constructor(public router: Router) { }
28+
// << (hide)
29+
}
30+
31+
// >> (hide)
32+
function start_snippet() {
33+
// << (hide)
34+
nativeScriptBootstrap(NavigationApp, [APP_ROUTER_PROVIDERS]);
35+
// >> (hide)
36+
}
37+
// << (hide)
38+
// << router-outlet-example

‎tests/app/tests/snippets.ts

Lines changed: 75 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
//make sure you import mocha-config before @angular/core
22
import {assert} from "./test-config";
3+
34
import {Component, ElementRef, Renderer} from "@angular/core";
4-
import {TestApp} from "./test-app";
5+
import {NavigationEnd, NavigationStart, NavigationError} from "@angular/router";
6+
7+
import {Subscription} from "rxjs";
8+
import {TestApp, bootstrapTestApp, destroyTestApp} from "./test-app";
59

610
import {GestureComponent} from "../snippets/gestures.component";
711
import {LayoutsComponent} from "../snippets/layouts.component";
812
import {IconFontComponent} from "../snippets/icon-font.component";
913

14+
import {APP_ROUTER_PROVIDERS} from "../snippets/navigation/app.routes";
15+
import {PageNavigationApp} from "../snippets/navigation/page-outlet";
16+
import {NavigationApp} from "../snippets/navigation/router-outlet";
17+
1018
import {device, platformNames} from "platform";
1119
const IS_IOS = (device.os === platformNames.ios);
1220

@@ -47,3 +55,69 @@ describe('Snippets', () => {
4755
});
4856
});
4957
})
58+
59+
describe('Snippets Navigation', () => {
60+
var runningApp: any;
61+
var subscription: Subscription;
62+
63+
var cleanup = () => {
64+
if (subscription) {
65+
subscription.unsubscribe();
66+
subscription = null;
67+
}
68+
if (runningApp) {
69+
destroyTestApp(runningApp);
70+
runningApp = null;
71+
}
72+
}
73+
74+
after(cleanup);
75+
76+
it("router-outlet app", (done) => {
77+
bootstrapTestApp(NavigationApp, [APP_ROUTER_PROVIDERS]).then((app) => {
78+
console.log("app bootstraped");
79+
runningApp = app;
80+
var navStarted = false;
81+
82+
subscription = app.router.events.subscribe((e) => {
83+
if (e instanceof NavigationStart) {
84+
assert.equal("/", e.url);
85+
navStarted = true;
86+
}
87+
if (e instanceof NavigationEnd) {
88+
assert.isTrue(navStarted, "No NavigationStart event");
89+
assert.equal("/", e.url);
90+
assert.equal("/first", e.urlAfterRedirects);
91+
92+
cleanup();
93+
done();
94+
}
95+
})
96+
})
97+
});
98+
99+
it("page-router-outlet app", (done) => {
100+
console.log("------------- PageNavigationApp: " + PageNavigationApp);
101+
102+
bootstrapTestApp(PageNavigationApp, [APP_ROUTER_PROVIDERS]).then((app) => {
103+
console.log("app bootstraped");
104+
runningApp = app;
105+
var navStarted = false;
106+
107+
subscription = app.router.events.subscribe((e) => {
108+
if (e instanceof NavigationStart) {
109+
assert.equal("/", e.url);
110+
navStarted = true;
111+
}
112+
if (e instanceof NavigationEnd) {
113+
assert.isTrue(navStarted, "No NavigationStart event");
114+
assert.equal("/", e.url);
115+
assert.equal("/first", e.urlAfterRedirects);
116+
117+
cleanup();
118+
done();
119+
}
120+
})
121+
})
122+
});
123+
});

‎tests/app/tests/test-app.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export class TestApp {
5151

5252
var runningApps = new Map<any, { hostView: LayoutBase, appRoot: GridLayout, appRef: ApplicationRef }>();
5353

54-
export function bootstrapTestApp(appComponentType: any, providers: ProviderArray = []): Promise<any> {
54+
export function bootstrapTestApp<T>(appComponentType: new (...args) => T, providers: ProviderArray = []): Promise<T> {
5555
const page = topmost().currentPage;
5656
const rootLayout = <LayoutBase>page.content;
5757
const viewRoot = new GridLayout();

0 commit comments

Comments
 (0)