角2 RC4:具有依赖项注入的单元测试组件--有自己的服务
由于RC在Range2RC版本中不断升级/降低推荐内容，我遇到了这个问题。
我有一个具有依赖项注入(DI)的组件，它实际上是一个服务(在本例中是UserService)。当然，这个UserService有它自己的一些DIs。在更新到最新的角度2的RC4之后，我意识到我不能再创建类似的测试了。
因此，由于文档没有提到相对的内容，这里是我的代码(简化为这个问题)。
My组件：
import { Component } from '@angular/core';
import { MdButton } from '@angular2-material/button';
import {
MdIcon,
MdIconRegistry
} from '@angular2-material/icon';
import { UserService } from '../../services/index';
@Component({
moduleId: module.id,
selector: 'logout-button',
templateUrl: 'logout-button.component.html',
styleUrls: ['logout-button.component.css'],
providers: [MdIconRegistry, UserService],
directives: [MdButton, MdIcon]
})
export class LogoutButtonComponent {
constructor(public userService: UserService) {}
/**
* Call UserService and logout() method
*/
logout() {
this.userService.logout();
}
}组件的DI，如您所见的UserService具有一些DIs (路由器，AuthHttp & Http):
import { Injectable } from '@angular/core';
import {
Http,
Headers
} from '@angular/http';
import {
AuthHttp,
JwtHelper
} from 'angular2-jwt';
import { Router } from '@angular/router';
import { UMS } from '../common/index';
@Injectable()
export class UserService {
constructor(
private router: Router,
private authHttp: AuthHttp,
private http: Http) {
this.router = router;
this.authHttp = authHttp;
this.http = http;
}
/**
* Logs out user
*/
public logout() {
this.authHttp.get(UMS.url + UMS.apis.logout)
.subscribe(
data => this.logoutSuccess(),
err => this.logoutSuccess()
);
}
}，下面是对组件的测试：
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import {
beforeEach,
beforeEachProviders,
describe,
expect,
it,
inject,
fakeAsync,
TestComponentBuilder
} from '@angular/core/testing';
import { AuthHttp } from 'angular2-jwt';
import { Router } from '@angular/router';
import { Http } from '@angular/http';
import { LogoutButtonComponent } from './logout-button.component';
import { UserService } from '../../services/index';
describe('Component: LogoutButtonComponent', () => {
beforeEachProviders(() => [
LogoutButtonComponent,
UserService
]);
it('should inject UserService', inject([LogoutButtonComponent],
(component: LogoutButtonComponent) => {
expect(component).toBeTruthy();
}));
});暂时不要担心(它)。
如您所见，我正在beforeEachProviders上添加相关的提供程序。
在这种情况下，我在运行测试时会遇到一个错误：
错误:没有路由器的提供者！(LogoutButtonComponent -> UserService ->路由器)
我们可以这样说。
因此，为了避免这些错误，我还要在提供者中添加服务的DIs：
beforeEachProviders(() => [
LogoutButtonComponent,
Router,
AuthHttp,
Http,
UserService
]);但现在我发现了这个错误：
错误:无法解析“路由器”的所有参数(？、?)。确保所有参数都使用Inject修饰，或者具有有效的类型注释，并且“路由器”使用可注入的装饰。
我真的在试图弄清楚发生了什么，所以我在这里找到了一些相关的答案，但所有的答案都已经过时，涵盖了旧的router-deprecated或angular2/router，但这两种方法都是不可取的，而且都没有涉及到这种情况。
我很想在这个问题上提供一些帮助，或者一些资源，因为我找不到任何与路由器的最新版本："@angular/router": "3.0.0-beta.2"和RC4相关的东西。
谢谢
更新！
我设法绕过了上述两个错误，现在我可以访问组件了。下面是描述代码：
describe('Component: LogoutButtonComponent', () => {
let component: LogoutButtonComponent;
let router: any = Router;
let authHttp: any = AuthHttp;
let http: any = Http;
let service: any = new UserService(router, authHttp, http);
beforeEachProviders(() => [
LogoutButtonComponent
]);
beforeEach(() => {
component = new LogoutButtonComponent(service);
});
it('should inject UserService', () => {
expect(component.userService).toBeTruthy();
});
it('should logout user', () => {
localStorage.setItem('token', 'FOO');
component.logout();
expect(localStorage.getItem('token')).toBeUndefined();
});
});但是，即使注入和访问DI服务，服务的DIs也不是。所以现在我得到了这个错误：
TypeError: this.authHttp.get不是一个函数
有什么想法吗？
回答 2
Stack Overflow用户
发布于 2016-07-26 08:05:11
看起来您遇到了依赖循环问题，因为您的UserSerivce还需要注入AuthHttp、Http等.如果你需要测试你的组件，它真的会被打扰一次。我的方法是创建一个模拟UserSerivce并通过UserService.logout()方法返回expect模拟值，因为您不需要知道UserService中到底发生了什么，只需要返回一个值：
let MockUserService = {
logout() {
// return some value you need
}
}然后，在测试套件中：
import { provide } from '@angular/core'
beforeEachProviders(() => [
provide(UserService, {useClass: MockUserService})
])
... detail test code here我希望这对你有用。这是一篇对我很有帮助的帖子：https://developers.livechatinc.com/blog/testing-angular-2-apps-dependency-injection-and-components/
Stack Overflow用户
发布于 2016-07-28 14:32:35
对于RC4，在测试中使用http需要一些解决方案。另请参阅此问题(应在RC5中解决)：
https://github.com/angular/angular/issues/9294
将它添加到我的单元-tests.html中，为我修复了它：
System.import('@angular/platform-browser/src/browser/browser_adapter').then(function(browser_adapter) {
browser_adapter.BrowserDomAdapter.makeCurrent();
})https://stackoverflow.com/questions/38397245
复制相似问题
腾讯云开发者
