如何在 angular 中為 pipe 和 map 編寫單元測試？

Question

我需要在 angular 中為 pipe 和 map 編寫單元測試。

    public getDataById(Id): Observable<Data[]> {
    const url = "my url";
    return this.authHttpService.get(url, null, this.scope)
      .pipe(
        map(response => {
          this.data= List<Data>(response.body);
          return this.data.toArray();
        })
      );
  }

有人可以幫我嗎？

Answer 1

這里的問題是我們如何測試使用服務的組件，我們在這里使用 pipe 和 map。 首先我們可能需要模擬 authHttpService。 你可以按照這個來了解更多： https://codecraft.tv/courses/angular/unit-testing/mocks-and-spies/

現在，當涉及到單元測試時，我們需要斷言一些東西。 所以你可以檢查 getDataById 是否有你模擬的數據。

我希望這有幫助。 謝謝你。

Answer 2

首先模擬您的服務以返回模擬數據。 調整您的模擬數據，以便可以使用 pipe 和 map 對其進行處理。

const result = {
  data: [
    {id: 0, name: 'Temp Data 1'},
    {id: 1, name: 'Temp Data 2'},
  ]
};

export class authHttpServiceMock{
  constructor() {
  }

  get() {
    return Observable.of(result);
  }

}

第二步在規范文件中調用您的 getDataById(Id) 方法。

Answer 3

由於問題是關於 pipe 和 map 的覆蓋范圍，所以我假設您已經知道如何模擬服務。

第一步：始終模擬您在 map 中返回的內容，在您的情況下，讓我們說response = { status: [] }

第二步：

    httpClientSpy.get.mockReturnValue(of(respone));

第三步：調用方法並訂閱它，並期望 observable 將返回的結果

  instance.getDataById(Id).subscribe((result) => {
    expect(result).toEqual([]);
  });