cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(router): support links with just auxiliary routes

Browse Source 
Closes #5930
This commit is contained in:
Brian Ford
2015-12-07 10:51:01 -08:00
parent 909e70bd61
commit 2a2f9a9a19
12 changed files with 476 additions and 295 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
modules/angular2/test/router/integration/async_route_spec.ts
View File

@ -12,7 +12,7 @@ import {registerSpecs} from './impl/async_route_spec_impl';
export function main() {
registerSpecs();
ddescribeRouter('async routes', () => {
describeRouter('async routes', () => {
describeWithout('children', () => {
describeWith('route data', itShouldRoute);
describeWithAndWithout('params', itShouldRoute);

150
modules/angular2/test/router/integration/auxiliary_route_spec.ts
View File

@ -1,145 +1,19 @@
import {
ComponentFixture,
AsyncTestCompleter,
TestComponentBuilder,
beforeEach,
ddescribe,
xdescribe,
describe,
el,
expect,
iit,
inject,
beforeEachProviders,
it,
xit
} from 'angular2/testing_internal';
describeRouter,
ddescribeRouter,
describeWith,
describeWithout,
describeWithAndWithout,
itShouldRoute
} from './util';
import {provide, Component, Injector, Inject} from 'angular2/core';
import {Router, ROUTER_DIRECTIVES, RouteParams, RouteData, Location} from 'angular2/router';
import {RouteConfig, Route, AuxRoute, Redirect} from 'angular2/src/router/route_config_decorator';
import {TEST_ROUTER_PROVIDERS, RootCmp, compile, clickOnElement, getHref} from './util';
function getLinkElement(rtc: ComponentFixture) {
return rtc.debugElement.componentViewChildren[0].nativeElement;
}
var cmpInstanceCount;
var childCmpInstanceCount;
import {registerSpecs} from './impl/aux_route_spec_impl';
export function main() {
describe('auxiliary routes', () => {
registerSpecs();
var tcb: TestComponentBuilder;
var fixture: ComponentFixture;
var rtr;
beforeEachProviders(() => TEST_ROUTER_PROVIDERS);
beforeEach(inject([TestComponentBuilder, Router], (tcBuilder, router) => {
tcb = tcBuilder;
rtr = router;
childCmpInstanceCount = 0;
cmpInstanceCount = 0;
}));
it('should recognize and navigate from the URL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Aux'})
]))
.then((_) => rtr.navigateByUrl('/hello(modal)'))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('main {hello} | aux {modal}');
async.done();
});
}));
it('should navigate via the link DSL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Modal'})
]))
.then((_) => rtr.navigate(['/Hello', ['Modal']]))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('main {hello} | aux {modal}');
async.done();
});
}));
it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile(
tcb,
`<a [routerLink]="['/Hello', ['Modal']]">open modal</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Modal'})
]))
.then((_) => {
fixture.detectChanges();
expect(getHref(getLinkElement(fixture))).toEqual('/hello(modal)');
async.done();
});
}));
it('should navigate from a link click',
inject([AsyncTestCompleter, Location], (async, location) => {
compile(
tcb,
`<a [routerLink]="['/Hello', ['Modal']]">open modal</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Modal'})
]))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement)
.toHaveText('open modal | main {} | aux {}');
rtr.subscribe((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement)
.toHaveText('open modal | main {hello} | aux {modal}');
expect(location.urlChanges).toEqual(['/hello(modal)']);
async.done();
});
clickOnElement(getLinkElement(fixture));
});
}));
describeRouter('aux routes', () => {
itShouldRoute();
describeWith('a primary route', itShouldRoute);
});
}
@Component({selector: 'hello-cmp', template: `{{greeting}}`})
class HelloCmp {
greeting: string;
constructor() { this.greeting = 'hello'; }
}
@Component({selector: 'modal-cmp', template: `modal`})
class ModalCmp {
}
@Component({
selector: 'aux-cmp',
template: 'main {<router-outlet></router-outlet>} | ' +
'aux {<router-outlet name="modal"></router-outlet>}',
directives: [ROUTER_DIRECTIVES],
})
@RouteConfig([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Aux'})
])
class AuxCmp {
}

247
modules/angular2/test/router/integration/impl/aux_route_spec_impl.ts Normal file
View File

@ -0,0 +1,247 @@
import {
ComponentFixture,
AsyncTestCompleter,
TestComponentBuilder,
beforeEach,
ddescribe,
xdescribe,
describe,
el,
expect,
iit,
inject,
beforeEachProviders,
it,
xit
} from 'angular2/testing_internal';
import {provide, Component, Injector, Inject} from 'angular2/core';
import {Router, ROUTER_DIRECTIVES, RouteParams, RouteData, Location} from 'angular2/router';
import {RouteConfig, Route, AuxRoute, Redirect} from 'angular2/src/router/route_config_decorator';
import {specs, compile, TEST_ROUTER_PROVIDERS, clickOnElement, getHref} from '../util';
import {BaseException} from 'angular2/src/facade/exceptions';
function getLinkElement(rtc: ComponentFixture, linkIndex: number = 0) {
return rtc.debugElement.componentViewChildren[linkIndex].nativeElement;
}
function auxRoutes() {
var tcb: TestComponentBuilder;
var fixture: ComponentFixture;
var rtr;
beforeEachProviders(() => TEST_ROUTER_PROVIDERS);
beforeEach(inject([TestComponentBuilder, Router], (tcBuilder, router) => {
tcb = tcBuilder;
rtr = router;
}));
it('should recognize and navigate from the URL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Aux'})
]))
.then((_) => rtr.navigateByUrl('/(modal)'))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('main {} | aux {modal}');
async.done();
});
}));
it('should navigate via the link DSL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Modal'})
]))
.then((_) => rtr.navigate(['/', ['Modal']]))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('main {} | aux {modal}');
async.done();
});
}));
it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile(
tcb,
`<a [routerLink]="['/', ['Modal']]">open modal</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Modal'})
]))
.then((_) => {
fixture.detectChanges();
expect(getHref(getLinkElement(fixture))).toEqual('/(modal)');
async.done();
});
}));
it('should navigate from a link click',
inject([AsyncTestCompleter, Location], (async, location) => {
compile(
tcb,
`<a [routerLink]="['/', ['Modal']]">open modal</a> | <a [routerLink]="['/Hello']">hello</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Modal'})
]))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement)
.toHaveText('open modal | hello | main {} | aux {}');
var navCount = 0;
rtr.subscribe((_) => {
navCount += 1;
fixture.detectChanges();
if (navCount == 1) {
expect(fixture.debugElement.nativeElement)
.toHaveText('open modal | hello | main {} | aux {modal}');
expect(location.urlChanges).toEqual(['/(modal)']);
expect(getHref(getLinkElement(fixture, 0))).toEqual('/(modal)');
expect(getHref(getLinkElement(fixture, 1))).toEqual('/hello(modal)');
// click on primary route link
clickOnElement(getLinkElement(fixture, 1));
} else if (navCount == 2) {
expect(fixture.debugElement.nativeElement)
.toHaveText('open modal | hello | main {hello} | aux {modal}');
expect(location.urlChanges).toEqual(['/(modal)', '/hello(modal)']);
expect(getHref(getLinkElement(fixture, 0))).toEqual('/hello(modal)');
expect(getHref(getLinkElement(fixture, 1))).toEqual('/hello(modal)');
async.done();
} else {
throw new BaseException(`Unexpected route change #${navCount}`);
}
});
clickOnElement(getLinkElement(fixture));
});
}));
}
function auxRoutesWithAPrimaryRoute() {
var tcb: TestComponentBuilder;
var fixture: ComponentFixture;
var rtr;
beforeEachProviders(() => TEST_ROUTER_PROVIDERS);
beforeEach(inject([TestComponentBuilder, Router], (tcBuilder, router) => {
tcb = tcBuilder;
rtr = router;
}));
it('should recognize and navigate from the URL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Aux'})
]))
.then((_) => rtr.navigateByUrl('/hello(modal)'))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('main {hello} | aux {modal}');
async.done();
});
}));
it('should navigate via the link DSL', inject([AsyncTestCompleter], (async) => {
compile(tcb, `main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Modal'})
]))
.then((_) => rtr.navigate(['/Hello', ['Modal']]))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('main {hello} | aux {modal}');
async.done();
});
}));
it('should generate a link URL', inject([AsyncTestCompleter], (async) => {
compile(
tcb,
`<a [routerLink]="['/Hello', ['Modal']]">open modal</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Modal'})
]))
.then((_) => {
fixture.detectChanges();
expect(getHref(getLinkElement(fixture))).toEqual('/hello(modal)');
async.done();
});
}));
it('should navigate from a link click',
inject([AsyncTestCompleter, Location], (async, location) => {
compile(
tcb,
`<a [routerLink]="['/Hello', ['Modal']]">open modal</a> | main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`)
.then((rtc) => {fixture = rtc})
.then((_) => rtr.config([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Modal'})
]))
.then((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement).toHaveText('open modal | main {} | aux {}');
rtr.subscribe((_) => {
fixture.detectChanges();
expect(fixture.debugElement.nativeElement)
.toHaveText('open modal | main {hello} | aux {modal}');
expect(location.urlChanges).toEqual(['/hello(modal)']);
async.done();
});
clickOnElement(getLinkElement(fixture));
});
}));
}
export function registerSpecs() {
specs['auxRoutes'] = auxRoutes;
specs['auxRoutesWithAPrimaryRoute'] = auxRoutesWithAPrimaryRoute;
}
@Component({selector: 'hello-cmp', template: `{{greeting}}`})
class HelloCmp {
greeting: string;
constructor() { this.greeting = 'hello'; }
}
@Component({selector: 'modal-cmp', template: `modal`})
class ModalCmp {
}
@Component({
selector: 'aux-cmp',
template: 'main {<router-outlet></router-outlet>} | ' +
'aux {<router-outlet name="modal"></router-outlet>}',
directives: [ROUTER_DIRECTIVES],
})
@RouteConfig([
new Route({path: '/hello', component: HelloCmp, name: 'Hello'}),
new AuxRoute({path: '/modal', component: ModalCmp, name: 'Aux'})
])
class AuxCmp {
}

2
modules/angular2/test/router/integration/router_link_spec.ts
View File

@ -325,7 +325,7 @@ export function main() {
}));
describe("router link dsl", () => {
describe('router link dsl', () => {
it('should generate link hrefs with params', inject([AsyncTestCompleter], (async) => {
compile('<a href="hello" [routerLink]="route:./User(name: name)">{{name}}</a>')
.then((_) => router.config(

6
modules/angular2/test/router/integration/util.ts
View File

@ -77,7 +77,11 @@ export var specs = {};
export function describeRouter(description: string, fn: Function, exclusive = false): void {
var specName = descriptionToSpecName(description);
specNameBuilder.push(specName);
describe(description, fn);
if (exclusive) {
ddescribe(description, fn);
} else {
describe(description, fn);
}
specNameBuilder.pop();
}

4
modules/angular2/test/router/route_registry_spec.ts
View File

@ -47,9 +47,9 @@ export function main() {
var instr = registry.generate(['FirstCmp', 'SecondCmp'], []);
expect(stringifyInstruction(instr)).toEqual('first/second');
expect(stringifyInstruction(registry.generate(['SecondCmp'], [instr])))
expect(stringifyInstruction(registry.generate(['SecondCmp'], [instr, instr.child])))
.toEqual('first/second');
expect(stringifyInstruction(registry.generate(['./SecondCmp'], [instr])))
expect(stringifyInstruction(registry.generate(['./SecondCmp'], [instr, instr.child])))
.toEqual('first/second');
});