observable 的特殊結果：用茉莉花大理石進行測試

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)創建的 observable 如下所示：

[
  {
    "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 上發生的動作。

• - - 表示時間單位。
• [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