在使用 Angular 1 后开始使用 Angular 2。没有进行单元测试,因为它更像是一个副项目,我正在尝试至少开始 OK...我从 AngularClass 的示例开始,如果这很重要。
已经在 app.component.ts
中苦苦挣扎,其中包含我的导航位。此处模板的相关部分:
<nav class="navbar navbar-light bg-faded">
<div class="container">
<div class="nav navbar-nav">
<a class="navbar-brand" [routerLink]=" ['./'] ">Navbar</a>
<loading class="nav-item nav-link pull-xs-right" [visible]="user === null"></loading>
</div>
</div>
</nav>
<div class="container">
<main>
<router-outlet></router-outlet>
</main>
</div>
<footer>
<hr>
<div class="container">
</div>
</footer>
组件本身并不包含太多:
import { Component, ViewEncapsulation } from '@angular/core';
import { AuthService } from './_services';
import { User } from './_models';
import { Loading } from './_components';
@Component({
selector: 'app',
encapsulation: ViewEncapsulation.None,
template: require('./app.component.html'),
styles: [
require('./app.style.css')
]
})
export class App {
user: User;
constructor(private auth: AuthService) {
}
ngOnInit() {
this.auth.getUser().subscribe(user => this.user = user);
}
}
所有模块、组件和路由都是通过 App 模块引导的。需要的可以发帖。
我必须为其编写的测试让我基本上连接了路由器的所有内容(看起来如此)。首先,[routerLink] 不是“a”的原生属性
。好的,我修复它。然后:
Error in ./App class App - inline template:3:6 caused by: No provider for Router!
所以,我连接路由器,却发现:
Error in ./App class App - inline template:3:6 caused by: No provider for ActivatedRoute!
我添加的是:
Error in ./App class App - inline template:3:6 caused by: No provider for LocationStrategy!
到目前为止,测试看起来像:
import { inject, TestBed, async } from '@angular/core/testing';
import { AuthService } from './_services';
import { Router, RouterModule, ActivatedRoute } from '@angular/router';
import { AppModule } from './app.module';
// Load the implementations that should be tested
import { App } from './app.component';
import { Loading } from './_components';
describe('App', () => {
// provide our implementations or mocks to the dependency injector
beforeEach(() => TestBed.configureTestingModule({
declarations: [App, Loading],
imports: [RouterModule],
providers: [
{
provide: Router,
useClass: class {
navigate = jasmine.createSpy("navigate");
}
}, {
provide: AuthService,
useClass: class {
getAccount = jasmine.createSpy("getAccount");
isLoggedIn = jasmine.createSpy("isLoggedIn");
}
}, {
provide: ActivatedRoute,
useClass: class { }
}
]
}));
it('should exist', async(() => {
TestBed.compileComponents().then(() => {
const fixture = TestBed.createComponent(App);
// Access the dependency injected component instance
const controller = fixture.componentInstance;
expect(!!controller).toBe(true);
});
}));
});
我已经在 mock 输入了,这对我来说似乎是错误的。我错过了什么吗?有没有一种更智能的方法可以在测试中加载整个应用程序,而不是始终绑定(bind)每个依赖项?
最佳答案
为了测试,您应该使用 RouterTestingModule
而不是 RouterModule
。如果你想添加路由,你可以使用 withRoutes
imports: [
RouterTestingModule.withRoutes(Routes) // same any normal route config
]
另见
- Angular 2 unit testing components with routerLink
- Second half of this post模拟
ActivatedRoute
的想法。有时您在单元测试时不需要整个路由设施。您可以模拟路线。
关于unit-testing - angular2中的单元测试,依赖注入(inject),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39770395/