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

feat(router): auxiliary routes

Browse Source 
Closes #2775
This commit is contained in:
Brian Ford
2015-07-17 13:36:53 -07:00
parent 96e34c1d36
commit ac6227e434
24 changed files with 1482 additions and 986 deletions
Download Patch File Download Diff File Expand all files Collapse all files

636
modules/angular2/test/router/outlet_spec.ts
View File

@ -30,7 +30,13 @@ import {
import {RootRouter} from 'angular2/src/router/router';
import {Pipeline} from 'angular2/src/router/pipeline';
import {Router, RouterOutlet, RouterLink, RouteParams} from 'angular2/router';
import {RouteConfig, Route, AsyncRoute, Redirect} from 'angular2/src/router/route_config_decorator';
import {
RouteConfig,
Route,
AuxRoute,
AsyncRoute,
Redirect
} from 'angular2/src/router/route_config_decorator';
import {DOM} from 'angular2/src/dom/dom_adapter';
@ -45,10 +51,12 @@ import {
CanReuse
} from 'angular2/src/router/interfaces';
import {CanActivate} from 'angular2/src/router/lifecycle_annotations';
import {Instruction} from 'angular2/src/router/instruction';
import {ComponentInstruction} from 'angular2/src/router/instruction';
import {DirectiveResolver} from 'angular2/src/core/compiler/directive_resolver';
var cmpInstanceCount, log, eventBus;
var cmpInstanceCount;
var log: List<string>;
var eventBus: EventEmitter;
var completer: PromiseCompleter<any>;
export function main() {
@ -73,7 +81,7 @@ export function main() {
rtr = router;
location = loc;
cmpInstanceCount = 0;
log = '';
log = [];
eventBus = new EventEmitter();
}));
@ -207,7 +215,6 @@ export function main() {
});
}));
it('should generate link hrefs from a child to its sibling',
inject([AsyncTestCompleter], (async) => {
compile()
@ -247,281 +254,299 @@ export function main() {
});
}));
it('should call the onActivate hook', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/on-activate'))
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('activate cmp');
expect(log).toEqual('activate: null -> /on-activate;');
async.done();
});
}));
it('should wait for a parent component\'s onActivate hook to resolve before calling its child\'s',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => {
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('parent activate')) {
completer.resolve(true);
}
describe('lifecycle hooks', () => {
it('should call the onActivate hook', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/on-activate'))
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('activate cmp');
expect(log).toEqual(['activate: null -> /on-activate']);
async.done();
});
rtr.navigate('/parent-activate/child-activate')
.then((_) => {
}));
it('should wait for a parent component\'s onActivate hook to resolve before calling its child\'s',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => {
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('parent activate')) {
completer.resolve(true);
}
});
rtr.navigate('/parent-activate/child-activate')
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('parent {activate cmp}');
expect(log).toEqual([
'parent activate: null -> /parent-activate',
'activate: null -> /child-activate'
]);
async.done();
});
});
}));
it('should call the onDeactivate hook', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/on-deactivate'))
.then((_) => rtr.navigate('/a'))
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('A');
expect(log).toEqual(['deactivate: /on-deactivate -> /a']);
async.done();
});
}));
it('should wait for a child component\'s onDeactivate hook to resolve before calling its parent\'s',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/parent-deactivate/child-deactivate'))
.then((_) => {
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('deactivate')) {
completer.resolve(true);
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('parent {activate cmp}');
expect(log).toEqual(
'parent activate: null -> /parent-activate/child-activate;activate: null -> /child-activate;');
async.done();
});
});
}));
it('should call the onDeactivate hook', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/on-deactivate'))
.then((_) => rtr.navigate('/a'))
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('A');
expect(log).toEqual('deactivate: /on-deactivate -> /a;');
async.done();
});
}));
it('should wait for a child component\'s onDeactivate hook to resolve before calling its parent\'s',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/parent-deactivate/child-deactivate'))
.then((_) => {
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('deactivate')) {
completer.resolve(true);
expect(rootTC.nativeElement).toHaveText('parent {deactivate cmp}');
}
});
rtr.navigate('/a').then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('parent {deactivate cmp}');
}
expect(rootTC.nativeElement).toHaveText('A');
expect(log).toEqual([
'deactivate: /child-deactivate -> null',
'parent deactivate: /parent-deactivate -> /a'
]);
async.done();
});
});
rtr.navigate('/a').then((_) => {
}));
it('should reuse a component when the canReuse hook returns true',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/on-reuse/1/a'))
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('A');
expect(log).toEqual(
'deactivate: /child-deactivate -> null;parent deactivate: /parent-deactivate/child-deactivate -> /a;');
expect(log).toEqual([]);
expect(rootTC.nativeElement).toHaveText('reuse {A}');
expect(cmpInstanceCount).toBe(1);
})
.then((_) => rtr.navigate('/on-reuse/2/b'))
.then((_) => {
rootTC.detectChanges();
expect(log).toEqual(['reuse: /on-reuse/1 -> /on-reuse/2']);
expect(rootTC.nativeElement).toHaveText('reuse {B}');
expect(cmpInstanceCount).toBe(1);
async.done();
});
});
}));
it('should reuse a component when the canReuse hook returns false',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/on-reuse/1/a'))
.then((_) => {
rootTC.detectChanges();
expect(log).toEqual('');
expect(rootTC.nativeElement).toHaveText('reuse {A}');
expect(cmpInstanceCount).toBe(1);
})
.then((_) => rtr.navigate('/on-reuse/2/b'))
.then((_) => {
rootTC.detectChanges();
expect(log).toEqual('reuse: /on-reuse/1/a -> /on-reuse/2/b;');
expect(rootTC.nativeElement).toHaveText('reuse {B}');
expect(cmpInstanceCount).toBe(1);
async.done();
});
}));
}));
it('should not reuse a component when the canReuse hook returns false',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/never-reuse/1/a'))
.then((_) => {
rootTC.detectChanges();
expect(log).toEqual('');
expect(rootTC.nativeElement).toHaveText('reuse {A}');
expect(cmpInstanceCount).toBe(1);
})
.then((_) => rtr.navigate('/never-reuse/2/b'))
.then((_) => {
rootTC.detectChanges();
expect(log).toEqual('');
expect(rootTC.nativeElement).toHaveText('reuse {B}');
expect(cmpInstanceCount).toBe(2);
async.done();
});
}));
it('should navigate when canActivate returns true', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => {
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canActivate')) {
completer.resolve(true);
}
});
rtr.navigate('/can-activate/a')
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('canActivate {A}');
expect(log).toEqual('canActivate: null -> /can-activate/a;');
async.done();
});
});
}));
it('should not navigate when canActivate returns false',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => {
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canActivate')) {
completer.resolve(false);
}
});
rtr.navigate('/can-activate/a')
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('');
expect(log).toEqual('canActivate: null -> /can-activate/a;');
async.done();
});
});
}));
it('should navigate away when canDeactivate returns true',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/can-deactivate/a'))
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('canDeactivate {A}');
expect(log).toEqual('');
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canDeactivate')) {
completer.resolve(true);
}
});
rtr.navigate('/a').then((_) => {
it('should not reuse a component when the canReuse hook returns false',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/never-reuse/1/a'))
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('A');
expect(log).toEqual('canDeactivate: /can-deactivate/a -> /a;');
expect(log).toEqual([]);
expect(rootTC.nativeElement).toHaveText('reuse {A}');
expect(cmpInstanceCount).toBe(1);
})
.then((_) => rtr.navigate('/never-reuse/2/b'))
.then((_) => {
rootTC.detectChanges();
expect(log).toEqual([]);
expect(rootTC.nativeElement).toHaveText('reuse {B}');
expect(cmpInstanceCount).toBe(2);
async.done();
});
});
}));
}));
it('should not navigate away when canDeactivate returns false',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/can-deactivate/a'))
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('canDeactivate {A}');
expect(log).toEqual('');
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canDeactivate')) {
completer.resolve(false);
}
it('should navigate when canActivate returns true', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => {
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canActivate')) {
completer.resolve(true);
}
});
rtr.navigate('/can-activate/a')
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('canActivate {A}');
expect(log).toEqual(['canActivate: null -> /can-activate']);
async.done();
});
});
}));
rtr.navigate('/a').then((_) => {
it('should not navigate when canActivate returns false',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => {
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canActivate')) {
completer.resolve(false);
}
});
rtr.navigate('/can-activate/a')
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('');
expect(log).toEqual(['canActivate: null -> /can-activate']);
async.done();
});
});
}));
it('should navigate away when canDeactivate returns true',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/can-deactivate/a'))
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('canDeactivate {A}');
expect(log).toEqual('canDeactivate: /can-deactivate/a -> /a;');
expect(log).toEqual([]);
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canDeactivate')) {
completer.resolve(true);
}
});
rtr.navigate('/a').then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('A');
expect(log).toEqual(['canDeactivate: /can-deactivate -> /a']);
async.done();
});
});
}));
it('should not navigate away when canDeactivate returns false',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/can-deactivate/a'))
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('canDeactivate {A}');
expect(log).toEqual([]);
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canDeactivate')) {
completer.resolve(false);
}
});
rtr.navigate('/a').then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('canDeactivate {A}');
expect(log).toEqual(['canDeactivate: /can-deactivate -> /a']);
async.done();
});
});
}));
it('should run activation and deactivation hooks in the correct order',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/activation-hooks/child'))
.then((_) => {
expect(log).toEqual([
'canActivate child: null -> /child',
'canActivate parent: null -> /activation-hooks',
'onActivate parent: null -> /activation-hooks',
'onActivate child: null -> /child'
]);
log = [];
return rtr.navigate('/a');
})
.then((_) => {
expect(log).toEqual([
'canDeactivate parent: /activation-hooks -> /a',
'canDeactivate child: /child -> null',
'onDeactivate child: /child -> null',
'onDeactivate parent: /activation-hooks -> /a'
]);
async.done();
});
});
}));
}));
it('should only run reuse hooks when reusing', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/reuse-hooks/1'))
.then((_) => {
expect(log).toEqual(
['canActivate: null -> /reuse-hooks/1', 'onActivate: null -> /reuse-hooks/1']);
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canReuse')) {
completer.resolve(true);
}
});
it('should run activation and deactivation hooks in the correct order',
inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/activation-hooks/child'))
.then((_) => {
expect(log).toEqual('canActivate child: null -> /child;' +
'canActivate parent: null -> /activation-hooks/child;' +
'onActivate parent: null -> /activation-hooks/child;' +
'onActivate child: null -> /child;');
log = '';
return rtr.navigate('/a');
})
.then((_) => {
expect(log).toEqual('canDeactivate parent: /activation-hooks/child -> /a;' +
'canDeactivate child: /child -> null;' +
'onDeactivate child: /child -> null;' +
'onDeactivate parent: /activation-hooks/child -> /a;');
async.done();
});
}));
it('should only run reuse hooks when reusing', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/reuse-hooks/1'))
.then((_) => {
expect(log).toEqual('canActivate: null -> /reuse-hooks/1;' +
'onActivate: null -> /reuse-hooks/1;');
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canReuse')) {
completer.resolve(true);
}
log = [];
return rtr.navigate('/reuse-hooks/2');
})
.then((_) => {
expect(log).toEqual([
'canReuse: /reuse-hooks/1 -> /reuse-hooks/2',
'onReuse: /reuse-hooks/1 -> /reuse-hooks/2'
]);
async.done();
});
}));
log = '';
return rtr.navigate('/reuse-hooks/2');
})
.then((_) => {
expect(log).toEqual('canReuse: /reuse-hooks/1 -> /reuse-hooks/2;' +
'onReuse: /reuse-hooks/1 -> /reuse-hooks/2;');
async.done();
});
}));
it('should not run reuse hooks when not reusing', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/reuse-hooks/1'))
.then((_) => {
expect(log).toEqual(
['canActivate: null -> /reuse-hooks/1', 'onActivate: null -> /reuse-hooks/1']);
it('should not run reuse hooks when not reusing', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: LifecycleCmp})]))
.then((_) => rtr.navigate('/reuse-hooks/1'))
.then((_) => {
expect(log).toEqual('canActivate: null -> /reuse-hooks/1;' +
'onActivate: null -> /reuse-hooks/1;');
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canReuse')) {
completer.resolve(false);
}
});
ObservableWrapper.subscribe<string>(eventBus, (ev) => {
if (ev.startsWith('canReuse')) {
completer.resolve(false);
}
log = [];
return rtr.navigate('/reuse-hooks/2');
})
.then((_) => {
expect(log).toEqual([
'canReuse: /reuse-hooks/1 -> /reuse-hooks/2',
'canActivate: /reuse-hooks/1 -> /reuse-hooks/2',
'canDeactivate: /reuse-hooks/1 -> /reuse-hooks/2',
'onDeactivate: /reuse-hooks/1 -> /reuse-hooks/2',
'onActivate: /reuse-hooks/1 -> /reuse-hooks/2'
]);
async.done();
});
}));
log = '';
return rtr.navigate('/reuse-hooks/2');
})
.then((_) => {
expect(log).toEqual('canReuse: /reuse-hooks/1 -> /reuse-hooks/2;' +
'canActivate: /reuse-hooks/1 -> /reuse-hooks/2;' +
'canDeactivate: /reuse-hooks/1 -> /reuse-hooks/2;' +
'onDeactivate: /reuse-hooks/1 -> /reuse-hooks/2;' +
'onActivate: /reuse-hooks/1 -> /reuse-hooks/2;');
async.done();
});
}));
});
describe('when clicked', () => {
@ -572,6 +597,19 @@ export function main() {
});
}));
});
describe('auxillary routes', () => {
it('should recognize a simple case', inject([AsyncTestCompleter], (async) => {
compile()
.then((_) => rtr.config([new Route({path: '/...', component: AuxCmp})]))
.then((_) => rtr.navigate('/hello(modal)'))
.then((_) => {
rootTC.detectChanges();
expect(rootTC.nativeElement).toHaveText('main {hello} | aux {modal}');
async.done();
});
}));
});
});
}
@ -657,24 +695,26 @@ class MyComp {
name;
}
function logHook(name: string, next: Instruction, prev: Instruction) {
var message = name + ': ' + (isPresent(prev) ? prev.accumulatedUrl : 'null') + ' -> ' +
(isPresent(next) ? next.accumulatedUrl : 'null') + ';';
log += message;
function logHook(name: string, next: ComponentInstruction, prev: ComponentInstruction) {
var message = name + ': ' + (isPresent(prev) ? ('/' + prev.urlPath) : 'null') + ' -> ' +
(isPresent(next) ? ('/' + next.urlPath) : 'null');
log.push(message);
ObservableWrapper.callNext(eventBus, message);
}
@Component({selector: 'activate-cmp'})
@View({template: 'activate cmp'})
class ActivateCmp implements OnActivate {
onActivate(next: Instruction, prev: Instruction) { logHook('activate', next, prev); }
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('activate', next, prev);
}
}
@Component({selector: 'parent-activate-cmp'})
@View({template: `parent {<router-outlet></router-outlet>}`, directives: [RouterOutlet]})
@RouteConfig([new Route({path: '/child-activate', component: ActivateCmp})])
class ParentActivateCmp implements OnActivate {
onActivate(next: Instruction, prev: Instruction): Promise<any> {
onActivate(next: ComponentInstruction, prev: ComponentInstruction): Promise<any> {
completer = PromiseWrapper.completer();
logHook('parent activate', next, prev);
return completer.promise;
@ -684,13 +724,15 @@ class ParentActivateCmp implements OnActivate {
@Component({selector: 'deactivate-cmp'})
@View({template: 'deactivate cmp'})
class DeactivateCmp implements OnDeactivate {
onDeactivate(next: Instruction, prev: Instruction) { logHook('deactivate', next, prev); }
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('deactivate', next, prev);
}
}
@Component({selector: 'deactivate-cmp'})
@View({template: 'deactivate cmp'})
class WaitDeactivateCmp implements OnDeactivate {
onDeactivate(next: Instruction, prev: Instruction): Promise<any> {
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction): Promise<any> {
completer = PromiseWrapper.completer();
logHook('deactivate', next, prev);
return completer.promise;
@ -701,7 +743,9 @@ class WaitDeactivateCmp implements OnDeactivate {
@View({template: `parent {<router-outlet></router-outlet>}`, directives: [RouterOutlet]})
@RouteConfig([new Route({path: '/child-deactivate', component: WaitDeactivateCmp})])
class ParentDeactivateCmp implements OnDeactivate {
onDeactivate(next: Instruction, prev: Instruction) { logHook('parent deactivate', next, prev); }
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('parent deactivate', next, prev);
}
}
@Component({selector: 'reuse-cmp'})
@ -709,8 +753,8 @@ class ParentDeactivateCmp implements OnDeactivate {
@RouteConfig([new Route({path: '/a', component: A}), new Route({path: '/b', component: B})])
class ReuseCmp implements OnReuse, CanReuse {
constructor() { cmpInstanceCount += 1; }
canReuse(next: Instruction, prev: Instruction) { return true; }
onReuse(next: Instruction, prev: Instruction) { logHook('reuse', next, prev); }
canReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; }
onReuse(next: ComponentInstruction, prev: ComponentInstruction) { logHook('reuse', next, prev); }
}
@Component({selector: 'never-reuse-cmp'})
@ -718,8 +762,8 @@ class ReuseCmp implements OnReuse, CanReuse {
@RouteConfig([new Route({path: '/a', component: A}), new Route({path: '/b', component: B})])
class NeverReuseCmp implements OnReuse, CanReuse {
constructor() { cmpInstanceCount += 1; }
canReuse(next: Instruction, prev: Instruction) { return false; }
onReuse(next: Instruction, prev: Instruction) { logHook('reuse', next, prev); }
canReuse(next: ComponentInstruction, prev: ComponentInstruction) { return false; }
onReuse(next: ComponentInstruction, prev: ComponentInstruction) { logHook('reuse', next, prev); }
}
@Component({selector: 'can-activate-cmp'})
@ -727,7 +771,7 @@ class NeverReuseCmp implements OnReuse, CanReuse {
@RouteConfig([new Route({path: '/a', component: A}), new Route({path: '/b', component: B})])
@CanActivate(CanActivateCmp.canActivate)
class CanActivateCmp {
static canActivate(next: Instruction, prev: Instruction) {
static canActivate(next: ComponentInstruction, prev: ComponentInstruction): Promise<boolean> {
completer = PromiseWrapper.completer();
logHook('canActivate', next, prev);
return completer.promise;
@ -738,7 +782,7 @@ class CanActivateCmp {
@View({template: `canDeactivate {<router-outlet></router-outlet>}`, directives: [RouterOutlet]})
@RouteConfig([new Route({path: '/a', component: A}), new Route({path: '/b', component: B})])
class CanDeactivateCmp implements CanDeactivate {
canDeactivate(next: Instruction, prev: Instruction) {
canDeactivate(next: ComponentInstruction, prev: ComponentInstruction): Promise<boolean> {
completer = PromiseWrapper.completer();
logHook('canDeactivate', next, prev);
return completer.promise;
@ -749,19 +793,23 @@ class CanDeactivateCmp implements CanDeactivate {
@View({template: `child`})
@CanActivate(AllHooksChildCmp.canActivate)
class AllHooksChildCmp implements CanDeactivate, OnDeactivate, OnActivate {
canDeactivate(next: Instruction, prev: Instruction) {
canDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('canDeactivate child', next, prev);
return true;
}
onDeactivate(next: Instruction, prev: Instruction) { logHook('onDeactivate child', next, prev); }
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onDeactivate child', next, prev);
}
static canActivate(next: Instruction, prev: Instruction) {
static canActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('canActivate child', next, prev);
return true;
}
onActivate(next: Instruction, prev: Instruction) { logHook('onActivate child', next, prev); }
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onActivate child', next, prev);
}
}
@Component({selector: 'all-hooks-parent-cmp'})
@ -769,46 +817,56 @@ class AllHooksChildCmp implements CanDeactivate, OnDeactivate, OnActivate {
@RouteConfig([new Route({path: '/child', component: AllHooksChildCmp})])
@CanActivate(AllHooksParentCmp.canActivate)
class AllHooksParentCmp implements CanDeactivate, OnDeactivate, OnActivate {
canDeactivate(next: Instruction, prev: Instruction) {
canDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('canDeactivate parent', next, prev);
return true;
}
onDeactivate(next: Instruction, prev: Instruction) { logHook('onDeactivate parent', next, prev); }
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onDeactivate parent', next, prev);
}
static canActivate(next: Instruction, prev: Instruction) {
static canActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('canActivate parent', next, prev);
return true;
}
onActivate(next: Instruction, prev: Instruction) { logHook('onActivate parent', next, prev); }
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onActivate parent', next, prev);
}
}
@Component({selector: 'reuse-hooks-cmp'})
@View({template: 'reuse hooks cmp'})
@CanActivate(ReuseHooksCmp.canActivate)
class ReuseHooksCmp implements OnActivate, OnReuse, OnDeactivate, CanReuse, CanDeactivate {
canReuse(next: Instruction, prev: Instruction): Promise<any> {
canReuse(next: ComponentInstruction, prev: ComponentInstruction): Promise<any> {
completer = PromiseWrapper.completer();
logHook('canReuse', next, prev);
return completer.promise;
}
onReuse(next: Instruction, prev: Instruction) { logHook('onReuse', next, prev); }
onReuse(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onReuse', next, prev);
}
canDeactivate(next: Instruction, prev: Instruction) {
canDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('canDeactivate', next, prev);
return true;
}
onDeactivate(next: Instruction, prev: Instruction) { logHook('onDeactivate', next, prev); }
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onDeactivate', next, prev);
}
static canActivate(next: Instruction, prev: Instruction) {
static canActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('canActivate', next, prev);
return true;
}
onActivate(next: Instruction, prev: Instruction) { logHook('onActivate', next, prev); }
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
logHook('onActivate', next, prev);
}
}
@Component({selector: 'lifecycle-cmp'})
@ -828,3 +886,21 @@ class ReuseHooksCmp implements OnActivate, OnReuse, OnDeactivate, CanReuse, CanD
])
class LifecycleCmp {
}
@Component({selector: 'modal-cmp'})
@View({template: "modal"})
class ModalCmp {
}
@Component({selector: 'aux-cmp'})
@View({
template:
`main {<router-outlet></router-outlet>} | aux {<router-outlet name="modal"></router-outlet>}`,
directives: [RouterOutlet]
})
@RouteConfig([
new Route({path: '/hello', component: HelloCmp}),
new AuxRoute({path: '/modal', component: ModalCmp})
])
class AuxCmp {
}

82
modules/angular2/test/router/path_recognizer_spec.ts
View File

@ -11,6 +11,7 @@ import {
} from 'angular2/test_lib';
import {PathRecognizer} from 'angular2/src/router/path_recognizer';
import {parser, Url, RootUrl} from 'angular2/src/router/url_parser';
import {SyncRouteHandler} from 'angular2/src/router/sync_route_handler';
class DummyClass {
@ -41,65 +42,60 @@ export function main() {
describe('querystring params', () => {
it('should parse querystring params so long as the recognizer is a root', () => {
var rec = new PathRecognizer('/hello/there', mockRouteHandler, true);
var params = rec.parseParams('/hello/there?name=igor');
expect(params).toEqual({'name': 'igor'});
var rec = new PathRecognizer('/hello/there', mockRouteHandler);
var url = parser.parse('/hello/there?name=igor');
var match = rec.recognize(url);
expect(match.instruction.params).toEqual({'name': 'igor'});
});
it('should return a combined map of parameters with the param expected in the URL path',
() => {
var rec = new PathRecognizer('/hello/:name', mockRouteHandler, true);
var params = rec.parseParams('/hello/paul?topic=success');
expect(params).toEqual({'name': 'paul', 'topic': 'success'});
var rec = new PathRecognizer('/hello/:name', mockRouteHandler);
var url = parser.parse('/hello/paul?topic=success');
var match = rec.recognize(url);
expect(match.instruction.params).toEqual({'name': 'paul', 'topic': 'success'});
});
});
describe('matrix params', () => {
it('should recognize a trailing matrix value on a path value and assign it to the params return value',
() => {
var rec = new PathRecognizer('/hello/:id', mockRouteHandler);
var params = rec.parseParams('/hello/matias;key=value');
expect(params['id']).toEqual('matias');
expect(params['key']).toEqual('value');
});
it('should recognize and parse multiple matrix params separated by a colon value', () => {
var rec = new PathRecognizer('/jello/:sid', mockRouteHandler);
var params = rec.parseParams('/jello/man;color=red;height=20');
expect(params['sid']).toEqual('man');
expect(params['color']).toEqual('red');
expect(params['height']).toEqual('20');
it('should be parsed along with dynamic paths', () => {
var rec = new PathRecognizer('/hello/:id', mockRouteHandler);
var url = new Url('hello', new Url('matias', null, null, {'key': 'value'}));
var match = rec.recognize(url);
expect(match.instruction.params).toEqual({'id': 'matias', 'key': 'value'});
});
it('should recognize a matrix param value on a static path value', () => {
var rec = new PathRecognizer('/static/man', mockRouteHandler);
var params = rec.parseParams('/static/man;name=dave');
expect(params['name']).toEqual('dave');
it('should be parsed on a static path', () => {
var rec = new PathRecognizer('/person', mockRouteHandler);
var url = new Url('person', null, null, {'name': 'dave'});
var match = rec.recognize(url);
expect(match.instruction.params).toEqual({'name': 'dave'});
});
it('should not parse matrix params when a wildcard segment is used', () => {
it('should be ignored on a wildcard segment', () => {
var rec = new PathRecognizer('/wild/*everything', mockRouteHandler);
var params = rec.parseParams('/wild/super;variable=value');
expect(params['everything']).toEqual('super;variable=value');
var url = parser.parse('/wild/super;variable=value');
var match = rec.recognize(url);
expect(match.instruction.params).toEqual({'everything': 'super;variable=value'});
});
it('should set matrix param values to true when no value is present within the path string',
() => {
var rec = new PathRecognizer('/path', mockRouteHandler);
var params = rec.parseParams('/path;one;two;three=3');
expect(params['one']).toEqual(true);
expect(params['two']).toEqual(true);
expect(params['three']).toEqual('3');
});
it('should set matrix param values to true when no value is present', () => {
var rec = new PathRecognizer('/path', mockRouteHandler);
var url = new Url('path', null, null, {'one': true, 'two': true, 'three': '3'});
var match = rec.recognize(url);
expect(match.instruction.params).toEqual({'one': true, 'two': true, 'three': '3'});
});
it('should ignore earlier instances of matrix params and only consider the ones at the end of the path',
() => {
var rec = new PathRecognizer('/one/two/three', mockRouteHandler);
var params = rec.parseParams('/one;a=1/two;b=2/three;c=3');
expect(params).toEqual({'c': '3'});
});
it('should be parsed on the final segment of the path', () => {
var rec = new PathRecognizer('/one/two/three', mockRouteHandler);
var three = new Url('three', null, null, {'c': '3'});
var two = new Url('two', three, null, {'b': '2'});
var one = new Url('one', two, null, {'a': '1'});
var match = rec.recognize(one);
expect(match.instruction.params).toEqual({'c': '3'});
});
});
});
}

40
modules/angular2/test/router/route_config_spec.ts
View File

@ -98,7 +98,31 @@ export function main() {
});
}));
// TODO: test apps with wrong configs
it('should throw if a config is missing a target',
inject(
[AsyncTestCompleter],
(async) => {
bootstrap(WrongConfigCmp, testBindings)
.catch((e) => {
expect(e.originalException)
.toContainError(
'Route config should contain exactly one "component", "loader", or "redirectTo" property.');
async.done();
return null;
})}));
it('should throw if a config has an invalid component type',
inject(
[AsyncTestCompleter],
(async) => {
bootstrap(WrongComponentTypeCmp, testBindings)
.catch((e) => {
expect(e.originalException)
.toContainError(
'Invalid component type "intentionallyWrongComponentType". Valid types are "constructor" and "loader".');
async.done();
return null;
})}));
});
}
@ -149,3 +173,17 @@ class ParentCmp {
class HierarchyAppCmp {
constructor(public router: Router, public location: LocationStrategy) {}
}
@Component({selector: 'app-cmp'})
@View({template: `root { <router-outlet></router-outlet> }`, directives: routerDirectives})
@RouteConfig([{path: '/hello'}])
class WrongConfigCmp {
}
@Component({selector: 'app-cmp'})
@View({template: `root { <router-outlet></router-outlet> }`, directives: routerDirectives})
@RouteConfig([
{path: '/hello', component: {type: 'intentionallyWrongComponentType', constructor: HelloCmp}},
])
class WrongComponentTypeCmp {
}

242
modules/angular2/test/router/route_recognizer_spec.ts
View File

@ -12,9 +12,11 @@ import {
import {Map, StringMap, StringMapWrapper} from 'angular2/src/facade/collection';
import {RouteRecognizer, RouteMatch} from 'angular2/src/router/route_recognizer';
import {RouteRecognizer} from 'angular2/src/router/route_recognizer';
import {ComponentInstruction} from 'angular2/src/router/instruction';
import {Route, Redirect} from 'angular2/src/router/route_config_decorator';
import {parser} from 'angular2/src/router/url_parser';
export function main() {
describe('RouteRecognizer', () => {
@ -25,31 +27,31 @@ export function main() {
it('should recognize a static segment', () => {
recognizer.config(new Route({path: '/test', component: DummyCmpA}));
var solution = recognizer.recognize('/test')[0];
var solution = recognize(recognizer, '/test');
expect(getComponentType(solution)).toEqual(DummyCmpA);
});
it('should recognize a single slash', () => {
recognizer.config(new Route({path: '/', component: DummyCmpA}));
var solution = recognizer.recognize('/')[0];
var solution = recognize(recognizer, '/');
expect(getComponentType(solution)).toEqual(DummyCmpA);
});
it('should recognize a dynamic segment', () => {
recognizer.config(new Route({path: '/user/:name', component: DummyCmpA}));
var solution = recognizer.recognize('/user/brian')[0];
var solution = recognize(recognizer, '/user/brian');
expect(getComponentType(solution)).toEqual(DummyCmpA);
expect(solution.params()).toEqual({'name': 'brian'});
expect(solution.params).toEqual({'name': 'brian'});
});
it('should recognize a star segment', () => {
recognizer.config(new Route({path: '/first/*rest', component: DummyCmpA}));
var solution = recognizer.recognize('/first/second/third')[0];
var solution = recognize(recognizer, '/first/second/third');
expect(getComponentType(solution)).toEqual(DummyCmpA);
expect(solution.params()).toEqual({'rest': 'second/third'});
expect(solution.params).toEqual({'rest': 'second/third'});
});
@ -70,235 +72,105 @@ export function main() {
it('should recognize redirects', () => {
recognizer.config(new Redirect({path: '/a', redirectTo: '/b'}));
recognizer.config(new Route({path: '/b', component: DummyCmpA}));
var solutions = recognizer.recognize('/a');
expect(solutions.length).toBe(1);
var solution = solutions[0];
recognizer.config(new Redirect({path: '/a', redirectTo: 'b'}));
var solution = recognize(recognizer, '/a');
expect(getComponentType(solution)).toEqual(DummyCmpA);
expect(solution.matchedUrl).toEqual('/b');
expect(solution.urlPath).toEqual('b');
});
it('should not perform root URL redirect on a non-root route', () => {
recognizer.config(new Redirect({path: '/', redirectTo: '/foo'}));
recognizer.config(new Route({path: '/bar', component: DummyCmpA}));
var solutions = recognizer.recognize('/bar');
expect(solutions.length).toBe(1);
var solution = solutions[0];
expect(getComponentType(solution)).toEqual(DummyCmpA);
expect(solution.matchedUrl).toEqual('/bar');
var solution = recognize(recognizer, '/bar');
expect(solution.componentType).toEqual(DummyCmpA);
expect(solution.urlPath).toEqual('bar');
});
it('should perform a root URL redirect when only a slash or an empty string is being processed',
() => {
recognizer.config(new Redirect({path: '/', redirectTo: '/matias'}));
recognizer.config(new Route({path: '/matias', component: DummyCmpA}));
recognizer.config(new Route({path: '/fatias', component: DummyCmpA}));
var solutions;
it('should perform a root URL redirect only for root routes', () => {
recognizer.config(new Redirect({path: '/', redirectTo: '/matias'}));
recognizer.config(new Route({path: '/matias', component: DummyCmpA}));
recognizer.config(new Route({path: '/fatias', component: DummyCmpA}));
solutions = recognizer.recognize('/');
expect(solutions[0].matchedUrl).toBe('/matias');
var solution;
solutions = recognizer.recognize('/fatias');
expect(solutions[0].matchedUrl).toBe('/fatias');
solution = recognize(recognizer, '/');
expect(solution.urlPath).toEqual('matias');
solution = recognize(recognizer, '/fatias');
expect(solution.urlPath).toEqual('fatias');
solution = recognize(recognizer, '');
expect(solution.urlPath).toEqual('matias');
});
solutions = recognizer.recognize('');
expect(solutions[0].matchedUrl).toBe('/matias');
});
it('should generate URLs with params', () => {
recognizer.config(new Route({path: '/app/user/:name', component: DummyCmpA, as: 'user'}));
expect(recognizer.generate('user', {'name': 'misko'})['url']).toEqual('app/user/misko');
var instruction = recognizer.generate('user', {'name': 'misko'});
expect(instruction.urlPath).toEqual('app/user/misko');
});
it('should generate URLs with numeric params', () => {
recognizer.config(new Route({path: '/app/page/:number', component: DummyCmpA, as: 'page'}));
expect(recognizer.generate('page', {'number': 42})['url']).toEqual('app/page/42');
expect(recognizer.generate('page', {'number': 42}).urlPath).toEqual('app/page/42');
});
it('should throw in the absence of required params URLs', () => {
recognizer.config(new Route({path: 'app/user/:name', component: DummyCmpA, as: 'user'}));
expect(() => recognizer.generate('user', {})['url'])
expect(() => recognizer.generate('user', {}))
.toThrowError('Route generator for \'name\' was not included in parameters passed.');
});
describe('querystring params', () => {
it('should recognize querystring parameters within the URL path', () => {
var recognizer = new RouteRecognizer(true);
recognizer.config(new Route({path: 'profile/:name', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/profile/matsko?comments=all')[0];
var params = solution.params();
expect(params['name']).toEqual('matsko');
expect(params['comments']).toEqual('all');
describe('params', () => {
it('should recognize parameters within the URL path', () => {
recognizer.config(new Route({path: 'profile/:name', component: DummyCmpA, as: 'user'}));
var solution = recognize(recognizer, '/profile/matsko?comments=all');
expect(solution.params).toEqual({'name': 'matsko', 'comments': 'all'});
});
it('should generate and populate the given static-based route with querystring params',
() => {
var recognizer = new RouteRecognizer(true);
recognizer.config(
new Route({path: 'forum/featured', component: DummyCmpA, as: 'forum-page'}));
var params = StringMapWrapper.create();
params['start'] = 10;
params['end'] = 100;
var params = {'start': 10, 'end': 100};
var result = recognizer.generate('forum-page', params);
expect(result['url']).toEqual('forum/featured?start=10&end=100');
expect(result.urlPath).toEqual('forum/featured');
expect(result.urlParams).toEqual(['start=10', 'end=100']);
});
it('should place a higher priority on actual route params incase the same params are defined in the querystring',
() => {
var recognizer = new RouteRecognizer(true);
recognizer.config(new Route({path: 'profile/:name', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/profile/yegor?name=igor')[0];
var params = solution.params();
expect(params['name']).toEqual('yegor');
});
it('should strip out any occurences of matrix params when querystring params are allowed',
() => {
var recognizer = new RouteRecognizer(true);
recognizer.config(new Route({path: '/home', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/home;showAll=true;limit=100?showAll=false')[0];
var params = solution.params();
expect(params['showAll']).toEqual('false');
expect(params['limit']).toBeFalsy();
});
it('should strip out any occurences of matrix params as input data', () => {
var recognizer = new RouteRecognizer(true);
recognizer.config(new Route({path: '/home/:subject', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/home/zero;one=1?two=2')[0];
var params = solution.params();
expect(params['subject']).toEqual('zero');
expect(params['one']).toBeFalsy();
expect(params['two']).toEqual('2');
});
});
describe('matrix params', () => {
it('should recognize matrix parameters within the URL path', () => {
var recognizer = new RouteRecognizer();
it('should prefer positional params over query params', () => {
recognizer.config(new Route({path: 'profile/:name', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/profile/matsko;comments=all')[0];
var params = solution.params();
expect(params['name']).toEqual('matsko');
expect(params['comments']).toEqual('all');
var solution = recognize(recognizer, '/profile/yegor?name=igor');
expect(solution.params).toEqual({'name': 'yegor'});
});
it('should recognize multiple matrix params and set parameters that contain no value to true',
() => {
var recognizer = new RouteRecognizer();
recognizer.config(new Route({path: '/profile/hello', component: DummyCmpA, as: 'user'}));
var solution =
recognizer.recognize('/profile/hello;modal;showAll=true;hideAll=false')[0];
var params = solution.params();
expect(params['modal']).toEqual(true);
expect(params['showAll']).toEqual('true');
expect(params['hideAll']).toEqual('false');
});
it('should only consider the matrix parameters at the end of the path handler', () => {
var recognizer = new RouteRecognizer();
recognizer.config(new Route({path: '/profile/hi/:name', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/profile;a=1/hi;b=2;c=3/william;d=4')[0];
var params = solution.params();
expect(params).toEqual({'name': 'william', 'd': '4'});
});
it('should generate and populate the given static-based route with matrix params', () => {
var recognizer = new RouteRecognizer();
recognizer.config(
new Route({path: 'forum/featured', component: DummyCmpA, as: 'forum-page'}));
var params = StringMapWrapper.create();
params['start'] = 10;
params['end'] = 100;
var result = recognizer.generate('forum-page', params);
expect(result['url']).toEqual('forum/featured;start=10;end=100');
});
it('should generate and populate the given dynamic-based route with matrix params', () => {
var recognizer = new RouteRecognizer();
recognizer.config(
new Route({path: 'forum/:topic', component: DummyCmpA, as: 'forum-page'}));
var params = StringMapWrapper.create();
params['topic'] = 'crazy';
params['total-posts'] = 100;
params['moreDetail'] = null;
var result = recognizer.generate('forum-page', params);
expect(result['url']).toEqual('forum/crazy;total-posts=100;moreDetail');
});
it('should not apply any matrix params if a dynamic route segment takes up the slot when a path is generated',
() => {
var recognizer = new RouteRecognizer();
recognizer.config(
new Route({path: 'hello/:name', component: DummyCmpA, as: 'profile-page'}));
var params = StringMapWrapper.create();
params['name'] = 'matsko';
var result = recognizer.generate('profile-page', params);
expect(result['url']).toEqual('hello/matsko');
});
it('should place a higher priority on actual route params incase the same params are defined in the matrix params string',
() => {
var recognizer = new RouteRecognizer();
recognizer.config(new Route({path: 'profile/:name', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/profile/yegor;name=igor')[0];
var params = solution.params();
expect(params['name']).toEqual('yegor');
});
it('should strip out any occurences of querystring params when matrix params are allowed',
() => {
var recognizer = new RouteRecognizer();
recognizer.config(new Route({path: '/home', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/home;limit=100?limit=1000&showAll=true')[0];
var params = solution.params();
expect(params['showAll']).toBeFalsy();
expect(params['limit']).toEqual('100');
});
it('should strip out any occurences of matrix params as input data', () => {
var recognizer = new RouteRecognizer();
it('should ignore matrix params for the top-level component', () => {
recognizer.config(new Route({path: '/home/:subject', component: DummyCmpA, as: 'user'}));
var solution = recognizer.recognize('/home/zero;one=1?two=2')[0];
var params = solution.params();
expect(params['subject']).toEqual('zero');
expect(params['one']).toEqual('1');
expect(params['two']).toBeFalsy();
var solution = recognize(recognizer, '/home;sort=asc/zero;one=1?two=2');
expect(solution.params).toEqual({'subject': 'zero', 'two': '2'});
});
});
});
}
function getComponentType(routeMatch: RouteMatch): any {
return routeMatch.recognizer.handler.componentType;
function recognize(recognizer: RouteRecognizer, url: string): ComponentInstruction {
return recognizer.recognize(parser.parse(url))[0].instruction;
}
function getComponentType(routeMatch: ComponentInstruction): any {
return routeMatch.componentType;
}
class DummyCmpA {}

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

@ -14,6 +14,7 @@ import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
import {RouteRegistry} from 'angular2/src/router/route_registry';
import {RouteConfig, Route, AsyncRoute} from 'angular2/src/router/route_config_decorator';
import {stringifyInstruction} from 'angular2/src/router/instruction';
export function main() {
describe('RouteRegistry', () => {
@ -27,7 +28,7 @@ export function main() {
registry.recognize('/test', RootHostCmp)
.then((instruction) => {
expect(instruction.component).toBe(DummyCmpB);
expect(instruction.component.componentType).toBe(DummyCmpB);
async.done();
});
}));
@ -36,8 +37,10 @@ export function main() {
registry.config(RootHostCmp,
new Route({path: '/first/...', component: DummyParentCmp, as: 'firstCmp'}));
expect(registry.generate(['firstCmp', 'secondCmp'], RootHostCmp)).toEqual('first/second');
expect(registry.generate(['secondCmp'], DummyParentCmp)).toEqual('second');
expect(stringifyInstruction(registry.generate(['firstCmp', 'secondCmp'], RootHostCmp)))
.toEqual('first/second');
expect(stringifyInstruction(registry.generate(['secondCmp'], DummyParentCmp)))
.toEqual('second');
});
it('should generate URLs with params', () => {
@ -45,8 +48,8 @@ export function main() {
RootHostCmp,
new Route({path: '/first/:param/...', component: DummyParentParamCmp, as: 'firstCmp'}));
var url =
registry.generate(['firstCmp', {param: 'one'}, 'secondCmp', {param: 'two'}], RootHostCmp);
var url = stringifyInstruction(registry.generate(
['firstCmp', {param: 'one'}, 'secondCmp', {param: 'two'}], RootHostCmp));
expect(url).toEqual('first/one/second/two');
});
@ -61,7 +64,8 @@ export function main() {
registry.recognize('/first/second', RootHostCmp)
.then((_) => {
expect(registry.generate(['firstCmp', 'secondCmp'], RootHostCmp))
expect(
stringifyInstruction(registry.generate(['firstCmp', 'secondCmp'], RootHostCmp)))
.toEqual('first/second');
async.done();
});
@ -73,14 +77,13 @@ export function main() {
.toThrowError('Component "RootHostCmp" has no route config.');
});
it('should prefer static segments to dynamic', inject([AsyncTestCompleter], (async) => {
registry.config(RootHostCmp, new Route({path: '/:site', component: DummyCmpB}));
registry.config(RootHostCmp, new Route({path: '/home', component: DummyCmpA}));
registry.recognize('/home', RootHostCmp)
.then((instruction) => {
expect(instruction.component).toBe(DummyCmpA);
expect(instruction.component.componentType).toBe(DummyCmpA);
async.done();
});
}));
@ -91,7 +94,7 @@ export function main() {
registry.recognize('/home', RootHostCmp)
.then((instruction) => {
expect(instruction.component).toBe(DummyCmpA);
expect(instruction.component.componentType).toBe(DummyCmpA);
async.done();
});
}));
@ -102,7 +105,7 @@ export function main() {
registry.recognize('/some/path', RootHostCmp)
.then((instruction) => {
expect(instruction.component).toBe(DummyCmpA);
expect(instruction.component.componentType).toBe(DummyCmpA);
async.done();
});
}));
@ -113,7 +116,7 @@ export function main() {
registry.recognize('/first/second', RootHostCmp)
.then((instruction) => {
expect(instruction.component).toBe(DummyCmpA);
expect(instruction.component.componentType).toBe(DummyCmpA);
async.done();
});
}));
@ -127,7 +130,7 @@ export function main() {
registry.recognize('/first/second/third', RootHostCmp)
.then((instruction) => {
expect(instruction.component).toBe(DummyCmpB);
expect(instruction.component.componentType).toBe(DummyCmpB);
async.done();
});
}));
@ -137,8 +140,8 @@ export function main() {
registry.recognize('/first/second', RootHostCmp)
.then((instruction) => {
expect(instruction.component).toBe(DummyParentCmp);
expect(instruction.child.component).toBe(DummyCmpB);
expect(instruction.component.componentType).toBe(DummyParentCmp);
expect(instruction.child.component.componentType).toBe(DummyCmpB);
async.done();
});
}));
@ -149,8 +152,8 @@ export function main() {
registry.recognize('/first/second', RootHostCmp)
.then((instruction) => {
expect(instruction.component).toBe(DummyAsyncCmp);
expect(instruction.child.component).toBe(DummyCmpB);
expect(instruction.component.componentType).toBe(DummyAsyncCmp);
expect(instruction.child.component.componentType).toBe(DummyCmpB);
async.done();
});
}));
@ -162,28 +165,12 @@ export function main() {
registry.recognize('/first/second', RootHostCmp)
.then((instruction) => {
expect(instruction.component).toBe(DummyParentCmp);
expect(instruction.child.component).toBe(DummyCmpB);
expect(instruction.component.componentType).toBe(DummyParentCmp);
expect(instruction.child.component.componentType).toBe(DummyCmpB);
async.done();
});
}));
// TODO: not sure what to do with these tests
// it('should throw when a config does not have a component or redirectTo property', () => {
// expect(() => registry.config(rootHostComponent, {'path': '/some/path'}))
// .toThrowError(
// 'Route config should contain exactly one \'component\', or \'redirectTo\'
// property');
//});
//
// it('should throw when a config has an invalid component type', () => {
// expect(() => registry.config(
// rootHostComponent,
// {'path': '/some/path', 'component': {'type':
// 'intentionallyWrongComponentType'}}))
// .toThrowError('Invalid component type \'intentionallyWrongComponentType\'');
//});
it('should throw when a parent config is missing the `...` suffix any of its children add routes',
() => {
expect(() =>
@ -198,6 +185,40 @@ export function main() {
.toThrowError('Unexpected "..." before the end of the path for "home/.../fun/".');
});
it('should match matrix params on child components and query params on the root component',
inject([AsyncTestCompleter], (async) => {
registry.config(RootHostCmp, new Route({path: '/first/...', component: DummyParentCmp}));
registry.recognize('/first/second;filter=odd?comments=all', RootHostCmp)
.then((instruction) => {
expect(instruction.component.componentType).toBe(DummyParentCmp);
expect(instruction.component.params).toEqual({'comments': 'all'});
expect(instruction.child.component.componentType).toBe(DummyCmpB);
expect(instruction.child.component.params).toEqual({'filter': 'odd'});
async.done();
});
}));
it('should generate URLs with matrix and query params', () => {
registry.config(
RootHostCmp,
new Route({path: '/first/:param/...', component: DummyParentParamCmp, as: 'firstCmp'}));
var url = stringifyInstruction(registry.generate(
[
'firstCmp',
{param: 'one', query: 'cats'},
'secondCmp',
{
param: 'two',
sort: 'asc',
}
],
RootHostCmp));
expect(url).toEqual('first/one/second/two;sort=asc?query=cats');
});
});
}

15
modules/angular2/test/router/router_link_spec.ts
View File

@ -23,14 +23,13 @@ import {IMPLEMENTS} from 'angular2/src/facade/lang';
import {bind, Component, View} from 'angular2/angular2';
import {Location, Router, RouterLink} from 'angular2/router';
import {Instruction, ComponentInstruction} from 'angular2/src/router/instruction';
import {
DOM
} from 'angular2/src/dom/dom_adapter'
import {DOM} from 'angular2/src/dom/dom_adapter';
var dummyInstruction = new Instruction(new ComponentInstruction('detail', [], null), null, {});
export function
main() {
export function main() {
describe('router-link directive', function() {
beforeEachBindings(
@ -59,7 +58,7 @@ import {
testComponent.detectChanges();
// TODO: shouldn't this be just 'click' rather than '^click'?
testComponent.query(By.css('a')).triggerEventHandler('^click', {});
expect(router.spy("navigate")).toHaveBeenCalledWith('/detail');
expect(router.spy('navigateInstruction')).toHaveBeenCalledWith(dummyInstruction);
async.done();
});
}));
@ -100,7 +99,7 @@ class DummyRouter extends SpyObject {
function makeDummyRouter() {
var dr = new DummyRouter();
dr.spy('generate').andCallFake((routeParams) => routeParams.join('='));
dr.spy('navigate');
dr.spy('generate').andCallFake((routeParams) => dummyInstruction);
dr.spy('navigateInstruction');
return dr;
}

57
modules/angular2/test/router/router_spec.ts
View File

@ -20,6 +20,7 @@ import {Pipeline} from 'angular2/src/router/pipeline';
import {RouterOutlet} from 'angular2/src/router/router_outlet';
import {SpyLocation} from 'angular2/src/mock/location_mock';
import {Location} from 'angular2/src/router/location';
import {stringifyInstruction} from 'angular2/src/router/instruction';
import {RouteRegistry} from 'angular2/src/router/route_registry';
import {RouteConfig, Route} from 'angular2/src/router/route_config_decorator';
@ -125,52 +126,54 @@ export function main() {
it('should generate URLs from the root component when the path starts with /', () => {
router.config([new Route({path: '/first/...', component: DummyParentComp, as: 'firstCmp'})]);
expect(router.generate(['/firstCmp', 'secondCmp'])).toEqual('/first/second');
expect(router.generate(['/firstCmp', 'secondCmp'])).toEqual('/first/second');
expect(router.generate(['/firstCmp/secondCmp'])).toEqual('/first/second');
var instruction = router.generate(['/firstCmp', 'secondCmp']);
expect(stringifyInstruction(instruction)).toEqual('first/second');
instruction = router.generate(['/firstCmp/secondCmp']);
expect(stringifyInstruction(instruction)).toEqual('first/second');
});
describe('querstring params', () => {
it('should only apply querystring params if the given URL is on the root router and is terminal',
() => {
router.config([
new Route({path: '/hi/how/are/you', component: DummyComponent, as: 'greeting-url'})
]);
describe('query string params', () => {
it('should use query string params for the root route', () => {
router.config(
[new Route({path: '/hi/how/are/you', component: DummyComponent, as: 'greeting-url'})]);
var path = router.generate(['/greeting-url', {'name': 'brad'}]);
expect(path).toEqual('/hi/how/are/you?name=brad');
});
var instruction = router.generate(['/greeting-url', {'name': 'brad'}]);
var path = stringifyInstruction(instruction);
expect(path).toEqual('hi/how/are/you?name=brad');
});
it('should use parameters that are not apart of the route definition as querystring params',
it('should serialize parameters that are not part of the route definition as query string params',
() => {
router.config(
[new Route({path: '/one/two/:three', component: DummyComponent, as: 'number-url'})]);
var path = router.generate(['/number-url', {'three': 'three', 'four': 'four'}]);
expect(path).toEqual('/one/two/three?four=four');
var instruction = router.generate(['/number-url', {'three': 'three', 'four': 'four'}]);
var path = stringifyInstruction(instruction);
expect(path).toEqual('one/two/three?four=four');
});
});
describe('matrix params', () => {
it('should apply inline matrix params for each router path within the generated URL', () => {
it('should generate matrix params for each non-root component', () => {
router.config(
[new Route({path: '/first/...', component: DummyParentComp, as: 'firstCmp'})]);
var path =
var instruction =
router.generate(['/firstCmp', {'key': 'value'}, 'secondCmp', {'project': 'angular'}]);
expect(path).toEqual('/first;key=value/second;project=angular');
var path = stringifyInstruction(instruction);
expect(path).toEqual('first/second;project=angular?key=value');
});
it('should apply inline matrix params for each router path within the generated URL and also include named params',
() => {
router.config([
new Route({path: '/first/:token/...', component: DummyParentComp, as: 'firstCmp'})
]);
it('should work with named params', () => {
router.config(
[new Route({path: '/first/:token/...', component: DummyParentComp, as: 'firstCmp'})]);
var path =
router.generate(['/firstCmp', {'token': 'min'}, 'secondCmp', {'author': 'max'}]);
expect(path).toEqual('/first/min/second;author=max');
});
var instruction =
router.generate(['/firstCmp', {'token': 'min'}, 'secondCmp', {'author': 'max'}]);
var path = stringifyInstruction(instruction);
expect(path).toEqual('first/min/second;author=max');
});
});
});
}

118
modules/angular2/test/router/url_parser_spec.ts Normal file
View File

@ -0,0 +1,118 @@
import {
AsyncTestCompleter,
describe,
it,
iit,
ddescribe,
expect,
inject,
beforeEach,
SpyObject
} from 'angular2/test_lib';
import {UrlParser, Url} from 'angular2/src/router/url_parser';
export function main() {
describe('ParsedUrl', () => {
var urlParser;
beforeEach(() => { urlParser = new UrlParser(); });
it('should work in a simple case', () => {
var url = urlParser.parse('hello/there');
expect(url.toString()).toEqual('hello/there');
});
it('should remove the leading slash', () => {
var url = urlParser.parse('/hello/there');
expect(url.toString()).toEqual('hello/there');
});
it('should work with a single aux route', () => {
var url = urlParser.parse('hello/there(a)');
expect(url.toString()).toEqual('hello/there(a)');
});
it('should work with multiple aux routes', () => {
var url = urlParser.parse('hello/there(a//b)');
expect(url.toString()).toEqual('hello/there(a//b)');
});
it('should work with children after an aux route', () => {
var url = urlParser.parse('hello/there(a//b)/c/d');
expect(url.toString()).toEqual('hello/there(a//b)/c/d');
});
it('should work when aux routes have children', () => {
var url = urlParser.parse('hello(aa/bb//bb/cc)');
expect(url.toString()).toEqual('hello(aa/bb//bb/cc)');
});
it('should parse an aux route with an aux route', () => {
var url = urlParser.parse('hello(aa(bb))');
expect(url.toString()).toEqual('hello(aa(bb))');
});
it('should simplify an empty aux route definition', () => {
var url = urlParser.parse('hello()/there');
expect(url.toString()).toEqual('hello/there');
});
it('should parse a key-value matrix param', () => {
var url = urlParser.parse('hello/friend;name=bob');
expect(url.toString()).toEqual('hello/friend;name=bob');
});
it('should parse multiple key-value matrix params', () => {
var url = urlParser.parse('hello/there;greeting=hi;whats=up');
expect(url.toString()).toEqual('hello/there;greeting=hi;whats=up');
});
it('should ignore matrix params on the first segment', () => {
var url = urlParser.parse('profile;a=1/hi');
expect(url.toString()).toEqual('profile/hi');
});
it('should parse a key-only matrix param', () => {
var url = urlParser.parse('hello/there;hi');
expect(url.toString()).toEqual('hello/there;hi');
});
it('should parse a key-value query param', () => {
var url = urlParser.parse('hello/friend?name=bob');
expect(url.toString()).toEqual('hello/friend?name=bob');
});
it('should parse multiple key-value query params', () => {
var url = urlParser.parse('hello/there?greeting=hi&whats=up');
expect(url.params).toEqual({'greeting': 'hi', 'whats': 'up'});
expect(url.toString()).toEqual('hello/there?greeting=hi&whats=up');
});
it('should parse a key-only matrix param', () => {
var url = urlParser.parse('hello/there?hi');
expect(url.toString()).toEqual('hello/there?hi');
});
it('should parse a route with matrix and query params', () => {
var url = urlParser.parse('hello/there;sort=asc;unfiltered?hi&friend=true');
expect(url.toString()).toEqual('hello/there;sort=asc;unfiltered?hi&friend=true');
});
it('should parse a route with matrix params and aux routes', () => {
var url = urlParser.parse('hello/there;sort=asc(modal)');
expect(url.toString()).toEqual('hello/there;sort=asc(modal)');
});
it('should parse an aux route with matrix params', () => {
var url = urlParser.parse('hello/there(modal;sort=asc)');
expect(url.toString()).toEqual('hello/there(modal;sort=asc)');
});
it('should parse a route with matrix params, aux routes, and query params', () => {
var url = urlParser.parse('hello/there;sort=asc(modal)?friend=true');
expect(url.toString()).toEqual('hello/there;sort=asc(modal)?friend=true');
});
});
}