Тестирование эффекта NGRX с задержкой

Question

Я хочу проверить эффект, который работает следующим образом:

1. Эффект начинается, если отправлено действие LoadEntriesSucces
2. Ждет 5 секунд
3. Через 5 секунд http отправляется запрос
4. Когда приходит ответ, отправляется новое действие (в зависимости от того, был ли ответ успешным или ошибочным).

Код эффекта выглядит так:

  @Effect()
  continuePollingEntries$ = this.actions$.pipe(
    ofType(SubnetBrowserApiActions.SubnetBrowserApiActionTypes.LoadEntriesSucces),
    delay(5000),
    switchMap(() => {
      return this.subnetBrowserService.getSubnetEntries().pipe(
        map((entries) => {
          return new SubnetBrowserApiActions.LoadEntriesSucces({ entries });
        }),
        catchError((error) => {
          return of(new SubnetBrowserApiActions.LoadEntriesFailure({ error }));
        }),
      );
    }),
  );

Я хочу проверить, отправляется ли эффект через 5 секунд:

it('should dispatch action after 5 seconds', () => {
  const entries: SubnetEntry[] = [{
    type: 'type',
    userText: 'userText',
    ipAddress: '0.0.0.0'
  }];

  const action = new SubnetBrowserApiActions.LoadEntriesSucces({entries});
  const completion = new SubnetBrowserApiActions.LoadEntriesSucces({entries});

  actions$ = hot('-a', { a: action });
  const response = cold('-a', {a: entries});
  const expected = cold('- 5s b ', { b: completion });

  subnetBrowserService.getSubnetEntries = () => (response);

  expect(effects.continuePollingEntries$).toBeObservable(expected);
});

Однако этот тест не работает для меня. Вывод из теста выглядит так:

Expected $.length = 0 to equal 3.
Expected $[0] = undefined to equal Object({ frame: 20, notification: Notification({ kind: 'N', value: undefined, error: undefined, hasValue: true }) }).
Expected $[1] = undefined to equal Object({ frame: 30, notification: Notification({ kind: 'N', value: undefined, error: undefined, hasValue: true }) }).
Expected $[2] = undefined to equal Object({ frame: 50, notification: Notification({ kind: 'N', value: LoadEntriesSucces({ payload: Object({ entries: [ Object({ type: 'type', userText: 'userText', ipAddress: '0.0.0.0' }) ] }), type: '[Subnet Browser API] Load Entries Succes' }), error: undefined, hasValue: true }) }).

Что я должен сделать, чтобы этот тест работал?

Answer 1

Как упоминалось в другом ответе, один из способов проверить этот эффект — использовать TestScheduler, но это можно сделать проще.

Мы можем протестировать наш асинхронный код RxJS синхронно и детерминированно, виртуализируя время с помощью TestScheduler. Мраморные диаграммы ASCII предоставляют нам визуальный способ представить поведение Observable. Мы можем использовать их, чтобы утверждать, что конкретный Observable ведет себя так, как ожидалось, а также для создания горячих и холодных Observable, которые мы можем использовать в качестве макетов.

Например, давайте протестируем следующий эффект:

      effectWithDelay$ = createEffect(() => {
  return this.actions$.pipe(
    ofType(fromFooActions.doSomething),
    delay(5000),
    switchMap(({ payload }) => {
      const { someData } = payload;

      return this.fooService.someMethod(someData).pipe(
        map(() => {
          return fromFooActions.doSomethingSuccess();
        }),
        catchError(() => {
          return of(fromFooActions.doSomethinfError());
        }),
      );
    }),
  );
});

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

      import { TestBed } from "@angular/core/testing";

import { provideMockActions } from "@ngrx/effects/testing";

import { Observable } from "rxjs";
import { TestScheduler } from "rxjs/testing";

import { FooEffects } from "./foo.effects";
import { FooService } from "../services/foo.service";
import * as fromFooActions from "../actions/foo.actions";

// ...

describe("FooEffects", () => {
  let actions$: Observable<unknown>;

  let testScheduler: TestScheduler; // <-- instance of the test scheduler

  let effects: FooEffects;
  let fooServiceMock: jasmine.SpyObj<FooService>;

  beforeEach(() => {
    // Initialize the TestScheduler instance passing a function to
    // compare if two objects are equal
    testScheduler = new TestScheduler((actual, expected) => {
      expect(actual).toEqual(expected);
    });

    TestBed.configureTestingModule({
      imports: [],
      providers: [
        FooEffects,
        provideMockActions(() => actions$),

        // Mock the service so that we can test if it was called
        // and if the right data was sent
        {
          provide: FooService,
          useValue: jasmine.createSpyObj("FooService", {
            someMethod: jasmine.createSpy(),
          }),
        },
      ],
    });

    effects = TestBed.inject(FooEffects);
    fooServiceMock = TestBed.inject(FooService);
  });

  describe("effectWithDelay$", () => {
    it("should dispatch doSomethingSuccess after 5 seconds if success", () => {
      const someDataMock = { someData: Math.random() * 100 };

      const initialAction = fromFooActions.doSomething(someDataMock);
      const expectedAction = fromFooActions.doSomethingSuccess();
    
      testScheduler.run((helpers) => {

        // When the code inside this callback is being executed, any operator 
        // that uses timers/AsyncScheduler (like delay, debounceTime, etc) will
        // **automatically** use the TestScheduler instead, so that we have 
        // "virtual time". You do not need to pass the TestScheduler to them, 
        // like in the past.
        // https://rxjs-dev.firebaseapp.com/guide/testing/marble-testing

        const { hot, cold, expectObservable } = helpers;

        // Actions // -a-
        // Service //    -b|
        // Results // 5s --c

        // Actions
        actions$ = hot("-a-", { a: initialAction });

        // Service
        fooServiceMock.someMethod.and.returnValue(cold("-b|", { b: null }));

        // Results
        expectObservable(effects.effectWithDelay$).toBe("5s --c", {
          c: expectedAction,
        });
      });

      // This needs to be outside of the run() callback
      // since it's executed synchronously :O
      expect(fooServiceMock.someMethod).toHaveBeenCalled();
      expect(fooServiceMock.someMethod).toHaveBeenCalledTimes(1);
      expect(fooServiceMock.someMethod).toHaveBeenCalledWith(someDataMock.someData);
    });
  });
});

Обратите внимание, что в коде, который я использую expectObservableчтобы проверить эффект, используя «виртуальное время» из экземпляра TestScheduler.

Answer 2

Вы могли бы использовать done обратный звонок от жасмина

it('should dispatch action after 5 seconds', (done) => {
  const resMock = 'resMock';
  const entries: SubnetEntry[] = [{
    type: 'type',
    userText: 'userText',
    ipAddress: '0.0.0.0'
  }];

  const action = new SubnetBrowserApiActions.LoadEntriesSucces({entries});
  const completion = new SubnetBrowserApiActions.LoadEntriesSucces({entries});

  actions$ = hot('-a', { a: action });
  const response = cold('-a', {a: entries});
  const expected = cold('- 5s b ', { b: completion });

  subnetBrowserService.getSubnetEntries = () => (response);
  effects.continuePollingEntries$.subscribe((res)=>{
    expect(res).toEqual(resMock);
    done()
  })
});

Answer 3

Вторая запись не работает с jasmine-marblesвместо этого используйте тире:

 const expected = cold('------b ', { b: completion });

Answer 4

Вам нужно будет сделать 3 вещи

1- Внутри вашего beforeEachнеобходимо переопределить внутренний планировщик RxJs следующим образом:

    import { async } from 'rxjs/internal/scheduler/async';
    import { cold, hot, getTestScheduler } from 'jasmine-marbles';
    beforeEach(() => {.....
        const testScheduler = getTestScheduler();
        async.schedule = (work, delay, state) => testScheduler.schedule(work, delay, state);
})

2 - Заменить задержку на задержку, когда: delayWhen(_x => (true ? interval(50) : of(undefined)))

3. Используйте кадры, я не совсем уверен, как использовать секунды для этого, поэтому я использовал кадры. Каждый кадр 10 мс. Так, например, моя задержка выше составляет 50 мс, а мой кадр -b, то есть ожидаемые 10 мс + мне потребовалось еще 50 мс, так что это равняется дополнительным 5 кадрам, которые были ------b, следующим образом:

const expected = cold('------b ', { b: outcome });