2015-07-13 19:12:48 -04:00
|
|
|
import {
|
|
|
|
AsyncTestCompleter,
|
|
|
|
beforeEach,
|
|
|
|
ddescribe,
|
|
|
|
describe,
|
|
|
|
expect,
|
|
|
|
iit,
|
|
|
|
inject,
|
|
|
|
it,
|
|
|
|
xdescribe,
|
|
|
|
xit,
|
2015-10-13 03:29:13 -04:00
|
|
|
} from 'angular2/testing_internal';
|
2015-07-13 19:12:48 -04:00
|
|
|
|
2015-11-23 13:18:04 -05:00
|
|
|
import {bootstrap} from 'angular2/platform/browser';
|
2015-09-04 01:01:36 -04:00
|
|
|
import {Component, Directive, View} from 'angular2/src/core/metadata';
|
2015-11-19 18:09:34 -05:00
|
|
|
import {DOM} from 'angular2/src/platform/dom/dom_adapter';
|
2015-12-15 11:34:44 -05:00
|
|
|
import {Console} from 'angular2/src/core/console';
|
2015-10-11 01:11:13 -04:00
|
|
|
import {provide} from 'angular2/core';
|
2015-11-17 18:24:36 -05:00
|
|
|
import {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
|
2015-12-08 16:27:56 -05:00
|
|
|
import {Type, IS_DART} from 'angular2/src/facade/lang';
|
2015-07-13 19:12:48 -04:00
|
|
|
|
|
|
|
import {
|
2015-10-11 01:11:13 -04:00
|
|
|
ROUTER_PROVIDERS,
|
2015-07-13 19:12:48 -04:00
|
|
|
Router,
|
|
|
|
RouteConfig,
|
2015-08-11 00:42:47 -04:00
|
|
|
APP_BASE_HREF,
|
2015-08-18 17:46:35 -04:00
|
|
|
ROUTER_DIRECTIVES
|
2015-07-13 19:12:48 -04:00
|
|
|
} from 'angular2/router';
|
|
|
|
|
2015-11-06 20:34:07 -05:00
|
|
|
import {ExceptionHandler} from 'angular2/src/facade/exceptions';
|
2015-07-13 19:12:48 -04:00
|
|
|
import {LocationStrategy} from 'angular2/src/router/location_strategy';
|
|
|
|
import {MockLocationStrategy} from 'angular2/src/mock/mock_location_strategy';
|
|
|
|
|
2015-08-07 14:41:38 -04:00
|
|
|
class _ArrayLogger {
|
|
|
|
res: any[] = [];
|
|
|
|
log(s: any): void { this.res.push(s); }
|
2015-08-24 14:35:27 -04:00
|
|
|
logError(s: any): void { this.res.push(s); }
|
2015-08-07 14:41:38 -04:00
|
|
|
logGroup(s: any): void { this.res.push(s); }
|
|
|
|
logGroupEnd(){};
|
|
|
|
}
|
|
|
|
|
2015-12-15 11:34:44 -05:00
|
|
|
class DummyConsole implements Console {
|
|
|
|
log(message) {}
|
|
|
|
}
|
|
|
|
|
2015-07-13 19:12:48 -04:00
|
|
|
export function main() {
|
|
|
|
describe('RouteConfig with POJO arguments', () => {
|
|
|
|
var fakeDoc, el, testBindings;
|
|
|
|
beforeEach(() => {
|
|
|
|
fakeDoc = DOM.createHtmlDocument();
|
|
|
|
el = DOM.createElement('app-cmp', fakeDoc);
|
|
|
|
DOM.appendChild(fakeDoc.body, el);
|
2015-08-07 14:41:38 -04:00
|
|
|
var logger = new _ArrayLogger();
|
2015-12-08 16:27:56 -05:00
|
|
|
var exceptionHandler = new ExceptionHandler(logger, !IS_DART);
|
2015-07-13 19:12:48 -04:00
|
|
|
testBindings = [
|
2015-10-11 01:11:13 -04:00
|
|
|
ROUTER_PROVIDERS,
|
2015-10-12 14:30:34 -04:00
|
|
|
provide(LocationStrategy, {useClass: MockLocationStrategy}),
|
|
|
|
provide(DOCUMENT, {useValue: fakeDoc}),
|
2015-12-15 11:34:44 -05:00
|
|
|
provide(ExceptionHandler, {useValue: exceptionHandler}),
|
|
|
|
provide(Console, {useClass: DummyConsole})
|
2015-07-13 19:12:48 -04:00
|
|
|
];
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should bootstrap an app with a hierarchy', inject([AsyncTestCompleter], (async) => {
|
2015-10-09 19:22:07 -04:00
|
|
|
bootstrap(HierarchyAppCmp, testBindings)
|
2015-07-13 19:12:48 -04:00
|
|
|
.then((applicationRef) => {
|
|
|
|
var router = applicationRef.hostComponent.router;
|
|
|
|
router.subscribe((_) => {
|
|
|
|
expect(el).toHaveText('root { parent { hello } }');
|
|
|
|
expect(applicationRef.hostComponent.location.path()).toEqual('/parent/child');
|
|
|
|
async.done();
|
|
|
|
});
|
2015-09-09 00:41:56 -04:00
|
|
|
router.navigateByUrl('/parent/child');
|
2015-07-13 19:12:48 -04:00
|
|
|
});
|
2015-09-09 10:41:11 -04:00
|
|
|
}));
|
2015-07-13 19:12:48 -04:00
|
|
|
|
|
|
|
|
|
|
|
it('should work in an app with redirects', inject([AsyncTestCompleter], (async) => {
|
2015-10-09 19:22:07 -04:00
|
|
|
bootstrap(RedirectAppCmp, testBindings)
|
2015-07-13 19:12:48 -04:00
|
|
|
.then((applicationRef) => {
|
|
|
|
var router = applicationRef.hostComponent.router;
|
|
|
|
router.subscribe((_) => {
|
|
|
|
expect(el).toHaveText('root { hello }');
|
|
|
|
expect(applicationRef.hostComponent.location.path()).toEqual('/after');
|
|
|
|
async.done();
|
|
|
|
});
|
2015-09-09 00:41:56 -04:00
|
|
|
router.navigateByUrl('/before');
|
2015-07-13 19:12:48 -04:00
|
|
|
});
|
2015-09-09 10:41:11 -04:00
|
|
|
}));
|
2015-07-13 19:12:48 -04:00
|
|
|
|
|
|
|
|
|
|
|
it('should work in an app with async components', inject([AsyncTestCompleter], (async) => {
|
2015-10-09 19:22:07 -04:00
|
|
|
bootstrap(AsyncAppCmp, testBindings)
|
2015-07-13 19:12:48 -04:00
|
|
|
.then((applicationRef) => {
|
|
|
|
var router = applicationRef.hostComponent.router;
|
|
|
|
router.subscribe((_) => {
|
|
|
|
expect(el).toHaveText('root { hello }');
|
|
|
|
expect(applicationRef.hostComponent.location.path()).toEqual('/hello');
|
|
|
|
async.done();
|
|
|
|
});
|
2015-09-09 00:41:56 -04:00
|
|
|
router.navigateByUrl('/hello');
|
2015-07-13 19:12:48 -04:00
|
|
|
});
|
2015-09-09 10:41:11 -04:00
|
|
|
}));
|
2015-07-13 19:12:48 -04:00
|
|
|
|
|
|
|
|
2015-10-30 20:05:30 -04:00
|
|
|
it('should work in an app with aux routes', inject([AsyncTestCompleter], (async) => {
|
|
|
|
bootstrap(AuxAppCmp, testBindings)
|
|
|
|
.then((applicationRef) => {
|
|
|
|
var router = applicationRef.hostComponent.router;
|
|
|
|
router.subscribe((_) => {
|
|
|
|
expect(el).toHaveText('root { hello } aside { hello }');
|
|
|
|
expect(applicationRef.hostComponent.location.path()).toEqual('/hello(aside)');
|
|
|
|
async.done();
|
|
|
|
});
|
|
|
|
router.navigateByUrl('/hello(aside)');
|
|
|
|
});
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
2015-10-08 15:27:55 -04:00
|
|
|
it('should work in an app with async components defined with "loader"',
|
|
|
|
inject([AsyncTestCompleter], (async) => {
|
2015-10-09 19:22:07 -04:00
|
|
|
bootstrap(ConciseAsyncAppCmp, testBindings)
|
2015-10-08 15:27:55 -04:00
|
|
|
.then((applicationRef) => {
|
|
|
|
var router = applicationRef.hostComponent.router;
|
|
|
|
router.subscribe((_) => {
|
|
|
|
expect(el).toHaveText('root { hello }');
|
|
|
|
expect(applicationRef.hostComponent.location.path()).toEqual('/hello');
|
|
|
|
async.done();
|
|
|
|
});
|
|
|
|
router.navigateByUrl('/hello');
|
|
|
|
});
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
2015-07-13 19:12:48 -04:00
|
|
|
it('should work in an app with a constructor component',
|
|
|
|
inject([AsyncTestCompleter], (async) => {
|
2015-10-09 19:22:07 -04:00
|
|
|
bootstrap(ExplicitConstructorAppCmp, testBindings)
|
2015-07-13 19:12:48 -04:00
|
|
|
.then((applicationRef) => {
|
|
|
|
var router = applicationRef.hostComponent.router;
|
|
|
|
router.subscribe((_) => {
|
|
|
|
expect(el).toHaveText('root { hello }');
|
|
|
|
expect(applicationRef.hostComponent.location.path()).toEqual('/hello');
|
|
|
|
async.done();
|
|
|
|
});
|
2015-09-09 00:41:56 -04:00
|
|
|
router.navigateByUrl('/hello');
|
2015-07-13 19:12:48 -04:00
|
|
|
});
|
2015-09-09 10:41:11 -04:00
|
|
|
}));
|
2015-07-13 19:12:48 -04:00
|
|
|
|
2015-07-17 16:36:53 -04:00
|
|
|
it('should throw if a config is missing a target',
|
|
|
|
inject(
|
|
|
|
[AsyncTestCompleter],
|
|
|
|
(async) => {
|
2015-10-09 19:22:07 -04:00
|
|
|
bootstrap(WrongConfigCmp, testBindings)
|
2015-07-17 16:36:53 -04:00
|
|
|
.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) => {
|
2015-10-09 19:22:07 -04:00
|
|
|
bootstrap(WrongComponentTypeCmp, testBindings)
|
2015-07-17 16:36:53 -04:00
|
|
|
.catch((e) => {
|
|
|
|
expect(e.originalException)
|
|
|
|
.toContainError(
|
|
|
|
'Invalid component type "intentionallyWrongComponentType". Valid types are "constructor" and "loader".');
|
|
|
|
async.done();
|
|
|
|
return null;
|
|
|
|
})}));
|
2015-09-14 19:01:09 -04:00
|
|
|
|
|
|
|
it('should throw if a config has an invalid alias name',
|
2015-10-25 05:30:27 -04:00
|
|
|
inject(
|
|
|
|
[AsyncTestCompleter],
|
|
|
|
(async) => {
|
|
|
|
bootstrap(BadAliasNameCmp, testBindings)
|
|
|
|
.catch((e) => {
|
|
|
|
expect(e.originalException)
|
|
|
|
.toContainError(
|
|
|
|
`Route "/child" with name "child" does not begin with an uppercase letter. Route names should be CamelCase like "Child".`);
|
|
|
|
async.done();
|
|
|
|
return null;
|
|
|
|
})}));
|
|
|
|
|
|
|
|
it('should throw if a config has an invalid alias name with "as"',
|
2015-09-14 19:01:09 -04:00
|
|
|
inject(
|
|
|
|
[AsyncTestCompleter],
|
|
|
|
(async) => {
|
2015-10-09 19:22:07 -04:00
|
|
|
bootstrap(BadAliasCmp, testBindings)
|
2015-09-14 19:01:09 -04:00
|
|
|
.catch((e) => {
|
|
|
|
expect(e.originalException)
|
|
|
|
.toContainError(
|
2015-10-25 05:30:27 -04:00
|
|
|
`Route "/child" with name "child" does not begin with an uppercase letter. Route names should be CamelCase like "Child".`);
|
2015-09-14 19:01:09 -04:00
|
|
|
async.done();
|
|
|
|
return null;
|
|
|
|
})}));
|
2015-10-25 05:30:27 -04:00
|
|
|
|
|
|
|
it('should throw if a config has multiple alias properties "as" and "name"',
|
|
|
|
inject([AsyncTestCompleter],
|
|
|
|
(async) => {
|
|
|
|
bootstrap(MultipleAliasCmp, testBindings)
|
|
|
|
.catch((e) => {
|
|
|
|
expect(e.originalException)
|
|
|
|
.toContainError(
|
|
|
|
`Route config should contain exactly one "as" or "name" property.`);
|
|
|
|
async.done();
|
|
|
|
return null;
|
|
|
|
})}));
|
2015-07-13 19:12:48 -04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@Component({selector: 'hello-cmp'})
|
|
|
|
@View({template: 'hello'})
|
|
|
|
class HelloCmp {
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({selector: 'app-cmp'})
|
2015-08-18 17:46:35 -04:00
|
|
|
@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
|
refactor(router): improve recognition and generation pipeline
This is a big change. @matsko also deserves much of the credit for the implementation.
Previously, `ComponentInstruction`s held all the state for async components.
Now, we introduce several subclasses for `Instruction` to describe each type of navigation.
BREAKING CHANGE:
Redirects now use the Link DSL syntax. Before:
```
@RouteConfig([
{ path: '/foo', redirectTo: '/bar' },
{ path: '/bar', component: BarCmp }
])
```
After:
```
@RouteConfig([
{ path: '/foo', redirectTo: ['Bar'] },
{ path: '/bar', component: BarCmp, name: 'Bar' }
])
```
BREAKING CHANGE:
This also introduces `useAsDefault` in the RouteConfig, which makes cases like lazy-loading
and encapsulating large routes with sub-routes easier.
Previously, you could use `redirectTo` like this to expand a URL like `/tab` to `/tab/posts`:
@RouteConfig([
{ path: '/tab', redirectTo: '/tab/users' }
{ path: '/tab', component: TabsCmp, name: 'Tab' }
])
AppCmp { ... }
Now the recommended way to handle this is case is to use `useAsDefault` like so:
```
@RouteConfig([
{ path: '/tab', component: TabsCmp, name: 'Tab' }
])
AppCmp { ... }
@RouteConfig([
{ path: '/posts', component: PostsCmp, useAsDefault: true, name: 'Posts' },
{ path: '/users', component: UsersCmp, name: 'Users' }
])
TabsCmp { ... }
```
In the above example, you can write just `['/Tab']` and the route `Users` is automatically selected as a child route.
Closes #4728
Closes #4228
Closes #4170
Closes #4490
Closes #4694
Closes #5200
Closes #5475
2015-11-23 21:07:37 -05:00
|
|
|
@RouteConfig([
|
|
|
|
{path: '/before', redirectTo: ['Hello']},
|
|
|
|
{path: '/after', component: HelloCmp, name: 'Hello'}
|
|
|
|
])
|
2015-07-13 19:12:48 -04:00
|
|
|
class RedirectAppCmp {
|
|
|
|
constructor(public router: Router, public location: LocationStrategy) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
function HelloLoader(): Promise<any> {
|
|
|
|
return Promise.resolve(HelloCmp);
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({selector: 'app-cmp'})
|
2015-08-18 17:46:35 -04:00
|
|
|
@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
|
2015-07-13 19:12:48 -04:00
|
|
|
@RouteConfig([
|
|
|
|
{path: '/hello', component: {type: 'loader', loader: HelloLoader}},
|
|
|
|
])
|
|
|
|
class AsyncAppCmp {
|
|
|
|
constructor(public router: Router, public location: LocationStrategy) {}
|
|
|
|
}
|
|
|
|
|
2015-10-08 15:27:55 -04:00
|
|
|
@Component({selector: 'app-cmp'})
|
|
|
|
@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
|
|
|
|
@RouteConfig([
|
|
|
|
{path: '/hello', loader: HelloLoader},
|
|
|
|
])
|
|
|
|
class ConciseAsyncAppCmp {
|
2015-10-30 20:05:30 -04:00
|
|
|
constructor(public router: Router, public location: LocationStrategy) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({selector: 'app-cmp'})
|
|
|
|
@View({template: `root { <router-outlet></router-outlet> } aside { <router-outlet name="aside"></router-outlet> }`, directives: ROUTER_DIRECTIVES})
|
|
|
|
@RouteConfig([{path: '/hello', component: HelloCmp}, {aux: 'aside', component: HelloCmp}])
|
|
|
|
class AuxAppCmp {
|
2015-10-08 15:27:55 -04:00
|
|
|
constructor(public router: Router, public location: LocationStrategy) {}
|
|
|
|
}
|
|
|
|
|
2015-07-13 19:12:48 -04:00
|
|
|
@Component({selector: 'app-cmp'})
|
2015-08-18 17:46:35 -04:00
|
|
|
@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
|
2015-07-13 19:12:48 -04:00
|
|
|
@RouteConfig([
|
|
|
|
{path: '/hello', component: {type: 'constructor', constructor: HelloCmp}},
|
|
|
|
])
|
|
|
|
class ExplicitConstructorAppCmp {
|
|
|
|
constructor(public router: Router, public location: LocationStrategy) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({selector: 'parent-cmp'})
|
2015-08-18 17:46:35 -04:00
|
|
|
@View({template: `parent { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
|
2015-07-13 19:12:48 -04:00
|
|
|
@RouteConfig([{path: '/child', component: HelloCmp}])
|
|
|
|
class ParentCmp {
|
|
|
|
}
|
|
|
|
|
|
|
|
@Component({selector: 'app-cmp'})
|
2015-08-18 17:46:35 -04:00
|
|
|
@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
|
2015-07-13 19:12:48 -04:00
|
|
|
@RouteConfig([{path: '/parent/...', component: ParentCmp}])
|
|
|
|
class HierarchyAppCmp {
|
|
|
|
constructor(public router: Router, public location: LocationStrategy) {}
|
|
|
|
}
|
2015-07-17 16:36:53 -04:00
|
|
|
|
|
|
|
@Component({selector: 'app-cmp'})
|
2015-08-18 17:46:35 -04:00
|
|
|
@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
|
2015-07-17 16:36:53 -04:00
|
|
|
@RouteConfig([{path: '/hello'}])
|
|
|
|
class WrongConfigCmp {
|
|
|
|
}
|
|
|
|
|
2015-10-25 05:30:27 -04:00
|
|
|
@Component({selector: 'app-cmp'})
|
|
|
|
@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
|
|
|
|
@RouteConfig([{path: '/child', component: HelloCmp, name: 'child'}])
|
|
|
|
class BadAliasNameCmp {
|
|
|
|
}
|
|
|
|
|
2015-09-14 19:01:09 -04:00
|
|
|
@Component({selector: 'app-cmp'})
|
|
|
|
@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
|
|
|
|
@RouteConfig([{path: '/child', component: HelloCmp, as: 'child'}])
|
|
|
|
class BadAliasCmp {
|
|
|
|
}
|
|
|
|
|
2015-10-25 05:30:27 -04:00
|
|
|
@Component({selector: 'app-cmp'})
|
|
|
|
@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
|
|
|
|
@RouteConfig([{path: '/child', component: HelloCmp, as: 'Child', name: 'Child'}])
|
|
|
|
class MultipleAliasCmp {
|
|
|
|
}
|
|
|
|
|
2015-07-17 16:36:53 -04:00
|
|
|
@Component({selector: 'app-cmp'})
|
2015-08-18 17:46:35 -04:00
|
|
|
@View({template: `root { <router-outlet></router-outlet> }`, directives: ROUTER_DIRECTIVES})
|
2015-07-17 16:36:53 -04:00
|
|
|
@RouteConfig([
|
|
|
|
{path: '/hello', component: {type: 'intentionallyWrongComponentType', constructor: HelloCmp}},
|
|
|
|
])
|
|
|
|
class WrongComponentTypeCmp {
|
|
|
|
}
|