Блог

В нашем веб-приложении angular есть несколько NgRx-эффектов, которые используют разную информацию из разных частей нашего магазина. Для этого мы используем рекомендуемый withLatestFrom -подход:

 withLatestFrom(
   this.store.pipe(select(...)),
   this.store.pipe(select(...)),
   ...
)
  

Хотя этот подход, похоже, отлично работает в рабочей среде, он кажется ужасным для модульного тестирования эффектов.

В настоящее время для наших модульных тестов мы используем jasmine-marbles, объекты-шпионы jasmine и макет ngrx (NgRx 7 ). Самое сложное — обеспечить необходимое состояние хранилища, чтобы селекторы могли работать должным образом.

ПРИМЕР-ЭФФЕКТ, для которого у нас нет модульного теста:

 @Effect()
getStammdatenDetails$: Observable<Action> = this.actions$.pipe(
   ofType(StammdatenItemDetailActionTypes.REQUEST_DETAILS),
   withLatestFrom(
      this.store.pipe(select(fromRoot.getMetadata)),
      this.store.pipe(select(fromRoot.getCustomerId)),
      this.store.pipe(select(fromRoot.getRouterParams))
   ),
   mergeMap(([action, metadata, customerId, params]) => {
      *effect logic*
   })
);
  

Может быть, кто-нибудь здесь может предоставить больше информации или полезную ссылку на часть документации, которой нам не хватает?

Я был бы очень признателен за любую помощь в отношении того, существует ли удобный метод модульного тестирования таких эффектов или как реорганизовать эти эффекты, чтобы они были более «тестируемыми» (без переноса проблемы на другой фрагмент кода, который мы не сможем протестировать впоследствии).

Я предлагаю сделать что-то вроде этого:

 describe('ChapterEffects', () => {
  const actions$ = new Subject<any>();
  let effects: ChapterEffects;

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [
        TestedEffects,
        provideMockActions(() => actions$),
        ...otherMocks,
      ],
    });

    effects = TestBed.get(ChapterEffects);
  });

  it('', () => {

  });
});
  

Протестированный эффект:

   @Effect()
  fetchData$ = this.actions$.pipe(
    ofType<FetchAction>(ActionTypes.FetchAction),
    switchMap(({ payload }) => {
      return this.someService
        .get(payload)
        .pipe(
          map((data) => new LoadAction(data)),
          catchError(() => new ErrorAction()),
        );
    }),
  );
  

Вот как выглядит ваш эффект и тест. Вы хотите проверить, FetchAction будет ли вызываться запрос get и загружаться LoadAction , когда запрос завершится.

Первое, что нужно сделать, это смоделировать SomeService в testBet:

 const otherMocks = [ { provide: SomeService, useValue: { get: () => of(42)} }, ]
  

теперь в вашей тестовой среде выполнения this.SomeService будет { get: () => of(42)} } .

Теперь давайте смоделируем FetchAction. В test actions$ есть Subject, который вы можете вызвать actions$.next(new FetchRequest(7)) (7 — это полезная нагрузка).

Тогда эффект out должен выдавать LoadAction с 42, так что:

 it('', (done) => {
  effect.fetchData$.subscribe(action => {
    expect(action.payload).toEqual(42);
  }
  done()
  actions$.next(7);
});