Проверьте наблюдаемый "следующий" обратный вызов в RxJs и Angular

Question

Я пытаюсь сделать довольно простой тест на Angular с помощью RxJs Observables, но у меня не получится. Вот что я в основном пытаюсь проверить:

// We're inside some Angular component here...
let testMe = 0;

function somethingOrOther(): void {

    this.someService.methodReturningObservable()
      .subscribe(
          (nextValue: number): void => {
              testMe += nextValue;
          }
      ) 
}

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

Я попытался это с этим:

it(`works 'cuz I want it to`, fakeAsync(() => {
    spyOn(this.someService, 'methodReturningObservable').and.returnValue(cold('a', {a: 10}));

    tick();

    expect(component.testMe).toBe(10);
}));

Так, tick() похоже, здесь ничего не делается. Ничего не получает мой cold ценность когда-либо излучать на моего шпиона.

Я старался getTestScheduler.flush() вместо этого, как показано на https://netbasal.com/testing-observables-in-angular-a2dbbfaf5329 в разделе мрамора.

Могу ли я использовать шарики, подобные этому, для создания значения на наблюдаемой? Это было очень легко в AngularJS, просто вызвав дайджест, но я не могу заставить Anguar позволить мне в следующем обратном вызове для наблюдаемого.

Answer 1

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

Вот спецификация этого Stackblitz:

it(`works with "of" 'cuz I want it to`, () => {
    spyOn(someService, 'methodReturningObservable').and.returnValue(of(10));
    component.somethingOrOther();
    expect(component.testMe).toBe(10);
});

Некоторые из изменений, которые я внес в ваш код:

• Мне пришлось внести небольшие изменения в ваш метод компонента, чтобы он работал. Подробности в Stackblitz.
• cold() Функция из библиотеки тестирования мрамора, но это слишком много для такой простой функции. rxjs имеет of Доступен метод создания наблюдаемой, который может создать холодную синхронную наблюдаемую, на которую можно подписаться (но более подробно, если вы действительно хотите проверить это таким образом).
• Поскольку в приведенной выше спецификации используется синхронная наблюдаемая, нет необходимости в fakeAsync(), как это будет завершено немедленно.
• Тестируемый метод должен быть вызван явно для тестирования, выполнено выше с помощью строки component.somethingOrOther(),

Как вы можете видеть в Stackblitz, этот тест проходит просто отлично.

Теперь, если вы хотите использовать тестирование мрамора даже для этого простого случая, я настроил для этого другую спецификацию в Stackblitz. Это выглядит следующим образом:

it(`works with "cold" 'cuz I want it to`, () => {
    spyOn(someService, 'methodReturningObservable').and.returnValue(cold('a', { a: 10 }));
    component.somethingOrOther();
    getTestScheduler().flush(); // flush the observables
    expect(component.testMe).toBe(10);
});

• Обратите внимание на тот факт, что функция компонента должна быть вызвана
• Сброс getTestScheduler также должен быть выполнен.

Оба теста сейчас проходят в Stackblitz.

Официальные документы для тестирования мрамора в Angular находятся здесь.

Надеюсь, это поможет.