Question

我想测试一个具有一些依赖关系的简单组件。所以我必须提供一些供应商。

/* tslint:disable:no-unused-variable */

import { By }           from '@angular/platform-browser';
import { DebugElement, provide } from '@angular/core';

import {
  beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
  fakeAsync,
  TestComponentBuilder
} from '@angular/core/testing';

import { AuthHttp, AuthConfig } from 'angular2-jwt';
import { Router, provideRouter } from '@angular/router';
import { Http, ConnectionBackend, RequestOptions, HTTP_PROVIDERS } from '@angular/http';
import { LogoutButtonComponent } from './logout-button.component';
import { UserService } from '../../services/index';

describe('Component: LogoutButtonComponent', () => {

  let component: LogoutButtonComponent;

  beforeEachProviders(() => [
    LogoutButtonComponent,
    Http,
    provide(AuthHttp, { useFactory: Http }),
    provide(AuthConfig, { useValue: new AuthConfig() }),
    ConnectionBackend,
    RequestOptions,
    UserService
  ]);

  beforeEach(inject([AuthHttp, UserService, LogoutButtonComponent],
    (comp: LogoutButtonComponent) => {
      component = comp;
    }));

  it('should inject UserService', () => {
    // My test here
  });

});

虽然我收到以下错误：

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

我错过了beforeEachProviders函数中的某些内容吗？

注意：此问题仅与Angular 2与Jasmine的单元测试有关。我没有搜索infos相关bootstraping应用程序，因为这在我的应用程序中已经可以，并且此处还有其他相关问题。

Answer 1

您必须将GET http://localhost:8000/api/foo?ordering=bar[0] { ... results: [{bar:[1,'a']},{bar:[2,'c']},{bar:[3,'d']}] ... }导入TestBed配置。

HttpModule

之后，单位测试应该起作用

Answer 2

RequestOptions不是注射剂，你不要把它注入课堂。相反，您在发出HTTP请求时根据需要实例化一个。所以您可以从beforeEachProviders中删除它，并在beforeEach中实例化一个，如果您在测试中确实需要它：

let options: RequestOptions;

beforeEach(inject([AuthHttp, UserService, LogoutButtonComponent],
    (comp: LogoutButtonComponent) => {
      component = comp;
      options = new RequestOptions({method: RequestMethod.Post});
}));

Answer 3

我通过从HttpModule导入Http和@angular/http修正了我的错误：

import {HttpModule, Http} from "@angular/http"; 
...

TestBed.configureTestingModule({
  imports: [HttpModule], // <!-- HTTP module
  providers: [HttpService, SourceService, Http] // <!-- HTTP
});

Answer 4

模拟用户服务可能更好，那么您不必担心RequestOptions或HttpModule，这是我上面解决问题的方法：

import { RouterTestingModule } from '@angular/router/testing';
import { TestBed } from '@angular/core/testing';
import { LogoutButtonComponent } from './logout-button.component';
import { UserService } from '../../services/index';

describe('Component: LogoutButtonComponent', () => {

  let component: LogoutButtonComponent;
  let fixture: ComponentFixture<LogoutButtonComponent>;
  let mockUserService;

    beforeEach(() => {
        // Provide array of user service methods used in LogoutButtonComponent to the createSpyObj
        mockUserService = jasmine.createSpyObj(['exampleUserServiceMethod']);

        TestBed.configureTestingModule({
            declarations: [ LogoutButtonComponent ],
            providers: [
                { provide: UserService, useValue: mockUserService }
            ],
            // Only if your component uses routing
            imports: [
                RouterTestingModule
            ]
        });

        fixture = TestBed.createComponent(LogoutButtonComponent);
        component = fixture.componentInstance;

    })

  it('should inject UserService', () => {
    // My test here
  });

});

Angular 2单元测试错误：无法解析＆＃39; RequestOptions＆＃39;

4 个答案: