angular__angular/packages/router/test/computed_state_restoration.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, Location} from '@angular/common';
import {provideLocationMocks, SpyLocation} from '@angular/common/testing';
import {Component, Injectable, NgModule, Type} from '@angular/core';
import {ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
import {expect} from '@angular/platform-browser/testing/src/matchers';
import {Router, RouterModule, RouterOutlet, UrlTree, withRouterConfig} from '@angular/router';
import {EMPTY, of} from 'rxjs';

import {provideRouter} from '../src/provide_router';
import {isUrlTree} from '../src/url_tree';

describe('`restoredState#ɵrouterPageId`', () => {
  @Injectable({providedIn: 'root'})
  class MyCanDeactivateGuard {
    allow: boolean = true;
    canDeactivate(): boolean {
      return this.allow;
    }
  }

  @Injectable({providedIn: 'root'})
  class ThrowingCanActivateGuard {
    throw = false;

    constructor(private router: Router) {}

    canActivate(): boolean {
      if (this.throw) {
        throw new Error('error in guard');
      }
      return true;
    }
  }

  @Injectable({providedIn: 'root'})
  class MyCanActivateGuard {
    allow: boolean = true;
    redirectTo: string|null|UrlTree = null;

    constructor(private router: Router) {}

    canActivate(): boolean|UrlTree {
      if (typeof this.redirectTo === 'string') {
        this.router.navigateByUrl(this.redirectTo);
      } else if (isUrlTree(this.redirectTo)) {
        return this.redirectTo;
      }
      return this.allow;
    }
  }
  @Injectable({providedIn: 'root'})
  class MyResolve {
    myresolve = of(2);
    resolve() {
      return this.myresolve;
    }
  }

  let fixture: ComponentFixture<unknown>;

  function createNavigationHistory(urlUpdateStrategy: 'eager'|'deferred' = 'deferred') {
    TestBed.configureTestingModule({
      imports: [TestModule],
      providers: [
        {provide: 'alwaysFalse', useValue: (a: any) => false},
        {provide: Location, useClass: SpyLocation},
        provideRouter(
            [
              {
                path: 'first',
                component: SimpleCmp,
                canDeactivate: [MyCanDeactivateGuard],
                canActivate: [MyCanActivateGuard, ThrowingCanActivateGuard],
                resolve: {x: MyResolve}
              },
              {
                path: 'second',
                component: SimpleCmp,
                canDeactivate: [MyCanDeactivateGuard],
                canActivate: [MyCanActivateGuard, ThrowingCanActivateGuard],
                resolve: {x: MyResolve}
              },
              {
                path: 'third',
                component: SimpleCmp,
                canDeactivate: [MyCanDeactivateGuard],
                canActivate: [MyCanActivateGuard, ThrowingCanActivateGuard],
                resolve: {x: MyResolve}
              },
              {
                path: 'unguarded',
                component: SimpleCmp,
              },
              {
                path: 'throwing',
                component: ThrowingCmp,
              },
              {
                path: 'loaded',
                loadChildren: () => of(ModuleWithSimpleCmpAsRoute),
                canLoad: ['alwaysFalse']
              }
            ],
            withRouterConfig({
              urlUpdateStrategy,
              canceledNavigationResolution: 'computed',
              resolveNavigationPromiseOnError: true,
            })),
      ]
    });
    const router = TestBed.inject(Router);
    const location = TestBed.inject(Location);
    fixture = createRoot(router, RootCmp);
    router.initialNavigation();
    advance(fixture);
    expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 0}));

    router.navigateByUrl('/first');
    advance(fixture);
    expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 1}));

    router.navigateByUrl('/second');
    advance(fixture);
    expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

    router.navigateByUrl('/third');
    advance(fixture);
    expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 3}));

    location.back();
    advance(fixture);
    expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));
  }

  describe('deferred url updates', () => {
    beforeEach(fakeAsync(() => {
      createNavigationHistory();
    }));

    it('should work when CanActivate returns false', fakeAsync(() => {
         const location = TestBed.inject(Location);
         const router = TestBed.inject(Router);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         TestBed.inject(MyCanActivateGuard).allow = false;
         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         TestBed.inject(MyCanActivateGuard).allow = true;
         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/first');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 1}));

         TestBed.inject(MyCanActivateGuard).allow = false;
         location.forward();
         advance(fixture);
         expect(location.path()).toEqual('/first');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 1}));

         router.navigateByUrl('/second');
         advance(fixture);
         expect(location.path()).toEqual('/first');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 1}));
       }));


    it('should work when CanDeactivate returns false', fakeAsync(() => {
         const location = TestBed.inject(Location);
         const router = TestBed.inject(Router);

         TestBed.inject(MyCanDeactivateGuard).allow = false;
         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         location.forward();
         advance(fixture);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         router.navigateByUrl('third');
         advance(fixture);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));


         TestBed.inject(MyCanDeactivateGuard).allow = true;
         location.forward();
         advance(fixture);
         expect(location.path()).toEqual('/third');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 3}));
       }));

    it('should work when using `NavigationExtras.skipLocationChange`', fakeAsync(() => {
         const location = TestBed.inject(Location);
         const router = TestBed.inject(Router);

         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         router.navigateByUrl('/first', {skipLocationChange: true});
         advance(fixture);
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         router.navigateByUrl('/third');
         advance(fixture);
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 3}));

         location.back();
         advance(fixture);
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));
       }));

    it('should work when using `NavigationExtras.replaceUrl`', fakeAsync(() => {
         const location = TestBed.inject(Location);
         const router = TestBed.inject(Router);

         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         router.navigateByUrl('/first', {replaceUrl: true});
         advance(fixture);
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));
         expect(location.path()).toEqual('/first');
       }));

    it('should work when CanLoad returns false', fakeAsync(() => {
         const location = TestBed.inject(Location);
         const router = TestBed.inject(Router);

         router.navigateByUrl('/loaded');
         advance(fixture);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));
       }));

    it('should work when resolve empty', fakeAsync(() => {
         const location = TestBed.inject(Location);
         const router = TestBed.inject(Router);

         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         TestBed.inject(MyResolve).myresolve = EMPTY;

         location.back();
         advance(fixture);
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));
         expect(location.path()).toEqual('/second');

         TestBed.inject(MyResolve).myresolve = of(2);

         location.back();
         advance(fixture);
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 1}));
         expect(location.path()).toEqual('/first');

         TestBed.inject(MyResolve).myresolve = EMPTY;

         // We should cancel the navigation to `/third` when myresolve is empty
         router.navigateByUrl('/third');
         advance(fixture);
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 1}));
         expect(location.path()).toEqual('/first');

         location.historyGo(2);
         advance(fixture);
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 1}));
         expect(location.path()).toEqual('/first');

         TestBed.inject(MyResolve).myresolve = of(2);
         location.historyGo(2);
         advance(fixture);
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 3}));
         expect(location.path()).toEqual('/third');

         TestBed.inject(MyResolve).myresolve = EMPTY;
         location.historyGo(-2);
         advance(fixture);
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 3}));
         expect(location.path()).toEqual('/third');
       }));


    it('should work when an error occurred during navigation', fakeAsync(() => {
         const location = TestBed.inject(Location);
         const router = TestBed.inject(Router);

         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));


         router.navigateByUrl('/invalid').catch(() => null);
         advance(fixture);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/first');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 1}));
       }));

    it('should work when CanActivate redirects', fakeAsync(() => {
         const location = TestBed.inject(Location);

         TestBed.inject(MyCanActivateGuard).redirectTo = '/unguarded';
         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/unguarded');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         TestBed.inject(MyCanActivateGuard).redirectTo = null;

         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/first');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 1}));
       }));

    it('restores history correctly when component throws error in constructor and replaceUrl=true',
       fakeAsync(() => {
         const location = TestBed.inject(Location);
         const router = TestBed.inject(Router);

         router.navigateByUrl('/throwing', {replaceUrl: true}).catch(() => null);
         advance(fixture);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/first');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 1}));
       }));

    it('restores history correctly when component throws error in constructor and skipLocationChange=true',
       fakeAsync(() => {
         const location = TestBed.inject(Location);
         const router = TestBed.inject(Router);

         router.navigateByUrl('/throwing', {skipLocationChange: true}).catch(() => null);
         advance(fixture);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/first');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 1}));
       }));
  });

  describe('eager url updates', () => {
    beforeEach(fakeAsync(() => {
      createNavigationHistory('eager');
    }));
    it('should work', fakeAsync(() => {
         const location = TestBed.inject(Location) as SpyLocation;
         const router = TestBed.inject(Router);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         TestBed.inject(MyCanActivateGuard).allow = false;
         router.navigateByUrl('/first');
         advance(fixture);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));
       }));
    it('should work when CanActivate redirects', fakeAsync(() => {
         const location = TestBed.inject(Location);
         const router = TestBed.inject(Router);

         TestBed.inject(MyCanActivateGuard).redirectTo = '/unguarded';
         router.navigateByUrl('/third');
         advance(fixture);
         expect(location.path()).toEqual('/unguarded');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 4}));

         TestBed.inject(MyCanActivateGuard).redirectTo = null;

         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/third');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 3}));
       }));
    it('should work when CanActivate redirects with UrlTree', fakeAsync(() => {
         // Note that this test is different from the above case because we are able to specifically
         // handle the `UrlTree` case as a proper redirect and set `replaceUrl: true` on the
         // follow-up navigation.
         const location = TestBed.inject(Location);
         const router = TestBed.inject(Router);
         let allowNavigation = true;
         router.resetConfig([
           {path: 'initial', children: []},
           {path: 'redirectFrom', redirectTo: 'redirectTo'},
           {path: 'redirectTo', children: [], canActivate: [() => allowNavigation]},
         ]);

         // already at '2' from the `beforeEach` navigations
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));
         router.navigateByUrl('/initial');
         advance(fixture);
         expect(location.path()).toEqual('/initial');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 3}));

         TestBed.inject(MyCanActivateGuard).redirectTo = null;

         router.navigateByUrl('redirectTo');
         advance(fixture);
         expect(location.path()).toEqual('/redirectTo');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 4}));

         // Navigate to different URL but get redirected to same URL should result in same page id
         router.navigateByUrl('redirectFrom');
         advance(fixture);
         expect(location.path()).toEqual('/redirectTo');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 4}));

         // Back and forward should have page IDs 1 apart
         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/initial');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 3}));
         location.forward();
         advance(fixture);
         expect(location.path()).toEqual('/redirectTo');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 4}));

         // Rejected navigation after redirect to same URL should have the same page ID
         allowNavigation = false;
         router.navigateByUrl('redirectFrom');
         advance(fixture);
         expect(location.path()).toEqual('/redirectTo');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 4}));
       }));
    it('redirectTo with same url, and guard reject', fakeAsync(() => {
         const location = TestBed.inject(Location);
         const router = TestBed.inject(Router);

         TestBed.inject(MyCanActivateGuard).redirectTo = router.createUrlTree(['unguarded']);
         router.navigateByUrl('/third');
         advance(fixture);
         expect(location.path()).toEqual('/unguarded');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 3}));

         TestBed.inject(MyCanActivateGuard).redirectTo = null;

         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));
       }));
  });


  for (const urlUpdateStrategy of ['deferred', 'eager'] as const) {
    it(`restores history correctly when an error is thrown in guard with urlUpdateStrategy ${
           urlUpdateStrategy}`,
       fakeAsync(() => {
         createNavigationHistory(urlUpdateStrategy);
         const location = TestBed.inject(Location);

         TestBed.inject(ThrowingCanActivateGuard).throw = true;

         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         TestBed.inject(ThrowingCanActivateGuard).throw = false;
         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/first');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 1}));
       }));

    it(`restores history correctly when component throws error in constructor with urlUpdateStrategy ${
           urlUpdateStrategy}`,
       fakeAsync(() => {
         createNavigationHistory(urlUpdateStrategy);
         const location = TestBed.inject(Location);
         const router = TestBed.inject(Router);

         router.navigateByUrl('/throwing').catch(() => null);
         advance(fixture);
         expect(location.path()).toEqual('/second');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 2}));

         location.back();
         advance(fixture);
         expect(location.path()).toEqual('/first');
         expect(location.getState()).toEqual(jasmine.objectContaining({ɵrouterPageId: 1}));
       }));
  }
});

function createRoot<T>(router: Router, type: Type<T>): ComponentFixture<T> {
  const f = TestBed.createComponent(type);
  advance(f);
  router.initialNavigation();
  advance(f);
  return f;
}

@Component({selector: 'simple-cmp', template: `simple`})
class SimpleCmp {
}

@NgModule(
    {imports: [RouterModule.forChild([{path: '', component: SimpleCmp}])]},
    )
class ModuleWithSimpleCmpAsRoute {
}

@Component({selector: 'root-cmp', template: `<router-outlet></router-outlet>`})
class RootCmp {
}

@Component({selector: 'throwing-cmp', template: ''})
class ThrowingCmp {
  constructor() {
    throw new Error('Throwing Cmp');
  }
}



function advance(fixture: ComponentFixture<unknown>, millis?: number): void {
  tick(millis);
  fixture.detectChanges();
}

@NgModule({
  imports: [
    RouterOutlet,
    CommonModule,
  ],
  providers: [
    provideLocationMocks(),
  ],
  exports: [SimpleCmp, RootCmp, ThrowingCmp],
  declarations: [SimpleCmp, RootCmp, ThrowingCmp]
})
class TestModule {
}