Question

我正在为角度应用程序运行单元测试，我想对角度应用程序中的导航是否正常进行单元测试。

 if (this.customer.length == 0) {
     this.router.navigate(['/nocustomer']);
 }

并为此进行单元测试

 it(`should navigate to nocustomer`,()=>{
   component.customers.length=0;
   //what must be written here to check this
})

Answer 1

选中unit testing router in Angular

执行以下操作

1）从@angular导入路由器。

import { Router } from '@angular/router';

2）将路由器添加到您的提供程序阵列中，并换出一个routerSpy。

TestBed.configureTestingModule({
  providers: [
    { provide: Router, useValue: routerSpy }
  ]
})

3）最后，创建routerSpy并创建一个茉莉间谍，以观察导航方法。

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

当组件在测试运行时找不到<router-outlet></router-outlet>元素时，这将阻止单元测试失败。

然后可以使用以下命令测试router.navigate（）是否已被调用：

expect (routerSpy.navigate).toHaveBeenCalledWith(['/nocustomer']);

因此，请像下面那样修改您的it()语句并添加上面的内容配置

it(`should navigate to nocustomer`, () => {
   component.customers = [];
   expect (routerSpy.navigate).toHaveBeenCalledWith(['/nocustomer']);
});

Answer 2

有时候，我会动态地将其他参数放入导航中。因此，只期望我在测试中使用的路径：

...
test('Navigate to /nextPage.', inject([Router], (mockRouter: Router) => {

  const spy = spyOn(mockRouter, 'navigate').and.stub();

  component.goToNextPageMethod();

  expect(spy.calls.first().args[0]).toContain('/nextPage');

}));
...

参考：https://semaphoreci.com/community/tutorials/testing-routes-in-angular-2

如何在角度应用程序中对router.navigate进行单元测试

2 个答案: