chore(test): migrate router tests to TestComponentBuilder

Part of #2354
This commit is contained in:
Julie Ralph 2015-06-26 16:04:19 -07:00
parent 0f7dd62f16
commit 66d0e4e656
1 changed files with 42 additions and 41 deletions

View File

@ -1,5 +1,7 @@
import { import {
AsyncTestCompleter, AsyncTestCompleter,
TestComponentBuilder,
asNativeElements,
beforeEach, beforeEach,
ddescribe, ddescribe,
xdescribe, xdescribe,
@ -13,8 +15,6 @@ import {
xit xit
} from 'angular2/test_lib'; } from 'angular2/test_lib';
import {TestBed} from 'angular2/test';
import {Injector, bind} from 'angular2/di'; import {Injector, bind} from 'angular2/di';
import {Component, View} from 'angular2/src/core/annotations/decorators'; import {Component, View} from 'angular2/src/core/annotations/decorators';
import * as annotations from 'angular2/src/core/annotations_impl/view'; import * as annotations from 'angular2/src/core/annotations_impl/view';
@ -37,9 +37,8 @@ var teamCmpCount;
export function main() { export function main() {
describe('Outlet Directive', () => { describe('Outlet Directive', () => {
var ctx: MyComp; var tcb: TestComponentBuilder;
var tb: TestBed; var rootTC, rtr, location;
var view, rtr, location;
beforeEachBindings(() => [ beforeEachBindings(() => [
Pipeline, Pipeline,
@ -52,20 +51,20 @@ export function main() {
[RouteRegistry, Pipeline, Location]) [RouteRegistry, Pipeline, Location])
]); ]);
beforeEach(inject([TestBed, Router, Location], (testBed, router, loc) => { beforeEach(inject([TestComponentBuilder, Router, Location], (tcBuilder, router, loc) => {
tb = testBed; tcb = tcBuilder;
ctx = new MyComp();
rtr = router; rtr = router;
location = loc; location = loc;
teamCmpCount = 0; teamCmpCount = 0;
})); }));
function compile(template: string = "<router-outlet></router-outlet>") { function compile(template: string = "<router-outlet></router-outlet>") {
tb.overrideView( return tcb.overrideView(MyComp, new annotations.View({
MyComp, template: ('<div>' + template + '</div>'),
new annotations.View( directives: [RouterOutlet, RouterLink]
{template: ('<div>' + template + '</div>'), directives: [RouterOutlet, RouterLink]})); }))
return tb.createView(MyComp, {context: ctx}).then((v) => { view = v; }); .createAsync(MyComp)
.then((tc) => { rootTC = tc; });
} }
it('should work in a simple case', inject([AsyncTestCompleter], (async) => { it('should work in a simple case', inject([AsyncTestCompleter], (async) => {
@ -73,8 +72,8 @@ export function main() {
.then((_) => rtr.config({'path': '/test', 'component': HelloCmp})) .then((_) => rtr.config({'path': '/test', 'component': HelloCmp}))
.then((_) => rtr.navigate('/test')) .then((_) => rtr.navigate('/test'))
.then((_) => { .then((_) => {
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes).toHaveText('hello'); expect(rootTC.nativeElement).toHaveText('hello');
async.done(); async.done();
}); });
})); }));
@ -86,13 +85,13 @@ export function main() {
.then((_) => rtr.config({'path': '/user/:name', 'component': UserCmp})) .then((_) => rtr.config({'path': '/user/:name', 'component': UserCmp}))
.then((_) => rtr.navigate('/user/brian')) .then((_) => rtr.navigate('/user/brian'))
.then((_) => { .then((_) => {
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes).toHaveText('hello brian'); expect(rootTC.nativeElement).toHaveText('hello brian');
}) })
.then((_) => rtr.navigate('/user/igor')) .then((_) => rtr.navigate('/user/igor'))
.then((_) => { .then((_) => {
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes).toHaveText('hello igor'); expect(rootTC.nativeElement).toHaveText('hello igor');
async.done(); async.done();
}); });
})); }));
@ -103,8 +102,8 @@ export function main() {
.then((_) => rtr.config({'path': '/a/...', 'component': ParentCmp})) .then((_) => rtr.config({'path': '/a/...', 'component': ParentCmp}))
.then((_) => rtr.navigate('/a/b')) .then((_) => rtr.navigate('/a/b'))
.then((_) => { .then((_) => {
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes).toHaveText('outer { inner { hello } }'); expect(rootTC.nativeElement).toHaveText('outer { inner { hello } }');
async.done(); async.done();
}); });
})); }));
@ -116,14 +115,16 @@ export function main() {
.then((_) => rtr.config({'path': '/redirected', 'component': A})) .then((_) => rtr.config({'path': '/redirected', 'component': A}))
.then((_) => rtr.navigate('/original')) .then((_) => rtr.navigate('/original'))
.then((_) => { .then((_) => {
view.detectChanges(); rootTC.detectChanges();
expect(view.rootNodes).toHaveText('A'); expect(rootTC.nativeElement).toHaveText('A');
expect(location.urlChanges).toEqual(['/redirected']); expect(location.urlChanges).toEqual(['/redirected']);
async.done(); async.done();
}); });
})); }));
function getHref(view) { return DOM.getAttribute(view.rootNodes[0].childNodes[0], 'href'); } function getHref(tc) {
return DOM.getAttribute(tc.componentViewChildren[0].nativeElement, 'href');
}
it('should generate absolute hrefs that include the base href', it('should generate absolute hrefs that include the base href',
inject([AsyncTestCompleter], (async) => { inject([AsyncTestCompleter], (async) => {
@ -132,8 +133,8 @@ export function main() {
.then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'})) .then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'}))
.then((_) => rtr.navigate('/a/b')) .then((_) => rtr.navigate('/a/b'))
.then((_) => { .then((_) => {
view.detectChanges(); rootTC.detectChanges();
expect(getHref(view)).toEqual('/my/base/user'); expect(getHref(rootTC)).toEqual('/my/base/user');
async.done(); async.done();
}); });
})); }));
@ -144,8 +145,8 @@ export function main() {
.then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'})) .then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'}))
.then((_) => rtr.navigate('/a/b')) .then((_) => rtr.navigate('/a/b'))
.then((_) => { .then((_) => {
view.detectChanges(); rootTC.detectChanges();
expect(getHref(view)).toEqual('/user'); expect(getHref(rootTC)).toEqual('/user');
async.done(); async.done();
}); });
})); }));
@ -156,29 +157,29 @@ export function main() {
.then((_) => rtr.config({'path': '/team/:id/...', 'component': TeamCmp})) .then((_) => rtr.config({'path': '/team/:id/...', 'component': TeamCmp}))
.then((_) => rtr.navigate('/team/angular/user/rado')) .then((_) => rtr.navigate('/team/angular/user/rado'))
.then((_) => { .then((_) => {
view.detectChanges(); rootTC.detectChanges();
expect(teamCmpCount).toBe(1); expect(teamCmpCount).toBe(1);
expect(view.rootNodes).toHaveText('team angular { hello rado }'); expect(rootTC.nativeElement).toHaveText('team angular { hello rado }');
}) })
.then((_) => rtr.navigate('/team/angular/user/victor')) .then((_) => rtr.navigate('/team/angular/user/victor'))
.then((_) => { .then((_) => {
view.detectChanges(); rootTC.detectChanges();
expect(teamCmpCount).toBe(1); expect(teamCmpCount).toBe(1);
expect(view.rootNodes).toHaveText('team angular { hello victor }'); expect(rootTC.nativeElement).toHaveText('team angular { hello victor }');
async.done(); async.done();
}); });
})); }));
it('should generate link hrefs with params', inject([AsyncTestCompleter], (async) => { it('should generate link hrefs with params', inject([AsyncTestCompleter], (async) => {
ctx.name = 'brian';
compile('<a href="hello" router-link="user" [router-params]="{name: name}">{{name}}</a>') compile('<a href="hello" router-link="user" [router-params]="{name: name}">{{name}}</a>')
.then((_) => rtr.config({'path': '/user/:name', 'component': UserCmp, 'as': 'user'})) .then((_) => rtr.config({'path': '/user/:name', 'component': UserCmp, 'as': 'user'}))
.then((_) => rtr.navigate('/a/b')) .then((_) => rtr.navigate('/a/b'))
.then((_) => { .then((_) => {
view.detectChanges(); rootTC.componentInstance.name = 'brian';
expect(view.rootNodes).toHaveText('brian'); rootTC.detectChanges();
expect(DOM.getAttribute(view.rootNodes[0].childNodes[0], 'href')) expect(rootTC.nativeElement).toHaveText('brian');
expect(DOM.getAttribute(rootTC.componentViewChildren[0].nativeElement, 'href'))
.toEqual('/user/brian'); .toEqual('/user/brian');
async.done(); async.done();
}); });
@ -187,7 +188,7 @@ export function main() {
describe('when clicked', () => { describe('when clicked', () => {
var clickOnElement = function(view) { var clickOnElement = function(view) {
var anchorEl = view.rootNodes[0].childNodes[0]; var anchorEl = rootTC.componentViewChildren[0].nativeElement;
var dispatchedEvent = DOM.createMouseEvent('click'); var dispatchedEvent = DOM.createMouseEvent('click');
DOM.dispatchEvent(anchorEl, dispatchedEvent); DOM.dispatchEvent(anchorEl, dispatchedEvent);
return dispatchedEvent; return dispatchedEvent;
@ -200,9 +201,9 @@ export function main() {
.then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'})) .then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'}))
.then((_) => rtr.navigate('/a/b')) .then((_) => rtr.navigate('/a/b'))
.then((_) => { .then((_) => {
view.detectChanges(); rootTC.detectChanges();
var dispatchedEvent = clickOnElement(view); var dispatchedEvent = clickOnElement(rootTC);
expect(dispatchedEvent.defaultPrevented || !dispatchedEvent.returnValue) expect(dispatchedEvent.defaultPrevented || !dispatchedEvent.returnValue)
.toBe(true); .toBe(true);
@ -221,9 +222,9 @@ export function main() {
.then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'})) .then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'}))
.then((_) => rtr.navigate('/a/b')) .then((_) => rtr.navigate('/a/b'))
.then((_) => { .then((_) => {
view.detectChanges(); rootTC.detectChanges();
var dispatchedEvent = clickOnElement(view); var dispatchedEvent = clickOnElement(rootTC);
expect(dispatchedEvent.defaultPrevented || !dispatchedEvent.returnValue) expect(dispatchedEvent.defaultPrevented || !dispatchedEvent.returnValue)
.toBe(true); .toBe(true);