使用routerLink的Angular 2unit testing组件

我想用angular2最后testing我的组件，但我得到一个错误，因为组件使用routerLink指令。 我得到以下错误：

由于它不是“a”的已知属性，因此无法绑定到“routerLink”。

这是ListComponent模板的相关代码

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

这是我的testing。

 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); }); }); 

我看了几个类似的问题的答案，但找不到解决scheme，为我工作。

Answer 1

你需要configuration所有的路由。 对于testing，而不是使用RouterModule ，你可以使用@angular/router/testing的RouterTestingModule ，在这里你可以设置一些模拟路由。 您还需要从@angular/common为*ngFor 。 以下是一个完整的通过testing

 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'); }); }))); }); 

UPDATE

另一种select，如果你只是想testing的路线正确渲染，而不尝试导航…

您只需导入RouterTestingModule而不configuration任何路由

 imports: [ RouterTestingModule ] 

那么只要检查链接是否显示正确的URLpath，例如

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

Answer 2

如果你没有testing路由器相关的东西，你可以configurationtesting忽略未知的指令与'NO_ERRORS_SCHEMA'

  import { NO_ERRORS_SCHEMA } from '@angular/core'; TestBed.configureTestingModule({ declarations: [ ListComponent, ], schemas: [ NO_ERRORS_SCHEMA ] }); 

Answer 3

编写routerLink 。 你可以按照下面的步骤。

1. 导入RouterTestingModule和RouterLinkWithHref 。

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

2. 在模块中导入RouterTestingModule

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

3. 在testing用例中find指令RouterLinkWithHref tottesting是否存在链接。

    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); 

   }）;