Question

我正在尝试使用angular 2 final测试我的组件，但是我得到一个错误，因为该组件使用routerLink指令。我收到以下错误：

无法绑定到'routerLink'，因为它不是'a'的已知属性。

这是ListComponent模板的相关代码

<a 
  *ngFor="let item of data.list" 
  class="box"
  routerLink="/settings/{{collectionName}}/edit/{{item._id}}">

这是我的考验。

import { TestBed } from '@angular/core/testing';

import { ListComponent } from './list.component';
import { defaultData, collectionName } from '../../config';
import { initialState } from '../../reducers/reducer';


const data = {
  sort: initialState.sort,
  list: [defaultData, defaultData],
};

describe(`${collectionName} ListComponent`, () => {
  let fixture;
  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        ListComponent,
      ],
    }).compileComponents(); // compile template and css;
    fixture = TestBed.createComponent(ListComponent);
    fixture.componentInstance.data = data;
    fixture.detectChanges();
  });

  it('should render 2 items in list', () => {
    const el = fixture.debugElement.nativeElement;
    expect(el.querySelectorAll('.box').length).toBe(3);
  });
});

我查看了类似问题的几个答案，但找不到适合我的解决方案。

Answer 1

您需要配置所有路由。要进行测试，您可以使用RouterTestingModule中的@angular/router/testing而不是CommonModule进行测试，您可以在其中设置一些模拟路由。您还需要从@angular/common *ngFor导入import { Component } from '@angular/core'; import { Router } from '@angular/router'; import { By } from '@angular/platform-browser'; import { Location, CommonModule } from '@angular/common'; import { RouterTestingModule } from '@angular/router/testing'; import { TestBed, inject, async } from '@angular/core/testing'; @Component({ template: ` <a routerLink="/settings/{{collName}}/edit/{{item._id}}">link</a> <router-outlet></router-outlet> ` }) class TestComponent { collName = 'testing'; item = { _id: 1 }; } @Component({ template: '' }) class DummyComponent { } describe('component: TestComponent', function () { beforeEach(() => { TestBed.configureTestingModule({ imports: [ CommonModule, RouterTestingModule.withRoutes([ { path: 'settings/:collection/edit/:item', component: DummyComponent } ]) ], declarations: [ TestComponent, DummyComponent ] }); }); it('should go to url', async(inject([Router, Location], (router: Router, location: Location) => { let fixture = TestBed.createComponent(TestComponent); fixture.detectChanges(); fixture.debugElement.query(By.css('a')).nativeElement.click(); fixture.whenStable().then(() => { expect(location.path()).toEqual('/settings/testing/edit/1'); console.log('after expect'); }); }))); });。以下是完整的通过测试

RouterTestingModule

更新

另一种选择，如果您只想测试路线是否正确渲染，而不尝试导航......

您只需导入imports: [ RouterTestingModule ]而无需配置任何路由

let href = fixture.debugElement.query(By.css('a')).nativeElement
    .getAttribute('href');
expect(href).toEqual('/settings/testing/edit/1');

然后只检查链接是否使用正确的URL路径呈现，例如

{{1}}

Answer 2

如果您没有测试路由器相关的东西，您可以配置测试以忽略未知指令＆＃39; NO_ERRORS_SCHEMA＆＃39;

{{1}}

Answer 3

为routerLink编写测试用例。您可以按照以下步骤操作。

导入RouterTestingModule和RouterLinkWithHref。

import { RouterTestingModule } from '@angular/router/testing';
import { RouterLinkWithHref } from '@angular/router';

在模块中导入RouterTestingModule

TestBed.configureTestingModule({
  imports: [ RouterTestingModule.withRoutes([])],
  declarations: [ TestingComponent ]
})

在测试用例中，找到指令RouterLinkWithHref来测试是否存在链接。

it('should have a link to /', () => {
  const debugElements = fixture.debugElement.queryAll(By.directive(RouterLinkWithHref));
  const index = debugElements.findIndex(de => {
    return de.properties['href'] === '/';
  });
  expect(index).toBeGreaterThan(-1);
});

使用routerLink进行Angular 2单元测试组件

3 个答案:

更新