1

我在为 Angular 2 中的 router.navigate 编写存根时遇到问题。我目前编写了以下存根。这是角度文档中显示的内容。

@Injectable
export class RouterStub {
    navigate(commands: any[], extras?: NavigationExtras) { }

但是，当我使用此存根时，会出现以下错误。

TypeError: this.router.navigate is not a function

我的导航用法如下。

let summaryLink = ['/summary', this.client.id, this.client.lastName];
this.router.navigate(summaryLink);

任何帮助，将不胜感激。

只是一个更新......我能够使用我发现在这里引用的非 TestBed 方法进行此测试。但是，如果有人能够弄清楚如何使用 TestBed 方法进行此测试，我将不胜感激。谢谢

4

1 回答 1

1

您必须引导您的测试，包括路由器模块。这与引导应用程序非常相似：

const IMPORTS: any[] = [
    BrowserModule,
    ...
    RouterModule.forRoot(routes)
];

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: IMPORTS,
    declarations: DECLARATIONS
    providers: PROVIDERS
  }).compileComponents();
}));

然后，您可以获得对路由器的引用。

 beforeEach(() => {
  router = TestBed.get(Router);
  fixture = TestBed.createComponent(YourComponent);
  component = fixture.componentInstance;
  element = fixture.nativeElement;
});

测试状态（需要依赖，因为组件被渲染等等）：

it('routes to the dummy component', fakeAsync(() => {
  tick(1000);
  fixture.detectChanges();

  router.navigate(['dummy']);

  tick(1000);
  fixture.detectChanges();

  expect(router.isActive('/dummy', true)).toBe(true);
}));

测试通信（不路由；我们只需要验证导航是否真的发生）：

it('routes to the dummy component', fakeAsync(() => {
  spyOn(router, 'navigate').and.callFake(() => {});
  tick(1000);
  fixture.detectChanges();

  router.navigate(['dummy']);

  tick(1000);
  fixture.detectChanges();

  expect(router.navigate).toHaveBeenCalledWith(['dummy']);
}));

在实际测试中，您不会测试 navigate() 方法。实际上，您将测试某种用户行为，例如单击：

在组件中（在本例中为 YourComponent）：

onClick() {
    this.router.navigate(['dummy']);
}

在测试中（通过点击触发器替换 navigate() ）：

element.querySelector('button').click();
于 2017-01-30T15:13:47.627 回答