[英]Angular 2/4/6/7 - Unit Testing with Router
在 Angular 2.0.0 中,我正在对使用路由器的组件进行单元测试。 但是我得到“提供的参数与调用目标的任何签名不匹配”。 错误。 在 spec.ts 中的 Visual Studio 代码中,新的 Router() 以红色突出显示
如果有人能让我知道正确的语法是什么,我真的很感激? 提前致谢。 我的代码如下:
规格
import { TestBed, async } from '@angular/core/testing';
import { NavToolComponent } from './nav-tool.component';
import { ComponentComm } from '../../shared/component-comm.service';
import { Router } from '@angular/router';
describe('Component: NavTool', () => {
it('should create an instance', () => {
let component = new NavToolComponent( new ComponentComm(), new Router());
expect(component).toBeTruthy();
});
});
组件构造器
constructor(private componentComm: ComponentComm, private router: Router) {}
您也可以只使用 RouterTestingModule 并像这样监视导航功能......
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '@angular/router';
import { MyModule } from './my-module';
import { MyComponent } from './my-component';
describe('something', () => {
let fixture: ComponentFixture<LandingComponent>;
let router: Router;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
MyModule,
RouterTestingModule.withRoutes([]),
],
}).compileComponents();
fixture = TestBed.createComponent(MyComponent);
router = TestBed.get(Router);
});
it('should navigate', () => {
const component = fixture.componentInstance;
const navigateSpy = spyOn(router, 'navigate');
component.goSomewhere();
expect(navigateSpy).toHaveBeenCalledWith(['/expectedUrl']);
});
});
这是因为Route
有一些它期望传递给它的构造函数的依赖项。
如果您使用的是 Angular 组件,则不应尝试进行孤立的测试。 您应该使用 Angular 测试基础设施来准备测试环境。 这意味着让 Angular 创建组件,让它注入所有必需的依赖项,而不是您尝试创建所有内容。
为了让你开始,你应该有类似的东西
import { TestBed } from '@angular/core/testing';
describe('Component: NavTool', () => {
let mockRouter = {
navigate: jasmine.createSpy('navigate')
};
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [ NavToolComponent ],
providers: [
{ provide: Router, useValue: mockRouter },
ComponentComm
]
});
});
it('should click link', () => {
let fixture = TestBed.createComponent(NavToolComponent);
fixture.detectChanges();
let component: NavToolComponent = fixture.componentInstance;
component.clickLink('home');
expect(mockRouter.navigate).toHaveBeenCalledWith(['/home']);
});
});
或者类似的东西。 您可以使用TestBed
从头开始配置模块以进行测试。 您可以使用@NgModule
以几乎相同的方式配置它。
在这里,我们只是在嘲笑路由器。 由于我们只是进行单元测试,因此我们可能不需要真正的路由功能。 我们只想确保使用正确的参数调用它。 模拟和间谍将能够为我们捕获该呼叫。
如果您确实想使用真正的路由器,那么您需要使用RouterTestingModule
,您可以在其中配置路由。 在此处和此处查看示例
另见:
Jasmine 用完整的间谍对象做得更好......
describe('Test using router', () => {
const router = jasmine.createSpyObj('Router', ['navigate']);
...
beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [ { provide: Router, useValue: router } ],
...
});
});
如果我们在组件控制器中注入 Route 服务,这里是一个例子:
import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing'; // Because we inject service in our component
import { Router } from '@angular/router'; // Just if we need to test Route Service functionality
import { AppComponent } from './app.component';
import { DummyLoginLayoutComponent } from '../../../testing/mock.components.spec'; // Because we inject service in your component
describe('AppComponent', () => {
let router: Router; // Just if we need to test Route Service functionality
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent,
DummyLoginLayoutComponent // Because we inject service in our component
],
imports: [
RouterTestingModule.withRoutes([
{ path: 'login', component: DummyLoginLayoutComponent },
]) // Because we inject service in our component
],
}).compileComponents();
router = TestBed.get(Router); // Just if we need to test Route Service functionality
router.initialNavigation(); // Just if we need to test Route Service functionality
}));
it('should create the app', async(() => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
});
我们还可以测试其他功能,例如navigate()
。 以防万一:
it('should call eventPage once with /register path if event is instanceof NavigationStart', fakeAsync(() => {
spyOn(analyticService, 'eventPage');
router.navigate(['register'])
.then(() => {
const baseUrl = window.location.origin;
const url = `${baseUrl}/register`;
expect(analyticService.eventPage).toHaveBeenCalledTimes(1);
expect(analyticService.eventPage).toHaveBeenCalledWith(url);
});
}));
我的文件包含所有模拟组件(mock.components.specs.ts)
import { Component } from '@angular/core';
@Component({
selector: 'home',
template: '<div>Dummy home component</div>',
styleUrls: []
})
export class DummyHomeComponent { }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.