如何在角度 2 中测试“Router NavigationEnd Event”？答案

【问题标题】：How can I test `Router NavigationEnd Event` in angular 2?如何在角度 2 中测试“Router NavigationEnd Event”？
【发布时间】：2018-01-03 16:34:31
【问题描述】：

有谁知道我如何测试Router NavigationEnd Event？我在 Angular 2 中有以下代码，我正在使用 Jasmine。

import { Injectable, EventEmitter } from '@angular/core';
import { Router, NavigationEnd, Event } from '@angular/router';

@Injectable()
export class IhmPageClassService {
    emitPageClass = new EventEmitter<string>();
    currentRoute: string;

    constructor(router: Router) {
        router.events.subscribe((event: Event) => {
            if (event instanceof NavigationEnd) {
                this.currentRoute = (<NavigationEnd>event).url;
            }
        });
    }
}

谢谢。

【问题讨论】：

标签： angular unit-testing jasmine angular-routing

【解决方案1】：

我不确定您为什么需要测试路由器事件，但如果您想调试它们，请启用跟踪选项，如下所示：

RouterModule.forRoot(routes, { enableTracing: true })

这将在浏览器的控制台上打印有关路由器事件的信息：

【讨论】：

因为我得到Router Event后有更多的代码，需要测试一下。我的意思是，我需要代码覆盖率。

【解决方案2】：

所以我有幸使用主题对此进行了测试。

在您的测试设置中，您创建一个 eventsSubject。

let eventsSub = new BehaviorSubject<any>(null);

然后创建你的 routerStub：

routerStub = { events: eventsSub }

然后创建 NavigationEnd 对象。

let homeNav = new NavigationEnd(1, 'home', 'home');

现在在您的测试中使用 routerStub 作为 Router 服务的值，您现在应该能够测试您的功能了。

it('should set the currentRoute correctly', () => {
  eventSub.next(homeNav);
  fixture.detectChanges();
  expect(component.currentRoute).toEqual('home')      
});

【讨论】：

没错，您必须提供自己的存根/模拟才能控制在 router.events observable 上发出的内容。另外，不要忘记您必须在 TestModule 定义中提供模拟/存根：providers: [ { provide: Router, useValue: routerStub } ] 另请参阅：stackoverflow.com/questions/52901047/…
我在这些场景中测试导航和 router.events。问题是我无法解决这两种情况。使用 Stub 技巧，我可以测试 router.events，但所有基于 Router.navigate(..) 的测试都失败了。
由于提供程序，我收到“TypeError：无法读取未定义的属性 'root'”。其他搜索说这是真的，因为我使用的是 RouterTestingModule。但是，如果我删除该模块，则会出现“找不到 routerLink”错误。