Angular - 使用后退导航测试路由

Question

我正在尝试在 Angular 应用程序中测试路由。我可以成功测试正向导航，但无法测试反向导航。

我的测试规范:

import {Location} from "@angular/common";
import {TestBed, fakeAsync, tick} from '@angular/core/testing';
import {RouterTestingModule} from "@angular/router/testing";
import {Router} from "@angular/router";

import {
    HomeComponent,
    SearchComponent,
    AppComponent,
    routes
} from "./router"

describe('Router: App', () => {

  let location: Location;
  let router: Router;
  let fixture;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [    RouterTestingModule.withRoutes(routes)],
      declarations: [
        HomeComponent,
        SearchComponent,
        AppComponent
      ]
    });

    router = TestBed.get(Router);
    location = TestBed.get(Location);

    fixture = TestBed.createComponent(AppComponent);
  });

  it('location.back()', fakeAsync(() => {
    router.navigate(['']);
    tick();
    expect(router.routerState.snapshot.url).toBe('/home');

    router.navigate(['/search']);
    tick();
    expect(router.routerState.snapshot.url).toBe('/search');

    console.log('BACK')
    location.back()
    tick();
    expect(location.path()).toBe('/home');
    expect(router.routerState.snapshot.url).toBe('/home');
  })); 
});

使用时 router.navigate() , routerState已更新(我还检查了 router.events 发送导航事件)。但是，在调用 location.back() 时路由器状态没有更新，我没有通过 router.events 收到路由器事件.

测试代码的首选方法是什么，它在 Angular 中使用后退(和前进)导航？

提前致谢。

Answer 1

我有同样的问题，也没有任何线索。所以我开始挖掘如何RouterTestingModule在您的用例中设置 2 个最重要的“组件”:Router和 Location .
用过的Router是真的但是交了SpyLocation .所以我认为它只是伪造 popstate 并且不会以任何方式修改路由器状态，但它实际上具有与真实 Location 相同的副作用 - 它发出一个事件(在您的情况下为 popstate )。现在 Router , 不管 位置实现的，订阅 通过调用其 setUpLocationChangeListener 来访问这些事件，并且当一个事件像 popstate 一样发生时，它会在它的 routerState 中反射(reflect)它。 .我发现，在我的测试用例中，显然在你的测试用例中，事件订阅没有被创建，因为这个方法没有被调用。
解决方法很简单。您必须调用 router.initialNavigation()在测试任何 popstate 代码之前。理想情况下，您将它作为路由器上的第一个操作。因为，正如您在下面看到的(这是唯一完成此操作的地方)，位置更改监听器设置在那里。
来自 router.ts

initialNavigation(): void {
    this.setUpLocationChangeListener();                                                                                                                                                                                                                                            
    if (this.navigationId === 0) {
        this.navigateByUrl(this.location.path(true), {replaceUrl: true})      
    }
}