unit-testing - 如何测试 Angular2 的 router.navigate？

Question

我遇到了失踪 <router-outlet>其他单元测试中的消息，但为了有一个很好的独立示例，我创建了一个 AuthGuard 来检查用户是否已登录以执行某些操作。

这是代码:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (!this.authService.isLoggedIn()) {
        this.router.navigate(['/login']);
        return false;
    }
    return true;
}

现在我想为此编写一个单元测试。

这就是我开始测试的方式:

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [
            RouterTestingModule.withRoutes([
                {
                    path: 'login',
                    component: DummyComponent
                }
            ])
        ],
        declarations: [
            DummyComponent
        ],
        providers: [
            AuthGuardService,
            {
                provide: AuthService,
                useClass: MockAuthService
            }
        ]
    });
});

我创建了一个什么都不做的 DummyComponent。现在我的测试。假装该服务返回 false 并触发 this.router.navigate(['/login']) :

it('should not let users pass when not logged in', (): void => {
    expect(authGuardService.canActivate(<any>{}, <any>{})).toBe(false);
});

这将引发异常“无法找到要加载的主要 socket ”。显然我可以使用 toThrow()而不是 toBe(false) ，但这似乎不是一个非常明智的解决方案。因为我在这里测试服务，所以没有模板可以放置 <router-outlet>标签。我可以模拟路由器并制作我自己的导航功能，但是 RouterTestingModule 有什么意义呢？也许您甚至想检查导航是否有效。

Answer 1

I could mock the router and make my own navigate function, but then what's the point of RouterTestingModule? Perhaps you even want to check that navigation worked.

没有实际意义。如果他只是 auth 守卫的单元测试，那么只需模拟并监视模拟以检查它的 navigate 方法是否使用 login 参数调用

let router = {
  navigate: jasmine.createSpy('navigate')
}

{ provide: Router, useValue: router }

expect(authGuardService.canActivate(<any>{}, <any>{})).toBe(false);
expect(router.navigate).toHaveBeenCalledWith(['/login']);

单元测试通常应该这样写。要尝试测试任何实际的真实导航，这可能属于端到端测试的范畴。