web-dev-qa-db-ja.com

Angular 2ユニットテストエラー： 'RequestOptions'のすべてのパラメーターを解決できません

いくつかの依存関係がある単純なコンポーネントをテストしたいと思います。したがって、とりわけ、私はいくつかのプロバイダーを提供する必要があります。

/* 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
  });

});

次のエラーが発生しますが：

エラー：「RequestOptions」（？）のすべてのパラメーターを解決できません。すべてのパラメーターがInjectで装飾されているか、有効な型注釈が付いていること、および「RequestOptions」がInjectableで装飾されていることを確認してください。

beforeEachProviders関数に何かが足りませんか？

注：この質問は、Angular 2 with Jasmineのユニットテストにのみ関連しています。これは私のアプリではすでに問題がないため、ブートストラップアプリに関連する情報は検索していません。他にも関連する質問があります。 。

unit-testingtypescriptangularjasmine
12
Vassilis Pits

HttpModuleをTestBed構成にインポートする必要があります。

import { HttpModule } from "@angular/http";

TestBed.configureTestingModule({
  imports: [
    HttpModule
  ]
});

その後、ユニットテストは機能するはずです????????

22
0x1ad2

RequestOptionsは注入可能ではありません。これを、クラスに注入しません。代わりに、HTTPリクエストを行うときに、必要に応じてインスタンス化します。したがって、それをbeforeEachProvidersから削除し、テストで実際に必要な場合はbeforeEachでインスタンス化できます。

let options: RequestOptions;

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

@angular/httpからHttpModuleとHttpをインポートして、エラーを修正しました。

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

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

ユーザーサービスをモックアウトする方が良いかもしれません。そうすれば、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
  });

});
0
Vinorth