如何在 NgRx-Effects 中测试多个 withLatestFrom 商店注入？

Question

在我们的 Angular Web 应用中，我们有一些 NgRx 效果，它们使用来自我们商店不同部分的不同信息。为此，我们使用推荐的withLatestFrom-approach：

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

虽然这种方法似乎在生产中运行良好，但对效果进行单元测试时感觉很糟糕。

对于我们的单元测试，我们目前正在使用 jasmine-marbles、jasmine spy-objects 和 ngrx MockStore (NgRx 7+)。困难的部分是提供必要的存储状态，以便选择器能够正常工作。

EXAMPLE-EFFECT，我们没有单元测试：

@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*
   })
);

也许这里有人可以提供更多见解或指向我们缺少的文档的有用链接？

如果有方便的方法来对此类效果进行单元测试，或者如何将这些效果重构为更“可测试”（无需将问题转移到我们无法测试的另一段代码），我将非常感谢任何帮助之后）。

Answer 1

我建议这样做：

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。

首先是在 testBet 中模拟 someService：

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

现在在您的测试运行时 this.someService 将是 { get: () => of(42)} }。

现在让我们模拟 FetchAction。在测试中actions$ 是一个主题，因此您可以调用actions$.next(new FetchRequest(7))（7 是有效负载）。

那么输出效果应该发出 42 的 LoadAction，所以：

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