Angular 5 - 我们如何测试 router.navigate([id],{relativeTo : this. _activatedRoute}])

Question

我想在 jasmine, karma 中测试这个功能。测试此功能的首选方法是什么。

功能测试(负载){ this._router.navigate([this.result.id], {relativeTo: this._activatedRoute}) }

我已经写了规范测试这个。

it('navigate to redirects', function(){
    let router=TestBed.get(Router);
    let spy = spyOn(router,"navigate");
    
    const payload: any = {
      event:{
        body:{
          result:{
            collections: 0,
            data: [],
            errors: [],
            errors_count: 0,
            meta: {},
            upload_id: "r1q3oFQfX"
          }
        }
      }
     };

   // console.log("##################id=",payload.event.body.result.upload_id);
    component.test(payload);
    fixture.detectChanges();
    expect(spy).toHaveBeenCalledWith([payload.event.body.result.upload_id])
  });

我也创建了假类

class RouterStub{
  navigate(params){
    console.log("parames",params)
  }
}

并添加到 configuraTestModule 中

 providers: [
    {provide: ENGINE_CONFIG,Store,Actions,Router,useValue:routerStub,

    }]

Answer 1

我假设您在您的组件中使用 (_router: Router)。

所以在你的测试中会添加这些行

class MockRouterService {
  navigate() { }
}

const mockRouterService = new MockRouterService();

TestBed.configureTestingModule({
  imports: [
    ...,
    RouterTestingModule,
  ],
  providers: [
    {
      provide: Router,
      useValue: mockRouterService,
    },
  ],
})
.compileComponents();

上面的代码将帮助您使用仅包含您要测试的功能的假类来模拟 Router 服务。
那你就

it('should call navigate', () => {
  spyOn(mockRouterService, 'navigate');
  component.test(abc);
  expect(mockRouterService.navigate).toHaveBeenCalled();
});

或者你可以像这样测试更具体的

it('should call navigate with correct params', () => {
  spyOn(mockRouterService, 'navigate');
  this._activatedRoute = 'your route';
  component.test({id: 1});
  expect(mockRouterService.navigate).toHaveBeenCalledWith([1], {relativeTo: 'your route'});
});