angular - 来自 observable : testing with Jasmine marbles 的特殊结果

Question

我在 Angular 7 中有一个小功能，我正在用 Jest 进行测试。该函数如下所示:

private checkFreeProduct(allowance: SubscriberConnectivityAllowanceInterface): Observable<SubscriberConnectivityAllowanceInterface> {

    // TODO: This is currently just a temp function to be extended when required
    return of(allowance);

}

如您所见，目前它所做的只是根据其输入创建一个可观察对象，但它正在开发中并将进行扩展。

我正在用 Jest 测试它:

it('should return an observable of the allowance', () => {

    const allowance: SubscriberConnectivityAllowanceInterface = {
        hotspotAuthenticated: HotspotAuthenticationEnum.TRUE,
        remainingOctets: 100,
        remainingSeconds: 200,
        activeProductCost: ConnectivityProductCostEnum.PAID,
        activeProductDuration: ConnectivityProductDurationEnum.FLIGHT,
        activeProductType: ConnectivityProductTypeEnum.PREMIUM,
        connectivityProducts: []
    };

    const expected = hot('a|', {
        a: allowance
    });

    expect(hotspotService['checkFreeProduct'](allowance)).toBeObservable(expected);

});

但是，由于某些时间问题，测试失败。 expected可观察结果如下所示:

[
  {
    "frame": 0,
    "notification": {
      "error": undefined,
      "hasValue": true,
      "kind": "N",
      "value": {
        "activeProductCost": "paid",
        "activeProductDuration": "flight",
        "activeProductType": "premium",
        "connectivityProducts": [],
        "hotspotAuthenticated": 1,
        "remainingOctets": 100,
        "remainingSeconds": 200
      }
    }
  },
  {
    "frame": 10,
    "notification": {
      "error": undefined,
      "hasValue": false,
      "kind": "C",
      "value": undefined
    }
  }
]

以及从函数调用创建的可观察对象 hotspotService['checkFreeProduct'](allowance)看起来像这样:

[
  {
    "frame": 0,
    "notification": {
      "error": undefined,
      "hasValue": true,
      "kind": "N",
      "value": {
        "activeProductCost": "paid",
        "activeProductDuration": "flight",
        "activeProductType": "premium",
        "connectivityProducts": [],
        "hotspotAuthenticated": 1,
        "remainingOctets": 100,
        "remainingSeconds": 200
      }
    }
  },
  {
    "frame": 0, // <------- this is the only difference
    "notification": {
      "error": undefined,
      "hasValue": false,
      "kind": "C",
      "value": undefined
    }
  }
]

现在我不确定为什么这些可观测值会产生两次排放，但我会同意。我不明白的是为什么函数调用中的 observable 会在第 0 帧上发出两个事件。我都尝试了 hot()和 cold() ，并在这些调用中尝试了各种弹珠，但没有任何乐趣。有人可以解释一下吗？

Answer 1

你问的关于发出的两个事件的问题是因为大理石 hot('a|') - 第一个发出您希望断言 'a' 的值，第二个发出以指示热可观察的完成 '|' .这可以从您在问题中添加的那些事件中的 Notification -> Kind 属性推断出来。例如:“种类”:“N”-> 发出的值。 kind": "C"-> observable 的完成。

答案 :
要修复您的单元测试，只需将弹珠更改为 '(a|)' ，以便它们都在同一时间范围内发出。我已经测试过这个并且它有效。

不同时间范围的原因:
热和冷创建可观察的流，在特定的时间间隔发出值。 Marbles 表示随着时间的推移在 observable 上发生的 Action 。

- - 表示时间单位。

[a-z0-9] - 表示从流中发出的值。

| - 表示可观察流的完成。

# - 表示可观察流中的错误。

() - 表示在同一时间范围内发出的值的分组。

对于您的解决方案， hot('(a|')) - 表示同时发出值 a并在同一时间范围内完成可观察流。

引用文献:
https://github.com/jisaacks/RxJS/blob/master/doc/writing-marble-tests.md
https://medium.com/@bencabanes/marble-testing-observable-introduction-1f5ad39231c