angular-cn/modules/angular2/test/router/outlet_spec.js

349 lines
9.9 KiB
JavaScript

import {
AsyncTestCompleter,
beforeEach,
ddescribe,
xdescribe,
describe,
el,
expect,
iit,
inject,
beforeEachBindings,
it,
xit
} from 'angular2/test_lib';
import {TestBed} from 'angular2/test';
import {Injector, bind} from 'angular2/di';
import {Component} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {RootRouter} from 'angular2/src/router/router';
import {Pipeline} from 'angular2/src/router/pipeline';
import {Router, RouterOutlet, RouterLink, RouteParams} from 'angular2/router';
import {RouteConfig} from 'angular2/src/router/route_config_impl';
import {DOM} from 'angular2/src/dom/dom_adapter';
import {SpyLocation} from 'angular2/src/mock/location_mock';
import {Location} from 'angular2/src/router/location';
import {RouteRegistry} from 'angular2/src/router/route_registry';
import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver';
var teamCmpCount;
export function main() {
describe('Outlet Directive', () => {
var ctx, tb, view, rtr, location;
beforeEachBindings(() => [
Pipeline,
RouteRegistry,
DirectiveResolver,
bind(Location).toClass(SpyLocation),
bind(Router).toFactory((registry, pipeline, location) => {
return new RootRouter(registry, pipeline, location, MyComp);
}, [RouteRegistry, Pipeline, Location])
]);
beforeEach(inject([TestBed, Router, Location], (testBed, router, loc) => {
tb = testBed;
ctx = new MyComp();
rtr = router;
location = loc;
teamCmpCount = 0;
}));
function compile(template:string = "<router-outlet></router-outlet>") {
tb.overrideView(MyComp, new View({template: ('<div>' + template + '</div>'), directives: [RouterOutlet, RouterLink]}));
return tb.createView(MyComp, {context: ctx}).then((v) => {
view = v;
});
}
it('should work in a simple case', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config({'path': '/test', 'component': HelloCmp}))
.then((_) => rtr.navigate('/test'))
.then((_) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('hello');
async.done();
});
}));
it('should navigate between components with different parameters', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config({'path': '/user/:name', 'component': UserCmp}))
.then((_) => rtr.navigate('/user/brian'))
.then((_) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('hello brian');
})
.then((_) => rtr.navigate('/user/igor'))
.then((_) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('hello igor');
async.done();
});
}));
it('should work with child routers', inject([AsyncTestCompleter], (async) => {
compile('outer { <router-outlet></router-outlet> }')
.then((_) => rtr.config({'path': '/a', 'component': ParentCmp}))
.then((_) => rtr.navigate('/a/b'))
.then((_) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('outer { inner { hello } }');
async.done();
});
}));
it('should work with sibling routers', inject([AsyncTestCompleter], (async) => {
compile('left { <router-outlet name="left"></router-outlet> } | right { <router-outlet name="right"></router-outlet> }')
.then((_) => rtr.config({'path': '/ab', 'components': {'left': A, 'right': B} }))
.then((_) => rtr.config({'path': '/ba', 'components': {'left': B, 'right': A} }))
.then((_) => rtr.navigate('/ab'))
.then((_) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('left { A } | right { B }');
})
.then((_) => rtr.navigate('/ba'))
.then((_) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('left { B } | right { A }');
async.done();
});
}));
it('should work with redirects', inject([AsyncTestCompleter, Location], (async, location) => {
compile()
.then((_) => rtr.config({'path': '/original', 'redirectTo': '/redirected' }))
.then((_) => rtr.config({'path': '/redirected', 'component': A }))
.then((_) => rtr.navigate('/original'))
.then((_) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('A');
expect(location.urlChanges).toEqual(['/redirected']);
async.done();
});
}));
function getHref(view) {
return DOM.getAttribute(view.rootNodes[0].childNodes[0], 'href');
}
it('should generate absolute hrefs that include the base href', inject([AsyncTestCompleter], (async) => {
location.setBaseHref('/my/base');
compile('<a href="hello" router-link="user"></a>')
.then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'}))
.then((_) => rtr.navigate('/a/b'))
.then((_) => {
view.detectChanges();
expect(getHref(view)).toEqual('/my/base/user');
async.done();
});
}));
it('should generate link hrefs without params', inject([AsyncTestCompleter], (async) => {
compile('<a href="hello" router-link="user"></a>')
.then((_) => rtr.config({'path': '/user', 'component': UserCmp, 'as': 'user'}))
.then((_) => rtr.navigate('/a/b'))
.then((_) => {
view.detectChanges();
expect(getHref(view)).toEqual('/user');
async.done();
});
}));
it('should reuse common parent components', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config({'path': '/team/:id', 'component': TeamCmp }))
.then((_) => rtr.navigate('/team/angular/user/rado'))
.then((_) => {
view.detectChanges();
expect(teamCmpCount).toBe(1);
expect(view.rootNodes).toHaveText('team angular { hello rado }');
})
.then((_) => rtr.navigate('/team/angular/user/victor'))
.then((_) => {
view.detectChanges();
expect(teamCmpCount).toBe(1);
expect(view.rootNodes).toHaveText('team angular { hello victor }');
async.done();
});
}));
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>')
.then((_) => rtr.config({'path': '/user/:name', 'component': UserCmp, 'as': 'user'}))
.then((_) => rtr.navigate('/a/b'))
.then((_) => {
view.detectChanges();
expect(view.rootNodes).toHaveText('brian');
expect(DOM.getAttribute(view.rootNodes[0].childNodes[0], 'href')).toEqual('/user/brian');
async.done();
});
}));
describe('when clicked', () => {
var clickOnElement = function(view) {
var anchorEl = view.rootNodes[0].childNodes[0];
var dispatchedEvent = DOM.createMouseEvent('click');
DOM.dispatchEvent(anchorEl, dispatchedEvent);
return dispatchedEvent;
};
it('test', inject([AsyncTestCompleter], (async) => {
async.done();
}));
it('should navigate to link hrefs without params', inject([AsyncTestCompleter], (async) => {
compile('<a href="hello" router-link="user"></a>')
.then((_) => rtr.config({
'path': '/user',
'component': UserCmp,
'as': 'user'
}))
.then((_) => rtr.navigate('/a/b'))
.then((_) => {
view.detectChanges();
var dispatchedEvent = clickOnElement(view);
expect(dispatchedEvent.defaultPrevented || !dispatchedEvent.returnValue).toBe(true);
// router navigation is async.
rtr.subscribe((_) => {
expect(location.urlChanges).toEqual(['/user']);
async.done();
});
});
}));
it('should navigate to link hrefs in presence of base href', inject([AsyncTestCompleter], (async) => {
location.setBaseHref('/base');
compile('<a href="hello" router-link="user"></a>')
.then((_) => rtr.config({
'path': '/user',
'component': UserCmp,
'as': 'user'
}))
.then((_) => rtr.navigate('/a/b'))
.then((_) => {
view.detectChanges();
var dispatchedEvent = clickOnElement(view);
expect(dispatchedEvent.defaultPrevented || !dispatchedEvent.returnValue).toBe(true);
// router navigation is async.
rtr.subscribe((_) => {
expect(location.urlChanges).toEqual(['/base/user']);
async.done();
});
});
}));
});
});
}
@Component({
selector: 'hello-cmp'
})
@View({
template: "{{greeting}}"
})
class HelloCmp {
greeting:string;
constructor() {
this.greeting = "hello";
}
}
@Component({
selector: 'a-cmp'
})
@View({
template: "A"
})
class A {}
@Component({
selector: 'b-cmp'
})
@View({
template: "B"
})
class B {}
@Component({
selector: 'user-cmp'
})
@View({
template: "hello {{user}}"
})
class UserCmp {
user:string;
constructor(params:RouteParams) {
this.user = params.get('name');
}
}
@Component({
selector: 'parent-cmp'
})
@View({
template: "inner { <router-outlet></router-outlet> }",
directives: [RouterOutlet]
})
@RouteConfig([{
path: '/b',
component: HelloCmp
}])
class ParentCmp {
constructor() {}
}
@Component({
selector: 'team-cmp'
})
@View({
template: "team {{id}} { <router-outlet></router-outlet> }",
directives: [RouterOutlet]
})
@RouteConfig([{
path: '/user/:name',
component: UserCmp
}])
class TeamCmp {
id:string;
constructor(params:RouteParams) {
this.id = params.get('id');
teamCmpCount += 1;
}
}
@Component({
selector: 'my-comp'
})
class MyComp {
name;
}