Jest Angular 测试 NavigationEnd

Question

这是我要测试的组件代码：

allpages: Array<Page> = [
  { name: 'Home', url: '/home' },
];

constructor(private router: Router) {
    this.$routerEvent = this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        let route = event.url !== '/' ? event.url : event.urlAfterRedirects;
        this.currentPage = this.allpages.find(
          (page) => page.url === route
        );
      }
    });
  }

这是我的测试：

beforeEach(async () => {
  TestBed.configureTestingModule({
    declarations: [NavigationBarComponent],
    imports: [MatIconModule, RouterTestingModule],
  }).compileComponents();

  fixture = TestBed.createComponent(NavigationBarComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

it('should set home page as current page', inject([Router], (router: Router) => {
  router.initialNavigation();
  expect(component.currentPage).toEqual({ name: 'Home', url: '/home' });
}));

测试失败，因为 component.currentPage = undefined。

我已经读到导航是一个异步操作，我应该如何正确地实施测试，或者我可能走的是完全错误的方式？

Answer 1

要测试路由器事件，我们需要模拟路由器服务 object。在测试 session 配置中，我们将路由器的事件属性替换为 Observable object。要访问事件 observable object，我们创建一个单独的ReplaySubject<RouterEvent>.变量ReplaySubject<RouterEvent>.

 const eventSubject = new ReplaySubject<RouterEvent>(1);

创建一个路由器模拟

const routerMock = {
     events: eventSubject.asObservable(),
 };

使用 mock object 时不要使用RouterTestingModule
说明： Angular 2 Final Release Router Unit Test

beforeEach(async () => {
  TestBed.configureTestingModule({
    declarations: [NavigationBarComponent],
    imports: [MatIconModule],
    providers: [
        {provide: Router, useValue: routerMock} <-- Override with mock object
    ]

  }).compileComponents();

  fixture = TestBed.createComponent(NavigationBarComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
});

it('should set home page as current page', () => {
   // simulate the navigation end events
    eventSubject.next(new NavigationEnd(1, '/home', '/urlAfterRedirect'));
    expect(app.currentPage).toEqual({ name: 'Home', url: '/home' });
});

参考：使用 Jasmine 的方法
更多的