Angular如何對包含了HTTP請求的服務類進行單元測試
本文使用到的所有程式碼在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的原創文章,盡在:"汪子熙":