本文使用到的所有代碼在Github這個文件夾下面：
https://github.com/wangzixi-diablo/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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的Angular如何对包含了HTTP请求的服务类进行单元测试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。