feat(router): add support for componentless routes
This commit is contained in:
parent
bd2281e32d
commit
92d8bf9619
|
@ -35,7 +35,7 @@ function createUrlTree(urlTree: UrlTree, root: UrlSegment): Observable<UrlTree>
|
|||
}
|
||||
|
||||
function expandSegment(routes: Route[], segment: UrlSegment, outlet: string): UrlSegment {
|
||||
if (segment.pathsWithParams.length === 0 && Object.keys(segment.children).length > 0) {
|
||||
if (segment.pathsWithParams.length === 0 && segment.hasChildren()) {
|
||||
return new UrlSegment([], expandSegmentChildren(routes, segment));
|
||||
} else {
|
||||
return expandPathsWithParams(segment, routes, segment.pathsWithParams, outlet, true);
|
||||
|
@ -119,7 +119,7 @@ function matchPathsWithParamsAgainstRoute(
|
|||
return new UrlSegment(consumedPaths, {});
|
||||
|
||||
// TODO: check that the right segment is present
|
||||
} else if (slicedPath.length === 0 && Object.keys(segment.children).length > 0) {
|
||||
} else if (slicedPath.length === 0 && segment.hasChildren()) {
|
||||
const children = expandSegmentChildren(childConfig, segment);
|
||||
return new UrlSegment(consumedPaths, children);
|
||||
|
||||
|
@ -136,7 +136,7 @@ function match(segment: UrlSegment, route: Route, paths: UrlPathWithParams[]): {
|
|||
positionalParamSegments: {[k: string]: UrlPathWithParams}
|
||||
} {
|
||||
if (route.path === '') {
|
||||
if (route.terminal && (Object.keys(segment.children).length > 0 || paths.length > 0)) {
|
||||
if (route.terminal && (segment.hasChildren() || paths.length > 0)) {
|
||||
throw new NoMatch();
|
||||
} else {
|
||||
return {consumedPaths: [], lastChild: 0, positionalParamSegments: {}};
|
||||
|
@ -165,7 +165,7 @@ function match(segment: UrlSegment, route: Route, paths: UrlPathWithParams[]): {
|
|||
currentIndex++;
|
||||
}
|
||||
|
||||
if (route.terminal && (Object.keys(segment.children).length > 0 || currentIndex < paths.length)) {
|
||||
if (route.terminal && (segment.hasChildren() || currentIndex < paths.length)) {
|
||||
throw new NoMatch();
|
||||
}
|
||||
|
||||
|
|
|
@ -26,10 +26,15 @@ function validateNode(route: Route): void {
|
|||
throw new Error(
|
||||
`Invalid configuration of route '${route.path}': redirectTo and component cannot be used together`);
|
||||
}
|
||||
if (route.redirectTo === undefined && !route.component && !route.children) {
|
||||
throw new Error(
|
||||
`Invalid configuration of route '${route.path}': component, redirectTo, children must be provided`);
|
||||
}
|
||||
if (route.path === undefined) {
|
||||
throw new Error(`Invalid route configuration: routes must have path specified`);
|
||||
}
|
||||
if (route.path.startsWith('/')) {
|
||||
throw new Error(`Invalid route configuration of route '${route.path}': path cannot start with a slash`);
|
||||
throw new Error(
|
||||
`Invalid route configuration of route '${route.path}': path cannot start with a slash`);
|
||||
}
|
||||
}
|
|
@ -139,7 +139,7 @@ function updateSegment(segment: UrlSegment, startIndex: number, commands: any[])
|
|||
if (!segment) {
|
||||
segment = new UrlSegment([], {});
|
||||
}
|
||||
if (segment.pathsWithParams.length === 0 && Object.keys(segment.children).length > 0) {
|
||||
if (segment.pathsWithParams.length === 0 && segment.hasChildren()) {
|
||||
return updateSegmentChildren(segment, startIndex, commands);
|
||||
}
|
||||
const m = prefixedWith(segment, startIndex, commands);
|
||||
|
@ -147,7 +147,7 @@ function updateSegment(segment: UrlSegment, startIndex: number, commands: any[])
|
|||
|
||||
if (m.match && slicedCommands.length === 0) {
|
||||
return new UrlSegment(segment.pathsWithParams, {});
|
||||
} else if (m.match && Object.keys(segment.children).length === 0) {
|
||||
} else if (m.match && !segment.hasChildren()) {
|
||||
return createNewSegment(segment, startIndex, commands);
|
||||
} else if (m.match) {
|
||||
return updateSegmentChildren(segment, 0, slicedCommands);
|
||||
|
|
|
@ -5,7 +5,7 @@ import {of } from 'rxjs/observable/of';
|
|||
|
||||
import {Route, RouterConfig} from './config';
|
||||
import {ActivatedRouteSnapshot, RouterStateSnapshot} from './router_state';
|
||||
import {PRIMARY_OUTLET} from './shared';
|
||||
import {PRIMARY_OUTLET, Params} from './shared';
|
||||
import {UrlPathWithParams, UrlSegment, UrlTree, mapChildrenIntoArray} from './url_tree';
|
||||
import {last, merge} from './utils/collection';
|
||||
import {TreeNode} from './utils/tree';
|
||||
|
@ -18,7 +18,7 @@ export function recognize(
|
|||
rootComponentType: Type, config: RouterConfig, urlTree: UrlTree,
|
||||
url: string): Observable<RouterStateSnapshot> {
|
||||
try {
|
||||
const children = processSegment(config, urlTree.root, PRIMARY_OUTLET);
|
||||
const children = processSegment(config, urlTree.root, {}, PRIMARY_OUTLET);
|
||||
const root = new ActivatedRouteSnapshot(
|
||||
[], {}, PRIMARY_OUTLET, rootComponentType, null, urlTree.root, -1);
|
||||
const rootNode = new TreeNode<ActivatedRouteSnapshot>(root, children);
|
||||
|
@ -35,19 +35,20 @@ export function recognize(
|
|||
}
|
||||
}
|
||||
|
||||
function processSegment(
|
||||
config: Route[], segment: UrlSegment, outlet: string): TreeNode<ActivatedRouteSnapshot>[] {
|
||||
if (segment.pathsWithParams.length === 0 && Object.keys(segment.children).length > 0) {
|
||||
return processSegmentChildren(config, segment);
|
||||
function processSegment(config: Route[], segment: UrlSegment, extraParams: Params, outlet: string):
|
||||
TreeNode<ActivatedRouteSnapshot>[] {
|
||||
if (segment.pathsWithParams.length === 0 && segment.hasChildren()) {
|
||||
return processSegmentChildren(config, segment, extraParams);
|
||||
} else {
|
||||
return [processPathsWithParams(config, segment, 0, segment.pathsWithParams, outlet)];
|
||||
return [processPathsWithParams(
|
||||
config, segment, 0, segment.pathsWithParams, extraParams, outlet)];
|
||||
}
|
||||
}
|
||||
|
||||
function processSegmentChildren(
|
||||
config: Route[], segment: UrlSegment): TreeNode<ActivatedRouteSnapshot>[] {
|
||||
config: Route[], segment: UrlSegment, extraParams: Params): TreeNode<ActivatedRouteSnapshot>[] {
|
||||
const children = mapChildrenIntoArray(
|
||||
segment, (child, childOutlet) => processSegment(config, child, childOutlet));
|
||||
segment, (child, childOutlet) => processSegment(config, child, extraParams, childOutlet));
|
||||
checkOutletNameUniqueness(children);
|
||||
sortActivatedRouteSnapshots(children);
|
||||
return children;
|
||||
|
@ -63,10 +64,10 @@ function sortActivatedRouteSnapshots(nodes: TreeNode<ActivatedRouteSnapshot>[]):
|
|||
|
||||
function processPathsWithParams(
|
||||
config: Route[], segment: UrlSegment, pathIndex: number, paths: UrlPathWithParams[],
|
||||
outlet: string): TreeNode<ActivatedRouteSnapshot> {
|
||||
extraParams: Params, outlet: string): TreeNode<ActivatedRouteSnapshot> {
|
||||
for (let r of config) {
|
||||
try {
|
||||
return processPathsWithParamsAgainstRoute(r, segment, pathIndex, paths, outlet);
|
||||
return processPathsWithParamsAgainstRoute(r, segment, pathIndex, paths, extraParams, outlet);
|
||||
} catch (e) {
|
||||
if (!(e instanceof NoMatch)) throw e;
|
||||
}
|
||||
|
@ -76,19 +77,20 @@ function processPathsWithParams(
|
|||
|
||||
function processPathsWithParamsAgainstRoute(
|
||||
route: Route, segment: UrlSegment, pathIndex: number, paths: UrlPathWithParams[],
|
||||
outlet: string): TreeNode<ActivatedRouteSnapshot> {
|
||||
parentExtraParams: Params, outlet: string): TreeNode<ActivatedRouteSnapshot> {
|
||||
if (route.redirectTo) throw new NoMatch();
|
||||
|
||||
if ((route.outlet ? route.outlet : PRIMARY_OUTLET) !== outlet) throw new NoMatch();
|
||||
|
||||
if (route.path === '**') {
|
||||
const params = paths.length > 0 ? last(paths).parameters : {};
|
||||
const snapshot =
|
||||
new ActivatedRouteSnapshot(paths, params, outlet, route.component, route, segment, -1);
|
||||
const snapshot = new ActivatedRouteSnapshot(
|
||||
paths, merge(parentExtraParams, params), outlet, route.component, route, segment, -1);
|
||||
return new TreeNode<ActivatedRouteSnapshot>(snapshot, []);
|
||||
}
|
||||
|
||||
const {consumedPaths, parameters, lastChild} = match(segment, route, paths);
|
||||
|
||||
const {consumedPaths, parameters, extraParams, lastChild} =
|
||||
match(segment, route, paths, parentExtraParams);
|
||||
const snapshot = new ActivatedRouteSnapshot(
|
||||
consumedPaths, parameters, outlet, route.component, route, segment,
|
||||
pathIndex + lastChild - 1);
|
||||
|
@ -99,23 +101,24 @@ function processPathsWithParamsAgainstRoute(
|
|||
return new TreeNode<ActivatedRouteSnapshot>(snapshot, []);
|
||||
|
||||
// TODO: check that the right segment is present
|
||||
} else if (slicedPath.length === 0 && Object.keys(segment.children).length > 0) {
|
||||
const children = processSegmentChildren(childConfig, segment);
|
||||
} else if (slicedPath.length === 0 && segment.hasChildren()) {
|
||||
const children = processSegmentChildren(childConfig, segment, extraParams);
|
||||
return new TreeNode<ActivatedRouteSnapshot>(snapshot, children);
|
||||
|
||||
} else {
|
||||
const child = processPathsWithParams(
|
||||
childConfig, segment, pathIndex + lastChild, slicedPath, PRIMARY_OUTLET);
|
||||
childConfig, segment, pathIndex + lastChild, slicedPath, extraParams, PRIMARY_OUTLET);
|
||||
return new TreeNode<ActivatedRouteSnapshot>(snapshot, [child]);
|
||||
}
|
||||
}
|
||||
|
||||
function match(segment: UrlSegment, route: Route, paths: UrlPathWithParams[]) {
|
||||
function match(
|
||||
segment: UrlSegment, route: Route, paths: UrlPathWithParams[], parentExtraParams: Params) {
|
||||
if (route.path === '') {
|
||||
if (route.terminal && (Object.keys(segment.children).length > 0 || paths.length > 0)) {
|
||||
if (route.terminal && (segment.hasChildren() || paths.length > 0)) {
|
||||
throw new NoMatch();
|
||||
} else {
|
||||
return {consumedPaths: [], lastChild: 0, parameters: {}};
|
||||
return {consumedPaths: [], lastChild: 0, parameters: {}, extraParams: {}};
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -141,12 +144,14 @@ function match(segment: UrlSegment, route: Route, paths: UrlPathWithParams[]) {
|
|||
currentIndex++;
|
||||
}
|
||||
|
||||
if (route.terminal && (Object.keys(segment.children).length > 0 || currentIndex < paths.length)) {
|
||||
if (route.terminal && (segment.hasChildren() || currentIndex < paths.length)) {
|
||||
throw new NoMatch();
|
||||
}
|
||||
|
||||
const parameters = merge(posParameters, consumedPaths[consumedPaths.length - 1].parameters);
|
||||
return {consumedPaths, lastChild: currentIndex, parameters};
|
||||
const parameters = merge(
|
||||
parentExtraParams, merge(posParameters, consumedPaths[consumedPaths.length - 1].parameters));
|
||||
const extraParams = route.component ? {} : parameters;
|
||||
return {consumedPaths, lastChild: currentIndex, parameters, extraParams};
|
||||
}
|
||||
|
||||
function checkOutletNameUniqueness(nodes: TreeNode<ActivatedRouteSnapshot>[]): void {
|
||||
|
|
|
@ -386,27 +386,57 @@ class GuardChecks {
|
|||
const curr = currNode ? currNode.value : null;
|
||||
const outlet = parentOutletMap ? parentOutletMap._outlets[futureNode.value.outlet] : null;
|
||||
|
||||
// reusing the node
|
||||
if (curr && future._routeConfig === curr._routeConfig) {
|
||||
if (!shallowEqual(future.params, curr.params)) {
|
||||
this.checks.push(new CanDeactivate(outlet.component, curr), new CanActivate(future));
|
||||
}
|
||||
|
||||
// If we have a component, we need to go through an outlet.
|
||||
if (future.component) {
|
||||
this.traverseChildRoutes(futureNode, currNode, outlet ? outlet.outletMap : null);
|
||||
|
||||
// if we have a componentless route, we recurse but keep the same outlet map.
|
||||
} else {
|
||||
this.traverseChildRoutes(futureNode, currNode, parentOutletMap);
|
||||
}
|
||||
} else {
|
||||
if (curr) {
|
||||
// if we had a normal route, we need to deactivate only that outlet.
|
||||
if (curr.component) {
|
||||
this.deactivateOutletAndItChildren(curr, outlet);
|
||||
|
||||
// if we had a componentless route, we need to deactivate everything!
|
||||
} else {
|
||||
this.deactivateOutletMap(parentOutletMap);
|
||||
}
|
||||
}
|
||||
|
||||
this.checks.push(new CanActivate(future));
|
||||
// If we have a component, we need to go through an outlet.
|
||||
if (future.component) {
|
||||
this.traverseChildRoutes(futureNode, null, outlet ? outlet.outletMap : null);
|
||||
|
||||
// if we have a componentless route, we recurse but keep the same outlet map.
|
||||
} else {
|
||||
this.traverseChildRoutes(futureNode, null, parentOutletMap);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private deactivateOutletAndItChildren(route: ActivatedRouteSnapshot, outlet: RouterOutlet): void {
|
||||
if (outlet && outlet.isActivated) {
|
||||
forEach(outlet.outletMap._outlets, (v: RouterOutlet) => {
|
||||
this.deactivateOutletMap(outlet.outletMap);
|
||||
this.checks.push(new CanDeactivate(outlet.component, route));
|
||||
}
|
||||
}
|
||||
|
||||
private deactivateOutletMap(outletMap: RouterOutletMap): void {
|
||||
forEach(outletMap._outlets, (v: RouterOutlet) => {
|
||||
if (v.isActivated) {
|
||||
this.deactivateOutletAndItChildren(v.activatedRoute.snapshot, v);
|
||||
}
|
||||
});
|
||||
this.checks.push(new CanDeactivate(outlet.component, route));
|
||||
}
|
||||
}
|
||||
|
||||
private runCanActivate(future: ActivatedRouteSnapshot): Observable<boolean> {
|
||||
|
@ -431,6 +461,7 @@ class GuardChecks {
|
|||
return Observable.from(canDeactivate)
|
||||
.map(c => {
|
||||
const guard = this.injector.get(c);
|
||||
|
||||
if (guard.canDeactivate) {
|
||||
return wrapIntoObservable(guard.canDeactivate(component, curr, this.curr));
|
||||
} else {
|
||||
|
@ -480,36 +511,69 @@ class ActivateRoutes {
|
|||
const future = futureNode.value;
|
||||
const curr = currNode ? currNode.value : null;
|
||||
|
||||
const outlet = getOutlet(parentOutletMap, futureNode.value);
|
||||
|
||||
// reusing the node
|
||||
if (future === curr) {
|
||||
// advance the route to push the parameters
|
||||
advanceActivatedRoute(future);
|
||||
|
||||
// If we have a normal route, we need to go through an outlet.
|
||||
if (future.component) {
|
||||
const outlet = getOutlet(parentOutletMap, futureNode.value);
|
||||
this.activateChildRoutes(futureNode, currNode, outlet.outletMap);
|
||||
|
||||
// if we have a componentless route, we recurse but keep the same outlet map.
|
||||
} else {
|
||||
this.activateChildRoutes(futureNode, currNode, parentOutletMap);
|
||||
}
|
||||
} else {
|
||||
if (curr) {
|
||||
// if we had a normal route, we need to deactivate only that outlet.
|
||||
if (curr.component) {
|
||||
const outlet = getOutlet(parentOutletMap, futureNode.value);
|
||||
this.deactivateOutletAndItChildren(outlet);
|
||||
const outletMap = new RouterOutletMap();
|
||||
this.activateNewRoutes(outletMap, future, outlet);
|
||||
this.activateChildRoutes(futureNode, null, outletMap);
|
||||
|
||||
// if we had a componentless route, we need to deactivate everything!
|
||||
} else {
|
||||
this.deactivateOutletMap(parentOutletMap);
|
||||
}
|
||||
}
|
||||
|
||||
private activateNewRoutes(
|
||||
// if we have a normal route, we need to advance the route
|
||||
// and place the component into the outlet. After that recurse.
|
||||
if (future.component) {
|
||||
advanceActivatedRoute(future);
|
||||
const outlet = getOutlet(parentOutletMap, futureNode.value);
|
||||
const outletMap = new RouterOutletMap();
|
||||
this.placeComponentIntoOutlet(outletMap, future, outlet);
|
||||
this.activateChildRoutes(futureNode, null, outletMap);
|
||||
|
||||
// if we have a componentless route, we recurse but keep the same outlet map.
|
||||
} else {
|
||||
advanceActivatedRoute(future);
|
||||
this.activateChildRoutes(futureNode, null, parentOutletMap);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private placeComponentIntoOutlet(
|
||||
outletMap: RouterOutletMap, future: ActivatedRoute, outlet: RouterOutlet): void {
|
||||
const resolved = ReflectiveInjector.resolve([
|
||||
{provide: ActivatedRoute, useValue: future},
|
||||
{provide: RouterOutletMap, useValue: outletMap}
|
||||
]);
|
||||
advanceActivatedRoute(future);
|
||||
outlet.activate(future._futureSnapshot._resolvedComponentFactory, future, resolved, outletMap);
|
||||
}
|
||||
|
||||
private deactivateOutletAndItChildren(outlet: RouterOutlet): void {
|
||||
if (outlet && outlet.isActivated) {
|
||||
forEach(
|
||||
outlet.outletMap._outlets, (v: RouterOutlet) => this.deactivateOutletAndItChildren(v));
|
||||
this.deactivateOutletMap(outlet.outletMap);
|
||||
outlet.deactivate();
|
||||
}
|
||||
}
|
||||
|
||||
private deactivateOutletMap(outletMap: RouterOutletMap): void {
|
||||
forEach(outletMap._outlets, (v: RouterOutlet) => this.deactivateOutletAndItChildren(v));
|
||||
}
|
||||
}
|
||||
|
||||
function pushQueryParamsAndFragment(state: RouterState): void {
|
||||
|
|
|
@ -125,6 +125,21 @@ describe('applyRedirects', () => {
|
|||
});
|
||||
});
|
||||
|
||||
xit("should support redirects with both main and aux", () => {
|
||||
checkRedirect([
|
||||
{path: 'a', children: [
|
||||
{path: 'b', component: ComponentB},
|
||||
{path: '', redirectTo: 'b'},
|
||||
|
||||
{path: 'c', component: ComponentC, outlet: 'aux'},
|
||||
{path: '', redirectTo: 'c', outlet: 'aux'}
|
||||
]},
|
||||
{path: 'a', redirectTo: ''}
|
||||
], "a", (t:UrlTree) => {
|
||||
compareTrees(t, tree('a/(b//aux:c)'));
|
||||
});
|
||||
});
|
||||
|
||||
it("should redirect empty path route only when terminal", () => {
|
||||
const config = [
|
||||
{path: 'a', component: ComponentA, children: [
|
||||
|
|
|
@ -37,6 +37,14 @@ describe('config', () => {
|
|||
}).toThrowError(`Invalid route configuration: routes must have path specified`);
|
||||
});
|
||||
|
||||
it("should throw when none of component and children or direct are missing", () => {
|
||||
expect(() => {
|
||||
validateConfig([
|
||||
{path: 'a'}
|
||||
]);
|
||||
}).toThrowError(`Invalid configuration of route 'a': component, redirectTo, children must be provided`);
|
||||
});
|
||||
|
||||
it("should throw when path starts with a slash", () => {
|
||||
expect(() => {
|
||||
validateConfig([
|
||||
|
|
|
@ -44,6 +44,32 @@ describe('create router state', () => {
|
|||
expect(prevC[1]).not.toBe(currC[1]);
|
||||
checkActivatedRoute(currC[1], ComponentC, 'left');
|
||||
});
|
||||
|
||||
it('should handle componentless routes', () => {
|
||||
const config = [
|
||||
{ path: 'a/:id', children: [
|
||||
{ path: 'b', component: ComponentA },
|
||||
{ path: 'c', component: ComponentB, outlet: 'right' }
|
||||
] }
|
||||
];
|
||||
|
||||
|
||||
const prevState = createRouterState(createState(config, "a/1;p=11/(b//right:c)"), emptyState());
|
||||
advanceState(prevState);
|
||||
const state = createRouterState(createState(config, "a/2;p=22/(b//right:c)"), prevState);
|
||||
|
||||
expect(prevState.root).toBe(state.root);
|
||||
const prevP = prevState.firstChild(prevState.root);
|
||||
const currP = state.firstChild(state.root);
|
||||
expect(prevP).toBe(currP);
|
||||
|
||||
const prevC = prevState.children(prevP);
|
||||
const currC = state.children(currP);
|
||||
|
||||
expect(currP._futureSnapshot.params).toEqual({id: '2', p: '22'});
|
||||
checkActivatedRoute(currC[0], ComponentA);
|
||||
checkActivatedRoute(currC[1], ComponentB, 'right');
|
||||
});
|
||||
});
|
||||
|
||||
function advanceState(state: RouterState): void {
|
||||
|
|
|
@ -243,6 +243,112 @@ describe('recognize', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe("componentless routes", () => {
|
||||
it("should work", () => {
|
||||
checkRecognize([
|
||||
{
|
||||
path: 'p/:id',
|
||||
children: [
|
||||
{path: 'a', component: ComponentA},
|
||||
{path: 'b', component: ComponentB, outlet: 'aux'}
|
||||
]
|
||||
}
|
||||
], "p/11;pp=22/(a;pa=33//aux:b;pb=44)", (s:RouterStateSnapshot) => {
|
||||
const p = s.firstChild(s.root);
|
||||
checkActivatedRoute(p, "p/11", {id: '11', pp: '22'}, undefined);
|
||||
|
||||
const c = s.children(p);
|
||||
checkActivatedRoute(c[0], "a", {id: '11', pp: '22', pa: '33'}, ComponentA);
|
||||
checkActivatedRoute(c[1], "b", {id: '11', pp: '22', pb: '44'}, ComponentB, "aux");
|
||||
});
|
||||
});
|
||||
|
||||
it("should merge params until encounters a normal route", () => {
|
||||
checkRecognize([
|
||||
{
|
||||
path: 'p/:id',
|
||||
children: [
|
||||
{path: 'a/:name', children: [
|
||||
{path: 'b', component: ComponentB, children: [
|
||||
{path: 'c', component: ComponentC}
|
||||
]}
|
||||
]}
|
||||
]
|
||||
}
|
||||
], "p/11/a/victor/b/c", (s:RouterStateSnapshot) => {
|
||||
const p = s.firstChild(s.root);
|
||||
checkActivatedRoute(p, "p/11", {id: '11'}, undefined);
|
||||
|
||||
const a = s.firstChild(p);
|
||||
checkActivatedRoute(a, "a/victor", {id: '11', name: 'victor'}, undefined);
|
||||
|
||||
const b = s.firstChild(a);
|
||||
checkActivatedRoute(b, "b", {id: '11', name: 'victor'}, ComponentB);
|
||||
|
||||
const c = s.firstChild(b);
|
||||
checkActivatedRoute(c, "c", {}, ComponentC);
|
||||
});
|
||||
});
|
||||
|
||||
xit("should work with empty paths", () => {
|
||||
checkRecognize([
|
||||
{
|
||||
path: 'p/:id',
|
||||
children: [
|
||||
{path: '', component: ComponentA},
|
||||
{path: '', component: ComponentB, outlet: 'aux'}
|
||||
]
|
||||
}
|
||||
], "p/11", (s:RouterStateSnapshot) => {
|
||||
const p = s.firstChild(s.root);
|
||||
checkActivatedRoute(p, "p/11", {id: '11'}, undefined);
|
||||
|
||||
const c = s.children(p);
|
||||
console.log("lsfs", c);
|
||||
checkActivatedRoute(c[0], "", {}, ComponentA);
|
||||
checkActivatedRoute(c[1], "", {}, ComponentB, "aux");
|
||||
});
|
||||
});
|
||||
|
||||
xit("should work with empty paths and params", () => {
|
||||
checkRecognize([
|
||||
{
|
||||
path: 'p/:id',
|
||||
children: [
|
||||
{path: '', component: ComponentA},
|
||||
{path: '', component: ComponentB, outlet: 'aux'}
|
||||
]
|
||||
}
|
||||
], "p/11/(;pa=33//aux:;pb=44)", (s:RouterStateSnapshot) => {
|
||||
const p = s.firstChild(s.root);
|
||||
checkActivatedRoute(p, "p/11", {id: '11'}, undefined);
|
||||
|
||||
const c = s.children(p);
|
||||
checkActivatedRoute(c[0], "", {pa: '33'}, ComponentA);
|
||||
checkActivatedRoute(c[1], "", {pb: '44'}, ComponentB, "aux");
|
||||
});
|
||||
});
|
||||
|
||||
xit("should work with only aux path", () => {
|
||||
checkRecognize([
|
||||
{
|
||||
path: 'p/:id',
|
||||
children: [
|
||||
{path: '', component: ComponentA},
|
||||
{path: '', component: ComponentB, outlet: 'aux'}
|
||||
]
|
||||
}
|
||||
], "p/11", (s:RouterStateSnapshot) => {
|
||||
const p = s.firstChild(s.root);
|
||||
checkActivatedRoute(p, "p/11(aux:;pb=44)", {id: '11'}, undefined);
|
||||
|
||||
const c = s.children(p);
|
||||
checkActivatedRoute(c[0], "", {}, ComponentA);
|
||||
checkActivatedRoute(c[1], "", {pb: '44'}, ComponentB, "aux");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("query parameters", () => {
|
||||
it("should support query params", () => {
|
||||
const config = [{path: 'a', component: ComponentA}];
|
||||
|
|
|
@ -376,6 +376,45 @@ describe("Integration", () => {
|
|||
expect(location.path()).toEqual('/team/33/simple');
|
||||
})));
|
||||
|
||||
it('should handle componentless paths',
|
||||
fakeAsync(inject([Router, TestComponentBuilder, Location], (router:Router, tcb:TestComponentBuilder, location:Location) => {
|
||||
const fixture = tcb.createFakeAsync(RootCmpWithTwoOutlets);
|
||||
advance(fixture);
|
||||
|
||||
router.resetConfig([
|
||||
{ path: 'parent/:id', children: [
|
||||
{ path: 'simple', component: SimpleCmp },
|
||||
{ path: 'user/:name', component: UserCmp, outlet: 'right' }
|
||||
] },
|
||||
{ path: 'user/:name', component: UserCmp }
|
||||
]);
|
||||
|
||||
|
||||
// navigate to a componentless route
|
||||
router.navigateByUrl('/parent/11/(simple//right:user/victor)');
|
||||
advance(fixture);
|
||||
expect(location.path()).toEqual('/parent/11/(simple//right:user/victor)');
|
||||
expect(fixture.debugElement.nativeElement).toHaveText('primary {simple} right {user victor}');
|
||||
|
||||
// navigate to the same route with different params (reuse)
|
||||
router.navigateByUrl('/parent/22/(simple//right:user/fedor)');
|
||||
advance(fixture);
|
||||
expect(location.path()).toEqual('/parent/22/(simple//right:user/fedor)');
|
||||
expect(fixture.debugElement.nativeElement).toHaveText('primary {simple} right {user fedor}');
|
||||
|
||||
// navigate to a normal route (check deactivation)
|
||||
router.navigateByUrl('/user/victor');
|
||||
advance(fixture);
|
||||
expect(location.path()).toEqual('/user/victor');
|
||||
expect(fixture.debugElement.nativeElement).toHaveText('primary {user victor} right {}');
|
||||
|
||||
// navigate back to a componentless route
|
||||
router.navigateByUrl('/parent/11/(simple//right:user/victor)');
|
||||
advance(fixture);
|
||||
expect(location.path()).toEqual('/parent/11/(simple//right:user/victor)');
|
||||
expect(fixture.debugElement.nativeElement).toHaveText('primary {simple} right {user victor}');
|
||||
})));
|
||||
|
||||
describe("router links", () => {
|
||||
it("should support string router links",
|
||||
fakeAsync(inject([Router, TestComponentBuilder], (router:Router, tcb:TestComponentBuilder) => {
|
||||
|
@ -526,6 +565,29 @@ describe("Integration", () => {
|
|||
})));
|
||||
});
|
||||
|
||||
describe("should not activate a route when CanActivate returns false (componentless route)", () => {
|
||||
beforeEachProviders(() => [
|
||||
{provide: 'alwaysFalse', useValue: (a:any, b:any) => false}
|
||||
]);
|
||||
|
||||
it('works',
|
||||
fakeAsync(inject([Router, TestComponentBuilder, Location], (router:Router, tcb:TestComponentBuilder, location:Location) => {
|
||||
const fixture = tcb.createFakeAsync(RootCmp);
|
||||
advance(fixture);
|
||||
|
||||
router.resetConfig([
|
||||
{ path: 'parent', canActivate: ['alwaysFalse'], children: [
|
||||
{ path: 'team/:id', component: TeamCmp }
|
||||
]}
|
||||
]);
|
||||
|
||||
router.navigateByUrl('parent/team/22');
|
||||
advance(fixture);
|
||||
|
||||
expect(location.path()).toEqual('/');
|
||||
})));
|
||||
});
|
||||
|
||||
describe("should activate a route when CanActivate returns true", () => {
|
||||
beforeEachProviders(() => [
|
||||
{provide: 'alwaysTrue', useValue: (a:ActivatedRouteSnapshot, s:RouterStateSnapshot) => true}
|
||||
|
@ -598,15 +660,17 @@ describe("Integration", () => {
|
|||
describe("CanDeactivate", () => {
|
||||
describe("should not deactivate a route when CanDeactivate returns false", () => {
|
||||
beforeEachProviders(() => [
|
||||
{provide: 'CanDeactivateTeam', useValue: (c:TeamCmp, a:ActivatedRouteSnapshot, b:RouterStateSnapshot) => {
|
||||
{provide: 'CanDeactivateParent', useValue: (c:any, a:ActivatedRouteSnapshot, b:RouterStateSnapshot) => {
|
||||
return a.params['id'] === "22";
|
||||
}},
|
||||
{provide: 'CanDeactivateTeam', useValue: (c:any, a:ActivatedRouteSnapshot, b:RouterStateSnapshot) => {
|
||||
return c.route.snapshot.params['id'] === "22";
|
||||
}},
|
||||
{provide: 'CanDeactivateUser', useValue: (c:UserCmp, a:ActivatedRouteSnapshot, b:RouterStateSnapshot) => {
|
||||
{provide: 'CanDeactivateUser', useValue: (c:any, a:ActivatedRouteSnapshot, b:RouterStateSnapshot) => {
|
||||
return a.params['name'] === 'victor';
|
||||
}}
|
||||
]);
|
||||
|
||||
|
||||
it('works',
|
||||
fakeAsync(inject([Router, TestComponentBuilder, Location], (router:Router, tcb:TestComponentBuilder, location:Location) => {
|
||||
const fixture = tcb.createFakeAsync(RootCmp);
|
||||
|
@ -618,20 +682,41 @@ describe("Integration", () => {
|
|||
|
||||
router.navigateByUrl('/team/22');
|
||||
advance(fixture);
|
||||
|
||||
expect(location.path()).toEqual('/team/22');
|
||||
|
||||
router.navigateByUrl('/team/33');
|
||||
advance(fixture);
|
||||
|
||||
expect(location.path()).toEqual('/team/33');
|
||||
|
||||
router.navigateByUrl('/team/44');
|
||||
advance(fixture);
|
||||
|
||||
expect(location.path()).toEqual('/team/33');
|
||||
})));
|
||||
|
||||
it('works (componentless route)',
|
||||
fakeAsync(inject([Router, TestComponentBuilder, Location], (router:Router, tcb:TestComponentBuilder, location:Location) => {
|
||||
const fixture = tcb.createFakeAsync(RootCmp);
|
||||
advance(fixture);
|
||||
|
||||
router.resetConfig([
|
||||
{ path: 'parent/:id', canDeactivate: ["CanDeactivateParent"], children: [
|
||||
{ path: 'simple', component: SimpleCmp }
|
||||
] }
|
||||
]);
|
||||
|
||||
router.navigateByUrl('/parent/22/simple');
|
||||
advance(fixture);
|
||||
expect(location.path()).toEqual('/parent/22/simple');
|
||||
|
||||
router.navigateByUrl('/parent/33/simple');
|
||||
advance(fixture);
|
||||
expect(location.path()).toEqual('/parent/33/simple');
|
||||
|
||||
router.navigateByUrl('/parent/44/simple');
|
||||
advance(fixture);
|
||||
expect(location.path()).toEqual('/parent/33/simple');
|
||||
})));
|
||||
|
||||
it('works with a nested route',
|
||||
fakeAsync(inject([Router, TestComponentBuilder, Location], (router:Router, tcb:TestComponentBuilder, location:Location) => {
|
||||
const fixture = tcb.createFakeAsync(RootCmp);
|
||||
|
@ -927,6 +1012,13 @@ class QueryParamsAndFragmentCmp {
|
|||
})
|
||||
class RootCmp {}
|
||||
|
||||
@Component({
|
||||
selector: 'root-cmp',
|
||||
template: `primary {<router-outlet></router-outlet>} right {<router-outlet name="right"></router-outlet>}`,
|
||||
directives: [ROUTER_DIRECTIVES]
|
||||
})
|
||||
class RootCmpWithTwoOutlets {}
|
||||
|
||||
function advance(fixture: ComponentFixture<any>): void {
|
||||
tick();
|
||||
fixture.detectChanges();
|
||||
|
|
|
@ -39,6 +39,7 @@
|
|||
"test/url_tree.spec.ts",
|
||||
"test/utils/tree.spec.ts",
|
||||
"test/url_serializer.spec.ts",
|
||||
"test/resolve.spec.ts",
|
||||
"test/apply_redirects.spec.ts",
|
||||
"test/recognize.spec.ts",
|
||||
"test/create_router_state.spec.ts",
|
||||
|
|
Loading…
Reference in New Issue