integration.spec.ts
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {CommonModule, HashLocationStrategy, Location, LocationStrategy, PlatformLocation, PopStateEvent} from '@angular/common';
import {ApplicationRef, ChangeDetectionStrategy, Component, EnvironmentInjector, inject as coreInject, Inject, Injectable, InjectionToken, NgModule, NgModuleRef, NgZone, OnDestroy, QueryList, Type, ViewChild, ViewChildren, ɵConsole as Console, ɵNoopNgZone as NoopNgZone} from '@angular/core';
import {ComponentFixture, fakeAsync, inject, TestBed, tick} from '@angular/core/testing';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {expect} from '@angular/platform-browser/testing/src/matchers';
import {ActivatedRoute, ActivatedRouteSnapshot, ActivationEnd, ActivationStart, ChildActivationEnd, ChildActivationStart, DefaultUrlSerializer, DetachedRouteHandle, Event, GuardsCheckEnd, GuardsCheckStart, Navigation, NavigationCancel, NavigationCancellationCode, NavigationEnd, NavigationError, NavigationSkipped, NavigationStart, ParamMap, Params, PreloadAllModules, PreloadingStrategy, PRIMARY_OUTLET, ResolveEnd, ResolveStart, RouteConfigLoadEnd, RouteConfigLoadStart, Router, RouteReuseStrategy, RouterEvent, RouterLink, RouterLinkActive, RouterModule, RouterOutlet, RouterPreloader, RouterStateSnapshot, RoutesRecognized, RunGuardsAndResolvers, UrlHandlingStrategy, UrlSegment, UrlSegmentGroup, UrlSerializer, UrlTree} from '@angular/router';
import {RouterTestingHarness} from '@angular/router/testing';
import {concat, EMPTY, firstValueFrom, Observable, Observer, of, Subscription} from 'rxjs';
import {delay, filter, first, last, map, mapTo, takeWhile, tap} from 'rxjs/operators';
import {CanActivateChildFn, CanActivateFn, CanMatchFn, Data, ResolveFn} from '../src/models';
import {provideRouter, withNavigationErrorHandler, withRouterConfig} from '../src/provide_router';
import {wrapIntoObservable} from '../src/utils/collection';
import {getLoadedRoutes} from '../src/utils/config';
const ROUTER_DIRECTIVES = [RouterLink, RouterLinkActive, RouterOutlet];
describe('Integration', () => {
const noopConsole: Console = {log() {}, warn() {}};
beforeEach(() => {
TestBed.configureTestingModule({
imports: [...ROUTER_DIRECTIVES, TestModule],
providers: [
{provide: Console, useValue: noopConsole},
provideRouter([{path: 'simple', component: SimpleCmp}]),
]
});
});
it('should navigate with a provided config',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.navigateByUrl('/simple');
advance(fixture);
expect(location.path()).toEqual('/simple');
})));
it('should navigate from ngOnInit hook',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
router.resetConfig([
{path: '', component: SimpleCmp},
{path: 'one', component: RouteCmp},
]);
const fixture = createRoot(router, RootCmpWithOnInit);
expect(location.path()).toEqual('/one');
expect(fixture.nativeElement).toHaveText('route');
})));
describe('navigation', function() {
it('should navigate to the current URL', fakeAsync(() => {
TestBed.configureTestingModule({
providers: [
provideRouter([], withRouterConfig({onSameUrlNavigation: 'reload'})),
]
});
const router = TestBed.inject(Router);
router.resetConfig([
{path: '', component: SimpleCmp},
{path: 'simple', component: SimpleCmp},
]);
const events: (NavigationStart|NavigationEnd)[] = [];
router.events.subscribe(e => onlyNavigationStartAndEnd(e) && events.push(e));
router.navigateByUrl('/simple');
tick();
router.navigateByUrl('/simple');
tick();
expectEvents(events, [
[NavigationStart, '/simple'], [NavigationEnd, '/simple'], [NavigationStart, '/simple'],
[NavigationEnd, '/simple']
]);
}));
it('should override default onSameUrlNavigation with extras', async () => {
TestBed.configureTestingModule({
providers: [
provideRouter([], withRouterConfig({onSameUrlNavigation: 'ignore'})),
]
});
const router = TestBed.inject(Router);
router.resetConfig([
{path: '', component: SimpleCmp},
{path: 'simple', component: SimpleCmp},
]);
const events: (NavigationStart|NavigationEnd)[] = [];
router.events.subscribe(e => onlyNavigationStartAndEnd(e) && events.push(e));
await router.navigateByUrl('/simple');
await router.navigateByUrl('/simple');
// By default, the second navigation is ignored
expectEvents(events, [[NavigationStart, '/simple'], [NavigationEnd, '/simple']]);
await router.navigateByUrl('/simple', {onSameUrlNavigation: 'reload'});
// We overrode the `onSameUrlNavigation` value. This navigation should be processed.
expectEvents(events, [
[NavigationStart, '/simple'], [NavigationEnd, '/simple'], [NavigationStart, '/simple'],
[NavigationEnd, '/simple']
]);
});
it('should override default onSameUrlNavigation with extras', async () => {
TestBed.configureTestingModule({
providers: [
provideRouter([], withRouterConfig({onSameUrlNavigation: 'reload'})),
]
});
const router = TestBed.inject(Router);
router.resetConfig([
{path: '', component: SimpleCmp},
{path: 'simple', component: SimpleCmp},
]);
const events: (NavigationStart|NavigationEnd)[] = [];
router.events.subscribe(e => onlyNavigationStartAndEnd(e) && events.push(e));
await router.navigateByUrl('/simple');
await router.navigateByUrl('/simple');
expectEvents(events, [
[NavigationStart, '/simple'], [NavigationEnd, '/simple'], [NavigationStart, '/simple'],
[NavigationEnd, '/simple']
]);
events.length = 0;
await router.navigateByUrl('/simple', {onSameUrlNavigation: 'ignore'});
expectEvents(events, []);
});
it('should set transient navigation info', async () => {
let observedInfo: unknown;
const router = TestBed.inject(Router);
router.resetConfig([
{
path: 'simple',
component: SimpleCmp,
canActivate: [() => {
observedInfo = coreInject(Router).getCurrentNavigation()?.extras?.info;
return true;
}]
},
]);
await router.navigateByUrl('/simple', {info: 'navigation info'});
expect(observedInfo).toEqual('navigation info');
});
it('should set transient navigation info for routerlink', async () => {
let observedInfo: unknown;
const router = TestBed.inject(Router);
router.resetConfig([
{
path: 'simple',
component: SimpleCmp,
canActivate: [() => {
observedInfo = coreInject(Router).getCurrentNavigation()?.extras?.info;
return true;
}]
},
]);
@Component({
standalone: true,
imports: [RouterLink],
template: `<a #simpleLink [routerLink]="'/simple'" [info]="simpleLink"></a>`
})
class App {
}
const fixture = TestBed.createComponent(App);
fixture.autoDetectChanges();
const anchor = fixture.nativeElement.querySelector('a');
anchor.click();
await fixture.whenStable();
// An example use-case might be to pass the clicked link along with the navigation information
expect(observedInfo).toBeInstanceOf(HTMLAnchorElement);
});
it('should make transient navigation info available in redirect', async () => {
let observedInfo: unknown;
const router = TestBed.inject(Router);
router.resetConfig([
{
path: 'redirect',
component: SimpleCmp,
canActivate: [() => coreInject(Router).parseUrl('/simple')]
},
{
path: 'simple',
component: SimpleCmp,
canActivate: [() => {
observedInfo = coreInject(Router).getCurrentNavigation()?.extras?.info;
return true;
}]
},
]);
await router.navigateByUrl('/redirect', {info: 'navigation info'});
expect(observedInfo).toBe('navigation info');
expect(router.url).toEqual('/simple');
});
it('should ignore empty paths in relative links',
fakeAsync(inject([Router], (router: Router) => {
router.resetConfig([{
path: 'foo',
children: [{path: 'bar', children: [{path: '', component: RelativeLinkCmp}]}]
}]);
const fixture = createRoot(router, RootCmp);
router.navigateByUrl('/foo/bar');
advance(fixture);
const link = fixture.nativeElement.querySelector('a');
expect(link.getAttribute('href')).toEqual('/foo/simple');
})));
it('should set the restoredState to null when executing imperative navigations',
fakeAsync(inject([Router], (router: Router) => {
router.resetConfig([
{path: '', component: SimpleCmp},
{path: 'simple', component: SimpleCmp},
]);
const fixture = createRoot(router, RootCmp);
let event: NavigationStart;
router.events.subscribe(e => {
if (e instanceof NavigationStart) {
event = e;
}
});
router.navigateByUrl('/simple');
tick();
expect(event!.navigationTrigger).toEqual('imperative');
expect(event!.restoredState).toEqual(null);
})));
it('should set history.state if passed using imperative navigation',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
router.resetConfig([
{path: '', component: SimpleCmp},
{path: 'simple', component: SimpleCmp},
]);
const fixture = createRoot(router, RootCmp);
let navigation: Navigation = null!;
router.events.subscribe(e => {
if (e instanceof NavigationStart) {
navigation = router.getCurrentNavigation()!;
}
});
router.navigateByUrl('/simple', {state: {foo: 'bar'}});
tick();
const state = location.getState() as any;
expect(state.foo).toBe('bar');
expect(state).toEqual({foo: 'bar', navigationId: 2});
expect(navigation.extras.state).toBeDefined();
expect(navigation.extras.state).toEqual({foo: 'bar'});
})));
it('should set history.state when navigation with browser back and forward',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
router.resetConfig([
{path: '', component: SimpleCmp},
{path: 'simple', component: SimpleCmp},
]);
const fixture = createRoot(router, RootCmp);
let navigation: Navigation = null!;
router.events.subscribe(e => {
if (e instanceof NavigationStart) {
navigation = <Navigation>router.getCurrentNavigation()!;
}
});
let state: Record<string, string> = {foo: 'bar'};
router.navigateByUrl('/simple', {state});
tick();
location.back();
tick();
location.forward();
tick();
expect(navigation.extras.state).toBeDefined();
expect(navigation.extras.state).toEqual(state);
// Manually set state rather than using navigate()
state = {bar: 'foo'};
location.replaceState(location.path(), '', state);
location.back();
tick();
location.forward();
tick();
expect(navigation.extras.state).toBeDefined();
expect(navigation.extras.state).toEqual(state);
})));
it('should navigate correctly when using `Location#historyGo',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
router.resetConfig([
{path: 'first', component: SimpleCmp},
{path: 'second', component: SimpleCmp},
]);
createRoot(router, RootCmp);
router.navigateByUrl('/first');
tick();
router.navigateByUrl('/second');
tick();
expect(router.url).toEqual('/second');
location.historyGo(-1);
tick();
expect(router.url).toEqual('/first');
location.historyGo(1);
tick();
expect(router.url).toEqual('/second');
location.historyGo(-100);
tick();
expect(router.url).toEqual('/second');
location.historyGo(100);
tick();
expect(router.url).toEqual('/second');
location.historyGo(0);
tick();
expect(router.url).toEqual('/second');
location.historyGo();
tick();
expect(router.url).toEqual('/second');
})));
it('should not error if state is not {[key: string]: any}',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
router.resetConfig([
{path: '', component: SimpleCmp},
{path: 'simple', component: SimpleCmp},
]);
const fixture = createRoot(router, RootCmp);
let navigation: Navigation = null!;
router.events.subscribe(e => {
if (e instanceof NavigationStart) {
navigation = <Navigation>router.getCurrentNavigation()!;
}
});
location.replaceState('', '', 42);
router.navigateByUrl('/simple');
tick();
location.back();
advance(fixture);
// Angular does not support restoring state to the primitive.
expect(navigation.extras.state).toEqual(undefined);
expect(location.getState()).toEqual({navigationId: 3});
})));
it('should not pollute browser history when replaceUrl is set to true',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
router.resetConfig([
{path: '', component: SimpleCmp}, {path: 'a', component: SimpleCmp},
{path: 'b', component: SimpleCmp}
]);
createRoot(router, RootCmp);
const replaceSpy = spyOn(location, 'replaceState');
router.navigateByUrl('/a', {replaceUrl: true});
router.navigateByUrl('/b', {replaceUrl: true});
tick();
expect(replaceSpy.calls.count()).toEqual(1);
})));
it('should skip navigation if another navigation is already scheduled',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
router.resetConfig([
{path: '', component: SimpleCmp}, {path: 'a', component: SimpleCmp},
{path: 'b', component: SimpleCmp}
]);
const fixture = createRoot(router, RootCmp);
router.navigate(
['/a'], {queryParams: {a: true}, queryParamsHandling: 'merge', replaceUrl: true});
router.navigate(
['/b'], {queryParams: {b: true}, queryParamsHandling: 'merge', replaceUrl: true});
tick();
/**
* Why do we have '/b?b=true' and not '/b?a=true&b=true'?
*
* This is because the router has the right to stop a navigation mid-flight if another
* navigation has been already scheduled. This is why we can use a top-level guard
* to perform redirects. Calling `navigate` in such a guard will stop the navigation, and
* the components won't be instantiated.
*
* This is a fundamental property of the router: it only cares about its latest state.
*
* This means that components should only map params to something else, not reduce them.
* In other words, the following component is asking for trouble:
*
* ```
* class MyComponent {
* constructor(a: ActivatedRoute) {
* a.params.scan(...)
* }
* }
* ```
*
* This also means "queryParamsHandling: 'merge'" should only be used to merge with
* long-living query parameters (e.g., debug).
*/
expect(router.url).toEqual('/b?b=true');
})));
});
describe('navigation warning', () => {
const isInAngularZoneFn = NgZone.isInAngularZone;
let warnings: string[] = [];
let isInAngularZone = true;
class MockConsole {
warn(message: string) {
warnings.push(message);
}
}
beforeEach(() => {
warnings = [];
isInAngularZone = true;
NgZone.isInAngularZone = () => isInAngularZone;
TestBed.overrideProvider(Console, {useValue: new MockConsole()});
});
afterEach(() => {
NgZone.isInAngularZone = isInAngularZoneFn;
});
describe('with NgZone enabled', () => {
it('should warn when triggered outside Angular zone',
fakeAsync(inject([Router], (router: Router) => {
isInAngularZone = false;
router.navigateByUrl('/simple');
expect(warnings.length).toBe(1);
expect(warnings[0])
.toBe(
`Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?`);
})));
it('should not warn when triggered inside Angular zone',
fakeAsync(inject([Router], (router: Router) => {
router.navigateByUrl('/simple');
expect(warnings.length).toBe(0);
})));
});
describe('with NgZone disabled', () => {
beforeEach(() => {
TestBed.overrideProvider(NgZone, {useValue: new NoopNgZone()});
});
it('should not warn when triggered outside Angular zone',
fakeAsync(inject([Router], (router: Router) => {
isInAngularZone = false;
router.navigateByUrl('/simple');
expect(warnings.length).toBe(0);
})));
});
});
describe('should execute navigations serially', () => {
let log: Array<string|Params> = [];
beforeEach(() => {
log = [];
TestBed.configureTestingModule({
providers: [
{
provide: 'trueRightAway',
useValue: () => {
log.push('trueRightAway');
return true;
}
},
{
provide: 'trueIn2Seconds',
useValue: () => {
log.push('trueIn2Seconds-start');
let res: ((value: boolean) => void);
const p = new Promise<boolean>(r => res = r);
setTimeout(() => {
log.push('trueIn2Seconds-end');
res(true);
}, 2000);
return p;
}
}
]
});
});
describe('route activation', () => {
@Component({template: '<router-outlet></router-outlet>'})
class Parent {
constructor(route: ActivatedRoute) {
route.params.subscribe((s: Params) => {
log.push(s);
});
}
}
@Component({
template: `
<router-outlet (deactivate)="logDeactivate('primary')"></router-outlet>
<router-outlet name="first" (deactivate)="logDeactivate('first')"></router-outlet>
<router-outlet name="second" (deactivate)="logDeactivate('second')"></router-outlet>
`
})
class NamedOutletHost {
logDeactivate(route: string) {
log.push(route + ' deactivate');
}
}
@Component({template: 'child1'})
class Child1 {
constructor() {
log.push('child1 constructor');
}
ngOnDestroy() {
log.push('child1 destroy');
}
}
@Component({template: 'child2'})
class Child2 {
constructor() {
log.push('child2 constructor');
}
ngOnDestroy() {
log.push('child2 destroy');
}
}
@Component({template: 'child3'})
class Child3 {
constructor() {
log.push('child3 constructor');
}
ngOnDestroy() {
log.push('child3 destroy');
}
}
@NgModule({
declarations: [Parent, NamedOutletHost, Child1, Child2, Child3],
imports: [RouterModule.forRoot([])]
})
class TestModule {
}
it('should advance the parent route after deactivating its children', fakeAsync(() => {
TestBed.configureTestingModule({imports: [TestModule]});
const router = TestBed.inject(Router);
const location = TestBed.inject(Location);
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'parent/:id',
component: Parent,
children: [
{path: 'child1', component: Child1},
{path: 'child2', component: Child2},
]
}]);
router.navigateByUrl('/parent/1/child1');
advance(fixture);
router.navigateByUrl('/parent/2/child2');
advance(fixture);
expect(location.path()).toEqual('/parent/2/child2');
expect(log).toEqual([
{id: '1'},
'child1 constructor',
'child1 destroy',
{id: '2'},
'child2 constructor',
]);
}));
it('should deactivate outlet children with componentless parent', fakeAsync(() => {
TestBed.configureTestingModule({imports: [TestModule]});
const router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{
path: 'named-outlets',
component: NamedOutletHost,
children: [
{
path: 'home',
children: [
{path: '', component: Child1, outlet: 'first'},
{path: '', component: Child2, outlet: 'second'},
{path: 'primary', component: Child3},
]
},
{
path: 'about',
children: [
{path: '', component: Child1, outlet: 'first'},
{path: '', component: Child2, outlet: 'second'},
]
},
]
},
{
path: 'other',
component: Parent,
},
]);
router.navigateByUrl('/named-outlets/home/primary');
advance(fixture);
expect(log).toEqual([
'child3 constructor', // primary outlet always first
'child1 constructor',
'child2 constructor',
]);
log.length = 0;
router.navigateByUrl('/named-outlets/about');
advance(fixture);
expect(log).toEqual([
'child3 destroy',
'primary deactivate',
'child1 destroy',
'first deactivate',
'child2 destroy',
'second deactivate',
'child1 constructor',
'child2 constructor',
]);
log.length = 0;
router.navigateByUrl('/other');
advance(fixture);
expect(log).toEqual([
'child1 destroy',
'first deactivate',
'child2 destroy',
'second deactivate',
// route param subscription from 'Parent' component
{},
]);
}));
it('should work between aux outlets under two levels of empty path parents', fakeAsync(() => {
TestBed.configureTestingModule({imports: [TestModule]});
const router = TestBed.inject(Router);
router.resetConfig([{
path: '',
children: [
{
path: '',
component: NamedOutletHost,
children: [
{path: 'one', component: Child1, outlet: 'first'},
{path: 'two', component: Child2, outlet: 'first'},
]
},
]
}]);
const fixture = createRoot(router, RootCmp);
router.navigateByUrl('/(first:one)');
advance(fixture);
expect(log).toEqual(['child1 constructor']);
log.length = 0;
router.navigateByUrl('/(first:two)');
advance(fixture);
expect(log).toEqual([
'child1 destroy',
'first deactivate',
'child2 constructor',
]);
}));
});
it('should not wait for prior navigations to start a new navigation',
fakeAsync(inject([Router, Location], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'a', component: SimpleCmp, canActivate: ['trueRightAway', 'trueIn2Seconds']},
{path: 'b', component: SimpleCmp, canActivate: ['trueRightAway', 'trueIn2Seconds']}
]);
router.navigateByUrl('/a');
tick(100);
fixture.detectChanges();
router.navigateByUrl('/b');
tick(100); // 200
fixture.detectChanges();
expect(log).toEqual(
['trueRightAway', 'trueIn2Seconds-start', 'trueRightAway', 'trueIn2Seconds-start']);
tick(2000); // 2200
fixture.detectChanges();
expect(log).toEqual([
'trueRightAway', 'trueIn2Seconds-start', 'trueRightAway', 'trueIn2Seconds-start',
'trueIn2Seconds-end', 'trueIn2Seconds-end'
]);
})));
});
it('Should work inside ChangeDetectionStrategy.OnPush components', fakeAsync(() => {
@Component({
selector: 'root-cmp',
template: `<router-outlet></router-outlet>`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
class OnPushOutlet {
}
@Component({selector: 'need-cd', template: `{{'it works!'}}`})
class NeedCdCmp {
}
@NgModule({
declarations: [OnPushOutlet, NeedCdCmp],
imports: [RouterModule.forRoot([])],
})
class TestModule {
}
TestBed.configureTestingModule({imports: [TestModule]});
const router: Router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'on',
component: OnPushOutlet,
children: [{
path: 'push',
component: NeedCdCmp,
}],
}]);
advance(fixture);
router.navigateByUrl('on');
advance(fixture);
router.navigateByUrl('on/push');
advance(fixture);
expect(fixture.nativeElement).toHaveText('it works!');
}));
it('should not error when no url left and no children are matching',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'team/:id', component: TeamCmp, children: [{path: 'simple', component: SimpleCmp}]}
]);
router.navigateByUrl('/team/33/simple');
advance(fixture);
expect(location.path()).toEqual('/team/33/simple');
expect(fixture.nativeElement).toHaveText('team 33 [ simple, right: ]');
router.navigateByUrl('/team/33');
advance(fixture);
expect(location.path()).toEqual('/team/33');
expect(fixture.nativeElement).toHaveText('team 33 [ , right: ]');
})));
it('should work when an outlet is in an ngIf',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'child',
component: OutletInNgIf,
children: [{path: 'simple', component: SimpleCmp}]
}]);
router.navigateByUrl('/child/simple');
advance(fixture);
expect(location.path()).toEqual('/child/simple');
})));
it('should work when an outlet is added/removed', fakeAsync(() => {
@Component({
selector: 'someRoot',
template: `[<div *ngIf="cond"><router-outlet></router-outlet></div>]`
})
class RootCmpWithLink {
cond: boolean = true;
}
TestBed.configureTestingModule({declarations: [RootCmpWithLink]});
const router: Router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmpWithLink);
router.resetConfig([
{path: 'simple', component: SimpleCmp},
{path: 'blank', component: BlankCmp},
]);
router.navigateByUrl('/simple');
advance(fixture);
expect(fixture.nativeElement).toHaveText('[simple]');
fixture.componentInstance.cond = false;
advance(fixture);
expect(fixture.nativeElement).toHaveText('[]');
fixture.componentInstance.cond = true;
advance(fixture);
expect(fixture.nativeElement).toHaveText('[simple]');
}));
it('should update location when navigating', fakeAsync(() => {
@Component({template: `record`})
class RecordLocationCmp {
private storedPath: string;
constructor(loc: Location) {
this.storedPath = loc.path();
}
}
@NgModule({declarations: [RecordLocationCmp]})
class TestModule {
}
TestBed.configureTestingModule({imports: [TestModule]});
const router = TestBed.inject(Router);
const location = TestBed.inject(Location);
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'record/:id', component: RecordLocationCmp}]);
router.navigateByUrl('/record/22');
advance(fixture);
const c = fixture.debugElement.children[1].componentInstance;
expect(location.path()).toEqual('/record/22');
expect(c.storedPath).toEqual('/record/22');
router.navigateByUrl('/record/33');
advance(fixture);
expect(location.path()).toEqual('/record/33');
}));
it('should skip location update when using NavigationExtras.skipLocationChange with navigateByUrl',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = TestBed.createComponent(RootCmp);
advance(fixture);
router.resetConfig([{path: 'team/:id', component: TeamCmp}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
expect(fixture.nativeElement).toHaveText('team 22 [ , right: ]');
router.navigateByUrl('/team/33', {skipLocationChange: true});
advance(fixture);
expect(location.path()).toEqual('/team/22');
expect(fixture.nativeElement).toHaveText('team 33 [ , right: ]');
})));
it('should skip location update when using NavigationExtras.skipLocationChange with navigate',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = TestBed.createComponent(RootCmp);
advance(fixture);
router.resetConfig([{path: 'team/:id', component: TeamCmp}]);
router.navigate(['/team/22']);
advance(fixture);
expect(location.path()).toEqual('/team/22');
expect(fixture.nativeElement).toHaveText('team 22 [ , right: ]');
router.navigate(['/team/33'], {skipLocationChange: true});
advance(fixture);
expect(location.path()).toEqual('/team/22');
expect(fixture.nativeElement).toHaveText('team 33 [ , right: ]');
})));
it('should navigate after navigation with skipLocationChange',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = TestBed.createComponent(RootCmpWithNamedOutlet);
advance(fixture);
router.resetConfig([{path: 'show', outlet: 'main', component: SimpleCmp}]);
router.navigate([{outlets: {main: 'show'}}], {skipLocationChange: true});
advance(fixture);
expect(location.path()).toEqual('');
expect(fixture.nativeElement).toHaveText('main [simple]');
router.navigate([{outlets: {main: null}}], {skipLocationChange: true});
advance(fixture);
expect(location.path()).toEqual('');
expect(fixture.nativeElement).toHaveText('main []');
})));
describe('"eager" urlUpdateStrategy', () => {
@Injectable()
class AuthGuard {
canActivateResult = true;
canActivate() {
return this.canActivateResult;
}
}
@Injectable()
class DelayedGuard {
canActivate() {
return of('').pipe(delay(1000), mapTo(true));
}
}
beforeEach(() => {
const serializer = new DefaultUrlSerializer();
TestBed.configureTestingModule({
providers: [
{
provide: 'authGuardFail',
useValue: (a: any, b: any) => {
return new Promise(res => {
setTimeout(() => res(serializer.parse('/login')), 1);
});
}
},
AuthGuard,
DelayedGuard,
]
});
});
describe('urlUpdateStrategy: eager', () => {
beforeEach(() => {
TestBed.configureTestingModule(
{providers: [provideRouter([], withRouterConfig({urlUpdateStrategy: 'eager'}))]});
});
it('should eagerly update the URL',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = TestBed.createComponent(RootCmp);
advance(fixture);
router.resetConfig([{path: 'team/:id', component: TeamCmp}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
expect(fixture.nativeElement).toHaveText('team 22 [ , right: ]');
router.events.subscribe(e => {
if (!(e instanceof GuardsCheckStart)) {
return;
}
expect(location.path()).toEqual('/team/33');
expect(fixture.nativeElement).toHaveText('team 22 [ , right: ]');
return of(null);
});
router.navigateByUrl('/team/33');
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 33 [ , right: ]');
})));
it('should eagerly update the URL',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = TestBed.createComponent(RootCmp);
advance(fixture);
router.resetConfig([
{path: 'team/:id', component: SimpleCmp, canActivate: ['authGuardFail']},
{path: 'login', component: AbsoluteSimpleLinkCmp}
]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
// Redirects to /login
advance(fixture, 1);
expect(location.path()).toEqual('/login');
// Perform the same logic again, and it should produce the same result
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
// Redirects to /login
advance(fixture, 1);
expect(location.path()).toEqual('/login');
})));
it('should eagerly update URL after redirects are applied',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = TestBed.createComponent(RootCmp);
advance(fixture);
router.resetConfig([{path: 'team/:id', component: TeamCmp}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
expect(fixture.nativeElement).toHaveText('team 22 [ , right: ]');
let urlAtNavStart = '';
let urlAtRoutesRecognized = '';
router.events.subscribe(e => {
if (e instanceof NavigationStart) {
urlAtNavStart = location.path();
}
if (e instanceof RoutesRecognized) {
urlAtRoutesRecognized = location.path();
}
});
router.navigateByUrl('/team/33');
advance(fixture);
expect(urlAtNavStart).toBe('/team/22');
expect(urlAtRoutesRecognized).toBe('/team/33');
expect(fixture.nativeElement).toHaveText('team 33 [ , right: ]');
})));
it('should set `state`',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
router.resetConfig([
{path: '', component: SimpleCmp},
{path: 'simple', component: SimpleCmp},
]);
const fixture = createRoot(router, RootCmp);
let navigation: Navigation = null!;
router.events.subscribe(e => {
if (e instanceof NavigationStart) {
navigation = router.getCurrentNavigation()!;
}
});
router.navigateByUrl('/simple', {state: {foo: 'bar'}});
tick();
const state = location.getState() as any;
expect(state).toEqual({foo: 'bar', navigationId: 2});
expect(navigation.extras.state).toBeDefined();
expect(navigation.extras.state).toEqual({foo: 'bar'});
})));
it('can renavigate to rejected URL', fakeAsync(() => {
const router = TestBed.inject(Router);
const canActivate = TestBed.inject(AuthGuard);
const location = TestBed.inject(Location);
router.resetConfig([
{path: '', component: BlankCmp},
{
path: 'simple',
component: SimpleCmp,
canActivate: [() => coreInject(AuthGuard).canActivate()]
},
]);
const fixture = createRoot(router, RootCmp);
// Try to navigate to /simple but guard rejects
canActivate.canActivateResult = false;
router.navigateByUrl('/simple');
advance(fixture);
expect(location.path()).toEqual('');
expect(fixture.nativeElement.innerHTML).not.toContain('simple');
// Renavigate to /simple without guard rejection, should succeed.
canActivate.canActivateResult = true;
router.navigateByUrl('/simple');
advance(fixture);
expect(location.path()).toEqual('/simple');
expect(fixture.nativeElement.innerHTML).toContain('simple');
}));
it('can renavigate to same URL during in-flight navigation', fakeAsync(() => {
const router = TestBed.inject(Router);
const location = TestBed.inject(Location);
router.resetConfig([
{path: '', component: BlankCmp},
{
path: 'simple',
component: SimpleCmp,
canActivate: [() => coreInject(DelayedGuard).canActivate()]
},
]);
const fixture = createRoot(router, RootCmp);
// Start navigating to /simple, but do not flush the guard delay
router.navigateByUrl('/simple');
tick();
// eager update strategy so URL is already updated.
expect(location.path()).toEqual('/simple');
expect(fixture.nativeElement.innerHTML).not.toContain('simple');
// Start an additional navigation to /simple and ensure at least one of those succeeds.
// It's not super important which one gets processed, but in the past, the router would
// cancel the in-flight one and not process the new one.
router.navigateByUrl('/simple');
tick(1000);
expect(location.path()).toEqual('/simple');
expect(fixture.nativeElement.innerHTML).toContain('simple');
}));
});
});
it('should navigate back and forward',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children:
[{path: 'simple', component: SimpleCmp}, {path: 'user/:name', component: UserCmp}]
}]);
let event: NavigationStart;
router.events.subscribe(e => {
if (e instanceof NavigationStart) {
event = e;
}
});
router.navigateByUrl('/team/33/simple');
advance(fixture);
expect(location.path()).toEqual('/team/33/simple');
const simpleNavStart = event!;
router.navigateByUrl('/team/22/user/victor');
advance(fixture);
const userVictorNavStart = event!;
location.back();
advance(fixture);
expect(location.path()).toEqual('/team/33/simple');
expect(event!.navigationTrigger).toEqual('popstate');
expect(event!.restoredState!.navigationId).toEqual(simpleNavStart.id);
location.forward();
advance(fixture);
expect(location.path()).toEqual('/team/22/user/victor');
expect(event!.navigationTrigger).toEqual('popstate');
expect(event!.restoredState!.navigationId).toEqual(userVictorNavStart.id);
})));
it('should navigate to the same url when config changes',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'a', component: SimpleCmp}]);
router.navigate(['/a']);
advance(fixture);
expect(location.path()).toEqual('/a');
expect(fixture.nativeElement).toHaveText('simple');
router.resetConfig([{path: 'a', component: RouteCmp}]);
router.navigate(['/a']);
advance(fixture);
expect(location.path()).toEqual('/a');
expect(fixture.nativeElement).toHaveText('route');
})));
it('should navigate when locations changes',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [{path: 'user/:name', component: UserCmp}]
}]);
const recordedEvents: (NavigationStart|NavigationEnd)[] = [];
router.events.forEach(e => onlyNavigationStartAndEnd(e) && recordedEvents.push(e));
router.navigateByUrl('/team/22/user/victor');
advance(fixture);
location.go('/team/22/user/fedor');
location.historyGo(0);
advance(fixture);
location.go('/team/22/user/fedor');
location.historyGo(0);
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ user fedor, right: ]');
expectEvents(recordedEvents, [
[NavigationStart, '/team/22/user/victor'], [NavigationEnd, '/team/22/user/victor'],
[NavigationStart, '/team/22/user/fedor'], [NavigationEnd, '/team/22/user/fedor']
]);
})));
it('should update the location when the matched route does not change',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: '**', component: CollectParamsCmp}]);
router.navigateByUrl('/one/two');
advance(fixture);
const cmp = fixture.debugElement.children[1].componentInstance;
expect(location.path()).toEqual('/one/two');
expect(fixture.nativeElement).toHaveText('collect-params');
expect(cmp.recordedUrls()).toEqual(['one/two']);
router.navigateByUrl('/three/four');
advance(fixture);
expect(location.path()).toEqual('/three/four');
expect(fixture.nativeElement).toHaveText('collect-params');
expect(cmp.recordedUrls()).toEqual(['one/two', 'three/four']);
})));
describe('duplicate in-flight navigations', () => {
@Injectable()
class RedirectingGuard {
skipLocationChange = false;
constructor(private router: Router) {}
canActivate() {
this.router.navigate(['/simple'], {skipLocationChange: this.skipLocationChange});
return false;
}
}
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
{
provide: 'in1Second',
useValue: (c: any, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
let res: any = null;
const p = new Promise(_ => res = _);
setTimeout(() => res(true), 1000);
return p;
}
},
RedirectingGuard
]
});
});
it('should reset location if a navigation by location is successful', fakeAsync(() => {
const router = TestBed.inject(Router);
const location = TestBed.inject(Location);
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'simple', component: SimpleCmp, canActivate: ['in1Second']}]);
// Trigger two location changes to the same URL.
// Because of the guard the order will look as follows:
// - location change 'simple'
// - start processing the change, start a guard
// - location change 'simple'
// - the first location change gets canceled, the URL gets reset to '/'
// - the second location change gets finished, the URL should be reset to '/simple'
location.go('/simple');
location.historyGo(0);
location.historyGo(0);
tick(2000);
advance(fixture);
expect(location.path()).toEqual('/simple');
}));
it('should skip duplicate location events', fakeAsync(() => {
const router = TestBed.inject(Router);
const location = TestBed.inject(Location);
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{
path: 'blocked',
component: BlankCmp,
canActivate: [() => coreInject(RedirectingGuard).canActivate()]
},
{path: 'simple', component: SimpleCmp}
]);
router.navigateByUrl('/simple');
advance(fixture);
location.go('/blocked');
location.historyGo(0);
advance(fixture);
expect(fixture.nativeElement.innerHTML).toContain('simple');
}));
it('should not cause URL thrashing', async () => {
TestBed.configureTestingModule(
{providers: [provideRouter([], withRouterConfig({urlUpdateStrategy: 'eager'}))]});
const router = TestBed.inject(Router);
const location = TestBed.inject(Location);
const fixture = TestBed.createComponent(RootCmp);
fixture.detectChanges();
router.resetConfig([
{path: 'home', component: SimpleCmp}, {
path: 'blocked',
component: BlankCmp,
canActivate: [() => coreInject(RedirectingGuard).canActivate()]
},
{path: 'simple', component: SimpleCmp}
]);
await router.navigateByUrl('/home');
const urlChanges: string[] = [];
location.onUrlChange(change => {
urlChanges.push(change);
});
await router.navigateByUrl('/blocked');
await fixture.whenStable();
expect(fixture.nativeElement.innerHTML).toContain('simple');
// We do not want the URL to flicker to `/home` between the /blocked and /simple routes
expect(urlChanges).toEqual(['/blocked', '/simple']);
});
it('can render a 404 page without changing the URL', fakeAsync(() => {
TestBed.configureTestingModule(
{providers: [provideRouter([], withRouterConfig({urlUpdateStrategy: 'eager'}))]});
const router = TestBed.inject(Router);
TestBed.inject(RedirectingGuard).skipLocationChange = true;
const location = TestBed.inject(Location);
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'home', component: SimpleCmp},
{
path: 'blocked',
component: BlankCmp,
canActivate: [() => coreInject(RedirectingGuard).canActivate()]
},
{path: 'simple', redirectTo: '404'},
{path: '404', component: SimpleCmp},
]);
router.navigateByUrl('/home');
advance(fixture);
location.go('/blocked');
location.historyGo(0);
advance(fixture);
expect(location.path()).toEqual('/blocked');
expect(fixture.nativeElement.innerHTML).toContain('simple');
}));
it('should accurately track currentNavigation', fakeAsync(() => {
const router = TestBed.inject(Router);
router.resetConfig([
{path: 'one', component: SimpleCmp, canActivate: ['in1Second']},
{path: 'two', component: BlankCmp, canActivate: ['in1Second']},
]);
router.events.subscribe((e) => {
if (e instanceof NavigationStart) {
if (e.url === '/one') {
router.navigateByUrl('two');
}
router.events.subscribe((e) => {
if (e instanceof GuardsCheckEnd) {
expect(router.getCurrentNavigation()?.extractedUrl.toString()).toEqual('/two');
expect(router.getCurrentNavigation()?.extras).toBeDefined();
}
});
}
});
router.navigateByUrl('one');
tick(1000);
}));
});
it('should support secondary routes', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [
{path: 'user/:name', component: UserCmp},
{path: 'simple', component: SimpleCmp, outlet: 'right'}
]
}]);
router.navigateByUrl('/team/22/(user/victor//right:simple)');
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ user victor, right: simple ]');
})));
it('should support secondary routes in separate commands',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [
{path: 'user/:name', component: UserCmp},
{path: 'simple', component: SimpleCmp, outlet: 'right'}
]
}]);
router.navigateByUrl('/team/22/user/victor');
advance(fixture);
router.navigate(['team/22', {outlets: {right: 'simple'}}]);
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ user victor, right: simple ]');
})));
it('should support secondary routes as child of empty path parent',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: '',
component: TeamCmp,
children: [{path: 'simple', component: SimpleCmp, outlet: 'right'}]
}]);
router.navigateByUrl('/(right:simple)');
advance(fixture);
expect(fixture.nativeElement).toHaveText('team [ , right: simple ]');
})));
it('should deactivate outlets', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [
{path: 'user/:name', component: UserCmp},
{path: 'simple', component: SimpleCmp, outlet: 'right'}
]
}]);
router.navigateByUrl('/team/22/(user/victor//right:simple)');
advance(fixture);
router.navigateByUrl('/team/22/user/victor');
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ user victor, right: ]');
})));
it('should deactivate nested outlets', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{
path: 'team/:id',
component: TeamCmp,
children: [
{path: 'user/:name', component: UserCmp},
{path: 'simple', component: SimpleCmp, outlet: 'right'}
]
},
{path: '', component: BlankCmp}
]);
router.navigateByUrl('/team/22/(user/victor//right:simple)');
advance(fixture);
router.navigateByUrl('/');
advance(fixture);
expect(fixture.nativeElement).toHaveText('');
})));
it('should set query params and fragment', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'query', component: QueryParamsAndFragmentCmp}]);
router.navigateByUrl('/query?name=1#fragment1');
advance(fixture);
expect(fixture.nativeElement).toHaveText('query: 1 fragment: fragment1');
router.navigateByUrl('/query?name=2#fragment2');
advance(fixture);
expect(fixture.nativeElement).toHaveText('query: 2 fragment: fragment2');
})));
it('should handle empty or missing fragments', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'query', component: QueryParamsAndFragmentCmp}]);
router.navigateByUrl('/query#');
advance(fixture);
expect(fixture.nativeElement).toHaveText('query: fragment: ');
router.navigateByUrl('/query');
advance(fixture);
expect(fixture.nativeElement).toHaveText('query: fragment: null');
})));
it('should ignore null and undefined query params',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'query', component: EmptyQueryParamsCmp}]);
router.navigate(['query'], {queryParams: {name: 1, age: null, page: undefined}});
advance(fixture);
const cmp = fixture.debugElement.children[1].componentInstance;
expect(cmp.recordedParams).toEqual([{name: '1'}]);
})));
it('should throw an error when one of the commands is null/undefined',
fakeAsync(inject([Router], (router: Router) => {
createRoot(router, RootCmp);
router.resetConfig([{path: 'query', component: EmptyQueryParamsCmp}]);
expect(() => router.navigate([
undefined, 'query'
])).toThrowError(/The requested path contains undefined segment at index 0/);
})));
it('should push params only when they change', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [{path: 'user/:name', component: UserCmp}]
}]);
router.navigateByUrl('/team/22/user/victor');
advance(fixture);
const team = fixture.debugElement.children[1].componentInstance;
const user = fixture.debugElement.children[1].children[1].componentInstance;
expect(team.recordedParams).toEqual([{id: '22'}]);
expect(team.snapshotParams).toEqual([{id: '22'}]);
expect(user.recordedParams).toEqual([{name: 'victor'}]);
expect(user.snapshotParams).toEqual([{name: 'victor'}]);
router.navigateByUrl('/team/22/user/fedor');
advance(fixture);
expect(team.recordedParams).toEqual([{id: '22'}]);
expect(team.snapshotParams).toEqual([{id: '22'}]);
expect(user.recordedParams).toEqual([{name: 'victor'}, {name: 'fedor'}]);
expect(user.snapshotParams).toEqual([{name: 'victor'}, {name: 'fedor'}]);
})));
it('should work when navigating to /', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: '', pathMatch: 'full', component: SimpleCmp},
{path: 'user/:name', component: UserCmp}
]);
router.navigateByUrl('/user/victor');
advance(fixture);
expect(fixture.nativeElement).toHaveText('user victor');
router.navigateByUrl('/');
advance(fixture);
expect(fixture.nativeElement).toHaveText('simple');
})));
it('should cancel in-flight navigations', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'user/:name', component: UserCmp}]);
const recordedEvents: Event[] = [];
router.events.forEach(e => recordedEvents.push(e));
router.navigateByUrl('/user/init');
advance(fixture);
const user = fixture.debugElement.children[1].componentInstance;
let r1: any, r2: any;
router.navigateByUrl('/user/victor').then(_ => r1 = _);
router.navigateByUrl('/user/fedor').then(_ => r2 = _);
advance(fixture);
expect(r1).toEqual(false); // returns false because it was canceled
expect(r2).toEqual(true); // returns true because it was successful
expect(fixture.nativeElement).toHaveText('user fedor');
expect(user.recordedParams).toEqual([{name: 'init'}, {name: 'fedor'}]);
expectEvents(recordedEvents, [
[NavigationStart, '/user/init'],
[RoutesRecognized, '/user/init'],
[GuardsCheckStart, '/user/init'],
[ChildActivationStart],
[ActivationStart],
[GuardsCheckEnd, '/user/init'],
[ResolveStart, '/user/init'],
[ResolveEnd, '/user/init'],
[ActivationEnd],
[ChildActivationEnd],
[NavigationEnd, '/user/init'],
[NavigationStart, '/user/victor'],
[NavigationCancel, '/user/victor'],
[NavigationStart, '/user/fedor'],
[RoutesRecognized, '/user/fedor'],
[GuardsCheckStart, '/user/fedor'],
[ChildActivationStart],
[ActivationStart],
[GuardsCheckEnd, '/user/fedor'],
[ResolveStart, '/user/fedor'],
[ResolveEnd, '/user/fedor'],
[ActivationEnd],
[ChildActivationEnd],
[NavigationEnd, '/user/fedor']
]);
})));
it('should properly set currentNavigation when cancelling in-flight navigations',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'user/:name', component: UserCmp}]);
router.navigateByUrl('/user/init');
advance(fixture);
router.navigateByUrl('/user/victor');
expect(router.getCurrentNavigation()).not.toBe(null);
router.navigateByUrl('/user/fedor');
// Due to https://github.com/angular/angular/issues/29389, this would be `false`
// when running a second navigation.
expect(router.getCurrentNavigation()).not.toBe(null);
advance(fixture);
expect(router.getCurrentNavigation()).toBe(null);
expect(fixture.nativeElement).toHaveText('user fedor');
})));
it('should handle failed navigations gracefully', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'user/:name', component: UserCmp}]);
const recordedEvents: Event[] = [];
router.events.forEach(e => recordedEvents.push(e));
let e: any;
router.navigateByUrl('/invalid').catch(_ => e = _);
advance(fixture);
expect(e.message).toContain('Cannot match any routes');
router.navigateByUrl('/user/fedor');
advance(fixture);
expect(fixture.nativeElement).toHaveText('user fedor');
expectEvents(recordedEvents, [
[NavigationStart, '/invalid'], [NavigationError, '/invalid'],
[NavigationStart, '/user/fedor'], [RoutesRecognized, '/user/fedor'],
[GuardsCheckStart, '/user/fedor'], [ChildActivationStart], [ActivationStart],
[GuardsCheckEnd, '/user/fedor'], [ResolveStart, '/user/fedor'],
[ResolveEnd, '/user/fedor'], [ActivationEnd], [ChildActivationEnd],
[NavigationEnd, '/user/fedor']
]);
})));
it('should be able to provide an error handler with DI dependencies', async () => {
@Injectable({providedIn: 'root'})
class Handler {
handlerCalled = false;
}
TestBed.configureTestingModule({
providers: [
provideRouter(
[{
path: 'throw',
canMatch: [() => {
throw new Error('');
}],
component: BlankCmp
}],
withNavigationErrorHandler(() => coreInject(Handler).handlerCalled = true)),
]
});
const router = TestBed.inject(Router);
await expectAsync(router.navigateByUrl('/throw')).toBeRejected();
expect(TestBed.inject(Handler).handlerCalled).toBeTrue();
});
// Errors should behave the same for both deferred and eager URL update strategies
(['deferred', 'eager'] as const).forEach(urlUpdateStrategy => {
it('should dispatch NavigationError after the url has been reset back', fakeAsync(() => {
TestBed.configureTestingModule(
{providers: [provideRouter([], withRouterConfig({urlUpdateStrategy}))]});
const router: Router = TestBed.inject(Router);
const location = TestBed.inject(Location);
const fixture = createRoot(router, RootCmp);
router.resetConfig(
[{path: 'simple', component: SimpleCmp}, {path: 'throwing', component: ThrowingCmp}]);
router.navigateByUrl('/simple');
advance(fixture);
let routerUrlBeforeEmittingError = '';
let locationUrlBeforeEmittingError = '';
router.events.forEach(e => {
if (e instanceof NavigationError) {
routerUrlBeforeEmittingError = router.url;
locationUrlBeforeEmittingError = location.path();
}
});
router.navigateByUrl('/throwing').catch(() => null);
advance(fixture);
expect(routerUrlBeforeEmittingError).toEqual('/simple');
expect(locationUrlBeforeEmittingError).toEqual('/simple');
}));
it('can renavigate to throwing component', fakeAsync(() => {
TestBed.configureTestingModule(
{providers: [provideRouter([], withRouterConfig({urlUpdateStrategy: 'eager'}))]});
const router = TestBed.inject(Router);
const location = TestBed.inject(Location);
router.resetConfig([
{path: '', component: BlankCmp},
{path: 'throwing', component: ConditionalThrowingCmp},
]);
const fixture = createRoot(router, RootCmp);
// Try navigating to a component which throws an error during activation.
ConditionalThrowingCmp.throwError = true;
expect(() => {
router.navigateByUrl('/throwing');
advance(fixture);
}).toThrow();
expect(location.path()).toEqual('');
expect(fixture.nativeElement.innerHTML).not.toContain('throwing');
// Ensure we can re-navigate to that same URL and succeed.
ConditionalThrowingCmp.throwError = false;
router.navigateByUrl('/throwing');
advance(fixture);
expect(location.path()).toEqual('/throwing');
expect(fixture.nativeElement.innerHTML).toContain('throwing');
}));
it('should reset the url with the right state when navigation errors', fakeAsync(() => {
TestBed.configureTestingModule(
{providers: [provideRouter([], withRouterConfig({urlUpdateStrategy}))]});
const router: Router = TestBed.inject(Router);
const location = TestBed.inject(Location);
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'simple1', component: SimpleCmp}, {path: 'simple2', component: SimpleCmp},
{path: 'throwing', component: ThrowingCmp}
]);
let event: NavigationStart;
router.events.subscribe(e => {
if (e instanceof NavigationStart) {
event = e;
}
});
router.navigateByUrl('/simple1');
advance(fixture);
const simple1NavStart = event!;
router.navigateByUrl('/throwing').catch(() => null);
advance(fixture);
router.navigateByUrl('/simple2');
advance(fixture);
location.back();
tick();
expect(event!.restoredState!.navigationId).toEqual(simple1NavStart.id);
}));
it('should not trigger another navigation when resetting the url back due to a NavigationError',
fakeAsync(() => {
TestBed.configureTestingModule(
{providers: [provideRouter([], withRouterConfig({urlUpdateStrategy}))]});
const router = TestBed.inject(Router);
router.onSameUrlNavigation = 'reload';
const fixture = createRoot(router, RootCmp);
router.resetConfig(
[{path: 'simple', component: SimpleCmp}, {path: 'throwing', component: ThrowingCmp}]);
const events: any[] = [];
router.events.forEach((e: any) => {
if (e instanceof NavigationStart) {
events.push(e.url);
}
});
router.navigateByUrl('/simple');
advance(fixture);
router.navigateByUrl('/throwing').catch(() => null);
advance(fixture);
// we do not trigger another navigation to /simple
expect(events).toEqual(['/simple', '/throwing']);
}));
});
it('should dispatch NavigationCancel after the url has been reset back', fakeAsync(() => {
TestBed.configureTestingModule(
{providers: [{provide: 'returnsFalse', useValue: () => false}]});
const router: Router = TestBed.inject(Router);
const location = TestBed.inject(Location);
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'simple', component: SimpleCmp}, {
path: 'throwing',
loadChildren: jasmine.createSpy('doesnotmatter'),
canLoad: ['returnsFalse']
}
]);
router.navigateByUrl('/simple');
advance(fixture);
let routerUrlBeforeEmittingError = '';
let locationUrlBeforeEmittingError = '';
router.events.forEach(e => {
if (e instanceof NavigationCancel) {
expect(e.code).toBe(NavigationCancellationCode.GuardRejected);
routerUrlBeforeEmittingError = router.url;
locationUrlBeforeEmittingError = location.path();
}
});
location.go('/throwing');
location.historyGo(0);
advance(fixture);
expect(routerUrlBeforeEmittingError).toEqual('/simple');
expect(locationUrlBeforeEmittingError).toEqual('/simple');
}));
it('should support custom error handlers', fakeAsync(inject([Router], (router: Router) => {
router.errorHandler = (error) => 'resolvedValue';
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'user/:name', component: UserCmp}]);
const recordedEvents: any[] = [];
router.events.forEach(e => recordedEvents.push(e));
let e: any;
router.navigateByUrl('/invalid')!.then(_ => e = _);
advance(fixture);
expect(e).toEqual('resolvedValue');
expectEvents(recordedEvents, [[NavigationStart, '/invalid'], [NavigationError, '/invalid']]);
})));
it('should recover from malformed uri errors',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
router.resetConfig([{path: 'simple', component: SimpleCmp}]);
const fixture = createRoot(router, RootCmp);
router.navigateByUrl('/invalid/url%with%percent');
advance(fixture);
expect(location.path()).toEqual('');
})));
it('should not swallow errors', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'simple', component: SimpleCmp}]);
router.navigateByUrl('/invalid');
expect(() => advance(fixture)).toThrow();
router.navigateByUrl('/invalid2');
expect(() => advance(fixture)).toThrow();
})));
it('should not swallow errors from browser state update', async () => {
const routerEvents: Event[] = [];
TestBed.inject(Router).resetConfig([{path: '**', component: BlankCmp}]);
TestBed.inject(Router).events.subscribe((e) => {
routerEvents.push(e);
});
spyOn(TestBed.inject(Location), 'go').and.callFake(() => {
throw new Error();
});
try {
await RouterTestingHarness.create('/abc123');
} catch {
}
// Ensure the first event is the start and that we get to the ResolveEnd event. If this is not
// true, then NavigationError may have been triggered at a time we don't expect here.
expect(routerEvents[0]).toBeInstanceOf(NavigationStart);
expect(routerEvents[routerEvents.length - 2]).toBeInstanceOf(ResolveEnd);
expect(routerEvents[routerEvents.length - 1]).toBeInstanceOf(NavigationError);
});
it('should replace state when path is equal to current path',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children:
[{path: 'simple', component: SimpleCmp}, {path: 'user/:name', component: UserCmp}]
}]);
router.navigateByUrl('/team/33/simple');
advance(fixture);
router.navigateByUrl('/team/22/user/victor');
advance(fixture);
router.navigateByUrl('/team/22/user/victor');
advance(fixture);
location.back();
advance(fixture);
expect(location.path()).toEqual('/team/33/simple');
})));
it('should handle componentless paths',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmpWithTwoOutlets);
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.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.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.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.nativeElement).toHaveText('primary [simple] right [user victor]');
})));
it('should not deactivate aux routes when navigating from a componentless routes',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, TwoOutletsCmp);
router.resetConfig([
{path: 'simple', component: SimpleCmp},
{path: 'componentless', children: [{path: 'simple', component: SimpleCmp}]},
{path: 'user/:name', outlet: 'aux', component: UserCmp}
]);
router.navigateByUrl('/componentless/simple(aux:user/victor)');
advance(fixture);
expect(location.path()).toEqual('/componentless/simple(aux:user/victor)');
expect(fixture.nativeElement).toHaveText('[ simple, aux: user victor ]');
router.navigateByUrl('/simple(aux:user/victor)');
advance(fixture);
expect(location.path()).toEqual('/simple(aux:user/victor)');
expect(fixture.nativeElement).toHaveText('[ simple, aux: user victor ]');
})));
it('should emit an event when an outlet gets activated', fakeAsync(() => {
@Component({
selector: 'container',
template:
`<router-outlet (activate)="recordActivate($event)" (deactivate)="recordDeactivate($event)"></router-outlet>`
})
class Container {
activations: any[] = [];
deactivations: any[] = [];
recordActivate(component: any): void {
this.activations.push(component);
}
recordDeactivate(component: any): void {
this.deactivations.push(component);
}
}
TestBed.configureTestingModule({declarations: [Container]});
const router: Router = TestBed.inject(Router);
const fixture = createRoot(router, Container);
const cmp = fixture.componentInstance;
router.resetConfig(
[{path: 'blank', component: BlankCmp}, {path: 'simple', component: SimpleCmp}]);
cmp.activations = [];
cmp.deactivations = [];
router.navigateByUrl('/blank');
advance(fixture);
expect(cmp.activations.length).toEqual(1);
expect(cmp.activations[0] instanceof BlankCmp).toBe(true);
router.navigateByUrl('/simple');
advance(fixture);
expect(cmp.activations.length).toEqual(2);
expect(cmp.activations[1] instanceof SimpleCmp).toBe(true);
expect(cmp.deactivations.length).toEqual(1);
expect(cmp.deactivations[0] instanceof BlankCmp).toBe(true);
}));
it('should update url and router state before activating components',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'cmp', component: ComponentRecordingRoutePathAndUrl}]);
router.navigateByUrl('/cmp');
advance(fixture);
const cmp: ComponentRecordingRoutePathAndUrl =
fixture.debugElement.children[1].componentInstance;
expect(cmp.url).toBe('/cmp');
expect(cmp.path.length).toEqual(2);
})));
describe('data', () => {
class ResolveSix {
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): number {
return 6;
}
}
@Component({selector: 'nested-cmp', template: 'nested-cmp'})
class NestedComponentWithData {
data: any = [];
constructor(private route: ActivatedRoute) {
route.data.forEach(d => this.data.push(d));
}
}
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
{provide: 'resolveTwo', useValue: (a: any, b: any) => 2},
{provide: 'resolveFour', useValue: (a: any, b: any) => 4},
{provide: 'resolveSix', useClass: ResolveSix},
{provide: 'resolveError', useValue: (a: any, b: any) => Promise.reject('error')},
{provide: 'resolveNullError', useValue: (a: any, b: any) => Promise.reject(null)},
{provide: 'resolveEmpty', useValue: (a: any, b: any) => EMPTY},
{provide: 'numberOfUrlSegments', useValue: (a: any, b: any) => a.url.length},
{
provide: 'overridingGuard',
useValue: (route: ActivatedRouteSnapshot) => {
route.data = {prop: 10};
return true;
}
},
]
});
});
it('should provide resolved data', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmpWithTwoOutlets);
router.resetConfig([{
path: 'parent/:id',
data: {one: 1},
resolve: {two: 'resolveTwo'},
children: [
{path: '', data: {three: 3}, resolve: {four: 'resolveFour'}, component: RouteCmp},
{
path: '',
data: {five: 5},
resolve: {six: 'resolveSix'},
component: RouteCmp,
outlet: 'right'
},
]
}]);
router.navigateByUrl('/parent/1');
advance(fixture);
const primaryCmp = fixture.debugElement.children[1].componentInstance;
const rightCmp = fixture.debugElement.children[3].componentInstance;
expect(primaryCmp.route.snapshot.data).toEqual({one: 1, two: 2, three: 3, four: 4});
expect(rightCmp.route.snapshot.data).toEqual({one: 1, two: 2, five: 5, six: 6});
const primaryRecorded: any[] = [];
primaryCmp.route.data.forEach((rec: any) => primaryRecorded.push(rec));
const rightRecorded: any[] = [];
rightCmp.route.data.forEach((rec: any) => rightRecorded.push(rec));
router.navigateByUrl('/parent/2');
advance(fixture);
expect(primaryRecorded).toEqual([{one: 1, three: 3, two: 2, four: 4}]);
expect(rightRecorded).toEqual([{one: 1, five: 5, two: 2, six: 6}]);
})));
it('should handle errors', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig(
[{path: 'simple', component: SimpleCmp, resolve: {error: 'resolveError'}}]);
const recordedEvents: any[] = [];
router.events.subscribe(e => e instanceof RouterEvent && recordedEvents.push(e));
let e: any = null;
router.navigateByUrl('/simple')!.catch(error => e = error);
advance(fixture);
expectEvents(recordedEvents, [
[NavigationStart, '/simple'], [RoutesRecognized, '/simple'],
[GuardsCheckStart, '/simple'], [GuardsCheckEnd, '/simple'], [ResolveStart, '/simple'],
[NavigationError, '/simple']
]);
expect(e).toEqual('error');
})));
it('should handle empty errors', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig(
[{path: 'simple', component: SimpleCmp, resolve: {error: 'resolveNullError'}}]);
const recordedEvents: any[] = [];
router.events.subscribe(e => e instanceof RouterEvent && recordedEvents.push(e));
let e: any = 'some value';
router.navigateByUrl('/simple').catch(error => e = error);
advance(fixture);
expect(e).toEqual(null);
})));
it('should not navigate when all resolvers return empty result',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'simple', component: SimpleCmp, resolve: {e1: 'resolveEmpty', e2: 'resolveEmpty'}}
]);
const recordedEvents: any[] = [];
router.events.subscribe(e => e instanceof RouterEvent && recordedEvents.push(e));
let e: any = null;
router.navigateByUrl('/simple').catch(error => e = error);
advance(fixture);
expectEvents(recordedEvents, [
[NavigationStart, '/simple'],
[RoutesRecognized, '/simple'],
[GuardsCheckStart, '/simple'],
[GuardsCheckEnd, '/simple'],
[ResolveStart, '/simple'],
[NavigationCancel, '/simple'],
]);
expect((recordedEvents[recordedEvents.length - 1] as NavigationCancel).code)
.toBe(NavigationCancellationCode.NoDataFromResolver);
expect(e).toEqual(null);
})));
it('should not navigate when at least one resolver returns empty result',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'simple', component: SimpleCmp, resolve: {e1: 'resolveTwo', e2: 'resolveEmpty'}}
]);
const recordedEvents: any[] = [];
router.events.subscribe(e => e instanceof RouterEvent && recordedEvents.push(e));
let e: any = null;
router.navigateByUrl('/simple').catch(error => e = error);
advance(fixture);
expectEvents(recordedEvents, [
[NavigationStart, '/simple'],
[RoutesRecognized, '/simple'],
[GuardsCheckStart, '/simple'],
[GuardsCheckEnd, '/simple'],
[ResolveStart, '/simple'],
[NavigationCancel, '/simple'],
]);
expect(e).toEqual(null);
})));
it('should not navigate when all resolvers for a child route from forChild() returns empty result',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
@Component({selector: 'lazy-cmp', template: 'lazy-loaded-1'})
class LazyComponent1 {
}
@NgModule({
declarations: [LazyComponent1],
imports: [
RouterModule.forChild([{
path: 'loaded',
component: LazyComponent1,
resolve: {e1: 'resolveEmpty', e2: 'resolveEmpty'}
}]),
],
})
class LoadedModule {
}
router.resetConfig([{path: 'lazy', loadChildren: () => LoadedModule}]);
const recordedEvents: any[] = [];
router.events.subscribe(e => e instanceof RouterEvent && recordedEvents.push(e));
let e: any = null;
router.navigateByUrl('lazy/loaded').catch(error => e = error);
advance(fixture);
expectEvents(recordedEvents, [
[NavigationStart, '/lazy/loaded'],
[RoutesRecognized, '/lazy/loaded'],
[GuardsCheckStart, '/lazy/loaded'],
[GuardsCheckEnd, '/lazy/loaded'],
[ResolveStart, '/lazy/loaded'],
[NavigationCancel, '/lazy/loaded'],
]);
expect(e).toEqual(null);
})));
it('should not navigate when at least one resolver for a child route from forChild() returns empty result',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
@Component({selector: 'lazy-cmp', template: 'lazy-loaded-1'})
class LazyComponent1 {
}
@NgModule({
declarations: [LazyComponent1],
imports: [
RouterModule.forChild([{
path: 'loaded',
component: LazyComponent1,
resolve: {e1: 'resolveTwo', e2: 'resolveEmpty'}
}]),
],
})
class LoadedModule {
}
router.resetConfig([{path: 'lazy', loadChildren: () => LoadedModule}]);
const recordedEvents: any[] = [];
router.events.subscribe(e => e instanceof RouterEvent && recordedEvents.push(e));
let e: any = null;
router.navigateByUrl('lazy/loaded').catch(error => e = error);
advance(fixture);
expectEvents(recordedEvents, [
[NavigationStart, '/lazy/loaded'],
[RoutesRecognized, '/lazy/loaded'],
[GuardsCheckStart, '/lazy/loaded'],
[GuardsCheckEnd, '/lazy/loaded'],
[ResolveStart, '/lazy/loaded'],
[NavigationCancel, '/lazy/loaded'],
]);
expect(e).toEqual(null);
})));
it('should include target snapshot in NavigationError when resolver throws', async () => {
const router = TestBed.inject(Router);
const errorMessage = 'throwing resolver';
@Injectable({providedIn: 'root'})
class ThrowingResolver {
resolve() {
throw new Error(errorMessage);
}
}
let caughtError: NavigationError|undefined;
router.events.subscribe(e => {
if (e instanceof NavigationError) {
caughtError = e;
}
});
router.resetConfig(
[{path: 'throwing', resolve: {thrower: ThrowingResolver}, component: BlankCmp}]);
try {
await router.navigateByUrl('/throwing');
fail('navigation should throw');
} catch (e: unknown) {
expect((e as Error).message).toEqual(errorMessage);
}
expect(caughtError).toBeDefined();
expect(caughtError?.target).toBeDefined();
});
it('should preserve resolved data', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'parent',
resolve: {two: 'resolveTwo'},
children: [
{path: 'child1', component: CollectParamsCmp},
{path: 'child2', component: CollectParamsCmp}
]
}]);
router.navigateByUrl('/parent/child1');
advance(fixture);
router.navigateByUrl('/parent/child2');
advance(fixture);
const cmp: CollectParamsCmp = fixture.debugElement.children[1].componentInstance;
expect(cmp.route.snapshot.data).toEqual({two: 2});
})));
it('should override route static data with resolved data',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: '',
component: NestedComponentWithData,
resolve: {prop: 'resolveTwo'},
data: {prop: 'static'},
}]);
router.navigateByUrl('/');
advance(fixture);
const cmp = fixture.debugElement.children[1].componentInstance;
expect(cmp.data).toEqual([{prop: 2}]);
})));
it('should correctly override inherited route static data with resolved data',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'a',
component: WrapperCmp,
resolve: {prop2: 'resolveTwo'},
data: {prop: 'wrapper-a'},
children: [
// will inherit data from this child route because it has `path` and its parent has
// component
{
path: 'b',
data: {prop: 'nested-b'},
resolve: {prop3: 'resolveFour'},
children: [
{
path: 'c',
children:
[{path: '', component: NestedComponentWithData, data: {prop3: 'nested'}}]
},
]
},
],
}]);
router.navigateByUrl('/a/b/c');
advance(fixture);
const pInj =
fixture.debugElement.queryAll(By.directive(NestedComponentWithData))[0].injector!;
const cmp = pInj.get(NestedComponentWithData);
expect(cmp.data).toEqual([{prop: 'nested-b', prop3: 'nested'}]);
})));
it('should not override inherited resolved data with inherited static data',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'a',
component: WrapperCmp,
resolve: {prop2: 'resolveTwo'},
data: {prop: 'wrapper-a'},
children: [
// will inherit data from this child route because it has `path` and its parent has
// component
{
path: 'b',
data: {prop2: 'parent-b', prop: 'parent-b'},
children: [
{
path: 'c',
resolve: {prop2: 'resolveFour'},
children: [
{
path: '',
component: NestedComponentWithData,
data: {prop: 'nested-d'},
},
]
},
]
},
],
}]);
router.navigateByUrl('/a/b/c');
advance(fixture);
const pInj =
fixture.debugElement.queryAll(By.directive(NestedComponentWithData))[0].injector!;
const cmp = pInj.get(NestedComponentWithData);
expect(cmp.data).toEqual([{prop: 'nested-d', prop2: 4}]);
})));
it('should not override nested route static data when both are using resolvers',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{
path: 'child',
component: WrapperCmp,
resolve: {prop: 'resolveTwo'},
children: [{
path: '',
pathMatch: 'full',
component: NestedComponentWithData,
resolve: {prop: 'resolveFour'}
}]
},
]);
router.navigateByUrl('/child');
advance(fixture);
const pInj = fixture.debugElement.query(By.directive(NestedComponentWithData)).injector!;
const cmp = pInj.get(NestedComponentWithData);
expect(cmp.data).toEqual([{prop: 4}]);
})));
it('should not override child route\'s static data when both are using static data',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{
path: 'child',
component: WrapperCmp,
data: {prop: 'wrapper'},
children: [{
path: '',
pathMatch: 'full',
component: NestedComponentWithData,
data: {prop: 'inner'}
}]
},
]);
router.navigateByUrl('/child');
advance(fixture);
const pInj = fixture.debugElement.query(By.directive(NestedComponentWithData)).injector!;
const cmp = pInj.get(NestedComponentWithData);
expect(cmp.data).toEqual([{prop: 'inner'}]);
})));
it('should not override child route\'s static data when wrapper is using resolved data and the child route static data',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{
path: 'nested',
component: WrapperCmp,
resolve: {prop: 'resolveTwo', prop2: 'resolveSix'},
data: {prop3: 'wrapper-static', prop4: 'another-static'},
children: [{
path: '',
pathMatch: 'full',
component: NestedComponentWithData,
data: {prop: 'nested', prop4: 'nested-static'}
}]
},
]);
router.navigateByUrl('/nested');
advance(fixture);
const pInj = fixture.debugElement.query(By.directive(NestedComponentWithData)).injector!;
const cmp = pInj.get(NestedComponentWithData);
// Issue 34361 - `prop` should contain value defined in `data` object from the nested
// route.
expect(cmp.data).toEqual(
[{prop: 'nested', prop2: 6, prop3: 'wrapper-static', prop4: 'nested-static'}]);
})));
it('should allow guards alter data resolved by routes',
fakeAsync(inject([Router], (router: Router) => {
// This is not documented or recommended behavior but is here to prevent unexpected
// regressions. This behavior isn't necessary 'by design' but it was discovered during a
// refactor that some teams depend on it.
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{
path: 'route',
component: NestedComponentWithData,
canActivate: ['overridingGuard'],
},
]);
router.navigateByUrl('/route');
advance(fixture);
const pInj = fixture.debugElement.query(By.directive(NestedComponentWithData)).injector!;
const cmp = pInj.get(NestedComponentWithData);
expect(cmp.data).toEqual([{prop: 10}]);
})));
it('should rerun resolvers when the urls segments of a wildcard route change',
fakeAsync(inject([Router, Location], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: '**',
component: CollectParamsCmp,
resolve: {numberOfUrlSegments: 'numberOfUrlSegments'}
}]);
router.navigateByUrl('/one/two');
advance(fixture);
const cmp = fixture.debugElement.children[1].componentInstance;
expect(cmp.route.snapshot.data).toEqual({numberOfUrlSegments: 2});
router.navigateByUrl('/one/two/three');
advance(fixture);
expect(cmp.route.snapshot.data).toEqual({numberOfUrlSegments: 3});
})));
describe('should run resolvers for the same route concurrently', () => {
let log: string[];
let observer: Observer<unknown>;
beforeEach(() => {
log = [];
TestBed.configureTestingModule({
providers: [
{
provide: 'resolver1',
useValue: () => {
const obs$ = new Observable((obs) => {
observer = obs;
return () => {};
});
return obs$.pipe(map(() => log.push('resolver1')));
}
},
{
provide: 'resolver2',
useValue: () => {
return of(null).pipe(map(() => {
log.push('resolver2');
observer.next(null);
observer.complete();
}));
}
},
]
});
});
it('works', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'a',
resolve: {
one: 'resolver1',
two: 'resolver2',
},
component: SimpleCmp
}]);
router.navigateByUrl('/a');
advance(fixture);
expect(log).toEqual(['resolver2', 'resolver1']);
})));
});
it('can resolve symbol keys', fakeAsync(() => {
const router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmp);
const symbolKey = Symbol('key');
router.resetConfig(
[{path: 'simple', component: SimpleCmp, resolve: {[symbolKey]: 'resolveFour'}}]);
router.navigateByUrl('/simple');
advance(fixture);
expect(router.routerState.root.snapshot.firstChild!.data[symbolKey]).toEqual(4);
}));
it('should allow resolvers as pure functions', fakeAsync(() => {
const router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmp);
const user = Symbol('user');
const userResolver: ResolveFn<string> = (route: ActivatedRouteSnapshot) =>
route.params['user'];
router.resetConfig(
[{path: ':user', component: SimpleCmp, resolve: {[user]: userResolver}}]);
router.navigateByUrl('/atscott');
advance(fixture);
expect(router.routerState.root.snapshot.firstChild!.data[user]).toEqual('atscott');
}));
it('should allow DI in resolvers as pure functions', fakeAsync(() => {
const router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmp);
const user = Symbol('user');
@Injectable({providedIn: 'root'})
class LoginState {
user = 'atscott';
}
router.resetConfig([{
path: '**',
component: SimpleCmp,
resolve: {
[user]: () => coreInject(LoginState).user,
},
}]);
router.navigateByUrl('/');
advance(fixture);
expect(router.routerState.root.snapshot.firstChild!.data[user]).toEqual('atscott');
}));
});
describe('router links', () => {
it('should support skipping location update for anchor router links',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = TestBed.createComponent(RootCmp);
advance(fixture);
router.resetConfig([{path: 'team/:id', component: TeamCmp}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
expect(fixture.nativeElement).toHaveText('team 22 [ , right: ]');
const teamCmp = fixture.debugElement.childNodes[1].componentInstance;
teamCmp.routerLink = ['/team/0'];
advance(fixture);
const anchor = fixture.debugElement.query(By.css('a')).nativeElement;
anchor.click();
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 0 [ , right: ]');
expect(location.path()).toEqual('/team/22');
teamCmp.routerLink = ['/team/1'];
advance(fixture);
const button = fixture.debugElement.query(By.css('button')).nativeElement;
button.click();
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 1 [ , right: ]');
expect(location.path()).toEqual('/team/22');
})));
it('should support string router links', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children:
[{path: 'link', component: StringLinkCmp}, {path: 'simple', component: SimpleCmp}]
}]);
router.navigateByUrl('/team/22/link');
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ link, right: ]');
const native = fixture.nativeElement.querySelector('a');
expect(native.getAttribute('href')).toEqual('/team/33/simple');
expect(native.getAttribute('target')).toEqual('_self');
native.click();
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 33 [ simple, right: ]');
})));
it('should not preserve query params and fragment by default', fakeAsync(() => {
@Component({
selector: 'someRoot',
template: `<router-outlet></router-outlet><a routerLink="/home">Link</a>`
})
class RootCmpWithLink {
}
TestBed.configureTestingModule({declarations: [RootCmpWithLink]});
const router: Router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmpWithLink);
router.resetConfig([{path: 'home', component: SimpleCmp}]);
const native = fixture.nativeElement.querySelector('a');
router.navigateByUrl('/home?q=123#fragment');
advance(fixture);
expect(native.getAttribute('href')).toEqual('/home');
}));
it('should not throw when commands is null or undefined', fakeAsync(() => {
@Component({
selector: 'someCmp',
template: `<router-outlet></router-outlet>
<a [routerLink]="null">Link</a>
<button [routerLink]="null">Button</button>
<a [routerLink]="undefined">Link</a>
<button [routerLink]="undefined">Button</button>
`
})
class CmpWithLink {
}
TestBed.configureTestingModule({declarations: [CmpWithLink]});
const router: Router = TestBed.inject(Router);
let fixture: ComponentFixture<CmpWithLink> = createRoot(router, CmpWithLink);
router.resetConfig([{path: 'home', component: SimpleCmp}]);
const anchors = fixture.nativeElement.querySelectorAll('a');
const buttons = fixture.nativeElement.querySelectorAll('button');
expect(() => anchors[0].click()).not.toThrow();
expect(() => anchors[1].click()).not.toThrow();
expect(() => buttons[0].click()).not.toThrow();
expect(() => buttons[1].click()).not.toThrow();
}));
it('should not throw when some command is null', fakeAsync(() => {
@Component({
selector: 'someCmp',
template:
`<router-outlet></router-outlet><a [routerLink]="[null]">Link</a><button [routerLink]="[null]">Button</button>`
})
class CmpWithLink {
}
TestBed.configureTestingModule({declarations: [CmpWithLink]});
const router: Router = TestBed.inject(Router);
expect(() => createRoot(router, CmpWithLink)).not.toThrow();
}));
it('should not throw when some command is undefined', fakeAsync(() => {
@Component({
selector: 'someCmp',
template:
`<router-outlet></router-outlet><a [routerLink]="[undefined]">Link</a><button [routerLink]="[undefined]">Button</button>`
})
class CmpWithLink {
}
TestBed.configureTestingModule({declarations: [CmpWithLink]});
const router: Router = TestBed.inject(Router);
expect(() => createRoot(router, CmpWithLink)).not.toThrow();
}));
it('should update hrefs when query params or fragment change', fakeAsync(() => {
@Component({
selector: 'someRoot',
template:
`<router-outlet></router-outlet><a routerLink="/home" queryParamsHandling="preserve" preserveFragment>Link</a>`
})
class RootCmpWithLink {
}
TestBed.configureTestingModule({declarations: [RootCmpWithLink]});
const router: Router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmpWithLink);
router.resetConfig([{path: 'home', component: SimpleCmp}]);
const native = fixture.nativeElement.querySelector('a');
router.navigateByUrl('/home?q=123');
advance(fixture);
expect(native.getAttribute('href')).toEqual('/home?q=123');
router.navigateByUrl('/home?q=456');
advance(fixture);
expect(native.getAttribute('href')).toEqual('/home?q=456');
router.navigateByUrl('/home?q=456#1');
advance(fixture);
expect(native.getAttribute('href')).toEqual('/home?q=456#1');
}));
it('should correctly use the preserve strategy', fakeAsync(() => {
@Component({
selector: 'someRoot',
template:
`<router-outlet></router-outlet><a routerLink="/home" [queryParams]="{q: 456}" queryParamsHandling="preserve">Link</a>`
})
class RootCmpWithLink {
}
TestBed.configureTestingModule({declarations: [RootCmpWithLink]});
const router: Router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmpWithLink);
router.resetConfig([{path: 'home', component: SimpleCmp}]);
const native = fixture.nativeElement.querySelector('a');
router.navigateByUrl('/home?a=123');
advance(fixture);
expect(native.getAttribute('href')).toEqual('/home?a=123');
}));
it('should correctly use the merge strategy', fakeAsync(() => {
@Component({
selector: 'someRoot',
template:
`<router-outlet></router-outlet><a routerLink="/home" [queryParams]="{removeMe: null, q: 456}" queryParamsHandling="merge">Link</a>`
})
class RootCmpWithLink {
}
TestBed.configureTestingModule({declarations: [RootCmpWithLink]});
const router: Router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmpWithLink);
router.resetConfig([{path: 'home', component: SimpleCmp}]);
const native = fixture.nativeElement.querySelector('a');
router.navigateByUrl('/home?a=123&removeMe=123');
advance(fixture);
expect(native.getAttribute('href')).toEqual('/home?a=123&q=456');
}));
it('should support using links on non-a tags', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [
{path: 'link', component: StringLinkButtonCmp}, {path: 'simple', component: SimpleCmp}
]
}]);
router.navigateByUrl('/team/22/link');
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ link, right: ]');
const button = fixture.nativeElement.querySelector('button');
expect(button.getAttribute('tabindex')).toEqual('0');
button.click();
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 33 [ simple, right: ]');
})));
it('should support absolute router links', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children:
[{path: 'link', component: AbsoluteLinkCmp}, {path: 'simple', component: SimpleCmp}]
}]);
router.navigateByUrl('/team/22/link');
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ link, right: ]');
const native = fixture.nativeElement.querySelector('a');
expect(native.getAttribute('href')).toEqual('/team/33/simple');
native.click();
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 33 [ simple, right: ]');
})));
it('should support relative router links', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children:
[{path: 'link', component: RelativeLinkCmp}, {path: 'simple', component: SimpleCmp}]
}]);
router.navigateByUrl('/team/22/link');
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ link, right: ]');
const native = fixture.nativeElement.querySelector('a');
expect(native.getAttribute('href')).toEqual('/team/22/simple');
native.click();
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ simple, right: ]');
})));
it('should support top-level link', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RelativeLinkInIfCmp);
advance(fixture);
router.resetConfig(
[{path: 'simple', component: SimpleCmp}, {path: '', component: BlankCmp}]);
router.navigateByUrl('/');
advance(fixture);
expect(fixture.nativeElement).toHaveText('');
const cmp = fixture.componentInstance;
cmp.show = true;
advance(fixture);
expect(fixture.nativeElement).toHaveText('link');
const native = fixture.nativeElement.querySelector('a');
expect(native.getAttribute('href')).toEqual('/simple');
native.click();
advance(fixture);
expect(fixture.nativeElement).toHaveText('linksimple');
})));
it('should support query params and fragments',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [
{path: 'link', component: LinkWithQueryParamsAndFragment},
{path: 'simple', component: SimpleCmp}
]
}]);
router.navigateByUrl('/team/22/link');
advance(fixture);
const native = fixture.nativeElement.querySelector('a');
expect(native.getAttribute('href')).toEqual('/team/22/simple?q=1#f');
native.click();
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ simple, right: ]');
expect(location.path(true)).toEqual('/team/22/simple?q=1#f');
})));
describe('should support history and state', () => {
let component: typeof LinkWithState|typeof DivLinkWithState;
it('for anchor elements', () => {
// Test logic in afterEach to reduce duplication
component = LinkWithState;
});
it('for non-anchor elements', () => {
// Test logic in afterEach to reduce duplication
component = DivLinkWithState;
});
afterEach(fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [{path: 'link', component}, {path: 'simple', component: SimpleCmp}]
}]);
router.navigateByUrl('/team/22/link');
advance(fixture);
const native = fixture.nativeElement.querySelector('#link');
native.click();
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ simple, right: ]');
// Check the history entry
expect(location.getState()).toEqual({foo: 'bar', navigationId: 3});
})));
});
it('should set href on area elements', fakeAsync(() => {
@Component({
selector: 'someRoot',
template: `<router-outlet></router-outlet><map><area routerLink="/home" /></map>`
})
class RootCmpWithArea {
}
TestBed.configureTestingModule({declarations: [RootCmpWithArea]});
const router: Router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmpWithArea);
router.resetConfig([{path: 'home', component: SimpleCmp}]);
const native = fixture.nativeElement.querySelector('area');
expect(native.getAttribute('href')).toEqual('/home');
}));
});
describe('redirects', () => {
it('should work', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'old/team/:id', redirectTo: 'team/:id'}, {path: 'team/:id', component: TeamCmp}
]);
router.navigateByUrl('old/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
})));
it('can redirect from componentless named outlets', fakeAsync(() => {
const router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'main', outlet: 'aux', component: BlankCmp},
{path: '', pathMatch: 'full', outlet: 'aux', redirectTo: 'main'},
]);
router.navigateByUrl('');
advance(fixture);
expect(TestBed.inject(Location).path()).toEqual('/(aux:main)');
}));
it('should update Navigation object after redirects are applied',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
let initialUrl, afterRedirectUrl;
router.resetConfig([
{path: 'old/team/:id', redirectTo: 'team/:id'}, {path: 'team/:id', component: TeamCmp}
]);
router.events.subscribe(e => {
if (e instanceof NavigationStart) {
const navigation = router.getCurrentNavigation();
initialUrl = navigation && navigation.finalUrl;
}
if (e instanceof RoutesRecognized) {
const navigation = router.getCurrentNavigation();
afterRedirectUrl = navigation && navigation.finalUrl;
}
});
router.navigateByUrl('old/team/22');
advance(fixture);
expect(initialUrl).toBeUndefined();
expect(router.serializeUrl(afterRedirectUrl as any)).toBe('/team/22');
})));
it('should not break the back button when trigger by location change', fakeAsync(() => {
TestBed.configureTestingModule(
{providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]});
const router = TestBed.inject(Router);
const location = TestBed.inject(Location);
const fixture = TestBed.createComponent(RootCmp);
advance(fixture);
router.resetConfig([
{path: 'initial', component: BlankCmp}, {path: 'old/team/:id', redirectTo: 'team/:id'},
{path: 'team/:id', component: TeamCmp}
]);
location.go('initial');
location.historyGo(0);
location.go('old/team/22');
location.historyGo(0);
// initial navigation
router.initialNavigation();
advance(fixture);
expect(location.path()).toEqual('/team/22');
location.back();
advance(fixture);
expect(location.path()).toEqual('/initial');
// location change
location.go('/old/team/33');
location.historyGo(0);
advance(fixture);
expect(location.path()).toEqual('/team/33');
location.back();
advance(fixture);
expect(location.path()).toEqual('/initial');
}));
});
describe('guards', () => {
describe('CanActivate', () => {
describe('should not activate a route when CanActivate returns false', () => {
beforeEach(() => {
TestBed.configureTestingModule(
{providers: [{provide: 'alwaysFalse', useValue: (a: any, b: any) => false}]});
});
it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
const recordedEvents: Event[] = [];
router.events.forEach(e => recordedEvents.push(e));
router.resetConfig(
[{path: 'team/:id', component: TeamCmp, canActivate: ['alwaysFalse']}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('');
expectEvents(recordedEvents, [
[NavigationStart, '/team/22'],
[RoutesRecognized, '/team/22'],
[GuardsCheckStart, '/team/22'],
[ChildActivationStart],
[ActivationStart],
[GuardsCheckEnd, '/team/22'],
[NavigationCancel, '/team/22'],
]);
expect((recordedEvents[5] as GuardsCheckEnd).shouldActivate).toBe(false);
})));
});
describe(
'should not activate a route when CanActivate returns false (componentless route)',
() => {
beforeEach(() => {
TestBed.configureTestingModule(
{providers: [{provide: 'alwaysFalse', useValue: (a: any, b: any) => false}]});
});
it('works',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
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', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [{
provide: 'alwaysTrue',
useValue: (a: ActivatedRouteSnapshot, s: RouterStateSnapshot) => true
}]
});
});
it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig(
[{path: 'team/:id', component: TeamCmp, canActivate: ['alwaysTrue']}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
})));
});
describe('should work when given a class', () => {
class AlwaysTrue {
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
return true;
}
}
beforeEach(() => {
TestBed.configureTestingModule({providers: [AlwaysTrue]});
});
it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig(
[{path: 'team/:id', component: TeamCmp, canActivate: [AlwaysTrue]}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
})));
});
describe('should work when returns an observable', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [{
provide: 'CanActivate',
useValue: (a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
return new Observable<boolean>((observer) => {
observer.next(false);
});
}
}]
});
});
it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig(
[{path: 'team/:id', component: TeamCmp, canActivate: ['CanActivate']}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('');
})));
});
describe('should work when returns a promise', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [{
provide: 'CanActivate',
useValue: (a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
if (a.params['id'] === '22') {
return Promise.resolve(true);
} else {
return Promise.resolve(false);
}
}
}]
});
});
it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig(
[{path: 'team/:id', component: TeamCmp, canActivate: ['CanActivate']}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
router.navigateByUrl('/team/33');
advance(fixture);
expect(location.path()).toEqual('/team/22');
})));
});
describe('should reset the location when cancelling a navigation', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
{
provide: 'alwaysFalse',
useValue: (a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
return false;
}
},
{provide: LocationStrategy, useClass: HashLocationStrategy}
]
});
});
it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'one', component: SimpleCmp},
{path: 'two', component: SimpleCmp, canActivate: ['alwaysFalse']}
]);
router.navigateByUrl('/one');
advance(fixture);
expect(location.path()).toEqual('/one');
location.go('/two');
location.historyGo(0);
advance(fixture);
expect(location.path()).toEqual('/one');
})));
});
describe('should redirect to / when guard returns false', () => {
beforeEach(() => TestBed.configureTestingModule({
providers: [{
provide: 'returnFalseAndNavigate',
useFactory: (router: Router) => () => {
router.navigate(['/']);
return false;
},
deps: [Router]
}]
}));
it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
router.resetConfig([
{
path: '',
component: SimpleCmp,
},
{path: 'one', component: RouteCmp, canActivate: ['returnFalseAndNavigate']}
]);
const fixture = TestBed.createComponent(RootCmp);
router.navigateByUrl('/one');
advance(fixture);
expect(location.path()).toEqual('');
expect(fixture.nativeElement).toHaveText('simple');
})));
});
describe('should redirect when guard returns UrlTree', () => {
beforeEach(() => TestBed.configureTestingModule({
providers: [
{
provide: 'returnUrlTree',
useFactory: (router: Router) => () => {
return router.parseUrl('/redirected');
},
deps: [Router]
},
{
provide: 'returnRootUrlTree',
useFactory: (router: Router) => () => {
return router.parseUrl('/');
},
deps: [Router]
}
]
}));
it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const recordedEvents: Event[] = [];
let cancelEvent: NavigationCancel = null!;
router.events.forEach((e) => {
recordedEvents.push(e);
if (e instanceof NavigationCancel) cancelEvent = e;
});
router.resetConfig([
{path: '', component: SimpleCmp},
{path: 'one', component: RouteCmp, canActivate: ['returnUrlTree']},
{path: 'redirected', component: SimpleCmp}
]);
const fixture = TestBed.createComponent(RootCmp);
router.navigateByUrl('/one');
advance(fixture);
expect(location.path()).toEqual('/redirected');
expect(fixture.nativeElement).toHaveText('simple');
expect(cancelEvent && cancelEvent.reason)
.toBe('NavigationCancelingError: Redirecting to "/redirected"');
expectEvents(recordedEvents, [
[NavigationStart, '/one'],
[RoutesRecognized, '/one'],
[GuardsCheckStart, '/one'],
[ChildActivationStart, undefined],
[ActivationStart, undefined],
[NavigationCancel, '/one'],
[NavigationStart, '/redirected'],
[RoutesRecognized, '/redirected'],
[GuardsCheckStart, '/redirected'],
[ChildActivationStart, undefined],
[ActivationStart, undefined],
[GuardsCheckEnd, '/redirected'],
[ResolveStart, '/redirected'],
[ResolveEnd, '/redirected'],
[ActivationEnd, undefined],
[ChildActivationEnd, undefined],
[NavigationEnd, '/redirected'],
]);
})));
it('works with root url',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const recordedEvents: Event[] = [];
let cancelEvent: NavigationCancel = null!;
router.events.forEach((e: any) => {
recordedEvents.push(e);
if (e instanceof NavigationCancel) cancelEvent = e;
});
router.resetConfig([
{path: '', component: SimpleCmp},
{path: 'one', component: RouteCmp, canActivate: ['returnRootUrlTree']}
]);
const fixture = TestBed.createComponent(RootCmp);
router.navigateByUrl('/one');
advance(fixture);
expect(location.path()).toEqual('');
expect(fixture.nativeElement).toHaveText('simple');
expect(cancelEvent && cancelEvent.reason)
.toBe('NavigationCancelingError: Redirecting to "/"');
expectEvents(recordedEvents, [
[NavigationStart, '/one'],
[RoutesRecognized, '/one'],
[GuardsCheckStart, '/one'],
[ChildActivationStart, undefined],
[ActivationStart, undefined],
[NavigationCancel, '/one'],
[NavigationStart, '/'],
[RoutesRecognized, '/'],
[GuardsCheckStart, '/'],
[ChildActivationStart, undefined],
[ActivationStart, undefined],
[GuardsCheckEnd, '/'],
[ResolveStart, '/'],
[ResolveEnd, '/'],
[ActivationEnd, undefined],
[ChildActivationEnd, undefined],
[NavigationEnd, '/'],
]);
})));
it('replaces URL when URL is updated eagerly so back button can still work',
fakeAsync(() => {
TestBed.configureTestingModule(
{providers: [provideRouter([], withRouterConfig({urlUpdateStrategy: 'eager'}))]});
const router = TestBed.inject(Router);
const location = TestBed.inject(Location);
router.resetConfig([
{path: '', component: SimpleCmp},
{path: 'one', component: RouteCmp, canActivate: ['returnUrlTree']},
{path: 'redirected', component: SimpleCmp}
]);
createRoot(router, RootCmp);
router.navigateByUrl('/one');
const urlChanges: string[] = [];
location.onUrlChange((change) => {
urlChanges.push(change);
});
tick();
expect(location.path()).toEqual('/redirected');
expect(urlChanges).toEqual(['/one', '/redirected']);
location.back();
tick();
expect(location.path()).toEqual('');
}));
it('should resolve navigateByUrl promise after redirect finishes', fakeAsync(() => {
TestBed.configureTestingModule(
{providers: [provideRouter([], withRouterConfig({urlUpdateStrategy: 'eager'}))]});
const router = TestBed.inject(Router);
const location = TestBed.inject(Location);
let resolvedPath = '';
router.resetConfig([
{path: '', component: SimpleCmp},
{path: 'one', component: RouteCmp, canActivate: ['returnUrlTree']},
{path: 'redirected', component: SimpleCmp}
]);
const fixture = createRoot(router, RootCmp);
router.navigateByUrl('/one').then(v => {
resolvedPath = location.path();
});
tick();
expect(resolvedPath).toBe('/redirected');
}));
});
describe('runGuardsAndResolvers', () => {
let guardRunCount = 0;
let resolverRunCount = 0;
beforeEach(() => {
guardRunCount = 0;
resolverRunCount = 0;
TestBed.configureTestingModule({
providers: [
{
provide: 'guard',
useValue: () => {
guardRunCount++;
return true;
}
},
{provide: 'resolver', useValue: () => resolverRunCount++}
]
});
});
function configureRouter(router: Router, runGuardsAndResolvers: RunGuardsAndResolvers):
ComponentFixture<RootCmpWithTwoOutlets> {
const fixture = createRoot(router, RootCmpWithTwoOutlets);
router.resetConfig([
{
path: 'a',
runGuardsAndResolvers,
component: RouteCmp,
canActivate: ['guard'],
resolve: {data: 'resolver'}
},
{path: 'b', component: SimpleCmp, outlet: 'right'}, {
path: 'c/:param',
runGuardsAndResolvers,
component: RouteCmp,
canActivate: ['guard'],
resolve: {data: 'resolver'}
},
{
path: 'd/:param',
component: WrapperCmp,
runGuardsAndResolvers,
children: [
{
path: 'e/:param',
component: SimpleCmp,
canActivate: ['guard'],
resolve: {data: 'resolver'},
},
]
},
{
path: 'throwing',
runGuardsAndResolvers,
component: ThrowingCmp,
canActivate: ['guard'],
resolve: {data: 'resolver'}
}
]);
router.navigateByUrl('/a');
advance(fixture);
return fixture;
}
it('should rerun guards and resolvers when params change',
fakeAsync(inject([Router], (router: Router) => {
const fixture = configureRouter(router, 'paramsChange');
const cmp: RouteCmp = fixture.debugElement.children[1].componentInstance;
const recordedData: Data[] = [];
cmp.route.data.subscribe((data) => recordedData.push(data));
expect(guardRunCount).toEqual(1);
expect(recordedData).toEqual([{data: 0}]);
router.navigateByUrl('/a;p=1');
advance(fixture);
expect(guardRunCount).toEqual(2);
expect(recordedData).toEqual([{data: 0}, {data: 1}]);
router.navigateByUrl('/a;p=2');
advance(fixture);
expect(guardRunCount).toEqual(3);
expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}]);
router.navigateByUrl('/a;p=2?q=1');
advance(fixture);
expect(guardRunCount).toEqual(3);
expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}]);
})));
it('should rerun guards and resolvers when query params change',
fakeAsync(inject([Router], (router: Router) => {
const fixture = configureRouter(router, 'paramsOrQueryParamsChange');
const cmp: RouteCmp = fixture.debugElement.children[1].componentInstance;
const recordedData: Data[] = [];
cmp.route.data.subscribe((data) => recordedData.push(data));
expect(guardRunCount).toEqual(1);
expect(recordedData).toEqual([{data: 0}]);
router.navigateByUrl('/a;p=1');
advance(fixture);
expect(guardRunCount).toEqual(2);
expect(recordedData).toEqual([{data: 0}, {data: 1}]);
router.navigateByUrl('/a;p=2');
advance(fixture);
expect(guardRunCount).toEqual(3);
expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}]);
router.navigateByUrl('/a;p=2?q=1');
advance(fixture);
expect(guardRunCount).toEqual(4);
expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}, {data: 3}]);
router.navigateByUrl('/a;p=2(right:b)?q=1');
advance(fixture);
expect(guardRunCount).toEqual(4);
expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}, {data: 3}]);
})));
it('should always rerun guards and resolvers',
fakeAsync(inject([Router], (router: Router) => {
const fixture = configureRouter(router, 'always');
const cmp: RouteCmp = fixture.debugElement.children[1].componentInstance;
const recordedData: Data[] = [];
cmp.route.data.subscribe((data) => recordedData.push(data));
expect(guardRunCount).toEqual(1);
expect(recordedData).toEqual([{data: 0}]);
router.navigateByUrl('/a;p=1');
advance(fixture);
expect(guardRunCount).toEqual(2);
expect(recordedData).toEqual([{data: 0}, {data: 1}]);
router.navigateByUrl('/a;p=2');
advance(fixture);
expect(guardRunCount).toEqual(3);
expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}]);
router.navigateByUrl('/a;p=2?q=1');
advance(fixture);
expect(guardRunCount).toEqual(4);
expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}, {data: 3}]);
router.navigateByUrl('/a;p=2(right:b)?q=1');
advance(fixture);
expect(guardRunCount).toEqual(5);
expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}, {data: 3}, {data: 4}]);
// Issue #39030, always running guards and resolvers should not throw
// when navigating away from a component with a throwing constructor.
expect(() => {
router.navigateByUrl('/throwing').catch(() => {});
advance(fixture);
router.navigateByUrl('/a;p=1');
advance(fixture);
}).not.toThrow();
})));
it('should rerun rerun guards and resolvers when path params change',
fakeAsync(inject([Router], (router: Router) => {
const fixture = configureRouter(router, 'pathParamsChange');
const cmp: RouteCmp = fixture.debugElement.children[1].componentInstance;
const recordedData: Data[] = [];
cmp.route.data.subscribe((data) => recordedData.push(data));
// First navigation has already run
expect(guardRunCount).toEqual(1);
expect(recordedData).toEqual([{data: 0}]);
// Changing any optional params will not result in running guards or resolvers
router.navigateByUrl('/a;p=1');
advance(fixture);
expect(guardRunCount).toEqual(1);
expect(recordedData).toEqual([{data: 0}]);
router.navigateByUrl('/a;p=2');
advance(fixture);
expect(guardRunCount).toEqual(1);
expect(recordedData).toEqual([{data: 0}]);
router.navigateByUrl('/a;p=2?q=1');
advance(fixture);
expect(guardRunCount).toEqual(1);
expect(recordedData).toEqual([{data: 0}]);
router.navigateByUrl('/a;p=2(right:b)?q=1');
advance(fixture);
expect(guardRunCount).toEqual(1);
expect(recordedData).toEqual([{data: 0}]);
// Change to new route with path param should run guards and resolvers
router.navigateByUrl('/c/paramValue');
advance(fixture);
expect(guardRunCount).toEqual(2);
// Modifying a path param should run guards and resolvers
router.navigateByUrl('/c/paramValueChanged');
advance(fixture);
expect(guardRunCount).toEqual(3);
// Adding optional params should not cause guards/resolvers to run
router.navigateByUrl('/c/paramValueChanged;p=1?q=2');
advance(fixture);
expect(guardRunCount).toEqual(3);
})));
it('should rerun when a parent segment changes',
fakeAsync(inject([Router], (router: Router) => {
const fixture = configureRouter(router, 'pathParamsChange');
const cmp: RouteCmp = fixture.debugElement.children[1].componentInstance;
// Land on an initial page
router.navigateByUrl('/d/1;dd=11/e/2;dd=22');
advance(fixture);
expect(guardRunCount).toEqual(2);
// Changes cause re-run on the config with the guard
router.navigateByUrl('/d/1;dd=11/e/3;ee=22');
advance(fixture);
expect(guardRunCount).toEqual(3);
// Changes to the parent also cause re-run
router.navigateByUrl('/d/2;dd=11/e/3;ee=22');
advance(fixture);
expect(guardRunCount).toEqual(4);
})));
it('should rerun rerun guards and resolvers when path or query params change',
fakeAsync(inject([Router], (router: Router) => {
const fixture = configureRouter(router, 'pathParamsOrQueryParamsChange');
const cmp: RouteCmp = fixture.debugElement.children[1].componentInstance;
const recordedData: Data[] = [];
cmp.route.data.subscribe((data) => recordedData.push(data));
// First navigation has already run
expect(guardRunCount).toEqual(1);
expect(recordedData).toEqual([{data: 0}]);
// Changing matrix params will not result in running guards or resolvers
router.navigateByUrl('/a;p=1');
advance(fixture);
expect(guardRunCount).toEqual(1);
expect(recordedData).toEqual([{data: 0}]);
router.navigateByUrl('/a;p=2');
advance(fixture);
expect(guardRunCount).toEqual(1);
expect(recordedData).toEqual([{data: 0}]);
// Adding query params will re-run guards/resolvers
router.navigateByUrl('/a;p=2?q=1');
advance(fixture);
expect(guardRunCount).toEqual(2);
expect(recordedData).toEqual([{data: 0}, {data: 1}]);
// Changing query params will re-run guards/resolvers
router.navigateByUrl('/a;p=2?q=2');
advance(fixture);
expect(guardRunCount).toEqual(3);
expect(recordedData).toEqual([{data: 0}, {data: 1}, {data: 2}]);
})));
it('should allow a predicate function to determine when to run guards and resolvers',
fakeAsync(inject([Router], (router: Router) => {
const fixture = configureRouter(router, (from, to) => to.paramMap.get('p') === '2');
const cmp: RouteCmp = fixture.debugElement.children[1].componentInstance;
const recordedData: Data[] = [];
cmp.route.data.subscribe((data) => recordedData.push(data));
// First navigation has already run
expect(guardRunCount).toEqual(1);
expect(recordedData).toEqual([{data: 0}]);
// Adding `p` param shouldn't cause re-run
router.navigateByUrl('/a;p=1');
advance(fixture);
expect(guardRunCount).toEqual(1);
expect(recordedData).toEqual([{data: 0}]);
// Re-run should trigger on p=2
router.navigateByUrl('/a;p=2');
advance(fixture);
expect(guardRunCount).toEqual(2);
expect(recordedData).toEqual([{data: 0}, {data: 1}]);
// Any other changes don't pass the predicate
router.navigateByUrl('/a;p=3?q=1');
advance(fixture);
expect(guardRunCount).toEqual(2);
expect(recordedData).toEqual([{data: 0}, {data: 1}]);
// Changing query params will re-run guards/resolvers
router.navigateByUrl('/a;p=3?q=2');
advance(fixture);
expect(guardRunCount).toEqual(2);
expect(recordedData).toEqual([{data: 0}, {data: 1}]);
})));
});
describe('should wait for parent to complete', () => {
let log: string[];
beforeEach(() => {
log = [];
TestBed.configureTestingModule({
providers: [
{
provide: 'parentGuard',
useValue: () => {
return delayPromise(10).then(() => {
log.push('parent');
return true;
});
}
},
{
provide: 'childGuard',
useValue: () => {
return delayPromise(5).then(() => {
log.push('child');
return true;
});
}
}
]
});
});
function delayPromise(delay: number): Promise<boolean> {
let resolve: (val: boolean) => void;
const promise = new Promise<boolean>(res => resolve = res);
setTimeout(() => resolve(true), delay);
return promise;
}
it('works', fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'parent',
canActivate: ['parentGuard'],
children: [
{path: 'child', component: SimpleCmp, canActivate: ['childGuard']},
]
}]);
router.navigateByUrl('/parent/child');
advance(fixture);
tick(15);
expect(log).toEqual(['parent', 'child']);
})));
});
});
describe('CanDeactivate', () => {
let log: any;
beforeEach(() => {
log = [];
TestBed.configureTestingModule({
providers: [
{
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: any, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
return a.params['name'] === 'victor';
}
},
{
provide: 'RecordingDeactivate',
useValue: (c: any, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
log.push({path: a.routeConfig!.path, component: c});
return true;
}
},
{
provide: 'alwaysFalse',
useValue: (c: any, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
return false;
}
},
{
provide: 'alwaysFalseAndLogging',
useValue: (c: any, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
log.push('called');
return false;
}
},
{
provide: 'alwaysFalseWithDelayAndLogging',
useValue: () => {
log.push('called');
let resolve: (result: boolean) => void;
const promise = new Promise(res => resolve = res);
setTimeout(() => resolve(false), 0);
return promise;
}
},
{
provide: 'canActivate_alwaysTrueAndLogging',
useValue: () => {
log.push('canActivate called');
return true;
}
},
]
});
});
describe('should not deactivate a route when CanDeactivate returns false', () => {
it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig(
[{path: 'team/:id', component: TeamCmp, canDeactivate: ['CanDeactivateTeam']}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
let successStatus: boolean = false;
router.navigateByUrl('/team/33')!.then(res => successStatus = res);
advance(fixture);
expect(location.path()).toEqual('/team/33');
expect(successStatus).toEqual(true);
let canceledStatus: boolean = false;
router.navigateByUrl('/team/44')!.then(res => canceledStatus = res);
advance(fixture);
expect(location.path()).toEqual('/team/33');
expect(canceledStatus).toEqual(false);
})));
it('works with componentless routes',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{
path: 'grandparent',
canDeactivate: ['RecordingDeactivate'],
children: [{
path: 'parent',
canDeactivate: ['RecordingDeactivate'],
children: [{
path: 'child',
canDeactivate: ['RecordingDeactivate'],
children: [{
path: 'simple',
component: SimpleCmp,
canDeactivate: ['RecordingDeactivate']
}]
}]
}]
},
{path: 'simple', component: SimpleCmp}
]);
router.navigateByUrl('/grandparent/parent/child/simple');
advance(fixture);
expect(location.path()).toEqual('/grandparent/parent/child/simple');
router.navigateByUrl('/simple');
advance(fixture);
const child = fixture.debugElement.children[1].componentInstance;
expect(log.map((a: any) => a.path)).toEqual([
'simple', 'child', 'parent', 'grandparent'
]);
expect(log[0].component instanceof SimpleCmp).toBeTruthy();
[1, 2, 3].forEach(i => expect(log[i].component).toBeNull());
expect(child instanceof SimpleCmp).toBeTruthy();
expect(child).not.toBe(log[0].component);
})));
it('works with aux routes',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'two-outlets',
component: TwoOutletsCmp,
children: [
{path: 'a', component: BlankCmp}, {
path: 'b',
canDeactivate: ['RecordingDeactivate'],
component: SimpleCmp,
outlet: 'aux'
}
]
}]);
router.navigateByUrl('/two-outlets/(a//aux:b)');
advance(fixture);
expect(location.path()).toEqual('/two-outlets/(a//aux:b)');
router.navigate(['two-outlets', {outlets: {aux: null}}]);
advance(fixture);
expect(log.map((a: any) => a.path)).toEqual(['b']);
expect(location.path()).toEqual('/two-outlets/a');
})));
it('works with a nested route',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [
{path: '', pathMatch: 'full', component: SimpleCmp},
{path: 'user/:name', component: UserCmp, canDeactivate: ['CanDeactivateUser']}
]
}]);
router.navigateByUrl('/team/22/user/victor');
advance(fixture);
// this works because we can deactivate victor
router.navigateByUrl('/team/33');
advance(fixture);
expect(location.path()).toEqual('/team/33');
router.navigateByUrl('/team/33/user/fedor');
advance(fixture);
// this doesn't work cause we cannot deactivate fedor
router.navigateByUrl('/team/44');
advance(fixture);
expect(location.path()).toEqual('/team/33/user/fedor');
})));
});
it('should use correct component to deactivate forChild route',
fakeAsync(inject([Router], (router: Router) => {
@Component({selector: 'admin', template: ''})
class AdminComponent {
}
@NgModule({
declarations: [AdminComponent],
imports: [RouterModule.forChild([{
path: '',
component: AdminComponent,
canDeactivate: ['RecordingDeactivate'],
}])],
})
class LazyLoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{
path: 'a',
component: WrapperCmp,
children: [
{path: '', pathMatch: 'full', loadChildren: () => LazyLoadedModule},
]
},
{path: 'b', component: SimpleCmp},
]);
router.navigateByUrl('/a');
advance(fixture);
router.navigateByUrl('/b');
advance(fixture);
expect(log[0].component).toBeInstanceOf(AdminComponent);
})));
it('should not create a route state if navigation is canceled',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'main',
component: TeamCmp,
children: [
{path: 'component1', component: SimpleCmp, canDeactivate: ['alwaysFalse']},
{path: 'component2', component: SimpleCmp}
]
}]);
router.navigateByUrl('/main/component1');
advance(fixture);
router.navigateByUrl('/main/component2');
advance(fixture);
const teamCmp = fixture.debugElement.children[1].componentInstance;
expect(teamCmp.route.firstChild.url.value[0].path).toEqual('component1');
expect(location.path()).toEqual('/main/component1');
})));
it('should not run CanActivate when CanDeactivate returns false',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'main',
component: TeamCmp,
children: [
{
path: 'component1',
component: SimpleCmp,
canDeactivate: ['alwaysFalseWithDelayAndLogging']
},
{
path: 'component2',
component: SimpleCmp,
canActivate: ['canActivate_alwaysTrueAndLogging']
},
]
}]);
router.navigateByUrl('/main/component1');
advance(fixture);
expect(location.path()).toEqual('/main/component1');
router.navigateByUrl('/main/component2');
advance(fixture);
expect(location.path()).toEqual('/main/component1');
expect(log).toEqual(['called']);
})));
it('should call guards every time when navigating to the same url over and over again',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'simple', component: SimpleCmp, canDeactivate: ['alwaysFalseAndLogging']},
{path: 'blank', component: BlankCmp}
]);
router.navigateByUrl('/simple');
advance(fixture);
router.navigateByUrl('/blank');
advance(fixture);
expect(log).toEqual(['called']);
expect(location.path()).toEqual('/simple');
router.navigateByUrl('/blank');
advance(fixture);
expect(log).toEqual(['called', 'called']);
expect(location.path()).toEqual('/simple');
})));
describe('next state', () => {
let log: string[];
class ClassWithNextState {
canDeactivate(
component: TeamCmp, currentRoute: ActivatedRouteSnapshot,
currentState: RouterStateSnapshot, nextState: RouterStateSnapshot): boolean {
log.push(currentState.url, nextState.url);
return true;
}
}
beforeEach(() => {
log = [];
TestBed.configureTestingModule({
providers: [
ClassWithNextState, {
provide: 'FunctionWithNextState',
useValue:
(cmp: any, currentRoute: ActivatedRouteSnapshot,
currentState: RouterStateSnapshot, nextState: RouterStateSnapshot) => {
log.push(currentState.url, nextState.url);
return true;
}
}
]
});
});
it('should pass next state as the 4 argument when guard is a class',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
canDeactivate:
[(component: TeamCmp, currentRoute: ActivatedRouteSnapshot,
currentState: RouterStateSnapshot, nextState: RouterStateSnapshot) =>
coreInject(ClassWithNextState)
.canDeactivate(component, currentRoute, currentState, nextState)]
}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
router.navigateByUrl('/team/33');
advance(fixture);
expect(location.path()).toEqual('/team/33');
expect(log).toEqual(['/team/22', '/team/33']);
})));
it('should pass next state as the 4 argument when guard is a function',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'team/:id', component: TeamCmp, canDeactivate: ['FunctionWithNextState']}
]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
router.navigateByUrl('/team/33');
advance(fixture);
expect(location.path()).toEqual('/team/33');
expect(log).toEqual(['/team/22', '/team/33']);
})));
});
describe('should work when given a class', () => {
class AlwaysTrue {
canDeactivate(): boolean {
return true;
}
}
beforeEach(() => {
TestBed.configureTestingModule({providers: [AlwaysTrue]});
});
it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
canDeactivate: [() => coreInject(AlwaysTrue).canDeactivate()]
}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
router.navigateByUrl('/team/33');
advance(fixture);
expect(location.path()).toEqual('/team/33');
})));
});
describe('should work when returns an observable', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [{
provide: 'CanDeactivate',
useValue: (c: TeamCmp, a: ActivatedRouteSnapshot, b: RouterStateSnapshot) => {
return new Observable<boolean>((observer) => {
observer.next(false);
});
}
}]
});
});
it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig(
[{path: 'team/:id', component: TeamCmp, canDeactivate: ['CanDeactivate']}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
router.navigateByUrl('/team/33');
advance(fixture);
expect(location.path()).toEqual('/team/22');
})));
});
});
describe('CanActivateChild', () => {
describe('should be invoked when activating a child', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [{
provide: 'alwaysFalse',
useValue: (a: any, b: any) => a.paramMap.get('id') === '22',
}]
});
});
it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: '',
canActivateChild: ['alwaysFalse'],
children: [{path: 'team/:id', component: TeamCmp}]
}]);
router.navigateByUrl('/team/22');
advance(fixture);
expect(location.path()).toEqual('/team/22');
router.navigateByUrl('/team/33')!.catch(() => {});
advance(fixture);
expect(location.path()).toEqual('/team/22');
})));
});
it('should find the guard provided in lazy loaded module',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
@Component({selector: 'admin', template: '<router-outlet></router-outlet>'})
class AdminComponent {
}
@Component({selector: 'lazy', template: 'lazy-loaded'})
class LazyLoadedComponent {
}
@NgModule({
declarations: [AdminComponent, LazyLoadedComponent],
imports: [RouterModule.forChild([{
path: '',
component: AdminComponent,
children: [{
path: '',
canActivateChild: ['alwaysTrue'],
children: [{path: '', component: LazyLoadedComponent}]
}]
}])],
providers: [{provide: 'alwaysTrue', useValue: () => true}],
})
class LazyLoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'admin', loadChildren: () => LazyLoadedModule}]);
router.navigateByUrl('/admin');
advance(fixture);
expect(location.path()).toEqual('/admin');
expect(fixture.nativeElement).toHaveText('lazy-loaded');
})));
});
describe('CanLoad', () => {
let canLoadRunCount = 0;
beforeEach(() => {
canLoadRunCount = 0;
TestBed.configureTestingModule({
providers: [
{provide: 'alwaysFalse', useValue: (a: any) => false},
{
provide: 'returnUrlTree',
useFactory: (router: Router) => () => {
return router.createUrlTree(['blank']);
},
deps: [Router],
},
{
provide: 'returnFalseAndNavigate',
useFactory: (router: Router) => (a: any) => {
router.navigate(['blank']);
return false;
},
deps: [Router],
},
{
provide: 'alwaysTrue',
useValue: () => {
canLoadRunCount++;
return true;
}
},
]
});
});
it('should not load children when CanLoad returns false',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
@Component({selector: 'lazy', template: 'lazy-loaded'})
class LazyLoadedComponent {
}
@NgModule({
declarations: [LazyLoadedComponent],
imports: [RouterModule.forChild([{path: 'loaded', component: LazyLoadedComponent}])]
})
class LoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'lazyFalse', canLoad: ['alwaysFalse'], loadChildren: () => LoadedModule},
{path: 'lazyTrue', canLoad: ['alwaysTrue'], loadChildren: () => LoadedModule}
]);
const recordedEvents: Event[] = [];
router.events.forEach(e => recordedEvents.push(e));
// failed navigation
router.navigateByUrl('/lazyFalse/loaded');
advance(fixture);
expect(location.path()).toEqual('');
expectEvents(recordedEvents, [
[NavigationStart, '/lazyFalse/loaded'],
// [GuardsCheckStart, '/lazyFalse/loaded'],
[NavigationCancel, '/lazyFalse/loaded'],
]);
expect((recordedEvents[1] as NavigationCancel).code)
.toBe(NavigationCancellationCode.GuardRejected);
recordedEvents.splice(0);
// successful navigation
router.navigateByUrl('/lazyTrue/loaded');
advance(fixture);
expect(location.path()).toEqual('/lazyTrue/loaded');
expectEvents(recordedEvents, [
[NavigationStart, '/lazyTrue/loaded'],
[RouteConfigLoadStart],
[RouteConfigLoadEnd],
[RoutesRecognized, '/lazyTrue/loaded'],
[GuardsCheckStart, '/lazyTrue/loaded'],
[ChildActivationStart],
[ActivationStart],
[ChildActivationStart],
[ActivationStart],
[GuardsCheckEnd, '/lazyTrue/loaded'],
[ResolveStart, '/lazyTrue/loaded'],
[ResolveEnd, '/lazyTrue/loaded'],
[ActivationEnd],
[ChildActivationEnd],
[ActivationEnd],
[ChildActivationEnd],
[NavigationEnd, '/lazyTrue/loaded'],
]);
})));
it('should support navigating from within the guard',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{
path: 'lazyFalse',
canLoad: ['returnFalseAndNavigate'],
loadChildren: jasmine.createSpy('lazyFalse')
},
{path: 'blank', component: BlankCmp}
]);
const recordedEvents: Event[] = [];
router.events.forEach(e => recordedEvents.push(e));
router.navigateByUrl('/lazyFalse/loaded');
advance(fixture);
expect(location.path()).toEqual('/blank');
expectEvents(recordedEvents, [
[NavigationStart, '/lazyFalse/loaded'],
// No GuardCheck events as `canLoad` is a special guard that's not actually part of
// the guard lifecycle.
[NavigationCancel, '/lazyFalse/loaded'],
[NavigationStart, '/blank'], [RoutesRecognized, '/blank'],
[GuardsCheckStart, '/blank'], [ChildActivationStart], [ActivationStart],
[GuardsCheckEnd, '/blank'], [ResolveStart, '/blank'], [ResolveEnd, '/blank'],
[ActivationEnd], [ChildActivationEnd], [NavigationEnd, '/blank']
]);
expect((recordedEvents[1] as NavigationCancel).code)
.toBe(NavigationCancellationCode.SupersededByNewNavigation);
})));
it('should support returning UrlTree from within the guard',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{
path: 'lazyFalse',
canLoad: ['returnUrlTree'],
loadChildren: jasmine.createSpy('lazyFalse')
},
{path: 'blank', component: BlankCmp}
]);
const recordedEvents: Event[] = [];
router.events.forEach(e => recordedEvents.push(e));
router.navigateByUrl('/lazyFalse/loaded');
advance(fixture);
expect(location.path()).toEqual('/blank');
expectEvents(recordedEvents, [
[NavigationStart, '/lazyFalse/loaded'],
// No GuardCheck events as `canLoad` is a special guard that's not actually part of
// the guard lifecycle.
[NavigationCancel, '/lazyFalse/loaded'],
[NavigationStart, '/blank'], [RoutesRecognized, '/blank'],
[GuardsCheckStart, '/blank'], [ChildActivationStart], [ActivationStart],
[GuardsCheckEnd, '/blank'], [ResolveStart, '/blank'], [ResolveEnd, '/blank'],
[ActivationEnd], [ChildActivationEnd], [NavigationEnd, '/blank']
]);
expect((recordedEvents[1] as NavigationCancel).code)
.toBe(NavigationCancellationCode.Redirect);
})));
// Regression where navigateByUrl with false CanLoad no longer resolved `false` value on
// navigateByUrl promise: https://github.com/angular/angular/issues/26284
it('should resolve navigateByUrl promise after CanLoad executes',
fakeAsync(inject([Router], (router: Router) => {
@Component({selector: 'lazy', template: 'lazy-loaded'})
class LazyLoadedComponent {
}
@NgModule({
declarations: [LazyLoadedComponent],
imports: [RouterModule.forChild([{path: 'loaded', component: LazyLoadedComponent}])]
})
class LazyLoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'lazy-false', canLoad: ['alwaysFalse'], loadChildren: () => LazyLoadedModule},
{path: 'lazy-true', canLoad: ['alwaysTrue'], loadChildren: () => LazyLoadedModule},
]);
let navFalseResult = true;
let navTrueResult = false;
router.navigateByUrl('/lazy-false').then(v => {
navFalseResult = v;
});
advance(fixture);
router.navigateByUrl('/lazy-true').then(v => {
navTrueResult = v;
});
advance(fixture);
expect(navFalseResult).toBe(false);
expect(navTrueResult).toBe(true);
})));
it('should execute CanLoad only once',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
@Component({selector: 'lazy', template: 'lazy-loaded'})
class LazyLoadedComponent {
}
@NgModule({
declarations: [LazyLoadedComponent],
imports: [RouterModule.forChild([{path: 'loaded', component: LazyLoadedComponent}])]
})
class LazyLoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig(
[{path: 'lazy', canLoad: ['alwaysTrue'], loadChildren: () => LazyLoadedModule}]);
router.navigateByUrl('/lazy/loaded');
advance(fixture);
expect(location.path()).toEqual('/lazy/loaded');
expect(canLoadRunCount).toEqual(1);
router.navigateByUrl('/');
advance(fixture);
expect(location.path()).toEqual('');
router.navigateByUrl('/lazy/loaded');
advance(fixture);
expect(location.path()).toEqual('/lazy/loaded');
expect(canLoadRunCount).toEqual(1);
})));
it('cancels guard execution when a new navigation happens', fakeAsync(() => {
@Injectable({providedIn: 'root'})
class DelayedGuard {
static delayedExecutions = 0;
static canLoadCalls = 0;
canLoad() {
DelayedGuard.canLoadCalls++;
return of(true).pipe(delay(1000), tap(() => {
DelayedGuard.delayedExecutions++;
}));
}
}
const router = TestBed.inject(Router);
router.resetConfig([
{path: 'a', canLoad: [DelayedGuard], loadChildren: () => [], component: SimpleCmp},
{path: 'team/:id', component: TeamCmp},
]);
const fixture = createRoot(router, RootCmp);
router.navigateByUrl('/a');
tick(10);
// The delayed guard should have started
expect(DelayedGuard.canLoadCalls).toEqual(1);
router.navigateByUrl('/team/1');
advance(fixture, 1000);
expect(fixture.nativeElement.innerHTML).toContain('team');
// The delayed guard should not execute the delayed condition because a new navigation
// cancels the current one and unsubscribes from intermediate results.
expect(DelayedGuard.delayedExecutions).toEqual(0);
}));
});
describe('should run CanLoad guards concurrently', () => {
function delayObservable(delayMs: number): Observable<boolean> {
return of(delayMs).pipe(delay(delayMs), mapTo(true));
}
let log: string[];
beforeEach(() => {
log = [];
TestBed.configureTestingModule({
providers: [
{
provide: 'guard1',
useValue: () => {
return delayObservable(5).pipe(tap({next: () => log.push('guard1')}));
}
},
{
provide: 'guard2',
useValue: () => {
return delayObservable(0).pipe(tap({next: () => log.push('guard2')}));
}
},
{
provide: 'returnFalse',
useValue: () => {
log.push('returnFalse');
return false;
}
},
{
provide: 'returnFalseAndNavigate',
useFactory: (router: Router) => () => {
log.push('returnFalseAndNavigate');
router.navigateByUrl('/redirected');
return false;
},
deps: [Router]
},
{
provide: 'returnUrlTree',
useFactory: (router: Router) => () => {
return delayObservable(15).pipe(
mapTo(router.parseUrl('/redirected')),
tap({next: () => log.push('returnUrlTree')}));
},
deps: [Router]
},
]
});
});
it('should only execute canLoad guards of routes being activated', fakeAsync(() => {
const router = TestBed.inject(Router);
router.resetConfig([
{path: 'lazy', canLoad: ['guard1'], loadChildren: () => of(ModuleWithBlankCmpAsRoute)},
{path: 'redirected', component: SimpleCmp},
// canLoad should not run for this route because 'lazy' activates first
{
path: '',
canLoad: ['returnFalseAndNavigate'],
loadChildren: () => of(ModuleWithBlankCmpAsRoute)
},
]);
router.navigateByUrl('/lazy');
tick(5);
expect(log.length).toEqual(1);
expect(log).toEqual(['guard1']);
}));
it('should execute canLoad guards', fakeAsync(inject([Router], (router: Router) => {
router.resetConfig([{
path: 'lazy',
canLoad: ['guard1', 'guard2'],
loadChildren: () => ModuleWithBlankCmpAsRoute
}]);
router.navigateByUrl('/lazy');
tick(5);
expect(log.length).toEqual(2);
expect(log).toEqual(['guard2', 'guard1']);
})));
it('should redirect with UrlTree if higher priority guards have resolved',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
router.resetConfig([
{
path: 'lazy',
canLoad: ['returnUrlTree', 'guard1', 'guard2'],
loadChildren: () => ModuleWithBlankCmpAsRoute
},
{path: 'redirected', component: SimpleCmp}
]);
router.navigateByUrl('/lazy');
tick(15);
expect(log.length).toEqual(3);
expect(log).toEqual(['guard2', 'guard1', 'returnUrlTree']);
expect(location.path()).toEqual('/redirected');
})));
it('should redirect with UrlTree if UrlTree is lower priority',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
router.resetConfig([
{
path: 'lazy',
canLoad: ['guard1', 'returnUrlTree'],
loadChildren: () => ModuleWithBlankCmpAsRoute
},
{path: 'redirected', component: SimpleCmp}
]);
router.navigateByUrl('/lazy');
tick(15);
expect(log.length).toEqual(2);
expect(log).toEqual(['guard1', 'returnUrlTree']);
expect(location.path()).toEqual('/redirected');
})));
});
describe('order', () => {
class Logger {
logs: string[] = [];
add(thing: string) {
this.logs.push(thing);
}
}
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
Logger, {
provide: 'canActivateChild_parent',
useFactory: (logger: Logger) => () => (logger.add('canActivateChild_parent'), true),
deps: [Logger]
},
{
provide: 'canActivate_team',
useFactory: (logger: Logger) => () => (logger.add('canActivate_team'), true),
deps: [Logger]
},
{
provide: 'canDeactivate_team',
useFactory: (logger: Logger) => () => (logger.add('canDeactivate_team'), true),
deps: [Logger]
},
{
provide: 'canDeactivate_simple',
useFactory: (logger: Logger) => () => (logger.add('canDeactivate_simple'), true),
deps: [Logger]
}
]
});
});
it('should call guards in the right order',
fakeAsync(inject(
[Router, Location, Logger], (router: Router, location: Location, logger: Logger) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: '',
canActivateChild: ['canActivateChild_parent'],
children: [{
path: 'team/:id',
canActivate: ['canActivate_team'],
canDeactivate: ['canDeactivate_team'],
component: TeamCmp
}]
}]);
router.navigateByUrl('/team/22');
advance(fixture);
router.navigateByUrl('/team/33');
advance(fixture);
expect(logger.logs).toEqual([
'canActivateChild_parent', 'canActivate_team',
'canDeactivate_team', 'canActivateChild_parent', 'canActivate_team'
]);
})));
it('should call deactivate guards from bottom to top',
fakeAsync(inject(
[Router, Location, Logger], (router: Router, location: Location, logger: Logger) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: '',
children: [{
path: 'team/:id',
canDeactivate: ['canDeactivate_team'],
children:
[{path: '', component: SimpleCmp, canDeactivate: ['canDeactivate_simple']}],
component: TeamCmp
}]
}]);
router.navigateByUrl('/team/22');
advance(fixture);
router.navigateByUrl('/team/33');
advance(fixture);
expect(logger.logs).toEqual(['canDeactivate_simple', 'canDeactivate_team']);
})));
});
describe('canMatch', () => {
@Injectable({providedIn: 'root'})
class ConfigurableGuard {
result: Promise<boolean|UrlTree>|Observable<boolean|UrlTree>|boolean|UrlTree = false;
canMatch() {
return this.result;
}
}
it('falls back to second route when canMatch returns false', fakeAsync(() => {
const router = TestBed.inject(Router);
router.resetConfig([
{
path: 'a',
canMatch: [() => coreInject(ConfigurableGuard).canMatch()],
component: BlankCmp
},
{path: 'a', component: SimpleCmp},
]);
const fixture = createRoot(router, RootCmp);
router.navigateByUrl('/a');
advance(fixture);
expect(fixture.nativeElement.innerHTML).toContain('simple');
}));
it('uses route when canMatch returns true', fakeAsync(() => {
const router = TestBed.inject(Router);
TestBed.inject(ConfigurableGuard).result = Promise.resolve(true);
router.resetConfig([
{
path: 'a',
canMatch: [() => coreInject(ConfigurableGuard).canMatch()],
component: SimpleCmp
},
{path: 'a', component: BlankCmp},
]);
const fixture = createRoot(router, RootCmp);
router.navigateByUrl('/a');
advance(fixture);
expect(fixture.nativeElement.innerHTML).toContain('simple');
}));
it('can return UrlTree from canMatch guard', fakeAsync(() => {
const router = TestBed.inject(Router);
TestBed.inject(ConfigurableGuard).result =
Promise.resolve(router.createUrlTree(['/team/1']));
router.resetConfig([
{
path: 'a',
canMatch: [() => coreInject(ConfigurableGuard).canMatch()],
component: SimpleCmp
},
{path: 'team/:id', component: TeamCmp},
]);
const fixture = createRoot(router, RootCmp);
router.navigateByUrl('/a');
advance(fixture);
expect(fixture.nativeElement.innerHTML).toContain('team');
}));
it('can return UrlTree from CanMatchFn guard', fakeAsync(() => {
const canMatchTeamSection = new InjectionToken('CanMatchTeamSection');
const canMatchFactory: (router: Router) => CanMatchFn = (router: Router) => () =>
router.createUrlTree(['/team/1']);
TestBed.overrideProvider(
canMatchTeamSection, {useFactory: canMatchFactory, deps: [Router]});
const router = TestBed.inject(Router);
router.resetConfig([
{path: 'a', canMatch: [canMatchTeamSection], component: SimpleCmp},
{path: 'team/:id', component: TeamCmp},
]);
const fixture = createRoot(router, RootCmp);
router.navigateByUrl('/a');
advance(fixture);
expect(fixture.nativeElement.innerHTML).toContain('team');
}));
it('runs canMatch guards provided in lazy module', fakeAsync(() => {
const router = TestBed.inject(Router);
@Component(
{selector: 'lazy', template: 'lazy-loaded-parent [<router-outlet></router-outlet>]'})
class ParentLazyLoadedComponent {
}
@Component({selector: 'lazy', template: 'lazy-loaded-child'})
class ChildLazyLoadedComponent {
}
@Injectable()
class LazyCanMatchFalse {
canMatch() {
return false;
}
}
@Component({template: 'restricted'})
class Restricted {
}
@NgModule({
declarations: [ParentLazyLoadedComponent, ChildLazyLoadedComponent, Restricted],
providers: [LazyCanMatchFalse],
imports: [RouterModule.forChild([
{
path: 'loaded',
canMatch: [LazyCanMatchFalse],
component: Restricted,
children: [{path: 'child', component: Restricted}],
},
{
path: 'loaded',
component: ParentLazyLoadedComponent,
children: [{path: 'child', component: ChildLazyLoadedComponent}]
}
])]
})
class LoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'lazy', loadChildren: () => LoadedModule}]);
router.navigateByUrl('/lazy/loaded/child');
advance(fixture);
expect(TestBed.inject(Location).path()).toEqual('/lazy/loaded/child');
expect(fixture.nativeElement).toHaveText('lazy-loaded-parent [lazy-loaded-child]');
}));
it('cancels guard execution when a new navigation happens', fakeAsync(() => {
@Injectable({providedIn: 'root'})
class DelayedGuard {
static delayedExecutions = 0;
canMatch() {
return of(true).pipe(delay(1000), tap(() => {
DelayedGuard.delayedExecutions++;
}));
}
}
const router = TestBed.inject(Router);
const delayedGuardSpy = spyOn(TestBed.inject(DelayedGuard), 'canMatch');
delayedGuardSpy.and.callThrough();
const configurableMatchSpy = spyOn(TestBed.inject(ConfigurableGuard), 'canMatch');
configurableMatchSpy.and.callFake(() => {
router.navigateByUrl('/team/1');
return false;
});
router.resetConfig([
{path: 'a', canMatch: [ConfigurableGuard, DelayedGuard], component: SimpleCmp},
{path: 'a', canMatch: [ConfigurableGuard, DelayedGuard], component: SimpleCmp},
{path: 'a', canMatch: [ConfigurableGuard, DelayedGuard], component: SimpleCmp},
{path: 'team/:id', component: TeamCmp},
]);
const fixture = createRoot(router, RootCmp);
router.navigateByUrl('/a');
advance(fixture);
expect(fixture.nativeElement.innerHTML).toContain('team');
expect(configurableMatchSpy.calls.count()).toEqual(1);
// The delayed guard should not execute the delayed condition because the other guard
// initiates a new navigation, which cancels the current one and unsubscribes from
// intermediate results.
expect(DelayedGuard.delayedExecutions).toEqual(0);
// The delayed guard should still have executed once because guards are executed at the
// same time
expect(delayedGuardSpy.calls.count()).toEqual(1);
}));
});
it('should allow guards as functions', fakeAsync(() => {
@Component({
template: '',
standalone: true,
})
class BlankCmp {
}
const router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmp);
const guards = {
canActivate() {
return true;
},
canDeactivate() {
return true;
},
canActivateChild() {
return true;
},
canMatch() {
return true;
},
canLoad() {
return true;
}
};
spyOn(guards, 'canActivate').and.callThrough();
spyOn(guards, 'canActivateChild').and.callThrough();
spyOn(guards, 'canDeactivate').and.callThrough();
spyOn(guards, 'canLoad').and.callThrough();
spyOn(guards, 'canMatch').and.callThrough();
router.resetConfig([
{
path: '',
component: BlankCmp,
loadChildren: () => [{path: '', component: BlankCmp}],
canActivate: [guards.canActivate],
canActivateChild: [guards.canActivateChild],
canLoad: [guards.canLoad],
canDeactivate: [guards.canDeactivate],
canMatch: [guards.canMatch],
},
{
path: 'other',
component: BlankCmp,
}
]);
router.navigateByUrl('/');
advance(fixture);
expect(guards.canMatch).toHaveBeenCalled();
expect(guards.canLoad).toHaveBeenCalled();
expect(guards.canActivate).toHaveBeenCalled();
expect(guards.canActivateChild).toHaveBeenCalled();
router.navigateByUrl('/other');
advance(fixture);
expect(guards.canDeactivate).toHaveBeenCalled();
}));
it('should allow DI in plain function guards', fakeAsync(() => {
@Component({
template: '',
standalone: true,
})
class BlankCmp {
}
@Injectable({providedIn: 'root'})
class State {
value = true;
}
const router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmp);
const guards = {
canActivate() {
return coreInject(State).value;
},
canDeactivate() {
return coreInject(State).value;
},
canActivateChild() {
return coreInject(State).value;
},
canMatch() {
return coreInject(State).value;
},
canLoad() {
return coreInject(State).value;
}
};
spyOn(guards, 'canActivate').and.callThrough();
spyOn(guards, 'canActivateChild').and.callThrough();
spyOn(guards, 'canDeactivate').and.callThrough();
spyOn(guards, 'canLoad').and.callThrough();
spyOn(guards, 'canMatch').and.callThrough();
router.resetConfig([
{
path: '',
component: BlankCmp,
loadChildren: () => [{path: '', component: BlankCmp}],
canActivate: [guards.canActivate],
canActivateChild: [guards.canActivateChild],
canLoad: [guards.canLoad],
canDeactivate: [guards.canDeactivate],
canMatch: [guards.canMatch],
},
{
path: 'other',
component: BlankCmp,
}
]);
router.navigateByUrl('/');
advance(fixture);
expect(guards.canMatch).toHaveBeenCalled();
expect(guards.canLoad).toHaveBeenCalled();
expect(guards.canActivate).toHaveBeenCalled();
expect(guards.canActivateChild).toHaveBeenCalled();
router.navigateByUrl('/other');
advance(fixture);
expect(guards.canDeactivate).toHaveBeenCalled();
}));
it('can run functional guards serially', fakeAsync(() => {
function runSerially(guards: CanActivateFn[]|CanActivateChildFn[]): CanActivateFn|
CanActivateChildFn {
return (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
const injector = coreInject(EnvironmentInjector);
const observables = guards.map(guard => {
const guardResult = injector.runInContext(() => guard(route, state));
return wrapIntoObservable(guardResult).pipe(first());
});
return concat(...observables).pipe(takeWhile(v => v === true), last());
};
}
const guardDone: string[] = [];
const guard1: CanActivateFn = () =>
of(true).pipe(delay(100), tap(() => guardDone.push('guard1')));
const guard2: CanActivateFn = () => of(true).pipe(tap(() => guardDone.push('guard2')));
const guard3: CanActivateFn = () =>
of(true).pipe(delay(50), tap(() => guardDone.push('guard3')));
const guard4: CanActivateFn = () =>
of(true).pipe(delay(200), tap(() => guardDone.push('guard4')));
const router = TestBed.inject(Router);
router.resetConfig([{
path: '**',
component: BlankCmp,
canActivate: [runSerially([guard1, guard2, guard3, guard4])]
}]);
router.navigateByUrl('');
tick(100);
expect(guardDone).toEqual(['guard1', 'guard2']);
tick(50);
expect(guardDone).toEqual(['guard1', 'guard2', 'guard3']);
tick(200);
expect(guardDone).toEqual(['guard1', 'guard2', 'guard3', 'guard4']);
}));
});
describe('route events', () => {
it('should fire matching (Child)ActivationStart/End events',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'user/:name', component: UserCmp}]);
const recordedEvents: Event[] = [];
router.events.forEach(e => recordedEvents.push(e));
router.navigateByUrl('/user/fedor');
advance(fixture);
const event3 = recordedEvents[3] as ChildActivationStart;
const event9 = recordedEvents[9] as ChildActivationEnd;
expect(fixture.nativeElement).toHaveText('user fedor');
expect(event3 instanceof ChildActivationStart).toBe(true);
expect(event3.snapshot).toBe(event9.snapshot.root);
expect(event9 instanceof ChildActivationEnd).toBe(true);
expect(event9.snapshot).toBe(event9.snapshot.root);
const event4 = recordedEvents[4] as ActivationStart;
const event8 = recordedEvents[8] as ActivationEnd;
expect(event4 instanceof ActivationStart).toBe(true);
expect(event4.snapshot.routeConfig?.path).toBe('user/:name');
expect(event8 instanceof ActivationEnd).toBe(true);
expect(event8.snapshot.routeConfig?.path).toBe('user/:name');
expectEvents(recordedEvents, [
[NavigationStart, '/user/fedor'], [RoutesRecognized, '/user/fedor'],
[GuardsCheckStart, '/user/fedor'], [ChildActivationStart], [ActivationStart],
[GuardsCheckEnd, '/user/fedor'], [ResolveStart, '/user/fedor'],
[ResolveEnd, '/user/fedor'], [ActivationEnd], [ChildActivationEnd],
[NavigationEnd, '/user/fedor']
]);
})));
it('should allow redirection in NavigationStart',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'blank', component: UserCmp},
{path: 'user/:name', component: BlankCmp},
]);
const navigateSpy = spyOn(router, 'navigate').and.callThrough();
const recordedEvents: Event[] = [];
const navStart$ = router.events.pipe(
tap(e => recordedEvents.push(e)),
filter((e): e is NavigationStart => e instanceof NavigationStart), first());
navStart$.subscribe((e: NavigationStart|NavigationError) => {
router.navigate(
['/blank'], {queryParams: {state: 'redirected'}, queryParamsHandling: 'merge'});
advance(fixture);
});
router.navigate(['/user/:fedor']);
advance(fixture);
expect(navigateSpy.calls.mostRecent().args[1]!.queryParams);
})));
it('should stop emitting events after the router is destroyed',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'user/:name', component: UserCmp}]);
let events = 0;
const subscription = router.events.subscribe(() => events++);
router.navigateByUrl('/user/frodo');
advance(fixture);
expect(events).toBeGreaterThan(0);
const previousCount = events;
router.dispose();
router.navigateByUrl('/user/bilbo');
advance(fixture);
expect(events).toBe(previousCount);
subscription.unsubscribe();
})));
it('should resolve navigation promise with false after the router is destroyed',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
let result = null as boolean | null;
const callback = (r: boolean) => result = r;
router.resetConfig([{path: 'user/:name', component: UserCmp}]);
router.navigateByUrl('/user/frodo').then(callback);
advance(fixture);
expect(result).toBe(true);
result = null as boolean | null;
router.dispose();
router.navigateByUrl('/user/bilbo').then(callback);
advance(fixture);
expect(result).toBe(false);
result = null as boolean | null;
router.navigate(['/user/bilbo']).then(callback);
advance(fixture);
expect(result).toBe(false);
})));
});
describe('routerLinkActive', () => {
it('should set the class when the link is active (a tag)',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [{
path: 'link',
component: DummyLinkCmp,
children: [{path: 'simple', component: SimpleCmp}, {path: '', component: BlankCmp}]
}]
}]);
router.navigateByUrl('/team/22/link;exact=true');
advance(fixture);
advance(fixture);
expect(location.path()).toEqual('/team/22/link;exact=true');
const nativeLink = fixture.nativeElement.querySelector('a');
const nativeButton = fixture.nativeElement.querySelector('button');
expect(nativeLink.className).toEqual('active');
expect(nativeButton.className).toEqual('active');
router.navigateByUrl('/team/22/link/simple');
advance(fixture);
expect(location.path()).toEqual('/team/22/link/simple');
expect(nativeLink.className).toEqual('');
expect(nativeButton.className).toEqual('');
})));
it('should not set the class until the first navigation succeeds', fakeAsync(() => {
@Component({
template:
'<router-outlet></router-outlet><a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}" ></a>'
})
class RootCmpWithLink {
}
TestBed.configureTestingModule({declarations: [RootCmpWithLink]});
const router: Router = TestBed.inject(Router);
const f = TestBed.createComponent(RootCmpWithLink);
advance(f);
const link = f.nativeElement.querySelector('a');
expect(link.className).toEqual('');
router.initialNavigation();
advance(f);
expect(link.className).toEqual('active');
}));
it('should set the class on a parent element when the link is active',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [{
path: 'link',
component: DummyLinkWithParentCmp,
children: [{path: 'simple', component: SimpleCmp}, {path: '', component: BlankCmp}]
}]
}]);
router.navigateByUrl('/team/22/link;exact=true');
advance(fixture);
advance(fixture);
expect(location.path()).toEqual('/team/22/link;exact=true');
const native = fixture.nativeElement.querySelector('#link-parent');
expect(native.className).toEqual('active');
router.navigateByUrl('/team/22/link/simple');
advance(fixture);
expect(location.path()).toEqual('/team/22/link/simple');
expect(native.className).toEqual('');
})));
it('should set the class when the link is active',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [{
path: 'link',
component: DummyLinkCmp,
children: [{path: 'simple', component: SimpleCmp}, {path: '', component: BlankCmp}]
}]
}]);
router.navigateByUrl('/team/22/link');
advance(fixture);
advance(fixture);
expect(location.path()).toEqual('/team/22/link');
const native = fixture.nativeElement.querySelector('a');
expect(native.className).toEqual('active');
router.navigateByUrl('/team/22/link/simple');
advance(fixture);
expect(location.path()).toEqual('/team/22/link/simple');
expect(native.className).toEqual('active');
})));
it('should expose an isActive property', fakeAsync(() => {
@Component({
template: `<a routerLink="/team" routerLinkActive #rla="routerLinkActive"></a>
<p>{{rla.isActive}}</p>
<span *ngIf="rla.isActive"></span>
<span [ngClass]="{'highlight': rla.isActive}"></span>
<router-outlet></router-outlet>`
})
class ComponentWithRouterLink {
}
TestBed.configureTestingModule({declarations: [ComponentWithRouterLink]});
const router: Router = TestBed.inject(Router);
router.resetConfig([
{
path: 'team',
component: TeamCmp,
},
{
path: 'otherteam',
component: TeamCmp,
}
]);
const fixture = TestBed.createComponent(ComponentWithRouterLink);
router.navigateByUrl('/team');
expect(() => advance(fixture)).not.toThrow();
advance(fixture);
const paragraph = fixture.nativeElement.querySelector('p');
expect(paragraph.textContent).toEqual('true');
router.navigateByUrl('/otherteam');
advance(fixture);
advance(fixture);
expect(paragraph.textContent).toEqual('false');
}));
it('should not trigger change detection when active state has not changed', fakeAsync(() => {
@Component({
template: `<div id="link" routerLinkActive="active" [routerLink]="link"></div>`,
})
class LinkComponent {
link = 'notactive';
}
@Component({template: ''})
class SimpleComponent {
}
TestBed.configureTestingModule({
imports: [
...ROUTER_DIRECTIVES,
],
providers: [
provideRouter([{path: '', component: SimpleComponent}]),
],
declarations: [LinkComponent, SimpleComponent]
});
const fixture = createRoot(TestBed.inject(Router), LinkComponent);
fixture.componentInstance.link = 'stillnotactive';
fixture.detectChanges(false /** checkNoChanges */);
expect(TestBed.inject(NgZone).hasPendingMicrotasks).toBe(false);
}));
it('should emit on isActiveChange output when link is activated or inactivated',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [{
path: 'link',
component: DummyLinkCmp,
children: [{path: 'simple', component: SimpleCmp}, {path: '', component: BlankCmp}]
}]
}]);
router.navigateByUrl('/team/22/link;exact=true');
advance(fixture);
advance(fixture);
expect(location.path()).toEqual('/team/22/link;exact=true');
const linkComponent =
fixture.debugElement.query(By.directive(DummyLinkCmp)).componentInstance as
DummyLinkCmp;
expect(linkComponent.isLinkActivated).toEqual(true);
const nativeLink = fixture.nativeElement.querySelector('a');
const nativeButton = fixture.nativeElement.querySelector('button');
expect(nativeLink.className).toEqual('active');
expect(nativeButton.className).toEqual('active');
router.navigateByUrl('/team/22/link/simple');
advance(fixture);
expect(location.path()).toEqual('/team/22/link/simple');
expect(linkComponent.isLinkActivated).toEqual(false);
expect(nativeLink.className).toEqual('');
expect(nativeButton.className).toEqual('');
})));
it('should set a provided aria-current attribute when the link is active (a tag)',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [{
path: 'link',
component: DummyLinkCmp,
children: [{path: 'simple', component: SimpleCmp}, {path: '', component: BlankCmp}]
}]
}]);
router.navigateByUrl('/team/22/link;exact=true');
advance(fixture);
advance(fixture);
expect(location.path()).toEqual('/team/22/link;exact=true');
const nativeLink = fixture.nativeElement.querySelector('a');
const nativeButton = fixture.nativeElement.querySelector('button');
expect(nativeLink.getAttribute('aria-current')).toEqual('page');
expect(nativeButton.hasAttribute('aria-current')).toEqual(false);
router.navigateByUrl('/team/22/link/simple');
advance(fixture);
expect(location.path()).toEqual('/team/22/link/simple');
expect(nativeLink.hasAttribute('aria-current')).toEqual(false);
expect(nativeButton.hasAttribute('aria-current')).toEqual(false);
})));
});
describe('lazy loading', () => {
it('works', fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
@Component(
{selector: 'lazy', template: 'lazy-loaded-parent [<router-outlet></router-outlet>]'})
class ParentLazyLoadedComponent {
}
@Component({selector: 'lazy', template: 'lazy-loaded-child'})
class ChildLazyLoadedComponent {
}
@NgModule({
declarations: [ParentLazyLoadedComponent, ChildLazyLoadedComponent],
imports: [RouterModule.forChild([{
path: 'loaded',
component: ParentLazyLoadedComponent,
children: [{path: 'child', component: ChildLazyLoadedComponent}]
}])]
})
class LoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'lazy', loadChildren: () => LoadedModule}]);
router.navigateByUrl('/lazy/loaded/child');
advance(fixture);
expect(location.path()).toEqual('/lazy/loaded/child');
expect(fixture.nativeElement).toHaveText('lazy-loaded-parent [lazy-loaded-child]');
})));
it('should have 2 injector trees: module and element',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
@Component({
selector: 'lazy',
template: 'parent[<router-outlet></router-outlet>]',
viewProviders: [
{provide: 'shadow', useValue: 'from parent component'},
],
})
class Parent {
}
@Component({selector: 'lazy', template: 'child'})
class Child {
}
@NgModule({
declarations: [Parent],
imports: [RouterModule.forChild([{
path: 'parent',
component: Parent,
children: [
{path: 'child', loadChildren: () => ChildModule},
]
}])],
providers: [
{provide: 'moduleName', useValue: 'parent'},
{provide: 'fromParent', useValue: 'from parent'},
],
})
class ParentModule {
}
@NgModule({
declarations: [Child],
imports: [RouterModule.forChild([{path: '', component: Child}])],
providers: [
{provide: 'moduleName', useValue: 'child'},
{provide: 'fromChild', useValue: 'from child'},
{provide: 'shadow', useValue: 'from child module'},
],
})
class ChildModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'lazy', loadChildren: () => ParentModule}]);
router.navigateByUrl('/lazy/parent/child');
advance(fixture);
expect(location.path()).toEqual('/lazy/parent/child');
expect(fixture.nativeElement).toHaveText('parent[child]');
const pInj = fixture.debugElement.query(By.directive(Parent)).injector!;
const cInj = fixture.debugElement.query(By.directive(Child)).injector!;
expect(pInj.get('moduleName')).toEqual('parent');
expect(pInj.get('fromParent')).toEqual('from parent');
expect(pInj.get(Parent)).toBeInstanceOf(Parent);
expect(pInj.get('fromChild', null)).toEqual(null);
expect(pInj.get(Child, null)).toEqual(null);
expect(cInj.get('moduleName')).toEqual('child');
expect(cInj.get('fromParent')).toEqual('from parent');
expect(cInj.get('fromChild')).toEqual('from child');
expect(cInj.get(Parent)).toBeInstanceOf(Parent);
expect(cInj.get(Child)).toBeInstanceOf(Child);
// The child module can not shadow the parent component
expect(cInj.get('shadow')).toEqual('from parent component');
const pmInj = pInj.get(NgModuleRef).injector;
const cmInj = cInj.get(NgModuleRef).injector;
expect(pmInj.get('moduleName')).toEqual('parent');
expect(cmInj.get('moduleName')).toEqual('child');
expect(pmInj.get(Parent, '-')).toEqual('-');
expect(cmInj.get(Parent, '-')).toEqual('-');
expect(pmInj.get(Child, '-')).toEqual('-');
expect(cmInj.get(Child, '-')).toEqual('-');
})));
// https://github.com/angular/angular/issues/12889
it('should create a single instance of lazy-loaded modules',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
@Component(
{selector: 'lazy', template: 'lazy-loaded-parent [<router-outlet></router-outlet>]'})
class ParentLazyLoadedComponent {
}
@Component({selector: 'lazy', template: 'lazy-loaded-child'})
class ChildLazyLoadedComponent {
}
@NgModule({
declarations: [ParentLazyLoadedComponent, ChildLazyLoadedComponent],
imports: [RouterModule.forChild([{
path: 'loaded',
component: ParentLazyLoadedComponent,
children: [{path: 'child', component: ChildLazyLoadedComponent}]
}])]
})
class LoadedModule {
static instances = 0;
constructor() {
LoadedModule.instances++;
}
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'lazy', loadChildren: () => LoadedModule}]);
router.navigateByUrl('/lazy/loaded/child');
advance(fixture);
expect(fixture.nativeElement).toHaveText('lazy-loaded-parent [lazy-loaded-child]');
expect(LoadedModule.instances).toEqual(1);
})));
// https://github.com/angular/angular/issues/13870
it('should create a single instance of guards for lazy-loaded modules',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
@Injectable()
class Service {
}
@Injectable()
class Resolver {
constructor(public service: Service) {}
resolve() {
return this.service;
}
}
@Component({selector: 'lazy', template: 'lazy'})
class LazyLoadedComponent {
resolvedService: Service;
constructor(public injectedService: Service, route: ActivatedRoute) {
this.resolvedService = route.snapshot.data['service'];
}
}
@NgModule({
declarations: [LazyLoadedComponent],
providers: [Service, Resolver],
imports: [
RouterModule.forChild([{
path: 'loaded',
component: LazyLoadedComponent,
resolve: {'service': () => coreInject(Resolver).resolve()},
}]),
]
})
class LoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'lazy', loadChildren: () => LoadedModule}]);
router.navigateByUrl('/lazy/loaded');
advance(fixture);
expect(fixture.nativeElement).toHaveText('lazy');
const lzc =
fixture.debugElement.query(By.directive(LazyLoadedComponent)).componentInstance;
expect(lzc.injectedService).toBe(lzc.resolvedService);
})));
it('should emit RouteConfigLoadStart and RouteConfigLoadEnd event when route is lazy loaded',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
@Component({
selector: 'lazy',
template: 'lazy-loaded-parent [<router-outlet></router-outlet>]',
})
class ParentLazyLoadedComponent {
}
@Component({selector: 'lazy', template: 'lazy-loaded-child'})
class ChildLazyLoadedComponent {
}
@NgModule({
declarations: [ParentLazyLoadedComponent, ChildLazyLoadedComponent],
imports: [RouterModule.forChild([{
path: 'loaded',
component: ParentLazyLoadedComponent,
children: [{path: 'child', component: ChildLazyLoadedComponent}],
}])]
})
class LoadedModule {
}
const events: Array<RouteConfigLoadStart|RouteConfigLoadEnd> = [];
router.events.subscribe(e => {
if (e instanceof RouteConfigLoadStart || e instanceof RouteConfigLoadEnd) {
events.push(e);
}
});
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'lazy', loadChildren: () => LoadedModule}]);
router.navigateByUrl('/lazy/loaded/child');
advance(fixture);
expect(events.length).toEqual(2);
expect(events[0].toString()).toEqual('RouteConfigLoadStart(path: lazy)');
expect(events[1].toString()).toEqual('RouteConfigLoadEnd(path: lazy)');
})));
it('throws an error when forRoot() is used in a lazy context',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
@Component({selector: 'lazy', template: 'should not show'})
class LazyLoadedComponent {
}
@NgModule({
declarations: [LazyLoadedComponent],
imports: [RouterModule.forRoot([{path: 'loaded', component: LazyLoadedComponent}])]
})
class LoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'lazy', loadChildren: () => LoadedModule}]);
let recordedError: any = null;
router.navigateByUrl('/lazy/loaded')!.catch(err => recordedError = err);
advance(fixture);
expect(recordedError.message).toContain(`NG04007`);
})));
it('should combine routes from multiple modules into a single configuration',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
@Component({selector: 'lazy', template: 'lazy-loaded-2'})
class LazyComponent2 {
}
@NgModule({
declarations: [LazyComponent2],
imports: [RouterModule.forChild([{path: 'loaded', component: LazyComponent2}])]
})
class SiblingOfLoadedModule {
}
@Component({selector: 'lazy', template: 'lazy-loaded-1'})
class LazyComponent1 {
}
@NgModule({
declarations: [LazyComponent1],
imports: [
RouterModule.forChild([{path: 'loaded', component: LazyComponent1}]),
SiblingOfLoadedModule
]
})
class LoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'lazy1', loadChildren: () => LoadedModule},
{path: 'lazy2', loadChildren: () => SiblingOfLoadedModule}
]);
router.navigateByUrl('/lazy1/loaded');
advance(fixture);
expect(location.path()).toEqual('/lazy1/loaded');
router.navigateByUrl('/lazy2/loaded');
advance(fixture);
expect(location.path()).toEqual('/lazy2/loaded');
})));
it('should allow lazy loaded module in named outlet',
fakeAsync(inject([Router], (router: Router) => {
@Component({selector: 'lazy', template: 'lazy-loaded'})
class LazyComponent {
}
@NgModule({
declarations: [LazyComponent],
imports: [RouterModule.forChild([{path: '', component: LazyComponent}])]
})
class LazyLoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [
{path: 'user/:name', component: UserCmp},
{path: 'lazy', loadChildren: () => LazyLoadedModule, outlet: 'right'},
]
}]);
router.navigateByUrl('/team/22/user/john');
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ user john, right: ]');
router.navigateByUrl('/team/22/(user/john//right:lazy)');
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ user john, right: lazy-loaded ]');
})));
it('should allow componentless named outlet to render children',
fakeAsync(inject([Router], (router: Router) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'team/:id',
component: TeamCmp,
children: [
{path: 'user/:name', component: UserCmp},
{path: 'simple', outlet: 'right', children: [{path: '', component: SimpleCmp}]},
]
}]);
router.navigateByUrl('/team/22/user/john');
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ user john, right: ]');
router.navigateByUrl('/team/22/(user/john//right:simple)');
advance(fixture);
expect(fixture.nativeElement).toHaveText('team 22 [ user john, right: simple ]');
})));
it('should render loadComponent named outlet with children', fakeAsync(() => {
const router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmp);
@Component({
standalone: true,
imports: [RouterModule],
template: '[right outlet component: <router-outlet></router-outlet>]',
})
class RightComponent {
constructor(readonly route: ActivatedRoute) {}
}
const loadSpy = jasmine.createSpy();
loadSpy.and.returnValue(RightComponent);
router.resetConfig([
{
path: 'team/:id',
component: TeamCmp,
children: [
{path: 'user/:name', component: UserCmp},
{
path: 'simple',
loadComponent: loadSpy,
outlet: 'right',
children: [{path: '', component: SimpleCmp}]
},
]
},
{path: '', component: SimpleCmp}
]);
router.navigateByUrl('/team/22/(user/john//right:simple)');
advance(fixture);
expect(fixture.nativeElement)
.toHaveText('team 22 [ user john, right: [right outlet component: simple] ]');
const rightCmp: RightComponent =
fixture.debugElement.query(By.directive(RightComponent)).componentInstance;
// Ensure we don't accidentally add `EmptyOutletComponent` via `standardizeConfig`
expect(rightCmp.route.routeConfig?.component).not.toBeDefined();
// Ensure we can navigate away and come back
router.navigateByUrl('/');
advance(fixture);
router.navigateByUrl('/team/22/(user/john//right:simple)');
advance(fixture);
expect(fixture.nativeElement)
.toHaveText('team 22 [ user john, right: [right outlet component: simple] ]');
expect(loadSpy.calls.count()).toEqual(1);
}));
describe('should use the injector of the lazily-loaded configuration', () => {
class LazyLoadedServiceDefinedInModule {}
@Component({
selector: 'eager-parent',
template: 'eager-parent <router-outlet></router-outlet>',
})
class EagerParentComponent {
}
@Component({
selector: 'lazy-parent',
template: 'lazy-parent <router-outlet></router-outlet>',
})
class LazyParentComponent {
}
@Component({
selector: 'lazy-child',
template: 'lazy-child',
})
class LazyChildComponent {
constructor(
lazy: LazyParentComponent, // should be able to inject lazy/direct parent
lazyService: LazyLoadedServiceDefinedInModule, // should be able to inject lazy service
eager: EagerParentComponent // should use the injector of the location to create a
// parent
) {}
}
@NgModule({
declarations: [LazyParentComponent, LazyChildComponent],
imports: [RouterModule.forChild([{
path: '',
children: [{
path: 'lazy-parent',
component: LazyParentComponent,
children: [{path: 'lazy-child', component: LazyChildComponent}]
}]
}])],
providers: [LazyLoadedServiceDefinedInModule]
})
class LoadedModule {
}
@NgModule({declarations: [EagerParentComponent], imports: [RouterModule.forRoot([])]})
class TestModule {
}
beforeEach(() => {
TestBed.configureTestingModule({
imports: [TestModule],
});
});
it('should use the injector of the lazily-loaded configuration',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'eager-parent',
component: EagerParentComponent,
children: [{path: 'lazy', loadChildren: () => LoadedModule}]
}]);
router.navigateByUrl('/eager-parent/lazy/lazy-parent/lazy-child');
advance(fixture);
expect(location.path()).toEqual('/eager-parent/lazy/lazy-parent/lazy-child');
expect(fixture.nativeElement).toHaveText('eager-parent lazy-parent lazy-child');
})));
});
it('works when given a callback',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
@Component({selector: 'lazy', template: 'lazy-loaded'})
class LazyLoadedComponent {
}
@NgModule({
declarations: [LazyLoadedComponent],
imports: [RouterModule.forChild([{path: 'loaded', component: LazyLoadedComponent}])],
})
class LoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'lazy', loadChildren: () => LoadedModule}]);
router.navigateByUrl('/lazy/loaded');
advance(fixture);
expect(location.path()).toEqual('/lazy/loaded');
expect(fixture.nativeElement).toHaveText('lazy-loaded');
})));
it('error emit an error when cannot load a config',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'lazy',
loadChildren: () => {
throw new Error('invalid');
}
}]);
const recordedEvents: Event[] = [];
router.events.forEach(e => recordedEvents.push(e));
router.navigateByUrl('/lazy/loaded')!.catch(s => {});
advance(fixture);
expect(location.path()).toEqual('');
expectEvents(recordedEvents, [
[NavigationStart, '/lazy/loaded'],
[RouteConfigLoadStart],
[NavigationError, '/lazy/loaded'],
]);
})));
it('should emit an error when the lazily-loaded config is not valid', fakeAsync(() => {
const router = TestBed.inject(Router);
@NgModule({imports: [RouterModule.forChild([{path: 'loaded'}])]})
class LoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'lazy', loadChildren: () => LoadedModule}]);
let recordedError: any = null;
router.navigateByUrl('/lazy/loaded').catch(err => recordedError = err);
advance(fixture);
expect(recordedError.message)
.toContain(
`Invalid configuration of route 'lazy/loaded'. One of the following must be provided: component, loadComponent, redirectTo, children or loadChildren`);
}));
it('should work with complex redirect rules',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
@Component({selector: 'lazy', template: 'lazy-loaded'})
class LazyLoadedComponent {
}
@NgModule({
declarations: [LazyLoadedComponent],
imports: [RouterModule.forChild([{path: 'loaded', component: LazyLoadedComponent}])],
})
class LoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig(
[{path: 'lazy', loadChildren: () => LoadedModule}, {path: '**', redirectTo: 'lazy'}]);
router.navigateByUrl('/lazy/loaded');
advance(fixture);
expect(location.path()).toEqual('/lazy/loaded');
})));
it('should work with wildcard route',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
@Component({selector: 'lazy', template: 'lazy-loaded'})
class LazyLoadedComponent {
}
@NgModule({
declarations: [LazyLoadedComponent],
imports: [RouterModule.forChild([{path: '', component: LazyLoadedComponent}])],
})
class LazyLoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: '**', loadChildren: () => LazyLoadedModule}]);
router.navigateByUrl('/lazy');
advance(fixture);
expect(location.path()).toEqual('/lazy');
expect(fixture.nativeElement).toHaveText('lazy-loaded');
})));
describe('preloading', () => {
let log: string[] = [];
@Component({selector: 'lazy', template: 'should not show'})
class LazyLoadedComponent {
}
@NgModule({
declarations: [LazyLoadedComponent],
imports: [RouterModule.forChild([{path: 'LoadedModule2', component: LazyLoadedComponent}])]
})
class LoadedModule2 {
}
@NgModule({
imports:
[RouterModule.forChild([{path: 'LoadedModule1', loadChildren: () => LoadedModule2}])]
})
class LoadedModule1 {
}
@NgModule({})
class EmptyModule {
}
beforeEach(() => {
log.length = 0;
TestBed.configureTestingModule({
providers: [
{provide: PreloadingStrategy, useExisting: PreloadAllModules}, {
provide: 'loggingReturnsTrue',
useValue: () => {
log.push('loggingReturnsTrue');
return true;
}
}
]
});
const preloader = TestBed.inject(RouterPreloader);
preloader.setUpPreloading();
});
it('should work', fakeAsync(() => {
const router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'blank', component: BlankCmp}, {path: 'lazy', loadChildren: () => LoadedModule1}
]);
router.navigateByUrl('/blank');
advance(fixture);
const config = router.config;
const firstRoutes = getLoadedRoutes(config[1])!;
expect(firstRoutes).toBeDefined();
expect(firstRoutes[0].path).toEqual('LoadedModule1');
const secondRoutes = getLoadedRoutes(firstRoutes[0])!;
expect(secondRoutes).toBeDefined();
expect(secondRoutes[0].path).toEqual('LoadedModule2');
}));
it('should not preload when canLoad is present and does not execute guard', fakeAsync(() => {
const router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmp);
router.resetConfig([
{path: 'blank', component: BlankCmp},
{path: 'lazy', loadChildren: () => LoadedModule1, canLoad: ['loggingReturnsTrue']}
]);
router.navigateByUrl('/blank');
advance(fixture);
const config = router.config;
const firstRoutes = getLoadedRoutes(config[1])!;
expect(firstRoutes).toBeUndefined();
expect(log.length).toBe(0);
}));
it('should allow navigation to modules with no routes', fakeAsync(() => {
const router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'lazy', loadChildren: () => EmptyModule}]);
router.navigateByUrl('/lazy');
advance(fixture);
}));
});
describe('custom url handling strategies', () => {
class CustomUrlHandlingStrategy implements UrlHandlingStrategy {
shouldProcessUrl(url: UrlTree): boolean {
return url.toString().startsWith('/include') || url.toString() === '/';
}
extract(url: UrlTree): UrlTree {
const oldRoot = url.root;
const children: Record<string, UrlSegmentGroup> = {};
if (oldRoot.children[PRIMARY_OUTLET]) {
children[PRIMARY_OUTLET] = oldRoot.children[PRIMARY_OUTLET];
}
const root = new UrlSegmentGroup(oldRoot.segments, children);
return new UrlTree(root, url.queryParams, url.fragment);
}
merge(newUrlPart: UrlTree, wholeUrl: UrlTree): UrlTree {
const oldRoot = newUrlPart.root;
const children: Record<string, UrlSegmentGroup> = {};
if (oldRoot.children[PRIMARY_OUTLET]) {
children[PRIMARY_OUTLET] = oldRoot.children[PRIMARY_OUTLET];
}
Object.entries(wholeUrl.root.children).forEach(([k, v]: [string, any]) => {
if (k !== PRIMARY_OUTLET) {
children[k] = v;
}
v.parent = this;
});
const root = new UrlSegmentGroup(oldRoot.segments, children);
return new UrlTree(root, newUrlPart.queryParams, newUrlPart.fragment);
}
}
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
{provide: UrlHandlingStrategy, useClass: CustomUrlHandlingStrategy},
{provide: LocationStrategy, useClass: HashLocationStrategy}
]
});
});
it('should work',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'include',
component: TeamCmp,
children:
[{path: 'user/:name', component: UserCmp}, {path: 'simple', component: SimpleCmp}]
}]);
const events: Event[] = [];
router.events.subscribe(e => e instanceof RouterEvent && events.push(e));
// supported URL
router.navigateByUrl('/include/user/kate');
advance(fixture);
expect(location.path()).toEqual('/include/user/kate');
expectEvents(events, [
[NavigationStart, '/include/user/kate'], [RoutesRecognized, '/include/user/kate'],
[GuardsCheckStart, '/include/user/kate'], [GuardsCheckEnd, '/include/user/kate'],
[ResolveStart, '/include/user/kate'], [ResolveEnd, '/include/user/kate'],
[NavigationEnd, '/include/user/kate']
]);
expect(fixture.nativeElement).toHaveText('team [ user kate, right: ]');
events.splice(0);
// unsupported URL
router.navigateByUrl('/exclude/one');
advance(fixture);
expect(location.path()).toEqual('/exclude/one');
expect(Object.keys(router.routerState.root.children).length).toEqual(0);
expect(fixture.nativeElement).toHaveText('');
expectEvents(events, [
[NavigationStart, '/exclude/one'], [GuardsCheckStart, '/exclude/one'],
[GuardsCheckEnd, '/exclude/one'], [NavigationEnd, '/exclude/one']
]);
events.splice(0);
// another unsupported URL
location.go('/exclude/two');
location.historyGo(0);
advance(fixture);
expect(location.path()).toEqual('/exclude/two');
expectEvents(events, [[NavigationSkipped, '/exclude/two']]);
events.splice(0);
// back to a supported URL
location.go('/include/simple');
location.historyGo(0);
advance(fixture);
expect(location.path()).toEqual('/include/simple');
expect(fixture.nativeElement).toHaveText('team [ simple, right: ]');
expectEvents(events, [
[NavigationStart, '/include/simple'], [RoutesRecognized, '/include/simple'],
[GuardsCheckStart, '/include/simple'], [GuardsCheckEnd, '/include/simple'],
[ResolveStart, '/include/simple'], [ResolveEnd, '/include/simple'],
[NavigationEnd, '/include/simple']
]);
})));
it('should handle the case when the router takes only the primary url',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'include',
component: TeamCmp,
children:
[{path: 'user/:name', component: UserCmp}, {path: 'simple', component: SimpleCmp}]
}]);
const events: Event[] = [];
router.events.subscribe(e => e instanceof RouterEvent && events.push(e));
location.go('/include/user/kate(aux:excluded)');
location.historyGo(0);
advance(fixture);
expect(location.path()).toEqual('/include/user/kate(aux:excluded)');
expectEvents(events, [
[NavigationStart, '/include/user/kate'], [RoutesRecognized, '/include/user/kate'],
[GuardsCheckStart, '/include/user/kate'], [GuardsCheckEnd, '/include/user/kate'],
[ResolveStart, '/include/user/kate'], [ResolveEnd, '/include/user/kate'],
[NavigationEnd, '/include/user/kate']
]);
events.splice(0);
location.go('/include/user/kate(aux:excluded2)');
location.historyGo(0);
advance(fixture);
expectEvents(events, [[NavigationSkipped, '/include/user/kate(aux:excluded2)']]);
events.splice(0);
router.navigateByUrl('/include/simple');
advance(fixture);
expect(location.path()).toEqual('/include/simple(aux:excluded2)');
expectEvents(events, [
[NavigationStart, '/include/simple'], [RoutesRecognized, '/include/simple'],
[GuardsCheckStart, '/include/simple'], [GuardsCheckEnd, '/include/simple'],
[ResolveStart, '/include/simple'], [ResolveEnd, '/include/simple'],
[NavigationEnd, '/include/simple']
]);
})));
it('should not remove parts of the URL that are not handled by the router when "eager"',
fakeAsync(() => {
TestBed.configureTestingModule(
{providers: [provideRouter([], withRouterConfig({urlUpdateStrategy: 'eager'}))]});
const router = TestBed.inject(Router);
const location = TestBed.inject(Location);
const fixture = createRoot(router, RootCmp);
router.resetConfig([{
path: 'include',
component: TeamCmp,
children: [{path: 'user/:name', component: UserCmp}]
}]);
location.go('/include/user/kate(aux:excluded)');
location.historyGo(0);
advance(fixture);
expect(location.path()).toEqual('/include/user/kate(aux:excluded)');
}));
});
it('can use `relativeTo` `route.parent` in `routerLink` to close secondary outlet',
fakeAsync(() => {
// Given
@Component({template: '<router-outlet name="secondary"></router-outlet>'})
class ChildRootCmp {
}
@Component({
selector: 'link-cmp',
template:
`<a [relativeTo]="route.parent" [routerLink]="[{outlets: {'secondary': null}}]">link</a>
<button [relativeTo]="route.parent" [routerLink]="[{outlets: {'secondary': null}}]">link</button>
`
})
class RelativeLinkCmp {
@ViewChildren(RouterLink) links!: QueryList<RouterLink>;
constructor(readonly route: ActivatedRoute) {}
}
@NgModule({
declarations: [RelativeLinkCmp, ChildRootCmp],
imports: [RouterModule.forChild([{
path: 'childRoot',
component: ChildRootCmp,
children: [
{path: 'popup', outlet: 'secondary', component: RelativeLinkCmp},
]
}])]
})
class LazyLoadedModule {
}
const router = TestBed.inject(Router);
router.resetConfig([{path: 'root', loadChildren: () => LazyLoadedModule}]);
// When
router.navigateByUrl('/root/childRoot/(secondary:popup)');
const fixture = createRoot(router, RootCmp);
advance(fixture);
// Then
const relativeLinkCmp =
fixture.debugElement.query(By.directive(RelativeLinkCmp)).componentInstance;
expect(relativeLinkCmp.links.first.urlTree.toString()).toEqual('/root/childRoot');
expect(relativeLinkCmp.links.last.urlTree.toString()).toEqual('/root/childRoot');
}));
it('should ignore empty path for relative links',
fakeAsync(inject([Router], (router: Router) => {
@Component({selector: 'link-cmp', template: `<a [routerLink]="['../simple']">link</a>`})
class RelativeLinkCmp {
}
@NgModule({
declarations: [RelativeLinkCmp],
imports: [RouterModule.forChild([
{path: 'foo/bar', children: [{path: '', component: RelativeLinkCmp}]},
])]
})
class LazyLoadedModule {
}
const fixture = createRoot(router, RootCmp);
router.resetConfig([{path: 'lazy', loadChildren: () => LazyLoadedModule}]);
router.navigateByUrl('/lazy/foo/bar');
advance(fixture);
const link = fixture.nativeElement.querySelector('a');
expect(link.getAttribute('href')).toEqual('/lazy/foo/simple');
})));
});
describe('Custom Route Reuse Strategy', () => {
class AttachDetachReuseStrategy implements RouteReuseStrategy {
stored: {[k: string]: DetachedRouteHandle} = {};
pathsToDetach = ['a'];
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return typeof route.routeConfig!.path !== 'undefined' &&
this.pathsToDetach.includes(route.routeConfig!.path);
}
store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {
this.stored[route.routeConfig!.path!] = detachedTree;
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return !!this.stored[route.routeConfig!.path!];
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
return this.stored[route.routeConfig!.path!];
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return future.routeConfig === curr.routeConfig;
}
}
class ShortLifecycle implements RouteReuseStrategy {
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return false;
}
store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return false;
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle|null {
return null;
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
if (future.routeConfig !== curr.routeConfig) {
return false;
}
if (Object.keys(future.params).length !== Object.keys(curr.params).length) {
return false;
}
return Object.keys(future.params).every(k => future.params[k] === curr.params[k]);
}
}
it('should be injectable', () => {
TestBed.configureTestingModule({
providers: [
{provide: RouteReuseStrategy, useClass: AttachDetachReuseStrategy},
provideRouter([]),
]
});
const router = TestBed.inject(Router);
expect(router.routeReuseStrategy).toBeInstanceOf(AttachDetachReuseStrategy);
});
it('should emit an event when an outlet gets attached/detached', fakeAsync(() => {
@Component({
selector: 'container',
template:
`<router-outlet (attach)="recordAttached($event)" (detach)="recordDetached($event)"></router-outlet>`
})
class Container {
attachedComponents: unknown[] = [];
detachedComponents: unknown[] = [];
recordAttached(component: unknown): void {
this.attachedComponents.push(component);
}
recordDetached(component: unknown): void {
this.detachedComponents.push(component);
}
}
TestBed.configureTestingModule({
declarations: [Container],
providers: [{provide: RouteReuseStrategy, useClass: AttachDetachReuseStrategy}]
});
const router = TestBed.inject(Router);
const fixture = createRoot(router, Container);
const cmp = fixture.componentInstance;
router.resetConfig([{path: 'a', component: BlankCmp}, {path: 'b', component: SimpleCmp}]);
cmp.attachedComponents = [];
cmp.detachedComponents = [];
router.navigateByUrl('/a');
advance(fixture);
expect(cmp.attachedComponents.length).toEqual(0);
expect(cmp.detachedComponents.length).toEqual(0);
router.navigateByUrl('/b');
advance(fixture);
expect(cmp.attachedComponents.length).toEqual(0);
expect(cmp.detachedComponents.length).toEqual(1);
expect(cmp.detachedComponents[0] instanceof BlankCmp).toBe(true);
// the route will be reused by the `RouteReuseStrategy`
router.navigateByUrl('/a');
advance(fixture);
expect(cmp.attachedComponents.length).toEqual(1);
expect(cmp.attachedComponents[0] instanceof BlankCmp).toBe(true);
expect(cmp.detachedComponents.length).toEqual(1);
expect(cmp.detachedComponents[0] instanceof BlankCmp).toBe(true);
}));
it('should support attaching & detaching fragments',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.routeReuseStrategy = new AttachDetachReuseStrategy();
(router.routeReuseStrategy as AttachDetachReuseStrategy).pathsToDetach = ['a', 'b'];
spyOn(router.routeReuseStrategy, 'retrieve').and.callThrough();
router.resetConfig([
{
path: 'a',
component: TeamCmp,
children: [{path: 'b', component: SimpleCmp}],
},
{path: 'c', component: UserCmp},
]);
router.navigateByUrl('/a/b');
advance(fixture);
const teamCmp = fixture.debugElement.children[1].componentInstance;
const simpleCmp = fixture.debugElement.children[1].children[1].componentInstance;
expect(location.path()).toEqual('/a/b');
expect(teamCmp).toBeDefined();
expect(simpleCmp).toBeDefined();
expect(router.routeReuseStrategy.retrieve).not.toHaveBeenCalled();
router.navigateByUrl('/c');
advance(fixture);
expect(location.path()).toEqual('/c');
expect(fixture.debugElement.children[1].componentInstance).toBeInstanceOf(UserCmp);
// We have still not encountered a route that should be reattached
expect(router.routeReuseStrategy.retrieve).not.toHaveBeenCalled();
router.navigateByUrl('/a;p=1/b;p=2');
advance(fixture);
// We retrieve both the stored route snapshots
expect(router.routeReuseStrategy.retrieve).toHaveBeenCalledTimes(4);
const teamCmp2 = fixture.debugElement.children[1].componentInstance;
const simpleCmp2 = fixture.debugElement.children[1].children[1].componentInstance;
expect(location.path()).toEqual('/a;p=1/b;p=2');
expect(teamCmp2).toBe(teamCmp);
expect(simpleCmp2).toBe(simpleCmp);
expect(teamCmp.route).toBe(router.routerState.root.firstChild);
expect(teamCmp.route.snapshot).toBe(router.routerState.snapshot.root.firstChild);
expect(teamCmp.route.snapshot.params).toEqual({p: '1'});
expect(teamCmp.route.firstChild.snapshot.params).toEqual({p: '2'});
expect(teamCmp.recordedParams).toEqual([{}, {p: '1'}]);
})));
it('should support shorter lifecycles',
fakeAsync(inject([Router, Location], (router: Router, location: Location) => {
const fixture = createRoot(router, RootCmp);
router.routeReuseStrategy = new ShortLifecycle();
router.resetConfig([{path: 'a', component: SimpleCmp}]);
router.navigateByUrl('/a');
advance(fixture);
const simpleCmp1 = fixture.debugElement.children[1].componentInstance;
expect(location.path()).toEqual('/a');
router.navigateByUrl('/a;p=1');
advance(fixture);
expect(location.path()).toEqual('/a;p=1');
const simpleCmp2 = fixture.debugElement.children[1].componentInstance;
expect(simpleCmp1).not.toBe(simpleCmp2);
})));
it('should not mount the component of the previously reused route when the outlet was not instantiated at the time of route activation',
fakeAsync(() => {
@Component({
selector: 'root-cmp',
template:
'<div *ngIf="isToolpanelShowing"><router-outlet name="toolpanel"></router-outlet></div>'
})
class RootCmpWithCondOutlet implements OnDestroy {
private subscription: Subscription;
public isToolpanelShowing: boolean = false;
constructor(router: Router) {
this.subscription =
router.events.pipe(filter(event => event instanceof NavigationEnd))
.subscribe(
() => this.isToolpanelShowing =
!!router.parseUrl(router.url).root.children['toolpanel']);
}
public ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}
@Component({selector: 'tool-1-cmp', template: 'Tool 1 showing'})
class Tool1Component {
}
@Component({selector: 'tool-2-cmp', template: 'Tool 2 showing'})
class Tool2Component {
}
@NgModule({
declarations: [RootCmpWithCondOutlet, Tool1Component, Tool2Component],
imports: [CommonModule, ...ROUTER_DIRECTIVES],
providers: [
provideRouter([
{path: 'a', outlet: 'toolpanel', component: Tool1Component},
{path: 'b', outlet: 'toolpanel', component: Tool2Component},
]),
]
})
class TestModule {
}
TestBed.configureTestingModule({imports: [TestModule]});
const router: Router = TestBed.inject(Router);
router.routeReuseStrategy = new AttachDetachReuseStrategy();
const fixture = createRoot(router, RootCmpWithCondOutlet);
// Activate 'tool-1'
router.navigate([{outlets: {toolpanel: 'a'}}]);
advance(fixture);
expect(fixture).toContainComponent(Tool1Component, '(a)');
// Deactivate 'tool-1'
router.navigate([{outlets: {toolpanel: null}}]);
advance(fixture);
expect(fixture).not.toContainComponent(Tool1Component, '(b)');
// Activate 'tool-1'
router.navigate([{outlets: {toolpanel: 'a'}}]);
advance(fixture);
expect(fixture).toContainComponent(Tool1Component, '(c)');
// Deactivate 'tool-1'
router.navigate([{outlets: {toolpanel: null}}]);
advance(fixture);
expect(fixture).not.toContainComponent(Tool1Component, '(d)');
// Activate 'tool-2'
router.navigate([{outlets: {toolpanel: 'b'}}]);
advance(fixture);
expect(fixture).toContainComponent(Tool2Component, '(e)');
}));
it('should not remount a destroyed component', fakeAsync(() => {
@Component({
selector: 'root-cmp',
template: '<div *ngIf="showRouterOutlet"><router-outlet></router-outlet></div>'
})
class RootCmpWithCondOutlet {
public showRouterOutlet: boolean = true;
}
@NgModule({
declarations: [RootCmpWithCondOutlet],
imports: [
CommonModule,
...ROUTER_DIRECTIVES,
],
providers: [
{provide: RouteReuseStrategy, useClass: AttachDetachReuseStrategy},
provideRouter([
{path: 'a', component: SimpleCmp},
{path: 'b', component: BlankCmp},
]),
]
})
class TestModule {
}
TestBed.configureTestingModule({imports: [TestModule]});
const router: Router = TestBed.inject(Router);
const fixture = createRoot(router, RootCmpWithCondOutlet);
// Activate 'a'
router.navigate(['a']);
advance(fixture);
expect(fixture.debugElement.query(By.directive(SimpleCmp))).toBeTruthy();
// Deactivate 'a' and detach the route
router.navigate(['b']);
advance(fixture);
expect(fixture.debugElement.query(By.directive(SimpleCmp))).toBeNull();
// Activate 'a' again, the route should be re-attached
router.navigate(['a']);
advance(fixture);
expect(fixture.debugElement.query(By.directive(SimpleCmp))).toBeTruthy();
// Hide the router-outlet, SimpleCmp should be destroyed
fixture.componentInstance.showRouterOutlet = false;
advance(fixture);
expect(fixture.debugElement.query(By.directive(SimpleCmp))).toBeNull();
// Show the router-outlet, SimpleCmp should be re-created
fixture.componentInstance.showRouterOutlet = true;
advance(fixture);
expect(fixture.debugElement.query(By.directive(SimpleCmp))).toBeTruthy();
}));
it('should allow to attach parent route with fresh child route', fakeAsync(() => {
const CREATED_COMPS = new InjectionToken<string[]>('CREATED_COMPS');
@Component({selector: 'root', template: `<router-outlet></router-outlet>`})
class Root {
}
@Component({selector: 'parent', template: `<router-outlet></router-outlet>`})
class Parent {
constructor(@Inject(CREATED_COMPS) createdComps: string[]) {
createdComps.push('parent');
}
}
@Component({selector: 'child', template: `child`})
class Child {
constructor(@Inject(CREATED_COMPS) createdComps: string[]) {
createdComps.push('child');
}
}
@NgModule({
declarations: [Root, Parent, Child],
imports: [
CommonModule,
...ROUTER_DIRECTIVES,
],
providers: [
{provide: RouteReuseStrategy, useClass: AttachDetachReuseStrategy},
{provide: CREATED_COMPS, useValue: []},
provideRouter([
{path: 'a', component: Parent, children: [{path: 'b', component: Child}]},
{path: 'c', component: SimpleCmp}
]),
]
})
class TestModule {
}
TestBed.configureTestingModule({imports: [TestModule]});
const router = TestBed.inject(Router);
const fixture = createRoot(router, Root);
const createdComps = TestBed.inject(CREATED_COMPS);
expect(createdComps).toEqual([]);
router.navigateByUrl('/a/b');
advance(fixture);
expect(createdComps).toEqual(['parent', 'child']);
router.navigateByUrl('/c');
advance(fixture);
expect(createdComps).toEqual(['parent', 'child']);
// 'a' parent route will be reused by the `RouteReuseStrategy`, child 'b' should be
// recreated
router.navigateByUrl('/a/b');
advance(fixture);
expect(createdComps).toEqual(['parent', 'child', 'child']);
}));
it('should not try to detach the outlet of a route that does not get to attach a component',
fakeAsync(() => {
@Component({selector: 'root', template: `<router-outlet></router-outlet>`})
class Root {
}
@Component({selector: 'component-a', template: 'Component A'})
class ComponentA {
}
@Component({selector: 'component-b', template: 'Component B'})
class ComponentB {
}
@NgModule({
declarations: [ComponentA],
imports: [RouterModule.forChild([{path: '', component: ComponentA}])],
})
class LoadedModule {
}
@NgModule({
declarations: [Root, ComponentB],
imports: [ROUTER_DIRECTIVES],
providers: [
{provide: RouteReuseStrategy, useClass: AttachDetachReuseStrategy},
provideRouter([
{path: 'a', loadChildren: () => LoadedModule}, {path: 'b', component: ComponentB}
]),
]
})
class TestModule {
}
TestBed.configureTestingModule({imports: [TestModule]});
const router = TestBed.inject(Router);
const strategy = TestBed.inject(RouteReuseStrategy);
const fixture = createRoot(router, Root);
spyOn(strategy, 'shouldDetach').and.callThrough();
router.navigateByUrl('/a');
advance(fixture);
// Deactivate 'a'
// 'shouldDetach' should not be called for the componentless route
router.navigateByUrl('/b');
advance(fixture);
expect(strategy.shouldDetach).toHaveBeenCalledTimes(1);
}));
});
});
function expectEvents(events: Event[], pairs: any[]) {
expect(events.length).toEqual(pairs.length);
for (let i = 0; i < events.length; ++i) {
expect((events[i].constructor).name).toBe(pairs[i][0].name);
expect((<any>events[i]).url).toBe(pairs[i][1]);
}
}
function onlyNavigationStartAndEnd(e: Event): e is NavigationStart|NavigationEnd {
return e instanceof NavigationStart || e instanceof NavigationEnd;
}
@Component(
{selector: 'link-cmp', template: `<a routerLink="/team/33/simple" [target]="'_self'">link</a>`})
class StringLinkCmp {
}
@Component({selector: 'link-cmp', template: `<button routerLink="/team/33/simple">link</button>`})
class StringLinkButtonCmp {
}
@Component({
selector: 'link-cmp',
template: `<router-outlet></router-outlet><a [routerLink]="['/team/33/simple']">link</a>`
})
class AbsoluteLinkCmp {
}
@Component({
selector: 'link-cmp',
template:
`<router-outlet></router-outlet><a routerLinkActive="active" (isActiveChange)="this.onRouterLinkActivated($event)" [routerLinkActiveOptions]="{exact: exact}" ariaCurrentWhenActive="page" [routerLink]="['./']">link</a>
<button routerLinkActive="active" [routerLinkActiveOptions]="{exact: exact}" [routerLink]="['./']">button</button>
`
})
class DummyLinkCmp {
private exact: boolean;
public isLinkActivated?: boolean;
constructor(route: ActivatedRoute) {
this.exact = route.snapshot.paramMap.get('exact') === 'true';
}
public onRouterLinkActivated(isActive: boolean): void {
this.isLinkActivated = isActive;
}
}
@Component({selector: 'link-cmp', template: `<a [routerLink]="['/simple']">link</a>`})
class AbsoluteSimpleLinkCmp {
}
@Component({selector: 'link-cmp', template: `<a [routerLink]="['../simple']">link</a>`})
class RelativeLinkCmp {
}
@Component({
selector: 'link-cmp',
template: `<a [routerLink]="['../simple']" [queryParams]="{q: '1'}" fragment="f">link</a>`
})
class LinkWithQueryParamsAndFragment {
}
@Component({
selector: 'link-cmp',
template: `<a id="link" [routerLink]="['../simple']" [state]="{foo: 'bar'}">link</a>`
})
class LinkWithState {
}
@Component({
selector: 'div-link-cmp',
template: `<div id="link" [routerLink]="['../simple']" [state]="{foo: 'bar'}">link</div>`
})
class DivLinkWithState {
}
@Component({selector: 'simple-cmp', template: `simple`})
class SimpleCmp {
}
@Component({selector: 'collect-params-cmp', template: `collect-params`})
class CollectParamsCmp {
private params: Params[] = [];
private urls: UrlSegment[][] = [];
constructor(public route: ActivatedRoute) {
route.params.forEach(p => this.params.push(p));
route.url.forEach(u => this.urls.push(u));
}
recordedUrls(): string[] {
return this.urls.map((a: UrlSegment[]) => a.map((p: UrlSegment) => p.path).join('/'));
}
}
@Component({selector: 'blank-cmp', template: ``})
class BlankCmp {
}
@NgModule({imports: [RouterModule.forChild([{path: '', component: BlankCmp}])]})
class ModuleWithBlankCmpAsRoute {
}
@Component({
selector: 'team-cmp',
template: `team {{id | async}} ` +
`[ <router-outlet></router-outlet>, right: <router-outlet name="right"></router-outlet> ]` +
`<a [routerLink]="routerLink" skipLocationChange></a>` +
`<button [routerLink]="routerLink" skipLocationChange></button>`
})
class TeamCmp {
id: Observable<string>;
recordedParams: Params[] = [];
snapshotParams: Params[] = [];
routerLink = ['.'];
constructor(public route: ActivatedRoute) {
this.id = route.params.pipe(map((p: Params) => p['id']));
route.params.forEach(p => {
this.recordedParams.push(p);
this.snapshotParams.push(route.snapshot.params);
});
}
}
@Component({
selector: 'two-outlets-cmp',
template: `[ <router-outlet></router-outlet>, aux: <router-outlet name="aux"></router-outlet> ]`
})
class TwoOutletsCmp {
}
@Component({selector: 'user-cmp', template: `user {{name | async}}`})
class UserCmp {
name: Observable<string>;
recordedParams: Params[] = [];
snapshotParams: Params[] = [];
constructor(route: ActivatedRoute) {
this.name = route.params.pipe(map((p: Params) => p['name']));
route.params.forEach(p => {
this.recordedParams.push(p);
this.snapshotParams.push(route.snapshot.params);
});
}
}
@Component({selector: 'wrapper', template: `<router-outlet></router-outlet>`})
class WrapperCmp {
}
@Component(
{selector: 'query-cmp', template: `query: {{name | async}} fragment: {{fragment | async}}`})
class QueryParamsAndFragmentCmp {
name: Observable<string|null>;
fragment: Observable<string>;
constructor(route: ActivatedRoute) {
this.name = route.queryParamMap.pipe(map((p: ParamMap) => p.get('name')));
this.fragment = route.fragment.pipe(map((p: string|null|undefined) => {
if (p === undefined) {
return 'undefined';
} else if (p === null) {
return 'null';
} else {
return p;
}
}));
}
}
@Component({selector: 'empty-query-cmp', template: ``})
class EmptyQueryParamsCmp {
recordedParams: Params[] = [];
constructor(route: ActivatedRoute) {
route.queryParams.forEach(_ => this.recordedParams.push(_));
}
}
@Component({selector: 'route-cmp', template: `route`})
class RouteCmp {
constructor(public route: ActivatedRoute) {}
}
@Component({
selector: 'link-cmp',
template:
`<div *ngIf="show"><a [routerLink]="['./simple']">link</a></div> <router-outlet></router-outlet>`
})
class RelativeLinkInIfCmp {
show: boolean = false;
}
@Component(
{selector: 'child', template: '<div *ngIf="alwaysTrue"><router-outlet></router-outlet></div>'})
class OutletInNgIf {
alwaysTrue = true;
}
@Component({
selector: 'link-cmp',
template: `<router-outlet></router-outlet>
<div id="link-parent" routerLinkActive="active" [routerLinkActiveOptions]="{exact: exact}">
<div ngClass="{one: 'true'}"><a [routerLink]="['./']">link</a></div>
</div>`
})
class DummyLinkWithParentCmp {
protected exact: boolean;
constructor(route: ActivatedRoute) {
this.exact = route.snapshot.params['exact'] === 'true';
}
}
@Component({selector: 'cmp', template: ''})
class ComponentRecordingRoutePathAndUrl {
public path: ActivatedRoute[];
public url: string;
constructor(router: Router, route: ActivatedRoute) {
this.path = route.pathFromRoot;
this.url = router.url.toString();
}
}
@Component({selector: 'root-cmp', template: `<router-outlet></router-outlet>`})
class RootCmp {
}
@Component({selector: 'root-cmp-on-init', template: `<router-outlet></router-outlet>`})
class RootCmpWithOnInit {
constructor(private router: Router) {}
ngOnInit(): void {
this.router.navigate(['one']);
}
}
@Component({
selector: 'root-cmp',
template:
`primary [<router-outlet></router-outlet>] right [<router-outlet name="right"></router-outlet>]`
})
class RootCmpWithTwoOutlets {
}
@Component({selector: 'root-cmp', template: `main [<router-outlet name="main"></router-outlet>]`})
class RootCmpWithNamedOutlet {
}
@Component({selector: 'throwing-cmp', template: ''})
class ThrowingCmp {
constructor() {
throw new Error('Throwing Cmp');
}
}
@Component({selector: 'conditional-throwing-cmp', template: 'conditional throwing'})
class ConditionalThrowingCmp {
static throwError = true;
constructor() {
if (ConditionalThrowingCmp.throwError) {
throw new Error('Throwing Cmp');
}
}
}
function advance(fixture: ComponentFixture<unknown>, millis?: number): void {
tick(millis);
fixture.detectChanges();
}
function createRoot<T>(router: Router, type: Type<T>): ComponentFixture<T> {
const f = TestBed.createComponent<T>(type);
advance(f);
router.initialNavigation();
advance(f);
return f;
}
@Component({selector: 'lazy', template: 'lazy-loaded'})
class LazyComponent {
}
@NgModule({
imports: [CommonModule, ...ROUTER_DIRECTIVES],
exports: [
BlankCmp,
SimpleCmp,
TwoOutletsCmp,
TeamCmp,
UserCmp,
StringLinkCmp,
DummyLinkCmp,
AbsoluteLinkCmp,
AbsoluteSimpleLinkCmp,
RelativeLinkCmp,
DummyLinkWithParentCmp,
LinkWithQueryParamsAndFragment,
DivLinkWithState,
LinkWithState,
CollectParamsCmp,
QueryParamsAndFragmentCmp,
StringLinkButtonCmp,
WrapperCmp,
OutletInNgIf,
ComponentRecordingRoutePathAndUrl,
RouteCmp,
RootCmp,
RootCmpWithOnInit,
RelativeLinkInIfCmp,
RootCmpWithTwoOutlets,
RootCmpWithNamedOutlet,
EmptyQueryParamsCmp,
ThrowingCmp,
ConditionalThrowingCmp,
],
declarations: [
BlankCmp,
SimpleCmp,
TeamCmp,
TwoOutletsCmp,
UserCmp,
StringLinkCmp,
DummyLinkCmp,
AbsoluteLinkCmp,
AbsoluteSimpleLinkCmp,
RelativeLinkCmp,
DummyLinkWithParentCmp,
LinkWithQueryParamsAndFragment,
DivLinkWithState,
LinkWithState,
CollectParamsCmp,
QueryParamsAndFragmentCmp,
StringLinkButtonCmp,
WrapperCmp,
OutletInNgIf,
ComponentRecordingRoutePathAndUrl,
RouteCmp,
RootCmp,
RootCmpWithOnInit,
RelativeLinkInIfCmp,
RootCmpWithTwoOutlets,
RootCmpWithNamedOutlet,
EmptyQueryParamsCmp,
ThrowingCmp,
ConditionalThrowingCmp,
]
})
class TestModule {
}
