Как написать контрольный пример Jasmine для блока подписки в ngOninit и передать некоторые фиктивные данные?

Question

Я пробую тестовые примеры Jasmine впервые в Angular 7. У меня есть наблюдаемая, которая генерирует данные, используя next () в служебном файле. Компоненты подписываются на наблюдаемые и используют данные. Вот код в ngOnInit

ngOnInit() {
    this.loading = true;

    this.subscribe(this.advDirectService.directive$, data => {          
        this.directives = data;
        this.loading = false;
    });
    this.advDirectService.loadDirective(); }

Я могу ожидать, что вызывается loadDirective. Но когда я пытаюсь ожидать this.directives, он всегда говорит NULL. Мой компонент расширяет BaseComponent. Пожалуйста, помогите мне узнать, как писать тесты для кода внутри блока подписки.

Answer 1

Вот как это должно быть:

let dummy_data = "Some dummy data to be returned by service";
const spyOnInit = spyOn(component, "ngOnInit").and.callThrough();
    advDirectService = TestBed.get(<Your Service Name>);
    const spyData = spyOn(advDirectService, "directive$")
      .and.returnValue(Observable.of(dummy_data));
    advDirectService.directive$().subscribe(
      success => {
        expect(success).toEqual(advDirectService);
      }
      , (error) => {
        expect(error).toBeTruthy();
      });

    component.ngOnInit();
    expect(component.ngOnInit).toHaveBeenCalled(); //write your expect statement here
    spyData.calls.reset();
    spyOnInit.calls.reset();

Answer 2

Вам необходимо разделить тестирование сервиса и компонента. Модульное тестирование должно быть максимально изолированным.

Вместо того, чтобы проверять, работает ли служба в компоненте, вы должны использовать фиктивные данные, которые вы можете передать таким образом, и тестировать только функции компонента:

it('should test something for the component', () => {
  component.directives = mockData;

  // run a function that depends on the data and expect a return result
})

с другой стороны, вам нужно протестировать сервис, и это асинхронный вызов c, который вы должны сделать в вашем сервисе .spe c .ts файл:

it('should test something in the service', (done) => {
  this.directive$.subscribe(data => {
    expect(data) ... something
    done();
  })
})

note что мы передаем в функцию обратного вызова параметр done (указывает на то, что тестирование asyn c завершено), иначе тест завершится неудачно с ошибкой тайм-аута.

Я должен предупредить вас, что asyn c testing может быть сложным: вам может потребоваться передать (пропустить (1)) перед вашей подпиской, если вы ожидаете, что первый излучатель всегда будет нулевым.

Существуют другие методы тестирования наблюдаемых, такие как тестирование мрамора - но я лично еще не особо в это разбирался.