Angular2 单元测试。检查函数是否调用 router.navigate答案

【问题标题】：Angular2 unit test. Check if a function calls router.navigateAngular2 单元测试。检查函数是否调用 router.navigate
【发布时间】：2018-05-18 17:19:25
【问题描述】：

我是测试新手。有一个函数，当它被调用时，它会导航到一个新页面。但是测试失败并出现错误：

预期的间谍导航已被调用 [ [ './../admin/documents/12345' ] ] 但它从未被调用过。

public showProfile(id) {
   this.router.navigate(['./../admin/documents/' + id]);
}

在我的测试文件中：

import {ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { AppComponent} from './app.component';
import {FormsModule} from "@angular/forms";
import {HttpClientTestingModule} from "@angular/common/http/testing";
import {Router} from "@angular/router";


describe('AppComponent', () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let mockRouter;

  beforeEach(() => {
    TestBed.configureTestingModule({
    declarations: [ AppComponent],
    imports: [FormsModule, HttpClientTestingModule],
    providers: [
      { provide: Router, useValue: mockRouter }]
  });

  fixture = TestBed.createComponent(AppComponent);
  component = fixture.componentInstance;
  mockRouter = {
    navigate: jasmine.createSpy('navigate')
  };
 });


 describe('when showProfile() is called', () => {
   it('navigates to a profile page',() => {
     const id= 12345;
     component.showProfile(id);
     expect(mockRouter.navigate)
     .toHaveBeenCalledWith(['./../admin/documents/' + id]);
   });
 });
});

【问题讨论】：

标签： javascript angular testing jasmine karma-jasmine

【解决方案1】：

在TestBed.configureTestingModule中使用之前，您需要初始化mockRouter。

另外，expect(mockRouter.navigate).toHaveBeenCalledWith(['./../admin/documents/' + id]); 将不起作用，因为 ['a'] !== ['a']。作为一种解决方法，您可以执行以下操作：

expect(mockRouter.navigate.calls.mostRecent().args[0][0])
  .toEqual('./../admin/documents/' + id);

我为你的测试创建了一个Stackblitz。

【讨论】：