iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(router): add RouterLink

Browse Source
This commit is contained in:
vsavkin
2016-04-27 15:37:20 -07:00
committed by Victor Savkin
parent fa5bfe4b64
commit de56dd5f30
4 changed files with 212 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/angular2/test/alt_router/integration_spec.ts
+116 -75
View File
@@ -12,10 +12,13 @@ import {
inject,
beforeEachProviders,
it,
xit
xit,
fakeAsync,
tick
} from 'angular2/testing_internal';
import {provide, Component, ComponentResolver} from 'angular2/core';
import {
Router,
RouterOutletMap,
@@ -23,105 +26,129 @@ import {
Route,
ROUTER_DIRECTIVES,
Routes,
RouterUrlParser,
DefaultRouterUrlParser,
RouterUrlSerializer,
DefaultRouterUrlSerializer,
OnActivate
} from 'angular2/alt_router';
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
export function main() {
describe('navigation', () => {
beforeEachProviders(() => [
provide(RouterUrlParser, {useClass: DefaultRouterUrlParser}),
provide(RouterUrlSerializer, {useClass: DefaultRouterUrlSerializer}),
RouterOutletMap,
provide(Router,
{
useFactory: (resolver, urlParser, outletMap) =>
new Router(RootCmp, resolver, urlParser, outletMap),
deps: [ComponentResolver, RouterUrlParser, RouterOutletMap]
deps: [ComponentResolver, RouterUrlSerializer, RouterOutletMap]
})
]);
it('should support nested routes',
inject([AsyncTestCompleter, Router, TestComponentBuilder], (async, router, tcb) => {
let fixture;
compileRoot(tcb)
.then((rtc) => {fixture = rtc})
.then((_) => router.navigateByUrl('/team/22/user/victor'))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement)
.toHaveText('team 22 { hello victor, aux: }');
async.done();
});
}));
fakeAsync(inject([Router, TestComponentBuilder], (router, tcb) => {
let fixture = tcb.createFakeAsync(RootCmp);
router.navigateByUrl('/team/22/user/victor');
advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 22 { hello victor, aux: }');
})));
it('should support aux routes',
inject([AsyncTestCompleter, Router, TestComponentBuilder], (async, router, tcb) => {
let fixture;
compileRoot(tcb)
.then((rtc) => {fixture = rtc})
.then((_) => router.navigateByUrl('/team/22/user/victor(/simple)'))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement)
.toHaveText('team 22 { hello victor, aux: simple }');
async.done();
});
}));
fakeAsync(inject([Router, TestComponentBuilder], (router, tcb) => {
let fixture = tcb.createFakeAsync(RootCmp);
it('should unload outlets',
inject([AsyncTestCompleter, Router, TestComponentBuilder], (async, router, tcb) => {
let fixture;
compileRoot(tcb)
.then((rtc) => {fixture = rtc})
.then((_) => router.navigateByUrl('/team/22/user/victor(/simple)'))
.then((_) => router.navigateByUrl('/team/22/user/victor'))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement)
.toHaveText('team 22 { hello victor, aux: }');
async.done();
});
}));
router.navigateByUrl('/team/22/user/victor(/simple)');
advance(fixture);
expect(fixture.debugElement.nativeElement)
.toHaveText('team 22 { hello victor, aux: simple }');
})));
it('should unload outlets', fakeAsync(inject([Router, TestComponentBuilder], (router, tcb) => {
let fixture = tcb.createFakeAsync(RootCmp);
router.navigateByUrl('/team/22/user/victor(/simple)');
advance(fixture);
router.navigateByUrl('/team/22/user/victor');
advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 22 { hello victor, aux: }');
})));
it('should unload nested outlets',
inject([AsyncTestCompleter, Router, TestComponentBuilder], (async, router, tcb) => {
let fixture;
compileRoot(tcb)
.then((rtc) => {fixture = rtc})
.then((_) => router.navigateByUrl('/team/22/user/victor(/simple)'))
.then((_) => router.navigateByUrl('/'))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('');
async.done();
});
}));
fakeAsync(inject([Router, TestComponentBuilder], (router, tcb) => {
let fixture = tcb.createFakeAsync(RootCmp);
router.navigateByUrl('/team/22/user/victor(/simple)');
advance(fixture);
router.navigateByUrl('/');
advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('');
})));
it('should update nested routes when url changes',
inject([AsyncTestCompleter, Router, TestComponentBuilder], (async, router, tcb) => {
let fixture;
let team1;
let team2;
compileRoot(tcb)
.then((rtc) => {fixture = rtc})
.then((_) => router.navigateByUrl('/team/22/user/victor'))
.then((_) => { team1 = fixture.debugElement.children[1].componentInstance; })
.then((_) => router.navigateByUrl('/team/22/user/fedor'))
.then((_) => { team2 = fixture.debugElement.children[1].componentInstance; })
.then((_) => {
fixture.detectChanges();
expect(team1).toBe(team2);
expect(fixture.debugElement.nativeElement)
.toHaveText('team 22 { hello fedor, aux: }');
async.done();
});
}));
fakeAsync(inject([Router, TestComponentBuilder], (router, tcb) => {
let fixture = tcb.createFakeAsync(RootCmp);
// unload unused nodes
router.navigateByUrl('/team/22/user/victor');
advance(fixture);
let team1 = fixture.debugElement.children[1].componentInstance;
router.navigateByUrl('/team/22/user/fedor');
advance(fixture);
let team2 = fixture.debugElement.children[1].componentInstance;
expect(team1).toBe(team2);
expect(fixture.debugElement.nativeElement).toHaveText('team 22 { hello fedor, aux: }');
})));
it("should support router links",
fakeAsync(inject([Router, TestComponentBuilder], (router, tcb) => {
let fixture = tcb.createFakeAsync(RootCmp);
advance(fixture);
router.navigateByUrl('/team/22/link');
advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 22 { link, aux: }');
let native = DOM.querySelector(fixture.debugElement.nativeElement, "a");
expect(DOM.getAttribute(native, "href")).toEqual("/team/33/simple");
DOM.dispatchEvent(native, DOM.createMouseEvent('click'));
advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 33 { simple, aux: }');
})));
it("should update router links when router changes",
fakeAsync(inject([Router, TestComponentBuilder], (router, tcb) => {
let fixture = tcb.createFakeAsync(RootCmp);
advance(fixture);
router.navigateByUrl('/team/22/link(simple)');
advance(fixture);
expect(fixture.debugElement.nativeElement).toHaveText('team 22 { link, aux: simple }');
let native = DOM.querySelector(fixture.debugElement.nativeElement, "a");
expect(DOM.getAttribute(native, "href")).toEqual("/team/33/simple(aux:simple)");
router.navigateByUrl('/team/22/link(simple2)');
advance(fixture);
expect(DOM.getAttribute(native, "href")).toEqual("/team/33/simple(aux:simple2)");
})));
});
}
function advance(fixture: ComponentFixture): void {
tick();
fixture.detectChanges();
}
function compileRoot(tcb: TestComponentBuilder): Promise<ComponentFixture> {
return tcb.createAsync(RootCmp);
}
@@ -136,6 +163,18 @@ class UserCmp implements OnActivate {
class SimpleCmp {
}
@Component({selector: 'simple2-cmp', template: `simple2`})
class Simple2Cmp {
}
@Component({
selector: 'link-cmp',
template: `<a [routerLink]="['team', '33', 'simple']">link</a>`,
directives: ROUTER_DIRECTIVES
})
class LinkCmp {
}
@Component({
selector: 'team-cmp',
template: `team {{id}} { <router-outlet></router-outlet>, aux: <router-outlet name="aux"></router-outlet> }`,
@@ -143,7 +182,9 @@ class SimpleCmp {
})
@Routes([
new Route({path: 'user/:name', component: UserCmp}),
new Route({path: 'simple', component: SimpleCmp})
new Route({path: 'simple', component: SimpleCmp}),
new Route({path: 'simple2', component: Simple2Cmp}),
new Route({path: 'link', component: LinkCmp})
])
class TeamCmp implements OnActivate {
id: string;