X Tutup
Skip to content

chore(router): add test for interaction between router-outer and @ViewChild. #5164

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
jelbourn wants to merge 1 commit into from
Closed

chore(router): add test for interaction between router-outer and @ViewChild. #5164

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 94 additions & 43 deletions modules/angular2/test/router/integration/router_integration_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {
AsyncTestCompleter,
beforeEach,
beforeEachBindings,
beforeEachProviders,
ddescribe,
describe,
expect,
Expand All @@ -17,9 +17,9 @@ import {
import {bootstrap} from 'angular2/bootstrap';
import {Component, Directive, View} from 'angular2/src/core/metadata';
import {DOM} from 'angular2/src/core/dom/dom_adapter';
import {provide} from 'angular2/core';
import {provide, ViewChild, AfterViewInit} from 'angular2/core';
import {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
import {RouteConfig, Route, Redirect} from 'angular2/src/router/route_config_decorator';
import {RouteConfig, Route, Redirect, AuxRoute} from 'angular2/src/router/route_config_decorator';
import {PromiseWrapper} from 'angular2/src/facade/async';
import {BaseException, WrappedException} from 'angular2/src/facade/exceptions';
import {
Expand All @@ -39,7 +39,7 @@ import {MockApplicationRef} from 'angular2/src/mock/mock_application_ref';

export function main() {
describe('router injectables', () => {
beforeEachBindings(() => {
beforeEachProviders(() => {
return [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: MockLocationStrategy}),
Expand Down Expand Up @@ -74,7 +74,7 @@ export function main() {
});

describe('broken app', () => {
beforeEachBindings(
beforeEachProviders(
() => { return [provide(ROUTER_PRIMARY_COMPONENT, {useValue: BrokenAppCmp})]; });

it('should rethrow exceptions from component constructors',
Expand All @@ -91,7 +91,7 @@ export function main() {
});

describe('back button app', () => {
beforeEachBindings(
beforeEachProviders(
() => { return [provide(ROUTER_PRIMARY_COMPONENT, {useValue: HierarchyAppCmp})]; });

it('should change the url without pushing a new history state for back navigations',
Expand All @@ -102,48 +102,47 @@ export function main() {
var router = fixture.debugElement.componentInstance.router;
var position = 0;
var flipped = false;
var history =
[
['/parent/child', 'root { parent { hello } }', '/super-parent/child'],
['/super-parent/child', 'root { super-parent { hello2 } }', '/parent/child'],
['/parent/child', 'root { parent { hello } }', false]
]

router.subscribe((_) => {
var location = fixture.debugElement.componentInstance.location;
var element = fixture.debugElement.nativeElement;
var path = location.path();

var entry = history[position];

expect(path).toEqual(entry[0]);
expect(element).toHaveText(entry[1]);

var nextUrl = entry[2];
if (nextUrl == false) {
flipped = true;
}

if (flipped && position == 0) {
async.done();
return;
}

position = position + (flipped ? -1 : 1);
if (flipped) {
location.back();
} else {
router.navigateByUrl(nextUrl);
}
});
var history = [
['/parent/child', 'root { parent { hello } }', '/super-parent/child'],
['/super-parent/child', 'root { super-parent { hello2 } }', '/parent/child'],
['/parent/child', 'root { parent { hello } }', false]
];

router.subscribe((_) => {
var location = fixture.debugElement.componentInstance.location;
var element = fixture.debugElement.nativeElement;
var path = location.path();

var entry = history[position];

expect(path).toEqual(entry[0]);
expect(element).toHaveText(entry[1]);

var nextUrl = entry[2];
if (nextUrl == false) {
flipped = true;
}

if (flipped && position == 0) {
async.done();
return;
}

position = position + (flipped ? -1 : 1);
if (flipped) {
location.back();
} else {
router.navigateByUrl(nextUrl);
}
});

router.navigateByUrl(history[0][0]);
});
}), 1000);
});

describe('hierarchical app', () => {
beforeEachBindings(
beforeEachProviders(
() => { return [provide(ROUTER_PRIMARY_COMPONENT, {useValue: HierarchyAppCmp})]; });

it('should bootstrap an app with a hierarchy',
Expand All @@ -165,7 +164,7 @@ export function main() {

// TODO(btford): mock out level lower than LocationStrategy once that level exists
xdescribe('custom app base ref', () => {
beforeEachBindings(() => { return [provide(APP_BASE_HREF, {useValue: '/my/app'})]; });
beforeEachProviders(() => { return [provide(APP_BASE_HREF, {useValue: '/my/app'})]; });
it('should bootstrap',
inject([AsyncTestCompleter, TestComponentBuilder],
(async, tcb: TestComponentBuilder) => {
Expand All @@ -188,7 +187,7 @@ export function main() {
// TODO: add a test in which the child component has bindings

describe('querystring params app', () => {
beforeEachBindings(
beforeEachProviders(
() => { return [provide(ROUTER_PRIMARY_COMPONENT, {useValue: QueryStringAppCmp})]; });

it('should recognize and return querystring params with the injected RouteParams',
Expand All @@ -211,18 +210,49 @@ export function main() {
});
}));
});

describe('retrieving components loaded via outlet via @ViewChild', () => {
let tcb: TestComponentBuilder = null;

beforeEachProviders(() => [provide(ROUTER_PRIMARY_COMPONENT, {useValue: AppCmp})]);

beforeEach(inject([TestComponentBuilder],
(testComponentBuilder) => { tcb = testComponentBuilder; }));

it('should get a reference and pass data to components loaded inside of outlets',
inject([AsyncTestCompleter], (async) => {
tcb.createAsync(AppWithViewChildren)
.then(fixture => {
let appInstance = fixture.debugElement.componentInstance;
let router = appInstance.router;

router.subscribe((_) => {
fixture.detectChanges();

expect(appInstance.helloCmp).toBeAnInstanceOf(HelloCmp);
expect(appInstance.helloCmp.message).toBe('Ahoy');

async.done();
});

router.navigateByUrl('/rainbow(pony)');
});
}));
});
});
}


@Component({selector: 'hello-cmp'})
@View({template: 'hello'})
class HelloCmp {
public message: string;
}

@Component({selector: 'hello2-cmp'})
@View({template: 'hello2'})
class Hello2Cmp {
public greeting: string;
}

@Component({selector: 'app-cmp'})
Expand All @@ -232,6 +262,27 @@ class AppCmp {
constructor(public router: Router, public location: LocationStrategy) {}
}

@Component({
selector: 'app-cmp',
template: `
Hello routing!
<router-outlet></router-outlet>
<router-outlet name="pony"></router-outlet>`,
directives: ROUTER_DIRECTIVES
})
@RouteConfig([
new Route({path: '/rainbow', component: HelloCmp}),
new AuxRoute({name: 'pony', path: 'pony', component: Hello2Cmp})
])
class AppWithViewChildren implements AfterViewInit {
@ViewChild(HelloCmp) helloCmp: HelloCmp;
@ViewChild(Hello2Cmp) hello2Cmp: Hello2Cmp;

constructor(public router: Router, public location: LocationStrategy) {}

afterViewInit() { this.helloCmp.message = 'Ahoy'; }
}

@Component({selector: 'parent-cmp'})
@View({template: `parent { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
@RouteConfig([new Route({path: '/child', component: HelloCmp})])
Expand Down
X Tutup