Angular如何對包含了HTTP請求的服務類進行單元測試

本文使用到的所有程式碼在Github這個資料夾下面：  https:// github.com/wangzixi-dia blo/angular-sandbox/blob/master/src/app/ngrxdemo/service/unittest-study

服務類實現：

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest } from '@angular/common/http';
@Injectable()
export class DataService {
  url = 'https://jsonplaceholder.typicode.com/users';
  constructor(private http: HttpClient) {}
  getData() {
    const req = new HttpRequest('GET', this.url, {
      reportProgress: true
    });
    return this.http.request(req);
}
}

首先，從@angular/common/http裡倒入HttpClientTestingModule，注入到TestBed的TestingModule中去。

將HttpTestingController注入單元測試程式碼裡，用變數httpMock表示：

粉紅色小括號包含起的這段程式碼內，呼叫了dataService的getData方法。

HttpTestingController.expectOne：

期望一個基於傳入引數url的HTTP請求已經被髮起，並且返回其mock.

我們可以基於mockReq進行各種斷言處理。

expect(mockReq.cancelled).toBeFalsy();

確認該請求沒有被cancel

expect(mockReq.request.responseType).toEqual('json');

確保響應型別是JSON

mockReq.flush(mockUsers)

使用flush傳入的引數作為HTTP請求的返回引數：

flush執行完之後，才會觸發getData返回的Observable的subscribe回撥函式。

執行時時序：

(1) 先執行service.getData

真的呼叫到service的getData程式碼裡了：

此時event.type = 0：

(2) 拿到HTTP請求的mock物件：

準備flush：

一旦flush之後，直接getData返回的Observable的subscribe回撥函式會被觸發，event.body就為flush傳入的mockUsers.

更多Jerry的原創文章，盡在："汪子熙":