javascript - 测试链式 catchError 函数的正确方法是什么

Question

我正在尝试为已链接 rxjs catchError 运算符的 @Effect 编写 jasmine 测试，但我正在努力测试第一个 catchError 之外的任何可观察值。

这是效果:

@Effect() submitEndsheets$ = this.actions$.pipe(
    ofType<SubmitEndSheets>(SpreadActionTypes.SUBMIT_ENDSHEETS),
    withLatestFrom(this.store.pipe(select(fromAppStore.fromOrder.getDocumentId))),
    concatMap(([action, documentId]) =>
        this.spreadService.submitEndSheets(documentId).pipe(
            map((response: ActionProcessorDto) => new SubmitEndSheetsSuccess(response.data)),
            catchError((error) => of(undo(action))),
            catchError((error) => of(new MessageModal({
                    message: error.message,
                    title: 'Submission Error!'
                })
            ))
        )
    )
);

和相应的测试:

it('handles errors by sending an undo action', () => {
        const action = {
            type: SpreadActionTypes.SUBMIT_ENDSHEETS,
        };
        const source = cold('a', { a: action });
        const error = new Error('Error occurred!');
        const service = createServiceStub(error);
        const store = createStoreState();
        const effects = new Effects(service, new Actions(source), store);

        const expected = cold('ab', {
           a: undo(action),
            b: new MessageModal({
                message: 'Sorry, something went wrong with your request. Please try again or contact support.',
                title: 'Update Error!'
            }),
        });
        expect(effects.submitEndsheets$).toBeObservable(expected);
    });

作为引用，这里是模拟服务的 createServiceStub 和创建模拟商店的 createStoreState。

function createServiceStub(response: any) {
    const service = jasmine.createSpyObj('spreadService', [
        'load',
        'update',
        'updateSpreadPosition',
        'submitEndSheets'
    ]);

    const isError = response instanceof Error;
    const serviceResponse = isError ? throwError(response) : of(response);

    service.load.and.returnValue(serviceResponse);
    service.update.and.returnValue(serviceResponse);
    service.updateSpreadPosition.and.returnValue(serviceResponse);
    service.submitEndSheets.and.returnValue(serviceResponse);

    return service;
}

function createStoreState() {
    const store = jasmine.createSpyObj('store', ['pipe']);
    store.pipe.and.returnValue(of({ documentId: 123 }));

    return store;
}

这是测试输出:

FAILED TESTS:
      ✖ handles errors by sending an undo action
        HeadlessChrome 0.0.0 (Mac OS X 10.14.2)
      Expected $.length = 1 to equal 2.
      Expected $[1] = undefined to equal Object({ frame: 10, notification: Notification({ kind: 'N', value: MessageModal({ payload: Object({ message: 'Sorry, something went wrong with your request. Please try again or contact support.', title: 'Update Error!' }), type: 'MESSAGE_MODAL' }), error: undefined, hasValue: true }) }).
          at compare node_modules/jasmine-marbles/bundles/jasmine-marbles.umd.js:389:1)
          at UserContext.<anonymous> src/app/book/store/spread/spread.effects.spec.ts:197:46)
          at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke node_modules/zone.js/dist/zone.js:388:1)

在此先感谢您的帮助!

更新:catchError 可以像这样从效果中发送一组 Action :

@Effect() submitEndsheets$ = this.actions$.pipe(
    ofType<SubmitEndSheets>(SpreadActionTypes.SUBMIT_ENDSHEETS),
    withLatestFrom(this.store.pipe(select(fromAppStore.fromOrder.getDocumentId))),
    concatMap(([action, documentId]) =>
        this.spreadService.submitEndSheets(documentId).pipe(
            map((response: ActionProcessorDto) => new SubmitEndSheetsSuccess(response.data)),
            catchError(error => [
                new PopSingleToast({
                    severity: ToastSeverity.error,
                    summary: 'Failure',
                    detail: `Some error occurred: \n Error: ${error}`
                }),
                undo(action)
            ])
        )
    )
);

相应的测试如下所示:

it('handles errors by sending an undo action', () => {
        const action = {
            type: SpreadActionTypes.SUBMIT_ENDSHEETS
        };
        const source = cold('a', { a: action });
        const error = new Error('Error occurred!');
        const service = createServiceStub(error);
        const store = createStoreState();
        const effects = new Effects(service, new Actions(source), store);

        const expectedAction = new PopSingleToast({
            severity: ToastSeverity.error,
            summary: 'Failure',
            detail: `Some error occurred: \n Error: ${error}`
        });

        const expected = cold('(ab)', {
            a: expectedAction,
            b: undo(action)
        });

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

感谢大家的帮助!

Answer 1

连续有两个 catchErrors 意味着第二个永远不会触发，因为第一个会吃掉错误。

您需要重新抛出第一个 catchError 中的错误才能进入第二个:

catchError(error => throw new Error()),
catchError(error => console.log('now I trigger'))

所以我担心你的问题没有真正意义。