Angular 2 个带有 routerLink 的单元测试组件
Angular 2 unit testing components with routerLink
我正在尝试使用 angular 2 final 测试我的组件,但我收到错误消息,因为该组件使用了 routerLink
指令。我收到以下错误:
Can't bind to 'routerLink' since it isn't a known property of '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);
});
});
我看了几个类似问题的答案,但找不到适合我的解决方案。
您需要配置所有路由。对于测试,您可以使用 @angular/router/testing
中的 RouterTestingModule
而不是使用 RouterModule
,您可以在其中设置一些模拟路由。您还需要为您的 *ngFor
从 @angular/common
导入 CommonModule
。下面是一个完整的通过测试
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 ]
然后检查 link 是否使用正确的 URL 路径呈现,例如
let href = fixture.debugElement.query(By.css('a')).nativeElement
.getAttribute('href');
expect(href).toEqual('/settings/testing/edit/1');
如果你不测试路由器相关的东西,你可以配置测试忽略未知指令 'NO_ERRORS_SCHEMA'
import { NO_ERRORS_SCHEMA } from '@angular/core';
TestBed.configureTestingModule({
declarations: [
ListComponent,
],
schemas: [ NO_ERRORS_SCHEMA ]
});
为 routerLink
编写测试用例。您可以按照以下步骤操作。
导入 RouterTestingModule
和 RouterLinkWithHref
。
import { RouterTestingModule } from '@angular/router/testing';
import { RouterLinkWithHref } from '@angular/router';
在你的模块中导入RouterTestingModule
TestBed.configureTestingModule({
imports: [ RouterTestingModule.withRoutes([])],
declarations: [ TestingComponent ]
})
在测试用例中找到指令 RouterLinkWithHref
tot 测试 link.
是否存在
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);
});
我正在尝试使用 angular 2 final 测试我的组件,但我收到错误消息,因为该组件使用了 routerLink
指令。我收到以下错误:
Can't bind to 'routerLink' since it isn't a known property of '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);
});
});
我看了几个类似问题的答案,但找不到适合我的解决方案。
您需要配置所有路由。对于测试,您可以使用 @angular/router/testing
中的 RouterTestingModule
而不是使用 RouterModule
,您可以在其中设置一些模拟路由。您还需要为您的 *ngFor
从 @angular/common
导入 CommonModule
。下面是一个完整的通过测试
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 ]
然后检查 link 是否使用正确的 URL 路径呈现,例如
let href = fixture.debugElement.query(By.css('a')).nativeElement
.getAttribute('href');
expect(href).toEqual('/settings/testing/edit/1');
如果你不测试路由器相关的东西,你可以配置测试忽略未知指令 'NO_ERRORS_SCHEMA'
import { NO_ERRORS_SCHEMA } from '@angular/core';
TestBed.configureTestingModule({
declarations: [
ListComponent,
],
schemas: [ NO_ERRORS_SCHEMA ]
});
为 routerLink
编写测试用例。您可以按照以下步骤操作。
导入
RouterTestingModule
和RouterLinkWithHref
。import { RouterTestingModule } from '@angular/router/testing'; import { RouterLinkWithHref } from '@angular/router';
在你的模块中导入
RouterTestingModule
TestBed.configureTestingModule({ imports: [ RouterTestingModule.withRoutes([])], declarations: [ TestingComponent ] })
在测试用例中找到指令
是否存在RouterLinkWithHref
tot 测试 link.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); });