模拟导数可观察流

Question

我无法在 Jest/Angular 应用程序中正确模拟衍生的 Observable 流。

基本上我需要测试NgRx效果。

export const cancel$ = createEffect(
    (
      actions$ = inject(Actions),
      tradingControllerService = inject(TradingControllerService),
      wsService = inject(WebSocketService),
      store = inject(Store),
    ) => {
      return actions$.pipe(
        ofType(pendingOrdersActions.cancel),
        switchWith(() => store.select(WebTraderSelectors.selectTradingAccountId)),
        switchMap(([{ id }, tradingAccountId]) => {
          const referenceId = TradingMathFunctions.generateReferenceId();
          return tradingControllerService.cancelOrder(id, <number>tradingAccountId, referenceId);
        }),
        switchMap(() => wsService.cancelPendingTrade$),
        map(({ tradeId }) => pendingOrdersActions.cancelSuccess({ id: tradeId })),
      );
    },
    { functional: true },
  );

调试显示所有行均已正确模拟，最后一个流 wsService.cancelPendingTrade$ 除外。

主要问题是这个应该被模拟的流是从 ReplaySubject 派生的，它是一个类属性。

cancelPendingTrade$ = this.message$.pipe(
    filter(WebSocketFunctions.isCancelPendingTradeMessage),
    map(WebSocketFunctions.getCancelPendingTradeData),
    filter(Boolean),
  );

webSocket$: WebSocketSubject<Cli2Ser | Ser2Cli | MockCli2Ser> | undefined;
message$ = new ReplaySubject<Ser2Cli>(1);

我尝试了如下所示的测试

describe('PendingOrdersEffects', () => {
  let tradingControllerServiceMock: MockProxy<TradingControllerService>;
  let storeMock: MockProxy<Store>;
  let wsServiceMock: MockProxy<WebSocketService>;

  beforeEach(() => {
    storeMock = mock<Store>({
      select: jest.fn().mockReturnValueOnce(of(1234)),
    });
    tradingControllerServiceMock = mock<TradingControllerService>({
      cancelOrder: jest.fn(),
    });
    wsServiceMock = mock<WebSocketService>();
  });

describe('cancel$', () => {
    it('should return `cancelSuccess` action', () => {
      const spy = jest.fn();
      const actions$ = of(pendingOrdersActions.cancel({ id: 1 }));
      tradingControllerServiceMock.cancelOrder.mockReturnValueOnce(
        of({ data: { orderId: 1 } } as unknown as HttpEvent<StandardResponseOrderResult>),
      );

// Mock this stream here

      PendingOrdersEffects.cancel$(actions$, tradingControllerServiceMock, wsServiceMock, storeMock)
        .pipe(take(1))
        .subscribe(spy);

      expect(spy).toHaveBeenCalledWith(pendingOrdersActions.cancelSuccess({ id: 1 }));
    });
  });

Answer 1

实际的模拟非常简单。我只需要直接设置一个流到这个属性。

wsServiceMock.cancelPendingTrade$ = of({
    tradeId: 1,
});