angular - 在角度测试或 fakeAsync 期间进行真正的路由器导航是否好？

Question

在为路由编写角度单元测试时，是否可以使用真实值进行导航，或者我们应该使用 fakeAsync 进行路由器导航？

选项1

it('navigate to "home" takes you to /home', fakeAsync(() => {
        router.navigate(['home']);
        tick();
        expect(location.path()).toBe('/home');
 }));

选项 2

it('navigate to "home" takes you to /home', () => {
        router.navigate(['home']).then(() => {
            expect(location.path()).toBe('/home');
        });
    });

Answer 1

通常，您测试的是组件，而不是路由器，并且只关心组件是否在给定条件下使用正确的地址导航。

你可以像这样使用 jasmine 创建一个 mockRouter/spyRouter。

const routerSpy = jasmine.createSpyObj('Router', ['navigate']);

然后您可以将其提供给测试模块。

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

您可以拥有这样的测试规范。（示例取自 angular 官方文档）

    it('should tell ROUTER to navigate when hero clicked', () => {

  heroClick(); // trigger click on first inner <div class="hero">

  // args passed to router.navigateByUrl() spy
  const spy = router.navigateByUrl as jasmine.Spy;
  const navArgs = spy.calls.first().args[0];

  // expecting to navigate to id of the component's first hero
  const id = comp.heroes[0].id;
  expect(navArgs).toBe('/heroes/' + id,
    'should nav to HeroDetail for first hero');
});

阅读有关路由组件测试的更多信息。