angular - 测试失败 Action - 弹珠 - ngrx 效果

Question

我在测试对我的效果的失败操作时遇到问题。

在这里给出一些上下文，当 时执行 loadProducts 效果。负载 Action 被调用。在效果内部执行 HTTP 请求，如果此请求成功执行，加载成功 Action 被调用，否则 加载失败 叫做。代码如下

  @Effect()
  loadProducts$ = this.actions$.pipe(
    ofType(productActions.ProductActionTypes.Load),
    mergeMap((action: productActions.Load) =>
      this.productService.getProducts().pipe(
        map((products: Product[]) => (new productActions.LoadSuccess(products))),
        catchError(error => of(new productActions.LoadFail(error)))
      ))
  );

为了测试这种效果，我使用了与 jasmine-marbles 几乎相同的 jest-marbles，无论如何，我将 Load 操作创建为热可观察对象，将 http 响应创建为冷和默认的预期结果。

it('should return a LoadFail action, with an error, on failure', () => {
  const action = new Load();
  const errorMessage = 'Load products fail';
  const outcome = new LoadFail(errorMessage);

  actions$ = hot('-a', { a: action});

  const response = cold('-#|', {}, errorMessage);
  productServiceMock.getProducts = jest.fn(() => response);

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

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

当我运行测试时抛出一个错误，说我的 loadProducts observable 和预期的结果不匹配。

  ✕ should return a LoadFail action, with an error, on failure (552ms)

Product effects › loadProducts › should return a LoadFail action, with an error, on failure

expect(received).toBeNotifications(expected)

Expected notifications to be:
  [{"frame": 20, "notification": {"error": undefined, "hasValue": true, "kind": "N", "value": {"payload": "Load products fail", "type": "[Product] Load Fail"}}}, {"frame": 20, "notification": {"error": undefined, "hasValue": false, "kind": "C", "value": undefined}}]
But got:
  [{"frame": 20, "notification": {"error": undefined, "hasValue": true, "kind": "N", "value": {"payload": "Load products fail", "type": "[Product] Load Fail"}}}]

Difference:

- Expected
+ Received

  Array [
    Object {
      "frame": 20,
      "notification": Notification {
        "error": undefined,
        "hasValue": true,
        "kind": "N",
        "value": LoadFail {
          "payload": "Load products fail",
          "type": "[Product] Load Fail",
        },
      },
    },
-   Object {
-     "frame": 20,
-     "notification": Notification {
-       "error": undefined,
-       "hasValue": false,
-       "kind": "C",
-       "value": undefined,
-     },
-   },
  ]

我知道错误是什么，但我不知道如何解决它。我知道弹珠测试世界

Answer 1

我想首先解释为什么它不起作用。

如您所知，当您使用大理石图测试 observable 时，您使用的不是实时时间，而是虚拟时间。可以在 frames 中测量虚拟时间.帧的值可能会有所不同(例如 10 、 1 )，但无论值如何，它都有助于说明您正在处理的情况。

例如，使用 hot(--a---b-c) ，您描述了一个将发出以下值的 observable:a在 2u , b在 6u和 c在 8u ( u - 时间单位)。

在内部，RxJs 创建了一个 Action 队列并且每个 Action 的任务是发出分配给它的值。 {n}u描述 Action 何时完成其任务。

对于 hot(--a---b-c) , Action 队列看起来像这样(大致):

queue = [
  { frame: '2u', value: 'a' }/* aAction */, 
  { frame: '6u', value: 'b' }/* bAction */, 
  { frame: '8u', value: 'c' }/* cAction */
]

hot和 cold ，当被调用时，将实例化一个 hot和 cold分别可以观察到。它们的基类扩展了 Observable类(class)。

现在，看看当您处理内部 observable 时会发生什么非常有趣，如您的示例中所遇到的:

actions$ = hot('-a', { a: action}); // 'a' - emitted at frame 1

const response = cold('-#|', {}, errorMessage); // Error emitted at 1u after it has been subscribed
productServiceMock.getProducts = jest.fn(() => response);

const expected = cold('--(b|)', { b: outcome }); // `b` and `complete` notification, both at frame 2

response由于 a 订阅了 observable ，意味着错误通知将在 frame of a 发出+ original frame .即， frame 1 ( a 的到来) + frame1 (发出错误时)= frame 2 .

那么，为什么 hot('-a')不行 ？

这是因为 mergeMap处理事情。使用时 mergeMap和它的 sibling ，如果源完成但运算符(operator)有内部 observables 仍然处于事件状态( 尚未完成 )，则不会传递源的完成通知。只有当所有内部 observables 也完成时才会这样。

另一方面，如果所有内部 observable 都完成了，但源没有完成，则没有完整的通知要传递给链中的下一个订阅者。 这就是它最初没有工作的原因 .

现在，让我们看看为什么它会这样工作:

actions$ = hot('-a|', { a: action});

const response = cold('-#|)', {}, errorMessage);
productServiceMock.getProducts = jest.fn(() => response);

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

Action 队列现在看起来像这样:

queue = [
  { frame: '1u', value: 'a' },
  { frame: '2u', completeNotif: true },
]

当 a已收到， response将被订阅，因为它是一个用 cold() 创建的可观察对象，其 通知 将必须分配给操作并相应地放入队列中。

后 response已订阅，队列将如下所示:

queue = [
  // `{ frame: '1u', value: 'a' },` is missing because when an action's task is done
  // the action itself is removed from the queue

  { frame: '2u', completeNotif: true }, // Still here because the first action didn't finish
  { frame: '2u', errorNotif: true, name: 'Load products fail' }, // ' from '-#|'
  { frame: '3u', completeNotif: true },// `|` from '-#|'
]

请注意，如果应在同一帧发出 2 个队列操作，则最旧的将优先。

由上可知，source 会发出完整的通知 之前 内部 observable 会发出错误，这意味着当内部 observable 会发出捕获错误所产生的值( outcome )时， mergeMap将传递完整的通知。

最后， (b|)在 cold('--(b|)', { b: outcome }); 中需要因为可观察到的 catchError订阅， of(new productActions.LoadFail(error))) , 将在同一帧内发出并完成。当前帧保存当前选定 Action 的帧的值。在这种情况下，是 2 ，来自 { frame: '2u', errorNotif: true, name: 'Load products fail' } .