Question

由于Angular团队不断升级/弃用Angular 2 RC版本中的内容，我遇到了这个问题。

我有一个具有依赖注入（DI）的组件，它实际上是一个服务（在这种情况下是UserService）。这个UserService当然有一些自己的DI。在更新到Angular 2的最新RC4之后，我意识到我不能再创建类似的测试了。

因为文档中没有提到相关内容，而是我的代码（针对此问题进行了简化）。

我的组件：

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，用户服务，你可以看到有一些DI（路由器，AuthHttp＆amp; 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 - ＆gt; UserService - ＆gt; Router）

预计会发生这种情况。

因此，为了避免这些错误，我还要在提供商中添加服务的DI：

  beforeEachProviders(() => [
    LogoutButtonComponent,
    Router,
    AuthHttp,
    Http,
    UserService
  ]);

但是现在我得到了这个错误：

错误：无法解析＆＃39;路由器＆＃39;（？，？，？，？，？，？，？）的所有参数。确保所有参数都使用Inject进行修饰或具有有效的类型注释，并且“＆＃39;路由器＆＃39;用Injectable装饰。

我真的想弄清楚发生了什么，所以我在这里找到了一些相关的答案，但是所有这些都已过时，涵盖旧的router-deprecated或angular2/router，但两者都被弃用了不包括这种情况。

我会喜欢这方面的帮助，也许还有一些资源，因为我找不到与最新版本的路由器相关的任何内容："@angular/router": "3.0.0-beta.2"和RC4。

由于

UPDATE！

我设法绕过上面的两个错误，现在我可以访问该组件。这是说明代码：

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服务被注入并且可访问服务的DI也不是。所以现在我收到了这个错误：

TypeError：this.authHttp.get不是函数

有什么想法吗？

Answer 1

看起来你遇到了依赖循环问题，因为你的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/

Answer 2

使用RC4，在测试中使用http需要一些变通方法。另见此问题（应在RC5中修复）：

https://github.com/angular/angular/issues/9294

将此添加到我的unit-tests.html为我修复了它：

System.import('@angular/platform-browser/src/browser/browser_adapter').then(function(browser_adapter) {
    browser_adapter.BrowserDomAdapter.makeCurrent();
})

Angular 2 RC4：单元测试组件，具有依赖注入服务，具有自己的

2 个答案: