chore(test): migrate router tests to TestComponentBuilder
Part of #2354
This commit is contained in:
parent
0f7dd62f16
commit
66d0e4e656
|
@ -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);
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue