angular-cn/modules/@angular/router-deprecated/test/router_spec.ts

347 lines
13 KiB
TypeScript
Raw Normal View History

import {
describe,
it,
iit,
xit,
ddescribe,
expect,
inject,
beforeEach,
beforeEachProviders
} from '@angular/core/testing/testing_internal';
import {AsyncTestCompleter} from '@angular/core/testing/testing_internal';
2015-08-26 14:41:41 -04:00
import {SpyRouterOutlet} from './spies';
import {Type} from '../src/facade/lang';
import {PromiseWrapper, ObservableWrapper} from '../src/facade/async';
import {ListWrapper} from '../src/facade/collection';
2016-05-02 13:36:58 -04:00
import {Router, RootRouter} from '../src/router';
import {SpyLocation} from '@angular/common/testing';
import {Location} from '@angular/common';
2016-05-02 13:36:58 -04:00
import {RouteRegistry, ROUTER_PRIMARY_COMPONENT} from '../src/route_registry';
import {RouteConfig, AsyncRoute, Route, Redirect} from '../src/route_config/route_config_decorator';
import {provide} from '@angular/core';
2016-05-02 13:36:58 -04:00
import {RouterOutlet} from '../src/directives/router_outlet';
export function main() {
describe('Router', () => {
var router: Router;
var location: Location;
beforeEachProviders(() => [
RouteRegistry,
{provide: Location, useClass: SpyLocation},
{provide: ROUTER_PRIMARY_COMPONENT, useValue: AppCmp},
{provide: Router, useClass: RootRouter}
]);
beforeEach(inject([Router, Location], (rtr: Router, loc: Location) => {
router = rtr;
location = loc;
}));
it('should navigate based on the initial URL state', inject([AsyncTestCompleter], (async) => {
var outlet = makeDummyOutlet();
router.config([new Route({path: '/', component: DummyComponent})])
.then((_) => router.registerPrimaryOutlet(outlet))
.then((_) => {
expect((<any>outlet).spy('activate')).toHaveBeenCalled();
expect((<SpyLocation>location).urlChanges).toEqual([]);
async.done();
});
}));
it('should activate viewports and update URL on navigate',
inject([AsyncTestCompleter], (async) => {
var outlet = makeDummyOutlet();
router.registerPrimaryOutlet(outlet)
.then((_) => router.config([new Route({path: '/a', component: DummyComponent})]))
.then((_) => router.navigateByUrl('/a'))
.then((_) => {
expect((<any>outlet).spy('activate')).toHaveBeenCalled();
expect((<SpyLocation>location).urlChanges).toEqual(['/a']);
async.done();
});
}));
it('should activate viewports and update URL when navigating via DSL',
inject([AsyncTestCompleter], (async) => {
var outlet = makeDummyOutlet();
router.registerPrimaryOutlet(outlet)
.then((_) => router.config(
[new Route({path: '/a', component: DummyComponent, name: 'A'})]))
.then((_) => router.navigate(['/A']))
.then((_) => {
expect((<any>outlet).spy('activate')).toHaveBeenCalled();
expect((<SpyLocation>location).urlChanges).toEqual(['/a']);
async.done();
});
}));
it('should not push a history change on when navigate is called with skipUrlChange',
inject([AsyncTestCompleter], (async) => {
var outlet = makeDummyOutlet();
router.registerPrimaryOutlet(outlet)
.then((_) => router.config([new Route({path: '/b', component: DummyComponent})]))
.then((_) => router.navigateByUrl('/b', true))
.then((_) => {
expect((<any>outlet).spy('activate')).toHaveBeenCalled();
expect((<SpyLocation>location).urlChanges).toEqual([]);
async.done();
});
}));
// See https://github.com/angular/angular/issues/5590
2016-02-25 13:21:53 -05:00
// This test is disabled because it is flaky.
// TODO: bford. make this test not flaky and reenable it.
xit('should replace history when triggered by a hashchange with a redirect',
inject([AsyncTestCompleter], (async) => {
var outlet = makeDummyOutlet();
router.registerPrimaryOutlet(outlet)
.then((_) => router.config([
new Redirect({path: '/a', redirectTo: ['B']}),
new Route({path: '/b', component: DummyComponent, name: 'B'})
]))
.then((_) => {
router.subscribe((_) => {
expect((<SpyLocation>location).urlChanges).toEqual(['hash: a', 'replace: /b']);
async.done();
});
(<SpyLocation>location).simulateHashChange('a');
});
}));
it('should push history when triggered by a hashchange without a redirect',
inject([AsyncTestCompleter], (async) => {
var outlet = makeDummyOutlet();
router.registerPrimaryOutlet(outlet)
.then((_) => router.config([new Route({path: '/a', component: DummyComponent})]))
.then((_) => {
router.subscribe((_) => {
expect((<SpyLocation>location).urlChanges).toEqual(['hash: a']);
async.done();
});
(<SpyLocation>location).simulateHashChange('a');
});
}));
it('should pass an object containing the component instruction to the router change subscription after a successful navigation',
inject([AsyncTestCompleter], (async) => {
var outlet = makeDummyOutlet();
router.registerPrimaryOutlet(outlet)
.then((_) => router.config([new Route({path: '/a', component: DummyComponent})]))
.then((_) => {
router.subscribe(({status, instruction}) => {
expect(status).toEqual('success');
expect(instruction).toEqual(jasmine.objectContaining({urlPath: 'a', urlParams: []}));
async.done();
});
(<SpyLocation>location).simulateHashChange('a');
});
}));
it('should pass an object containing the bad url to the router change subscription after a failed navigation',
inject([AsyncTestCompleter], (async) => {
var outlet = makeDummyOutlet();
router.registerPrimaryOutlet(outlet)
.then((_) => router.config([new Route({path: '/a', component: DummyComponent})]))
.then((_) => {
router.subscribe(({status, url}) => {
expect(status).toEqual('fail');
expect(url).toEqual('b');
async.done();
});
(<SpyLocation>location).simulateHashChange('b');
});
}));
it('should navigate after being configured', inject([AsyncTestCompleter], (async) => {
var outlet = makeDummyOutlet();
router.registerPrimaryOutlet(outlet)
.then((_) => router.navigateByUrl('/a'))
.then((_) => {
expect((<any>outlet).spy('activate')).not.toHaveBeenCalled();
return router.config([new Route({path: '/a', component: DummyComponent})]);
})
.then((_) => {
expect((<any>outlet).spy('activate')).toHaveBeenCalled();
async.done();
});
}));
it('should throw when linkParams does not include a route name', () => {
expect(() => router.generate(['./']))
.toThrowError(`Link "${ListWrapper.toJSON(['./'])}" must include a route name.`);
expect(() => router.generate(['/']))
.toThrowError(`Link "${ListWrapper.toJSON(['/'])}" must include a route name.`);
});
it('should, when subscribed to, return a disposable subscription', () => {
expect(() => {
var subscription = router.subscribe((_) => {});
ObservableWrapper.dispose(subscription);
}).not.toThrow();
});
it('should generate URLs from the root component when the path starts with /', () => {
router.config(
[new Route({path: '/first/...', component: DummyParentComp, name: 'FirstCmp'})]);
var instruction = router.generate(['/FirstCmp', 'SecondCmp']);
expect(stringifyInstruction(instruction)).toEqual('first/second');
instruction = router.generate(['/FirstCmp/SecondCmp']);
expect(stringifyInstruction(instruction)).toEqual('first/second');
});
it('should generate an instruction with terminal async routes',
inject([AsyncTestCompleter], (async) => {
var outlet = makeDummyOutlet();
router.registerPrimaryOutlet(outlet);
router.config([new AsyncRoute({path: '/first', loader: loader, name: 'FirstCmp'})]);
var instruction = router.generate(['/FirstCmp']);
router.navigateByInstruction(instruction)
.then((_) => {
expect((<any>outlet).spy('activate')).toHaveBeenCalled();
async.done();
});
}));
it('should return whether a given instruction is active with isRouteActive',
inject([AsyncTestCompleter], (async) => {
var outlet = makeDummyOutlet();
router.registerPrimaryOutlet(outlet)
.then((_) => router.config([
new Route({path: '/a', component: DummyComponent, name: 'A'}),
new Route({path: '/b', component: DummyComponent, name: 'B'})
]))
.then((_) => router.navigateByUrl('/a'))
.then((_) => {
var instruction = router.generate(['/A']);
var otherInstruction = router.generate(['/B']);
expect(router.isRouteActive(instruction)).toEqual(true);
expect(router.isRouteActive(otherInstruction)).toEqual(false);
async.done();
});
}));
it('should provide the current instruction', inject([AsyncTestCompleter], (async) => {
var outlet = makeDummyOutlet();
router.registerPrimaryOutlet(outlet)
.then((_) => router.config([
new Route({path: '/a', component: DummyComponent, name: 'A'}),
new Route({path: '/b', component: DummyComponent, name: 'B'})
]))
.then((_) => router.navigateByUrl('/a'))
.then((_) => {
var instruction = router.generate(['/A']);
expect(router.currentInstruction).toEqual(instruction);
async.done();
});
}));
it('should provide the root level router from child routers', () => {
let childRouter = router.childRouter(DummyComponent);
expect(childRouter.root).toBe(router);
});
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, name: 'GreetingUrl'})]);
var instruction = router.generate(['/GreetingUrl', {'name': 'brad'}]);
var path = stringifyInstruction(instruction);
expect(path).toEqual('hi/how/are/you?name=brad');
});
it('should preserve the number 1 as a query string value', () => {
router.config(
[new Route({path: '/hi/how/are/you', component: DummyComponent, name: 'GreetingUrl'})]);
var instruction = router.generate(['/GreetingUrl', {'name': 1}]);
var path = stringifyInstruction(instruction);
expect(path).toEqual('hi/how/are/you?name=1');
});
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, name: 'NumberUrl'})
]);
var instruction = router.generate(['/NumberUrl', {'three': 'three', 'four': 'four'}]);
var path = stringifyInstruction(instruction);
expect(path).toEqual('one/two/three?four=four');
});
});
describe('matrix params', () => {
it('should generate matrix params for each non-root component', () => {
router.config(
[new Route({path: '/first/...', component: DummyParentComp, name: 'FirstCmp'})]);
var instruction =
router.generate(['/FirstCmp', {'key': 'value'}, 'SecondCmp', {'project': 'angular'}]);
var path = stringifyInstruction(instruction);
expect(path).toEqual('first/second;project=angular?key=value');
});
it('should work with named params', () => {
router.config(
[new Route({path: '/first/:token/...', component: DummyParentComp, name: 'FirstCmp'})]);
var instruction =
router.generate(['/FirstCmp', {'token': 'min'}, 'SecondCmp', {'author': 'max'}]);
var path = stringifyInstruction(instruction);
expect(path).toEqual('first/min/second;author=max');
});
});
});
}
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
function stringifyInstruction(instruction): string {
return instruction.toRootUrl();
}
function loader(): Promise<Type> {
return PromiseWrapper.resolve(DummyComponent);
}
class DummyComponent {}
@RouteConfig([new Route({path: '/second', component: DummyComponent, name: 'SecondCmp'})])
class DummyParentComp {
}
function makeDummyOutlet(): RouterOutlet {
2015-08-26 14:41:41 -04:00
var ref = new SpyRouterOutlet();
ref.spy('canActivate').andCallFake((_) => PromiseWrapper.resolve(true));
ref.spy('routerCanReuse').andCallFake((_) => PromiseWrapper.resolve(false));
ref.spy('routerCanDeactivate').andCallFake((_) => PromiseWrapper.resolve(true));
ref.spy('activate').andCallFake((_) => PromiseWrapper.resolve(true));
return <any>ref;
}
class AppCmp {}