Skip to content

Commit 4fe1792

Browse files
btfordbtford
committed
docs(router): move examples into own file and add tests
Closes angular#4620
1 parent f59adf3 commit 4fe1792

17 files changed

Lines changed: 611 additions & 95 deletions

‎modules/angular2/examples/router/ts/can_activate/can_activate_example.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import {bootstrap, bind, Component} from 'angular2/angular2';
2+
import {
3+
CanActivate,
4+
RouteConfig,
5+
ComponentInstruction,
6+
APP_BASE_HREF,
7+
ROUTER_DIRECTIVES
8+
} from 'angular2/router';
9+
10+
function checkIfWeHavePermission(instruction: ComponentInstruction) {
11+
return instruction.params['id'] == '1';
12+
}
13+
14+
// #docregion canActivate
15+
@Component({selector: 'control-panel-cmp', template: `<div>Settings: ...</div>`})
16+
@CanActivate(checkIfWeHavePermission)
17+
class ControlPanelCmp {
18+
}
19+
// #enddocregion
20+
21+
22+
@Component({
23+
selector: 'home-cmp',
24+
template: `
25+
<h1>Welcome Home!</h1>
26+
<div>
27+
Edit <a [router-link]="['/ControlPanelCmp', {id: 1}]" id="user-1-link">User 1</a> |
28+
Edit <a [router-link]="['/ControlPanelCmp', {id: 2}]" id="user-2-link">User 2</a>
29+
</div>
30+
`,
31+
directives: [ROUTER_DIRECTIVES]
32+
})
33+
class HomeCmp {
34+
}
35+
36+
37+
@Component({
38+
selector: 'example-app',
39+
template: `
40+
<h1>My App</h1>
41+
<router-outlet></router-outlet>
42+
`,
43+
directives: [ROUTER_DIRECTIVES]
44+
})
45+
@RouteConfig([
46+
{path: '/user-settings/:id', component: ControlPanelCmp, as: 'ControlPanelCmp'},
47+
{path: '/', component: HomeCmp, as: 'HomeCmp'}
48+
])
49+
class AppCmp {
50+
}
51+
52+
53+
export function main() {
54+
return bootstrap(AppCmp,
55+
[bind(APP_BASE_HREF).toValue('/angular2/examples/router/ts/can_activate')]);
56+
}

‎modules/angular2/examples/router/ts/can_activate/can_activate_spec.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import {verifyNoBrowserErrors} from 'angular2/src/testing/e2e_util';
2+
import {Promise} from 'angular2/src/core/facade/async';
3+
4+
function waitForElement(selector) {
5+
var EC = (<any>protractor).ExpectedConditions;
6+
// Waits for the element with id 'abc' to be present on the dom.
7+
browser.wait(EC.presenceOf($(selector)), 20000);
8+
}
9+
10+
describe('reuse example app', function() {
11+
12+
afterEach(verifyNoBrowserErrors);
13+
14+
var URL = 'angular2/examples/router/ts/can_activate/';
15+
16+
it('should navigate to user 1', function() {
17+
browser.get(URL);
18+
waitForElement('home-cmp');
19+
20+
element(by.css('#user-1-link')).click();
21+
waitForElement('control-panel-cmp');
22+
expect(browser.getCurrentUrl()).toMatch(/\/user-settings\/1$/);
23+
24+
expect(element(by.css('control-panel-cmp')).getText()).toContain('Settings');
25+
});
26+
27+
it('should not navigate to user 2', function() {
28+
browser.get(URL);
29+
waitForElement('home-cmp');
30+
31+
element(by.css('#user-2-link')).click();
32+
waitForElement('home-cmp');
33+
34+
expect(element(by.css('home-cmp')).getText()).toContain('Welcome Home!');
35+
});
36+
});

‎modules/angular2/examples/router/ts/can_activate/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Routing canActivate Lifecycle Example</title>
5+
<base href="/">
6+
7+
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
8+
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
9+
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
10+
<script src="/bundle/angular2.dev.js"></script>
11+
<script src="/bundle/router.dev.js"></script>
12+
</head>
13+
<body>
14+
<example-app>
15+
Loading...
16+
</example-app>
17+
<script>
18+
var filename = 'angular2/examples/router/ts/can_activate/can_activate_example';
19+
System.import(filename).then(function(m) {
20+
m.main();
21+
}, console.error.bind(console));
22+
</script>
23+
</body>
24+
</html>

‎modules/angular2/examples/router/ts/can_deactivate/can_deactivate_example.ts‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import {bind, bootstrap, Component} from 'angular2/angular2';
2+
import {
3+
CanDeactivate,
4+
RouteConfig,
5+
RouteParams,
6+
ComponentInstruction,
7+
ROUTER_DIRECTIVES,
8+
APP_BASE_HREF
9+
} from 'angular2/router';
10+
11+
// #docregion canDeactivate
12+
@Component({
13+
selector: 'note-cmp',
14+
template: `
15+
<div>
16+
<h2>id: {{id}}</h2>
17+
<textarea cols="40" rows="10"></textarea>
18+
</div>`
19+
})
20+
class NoteCmp implements CanDeactivate {
21+
id: string;
22+
23+
constructor(params: RouteParams) { this.id = params.get('id'); }
24+
25+
canDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
26+
return confirm('Are you sure you want to leave?');
27+
}
28+
}
29+
// #enddocregion
30+
31+
32+
@Component({
33+
selector: 'note-index-cmp',
34+
template: `
35+
<h1>Your Notes</h1>
36+
<div>
37+
Edit <a [router-link]="['/NoteCmp', {id: 1}]" id="note-1-link">Note 1</a> |
38+
Edit <a [router-link]="['/NoteCmp', {id: 2}]" id="note-2-link">Note 2</a>
39+
</div>
40+
`,
41+
directives: [ROUTER_DIRECTIVES]
42+
})
43+
class NoteIndexCmp {
44+
}
45+
46+
47+
@Component({
48+
selector: 'example-app',
49+
template: `
50+
<h1>My App</h1>
51+
<router-outlet></router-outlet>
52+
`,
53+
directives: [ROUTER_DIRECTIVES]
54+
})
55+
@RouteConfig([
56+
{path: '/note/:id', component: NoteCmp, as: 'NoteCmp'},
57+
{path: '/', component: NoteIndexCmp, as: 'NoteIndexCmp'}
58+
])
59+
class AppCmp {
60+
}
61+
62+
63+
export function main() {
64+
return bootstrap(AppCmp,
65+
[bind(APP_BASE_HREF).toValue('/angular2/examples/router/ts/can_deactivate')]);
66+
}

‎modules/angular2/examples/router/ts/can_deactivate/can_deactivate_spec.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {verifyNoBrowserErrors} from 'angular2/src/testing/e2e_util';
2+
import {Promise} from 'angular2/src/core/facade/async';
3+
4+
function waitForElement(selector) {
5+
var EC = (<any>protractor).ExpectedConditions;
6+
// Waits for the element with id 'abc' to be present on the dom.
7+
browser.wait(EC.presenceOf($(selector)), 20000);
8+
}
9+
10+
function waitForAlert() {
11+
var EC = (<any>protractor).ExpectedConditions;
12+
browser.wait(EC.alertIsPresent(), 1000);
13+
}
14+
15+
describe('can deactivate example app', function() {
16+
17+
afterEach(verifyNoBrowserErrors);
18+
19+
var URL = 'angular2/examples/router/ts/can_deactivate/';
20+
21+
it('should not navigate away when prompt is cancelled', function() {
22+
browser.get(URL);
23+
waitForElement('note-index-cmp');
24+
25+
element(by.css('#note-1-link')).click();
26+
waitForElement('note-cmp');
27+
28+
browser.navigate().back();
29+
waitForAlert();
30+
31+
browser.switchTo().alert().dismiss(); // Use to simulate cancel button
32+
33+
expect(element(by.css('note-cmp')).getText()).toContain('id: 1');
34+
});
35+
36+
it('should navigate away when prompt is confirmed', function() {
37+
browser.get(URL);
38+
waitForElement('note-index-cmp');
39+
40+
element(by.css('#note-1-link')).click();
41+
waitForElement('note-cmp');
42+
43+
browser.navigate().back();
44+
waitForAlert();
45+
46+
browser.switchTo().alert().accept();
47+
48+
waitForElement('note-index-cmp');
49+
50+
expect(element(by.css('note-index-cmp')).getText()).toContain('Your Notes');
51+
});
52+
});

‎modules/angular2/examples/router/ts/can_deactivate/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Routing canDeactivate Lifecycle Example</title>
5+
<base href="/">
6+
7+
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
8+
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
9+
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
10+
<script src="/bundle/angular2.dev.js"></script>
11+
<script src="/bundle/router.dev.js"></script>
12+
</head>
13+
<body>
14+
<example-app>
15+
Loading...
16+
</example-app>
17+
<script>
18+
var filename = 'angular2/examples/router/ts/can_deactivate/can_deactivate_example';
19+
System.import(filename).then(function(m) {
20+
m.main();
21+
}, console.error.bind(console));
22+
</script>
23+
</body>
24+
</html>

‎modules/angular2/examples/router/ts/on_activate/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Routing Reuse Lifecycle Example</title>
5+
<base href="/">
6+
7+
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
8+
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
9+
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
10+
<script src="/bundle/angular2.dev.js"></script>
11+
<script src="/bundle/router.dev.js"></script>
12+
</head>
13+
<body>
14+
<example-app>
15+
Loading...
16+
</example-app>
17+
<script>
18+
var filename = 'angular2/examples/router/ts/on_activate/on_activate_example';
19+
System.import(filename).then(function(m) {
20+
m.main();
21+
}, console.error.bind(console));
22+
</script>
23+
</body>
24+
</html>

‎modules/angular2/examples/router/ts/on_activate/on_activate_example.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import {Component, bind, bootstrap} from 'angular2/angular2';
2+
import {
3+
OnActivate,
4+
ComponentInstruction,
5+
RouteConfig,
6+
ROUTER_DIRECTIVES,
7+
APP_BASE_HREF
8+
} from 'angular2/router';
9+
10+
11+
// #docregion onActivate
12+
@Component({selector: 'my-cmp', template: `<div>onActivate: {{log}}</div>`})
13+
class MyCmp implements OnActivate {
14+
log: string = '';
15+
16+
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
17+
this.log = `Finished navigating from "${prev ? prev.urlPath : 'null'}" to "${next.urlPath}"`;
18+
}
19+
}
20+
// #enddocregion
21+
22+
23+
@Component({
24+
selector: 'example-app',
25+
template: `
26+
<h1>My App</h1>
27+
<nav>
28+
<a [router-link]="['/HomeCmp']" id="home-link">Navigate Home</a> |
29+
<a [router-link]="['/ParamCmp', {param: 1}]" id="param-link">Navigate with a Param</a>
30+
</nav>
31+
<router-outlet></router-outlet>
32+
`,
33+
directives: [ROUTER_DIRECTIVES]
34+
})
35+
@RouteConfig([
36+
{path: '/', component: MyCmp, as: 'HomeCmp'},
37+
{path: '/:param', component: MyCmp, as: 'ParamCmp'}
38+
])
39+
class AppCmp {
40+
}
41+
42+
43+
export function main() {
44+
return bootstrap(AppCmp,
45+
[bind(APP_BASE_HREF).toValue('/angular2/examples/router/ts/on_activate')]);
46+
}

‎modules/angular2/examples/router/ts/on_activate/on_activate_spec.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import {verifyNoBrowserErrors} from 'angular2/src/testing/e2e_util';
2+
import {Promise} from 'angular2/src/core/facade/async';
3+
4+
function waitForElement(selector) {
5+
var EC = (<any>protractor).ExpectedConditions;
6+
// Waits for the element with id 'abc' to be present on the dom.
7+
browser.wait(EC.presenceOf($(selector)), 20000);
8+
}
9+
10+
describe('on activate example app', function() {
11+
afterEach(verifyNoBrowserErrors);
12+
13+
var URL = 'angular2/examples/router/ts/on_activate/';
14+
15+
it('should update the text when navigating between routes', function() {
16+
browser.get(URL);
17+
waitForElement('my-cmp');
18+
19+
expect(element(by.css('my-cmp')).getText())
20+
.toContain('onActivate: Finished navigating from "null" to ""');
21+
22+
element(by.css('#param-link')).click();
23+
waitForElement('my-cmp');
24+
25+
expect(element(by.css('my-cmp')).getText())
26+
.toContain('onActivate: Finished navigating from "" to "1"');
27+
28+
browser.navigate().back();
29+
waitForElement('my-cmp');
30+
31+
expect(element(by.css('my-cmp')).getText())
32+
.toContain('onActivate: Finished navigating from "1" to ""');
33+
});
34+
});

‎modules/angular2/examples/router/ts/on_deactivate/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Routing Reuse Lifecycle Example</title>
5+
<base href="/">
6+
7+
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
8+
<script src="http://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.js"></script>
9+
<script>System.config({ baseURL: '/', defaultJSExtensions: true});</script>
10+
<script src="/bundle/angular2.dev.js"></script>
11+
<script src="/bundle/router.dev.js"></script>
12+
</head>
13+
<body>
14+
<example-app>
15+
Loading...
16+
</example-app>
17+
<script>
18+
var filename = 'angular2/examples/router/ts/on_deactivate/on_deactivate_example';
19+
System.import(filename).then(function(m) {
20+
m.main();
21+
}, console.error.bind(console));
22+
</script>
23+
</body>
24+
</html>

0 commit comments

Comments
 (0)