Angular 2 Ошибка: нет провайдера Http в тестах Karma-Jasmine

Ответ 1

Цель TestBed заключается в настройке @NgModule с нуля для тестовой среды. Таким образом, в настоящее время все, что вы настроили, это AppComponent, и ничего больше (кроме службы, уже объявленной в @Component.providers.

То, что я настоятельно рекомендую вам сделать, вместо того, чтобы пытаться настроить все, как вы, в реальной среде, просто издеваться над BudgetService. Попытка настроить Http и высмеять это не самая лучшая идея, так как вы хотите, чтобы внешние измерения были максимально легкими при тестировании модулей.

Вот что вам нужно сделать

• Создайте макет для BudgetService. Я бы посмотрел этот пост. Вы можете просто расширить этот абстрактный класс, добавив ваш метод getBudgets

• Вам нужно переопределить @Component.providers, как указано в этом сообщении

Если вы действительно хотите использовать реальный сервис и Http, тогда вам нужно быть готовым к подключению соединений на MockBackend. Вы не можете использовать реальный бэкэнд, так как он зависит от браузера платформы. Например, просмотрите этот пост. Я лично не думаю, что это хорошая идея, хотя при тестировании компонентов. При тестировании вашего сервиса это происходит, когда вы должны это делать.

Ответ 2

Внимание. Это решение работает только в том случае, если вы хотите протестировать статическую структуру. Он не будет работать, если ваш тест действительно вызывает служебные вызовы (и у вас также есть некоторые из этих тестов).

В вашем тесте используется собственное определение модуля, модуль тестирования, а не ваш AppModule. Поэтому вам также нужно импортировать HttpModule:

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

Вы также можете импортировать свой AppModule:

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

Это имеет то преимущество, что вам не нужно добавлять новые компоненты и модули во многих местах. Это более удобно. С другой стороны, это менее гибко. Вы можете импортировать больше, чем вы хотели бы в своем тесте.

Кроме того, у вас есть зависимость от вашего низкоуровневого компонента для всего AppModule. На самом деле такая циклическая зависимость, которая обычно плохая идея. Поэтому в моих глазах вы должны делать это только для компонентов высокого уровня, которые в любом случае являются очень важными для вашего приложения. Для более низкоуровневых компонентов, которые могут быть даже многократно использованы, вы лучше перечисляете все зависимости явно в спецификации теста.

Ответ 3

Импортируйте HttpModule в app.module.ts, и он решит вашу проблему.

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

@NgModule({
    imports: [HttpModule]
})
...

Ответ 4

Альтернатива издевательству службы, описанной в ответе peeskillet, использует Mock Backend предоставлено angular.

В документе API содержится следующий пример:

import {Injectable, ReflectiveInjector} from '@angular/core';
import {async, fakeAsync, tick} from '@angular/core/testing';
import {BaseRequestOptions, ConnectionBackend, Http, RequestOptions} from '@angular/http';
import {Response, ResponseOptions} from '@angular/http';
import {MockBackend, MockConnection} from '@angular/http/testing';

const HERO_ONE = 'HeroNrOne';
const HERO_TWO = 'WillBeAlwaysTheSecond';

@Injectable()
class HeroService {
  constructor(private http: Http) {}

  getHeroes(): Promise<String[]> {
    return this.http.get('myservices.de/api/heroes')
        .toPromise()
        .then(response => response.json().data)
        .catch(e => this.handleError(e));
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
  }
}

describe('MockBackend HeroService Example', () => {
  beforeEach(() => {
    this.injector = ReflectiveInjector.resolveAndCreate([
      {provide: ConnectionBackend, useClass: MockBackend},
      {provide: RequestOptions, useClass: BaseRequestOptions},
      Http,
      HeroService,
    ]);
    this.heroService = this.injector.get(HeroService);
    this.backend = this.injector.get(ConnectionBackend) as MockBackend;
    this.backend.connections.subscribe((connection: any) => this.lastConnection = connection);
  });

  it('getHeroes() should query current service url', () => {
    this.heroService.getHeroes();
    expect(this.lastConnection).toBeDefined('no http service connection at all?');
    expect(this.lastConnection.request.url).toMatch(/api\/heroes$/, 'url invalid');
  });

  it('getHeroes() should return some heroes', fakeAsync(() => {
       let result: String[];
       this.heroService.getHeroes().then((heroes: String[]) => result = heroes);
       this.lastConnection.mockRespond(new Response(new ResponseOptions({
         body: JSON.stringify({data: [HERO_ONE, HERO_TWO]}),
       })));
       tick();
       expect(result.length).toEqual(2, 'should contain given amount of heroes');
       expect(result[0]).toEqual(HERO_ONE, ' HERO_ONE should be the first hero');
       expect(result[1]).toEqual(HERO_TWO, ' HERO_TWO should be the second hero');
     }));

  it('getHeroes() while server is down', fakeAsync(() => {
       let result: String[];
       let catchedError: any;
       this.heroService.getHeroes()
           .then((heroes: String[]) => result = heroes)
           .catch((error: any) => catchedError = error);
       this.lastConnection.mockRespond(new Response(new ResponseOptions({
         status: 404,
         statusText: 'URL not Found',
       })));
       tick();
       expect(result).toBeUndefined();
       expect(catchedError).toBeDefined();
     }));
});

Ответ 5

Вкл Angular 4 +

Ответ RC2C работал у меня:) Спасибо!

Предостережение. Это будет работать, только если вы не действительно звоните в службу. Он работает только в том случае, если вы хотите протестировать статическую структуру.

Просто хотел добавить, что для Angular версии 4 (и выше, вероятно) вы должны импортировать HttpClientModule на тестовый стенд, чтобы он выглядел следующим образом:

import { HttpClientModule } from '@angular/common/http';


describe('BuildingService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientModule],
      providers: [BuildingService]
    });
  });

  it('should be created 2', inject([BuildingService], (service: BuildingService) => {
    expect(service).toBeTruthy();
  }));

}

Осторожно: см. верхний Предостережение