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

feat(router): add routing to async components

Browse Source 
Note that this also removes the `components` option from `RouteConfig`.
This functionality will be reintroduced with the more general `//` routing.
See #2329 for more details.
This commit is contained in:
Brian Ford
2015-05-21 13:59:14 -07:00
parent 548f3dd5cc
commit cd95e078fe
8 changed files with 288 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -110,25 +110,6 @@ export function main() {
}));
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'}))

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

@ -10,6 +10,8 @@ import {
SpyObject
} from 'angular2/test_lib';
import {Promise, PromiseWrapper} from 'angular2/src/facade/async';
import {RouteRegistry} from 'angular2/src/router/route_registry';
import {RouteConfig} from 'angular2/src/router/route_config_decorator';
@ -19,75 +21,121 @@ export function main() {
beforeEach(() => { registry = new RouteRegistry(); });
it('should match the full URL', () => {
it('should match the full URL', inject([AsyncTestCompleter], (async) => {
registry.config(rootHostComponent, {'path': '/', 'component': DummyCompA});
registry.config(rootHostComponent, {'path': '/test', 'component': DummyCompB});
var instruction = registry.recognize('/test', rootHostComponent);
registry.recognize('/test', rootHostComponent).then((instruction) => {
expect(instruction.component).toBe(DummyCompB);
async.done();
});
}));
expect(instruction.getChild('default').component).toBe(DummyCompB);
});
it('should prefer static segments to dynamic', () => {
it('should prefer static segments to dynamic', inject([AsyncTestCompleter], (async) => {
registry.config(rootHostComponent, {'path': '/:site', 'component': DummyCompB});
registry.config(rootHostComponent, {'path': '/home', 'component': DummyCompA});
var instruction = registry.recognize('/home', rootHostComponent);
registry.recognize('/home', rootHostComponent).then((instruction) => {
expect(instruction.component).toBe(DummyCompA);
async.done();
});
}));
expect(instruction.getChild('default').component).toBe(DummyCompA);
});
it('should prefer dynamic segments to star', () => {
it('should prefer dynamic segments to star', inject([AsyncTestCompleter], (async) => {
registry.config(rootHostComponent, {'path': '/:site', 'component': DummyCompA});
registry.config(rootHostComponent, {'path': '/*site', 'component': DummyCompB});
var instruction = registry.recognize('/home', rootHostComponent);
registry.recognize('/home', rootHostComponent).then((instruction) => {
expect(instruction.component).toBe(DummyCompA);
async.done();
});
}));
expect(instruction.getChild('default').component).toBe(DummyCompA);
});
it('should prefer routes with more dynamic segments', () => {
it('should prefer routes with more dynamic segments', inject([AsyncTestCompleter], (async) => {
registry.config(rootHostComponent, {'path': '/:first/*rest', 'component': DummyCompA});
registry.config(rootHostComponent, {'path': '/*all', 'component': DummyCompB});
var instruction = registry.recognize('/some/path', rootHostComponent);
registry.recognize('/some/path', rootHostComponent).then((instruction) => {
expect(instruction.component).toBe(DummyCompA);
async.done();
});
}));
expect(instruction.getChild('default').component).toBe(DummyCompA);
});
it('should prefer routes with more static segments', () => {
it('should prefer routes with more static segments', inject([AsyncTestCompleter], (async) => {
registry.config(rootHostComponent, {'path': '/first/:second', 'component': DummyCompA});
registry.config(rootHostComponent, {'path': '/:first/:second', 'component': DummyCompB});
var instruction = registry.recognize('/first/second', rootHostComponent);
registry.recognize('/first/second', rootHostComponent).then((instruction) => {
expect(instruction.component).toBe(DummyCompA);
async.done();
});
}));
expect(instruction.getChild('default').component).toBe(DummyCompA);
});
it('should prefer routes with static segments before dynamic segments', () => {
it('should prefer routes with static segments before dynamic segments', inject([AsyncTestCompleter], (async) => {
registry.config(rootHostComponent, {'path': '/first/second/:third', 'component': DummyCompB});
registry.config(rootHostComponent, {'path': '/first/:second/third', 'component': DummyCompA});
var instruction = registry.recognize('/first/second/third', rootHostComponent);
registry.recognize('/first/second/third', rootHostComponent).then((instruction) => {
expect(instruction.component).toBe(DummyCompB);
async.done();
});
}));
expect(instruction.getChild('default').component).toBe(DummyCompB);
});
it('should match the full URL recursively', () => {
it('should match the full URL using child components', inject([AsyncTestCompleter], (async) => {
registry.config(rootHostComponent, {'path': '/first', 'component': DummyParentComp});
var instruction = registry.recognize('/first/second', rootHostComponent);
registry.recognize('/first/second', rootHostComponent).then((instruction) => {
expect(instruction.component).toBe(DummyParentComp);
expect(instruction.child.component).toBe(DummyCompB);
async.done();
});
}));
var parentInstruction = instruction.getChild('default');
var childInstruction = parentInstruction.getChild('default');
it('should match the URL using async child components', inject([AsyncTestCompleter], (async) => {
registry.config(rootHostComponent, {'path': '/first', 'component': DummyAsyncComp});
expect(parentInstruction.component).toBe(DummyParentComp);
expect(childInstruction.component).toBe(DummyCompB);
registry.recognize('/first/second', rootHostComponent).then((instruction) => {
expect(instruction.component).toBe(DummyAsyncComp);
expect(instruction.child.component).toBe(DummyCompB);
async.done();
});
}));
it('should match the URL using an async parent component', inject([AsyncTestCompleter], (async) => {
registry.config(rootHostComponent, {'path': '/first', 'component': {'loader': AsyncParentLoader, 'type': 'loader'} });
registry.recognize('/first/second', rootHostComponent).then((instruction) => {
expect(instruction.component).toBe(DummyParentComp);
expect(instruction.child.component).toBe(DummyCompB);
async.done();
});
}));
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\'');
});
});
}
function AsyncParentLoader() {
return PromiseWrapper.resolve(DummyParentComp);
}
function AsyncChildLoader() {
return PromiseWrapper.resolve(DummyCompB);
}
@RouteConfig([
{ 'path': '/second', 'component': { 'loader': AsyncChildLoader, 'type': 'loader' } }
])
class DummyAsyncComp {}
class DummyCompA {}
class DummyCompB {}

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

@ -50,7 +50,7 @@ export function main() {
it('should navigate based on the initial URL state', inject([AsyncTestCompleter], (async) => {
var outlet = makeDummyOutlet();
router.config({'path': '/', 'component': 'Index'})
router.config({'path': '/', 'component': DummyComponent})
.then((_) => router.registerOutlet(outlet))
.then((_) => {
expect(outlet.spy('activate')).toHaveBeenCalled();
@ -65,7 +65,7 @@ export function main() {
var outlet = makeDummyOutlet();
router.registerOutlet(outlet)
.then((_) => { return router.config({'path': '/a', 'component': 'A'}); })
.then((_) => router.config({'path': '/a', 'component': DummyComponent}))
.then((_) => router.navigate('/a'))
.then((_) => {
expect(outlet.spy('activate')).toHaveBeenCalled();
@ -81,7 +81,7 @@ export function main() {
.then((_) => router.navigate('/a'))
.then((_) => {
expect(outlet.spy('activate')).not.toHaveBeenCalled();
return router.config({'path': '/a', 'component': 'A'});
return router.config({'path': '/a', 'component': DummyComponent});
})
.then((_) => {
expect(outlet.spy('activate')).toHaveBeenCalled();
@ -97,6 +97,8 @@ class DummyOutlet extends SpyObject {
noSuchMethod(m) { return super.noSuchMethod(m) }
}
class DummyComponent {}
function makeDummyOutlet() {
var ref = new DummyOutlet();
ref.spy('activate').andCallFake((_) => PromiseWrapper.resolve(true));