[英]Unit testing RouterLink in Angular2 component
I am trying to test a click on a routerLink in my component: 我正在尝试在组件中测试对routerLink的单击:
<div class="side-menu-boards-container">
<ul class="side-menu-boards-list">
<li *ngFor="let board of boards">
<a [routerLink]="['/board', board.id]">{{board.name}}</a>
</li>
</ul>
</div>
using this test: 使用此测试:
it('should navigate to correct board url',
async(inject([Location], (location: Location) => {
let nativeElement = fixture.nativeElement;
let link = nativeElement.querySelector('.side-menu-boards-list li a');
link.click();
fixture.whenStable().then(() => {
expect(location.path()).toEqual('/board/1');
});
})));
but my expect is failing with the following message: Expected '/' to equal '/board/1'
但我的期望失败并显示以下消息:
Expected '/' to equal '/board/1'
Here is my test setup: 这是我的测试设置:
import { async, inject, ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, NO_ERRORS_SCHEMA, DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
import { Location } from '@angular/common';
import { RouterTestingModule } from '@angular/router/testing';
import { SideMenuComponent } from './side-menu.component';
import { BoardComponent } from '../board/board.component';
import { BoardMenuItem } from './models/board-menu-item';
describe('SideMenuComponent', () => {
let component: SideMenuComponent;
let fixture: ComponentFixture<SideMenuComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [SideMenuComponent, BoardComponent],
schemas: [NO_ERRORS_SCHEMA],
imports: [RouterTestingModule.withRoutes([
{ path: 'board/:id', component: BoardComponent }
])]
})
.compileComponents();
});
I 've already followed the answers from two other SO related questions ( here and here ) but to no avail. 我已经关注了其他两个与SO相关的问题( 此处和此处 )的答案,但无济于事。
Any ideas on what am i doing wrong? 关于我在做什么错的任何想法吗?
I suggest you create your component async if you are using external templates. 如果您使用外部模板,建议您异步创建组件。
The second thing I would suggest is to try to use RouterTestingModule.withRoutes(<your routes module>)
for testing of router. 我建议的第二件事是尝试使用
RouterTestingModule.withRoutes(<your routes module>)
来测试路由器。
And don't forget initial Navigation. 并且不要忘记初始导航。
beforeEach(async(() => {
TestBed.configureTestingModule({
imports:[RouterTestingModule.withRoutes(routes),
<Another Modules>,
],
declarations: [ <your component>],
providers: [<Services which you have injected inside of your constructor>]
})
.compileComponents()
.then(() =>{
fixture = TestBed.createComponent(<your component>);
component = fixture.componentInstance;
router = TestBed.get(Router);
location = TestBed.get(Location);
debugComponent = fixture.debugElement;
//initial navigation
router.initialNavigation();
});
}));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.