Правильно внедрить зависимость в тесты Angular2

Я изо всех сил пытаюсь протестировать компонент Angular2, в который внедрена служба. Тестовый код ниже, но в основном:

• SearchComponent принимает FightService в конструкторе.

• Конструктор вызывает функцию flightService.getFlights (), которая запускает HTTP-запрос. FlightService.getFlights () возвращает наблюдаемое.

• Конструктор подписывается на возвращаемый наблюдаемый объект, который заполняет массив allSummaryItems.

Мой MockFlightService не используется, он в основном не может сказать, что нет поставщика для Http (который находится в конструкторе FlightService). Если я добавлю HttpModule к поставщикам в TestBed, он отключится и запустит настоящий Http-запрос.

Как я могу убедиться, что использую MockFlightService? Также будет ли это правильно проверять наблюдаемое, даже при запуске реального запроса Http я вижу, что подписанные методы не вызываются?

Спасибо

class MockFlightsService {
  public getFlights = () => {
    return new Observable<any>(() => { return dummyData.json(); });
  };
}

describe('SearchComponent Tests', () => {
  let fixture: ComponentFixture<SearchComponent>;
  let component: SearchComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [SearchComponent],
      imports: [RouterModule],
      providers: [{ provide: FlightsService, useClass: MockFlightsService }]
    });

    fixture = TestBed.createComponent(SearchComponent);
    fixture.detectChanges();
  });

  it('should render list', fakeAsync(() => {
    fixture.whenStable();
    component = fixture.componentInstance;
    console.log(component.allSummaryItems); // this is empty, shouldn't be
  }));
});

Я использую Angular 2.0.1.


angular jasmine karma-jasmine angular2-testing
person big_tommy_7bb    schedule 30.09.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Мой MockFlightService не используется, он в основном не говорит, что нет поставщика для Http (который находится в конструкторе FlightService)

С конфигурацией, которую вы показываете, единственный способ увидеть, как это происходит, - это указать службу в файле @Component.providers. Это переопределит любые поставщики уровня модуля. Я целый день рвала волосы, потому что совершенно забыла, что они у меня там были.

Если предполагается, что служба является поставщиком для всего приложения, тогда выньте ее из @Component.providers и добавьте в @NgModule.providers.

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

TestBed.overrideComponent(SearchComponent, {
  set: {
    providers: [
      { provide: FlightsService, useClass: MockFlightsService }
    ]
  }
});

Это нужно сделать до того, как вы создадите компонент.

Подробнее см. Здесь, в разделе Переопределение поставщиков тестов.

Другое, не связанное с ошибкой.

  • Ваше использование RouterModule. Для тестирования вы должны использовать RouterTestingModule, как указано здесь

  • whenStable возвращает обещание. Просто позвонить тебе не защитит. Вам нужно подписаться на него, а затем заниматься там своими делами.

    whenStable().then(() => {
  // Do stuff here. This is when the async tasks are completed.
})

  • Посмотрите этот пост, чтобы увидеть, как издеваться над Http, если вам когда-либо понадобится, чтобы вы не отправка запроса XHR во время теста.

person Paul Samsotha    schedule 30.09.2016