本小節進行StudentService.page方法的功能開發。打開src/app/service文件夾并找到student.service.ts及student.service.spec.ts。 # 功能代碼 ``` import {HttpClient, HttpParams} from '@angular/common/http'; ... export class StudentService { ... /** * 分頁 * @param params name:名稱,sno:學號,klassId:班級ID,page:第幾頁,size:每頁大小 */ page(params: { name?: string, sno?: string, klassId?: number, page?: number, size?: number}): Observable<{ totalPages: number, content: Array<Student> }> { const url = 'http://localhost:8080/Student'; /* 設置默認值① */ if (params.page === undefined) { params.page = 0; } if (params.size === undefined) { params.size = 10; } /* 初始化查詢參數 */ const queryParams = new HttpParams()? .?set('name', params.name ? params.name : '')? .set('sno', params.sno ? params.sno : ''②) .set('klassId', params.klassId ? params.klassId.toString() : '') .set('page', params.page.toString()) .set('size', params.size.toString()); console.log(queryParams);★ return this.httpClient.get<{ totalPages: number, content: Array<Student> ③}>(url, {params: queryParams})?; } ``` * ① 設置默認值的一種方式 * ? 初始化參數類型為HttpParams * ? 使用連續操作來添加查詢參數 * ? set(string, string)，發起http查詢時參數的類型必須為字符串(或字符串數組) * ② 設置默認值的另一種方式 * ★ 對某個類型還不熟悉的時候，將對象打印到控制臺很關鍵 * ③ 定義get方法返回值的格式 * ? `HttpClient.get(請求地址, 其它選項)`，需要傳入查詢參數則使用`HttpClient.get(請求地址, {params: HttpParams})`。 # 測試代碼 在功能代碼第一次使用HttpClient的帶有參數的get方法，在正式的進行mock測試之前，我們先來看看它會發起什么樣的真實請求。此時，單元測試中引入的HttpClientTestingModule便不符合我們此時的需求了。我們將其暫時刪除掉，引入會發起真實http請求的HttpClientModule。 ``` describe('service -> StudentService', () => { let service: StudentService; beforeEach(() => TestBed.configureTestingModule({ imports: [ HttpClientTestingModule, ? HttpClientModule, ? ] })); ``` 然后如下編寫page單元測試，并在chrome中打開控制臺。 ``` describe('service -> StudentService', () => { ... /* 分頁測試 */ fit('page', () => { service.page({}).subscribe(); service.page({name: 'name'}).subscribe(); service.page({page: 2}).subscribe(); }); ``` 觀察控制臺，的確發起了我們預期的請求信息：  當傳入空對象時，以默認值發起GET請求；當傳入name值時，以正確的name值發起的GET請求；當傳入page時，以正確的page值發起請求。 ## MockHttp 查看完發起的真正請求后，繼續切換為模擬的Http請求模塊來進行進一步測試： ``` describe('service -> StudentService', () => { let service: StudentService; beforeEach(() => TestBed.configureTestingModule({ imports: [ HttpClientTestingModule, ? HttpClientModule, ? ] })); ``` 測試的思路與save方法相同：①構造模擬返回值 ②以特定的參數值調用測試方法 ③斷言發起了預期的http請求 ④斷言接收到了預期的數據。 ``` /* 分頁測試 */ fit('page', () => { /* 模擬返回數據 */ const mockResult = { totalPages: 10, content: new Array(new Student({}), new Student({})) }; /* 進行訂閱，發送數據后將called置true */ let called = false; service.page({}).subscribe((success: { totalPages: number, content: Array<Student> }) => { called = true;② expect(success.totalPages).toEqual(10); expect(success.content.length).toBe(2); }); /* 斷言發起了http請求，方法為get；請求參數值符合預期 */ const req = TestBed.get(HttpTestingController).expectOne((request: HttpRequest<any>) => { return request.url === 'http://localhost:8080/Student'; ? });? expect(req.request.method).toEqual('GET'); expect(req.request.params.get('name')).toEqual(''); ? expect(req.request.params.get('sno')).toEqual(''); expect(req.request.params.get('klassId')).toEqual(''); expect(req.request.params.get('page')).toEqual('0'); expect(req.request.params.get('size')).toEqual('10'); req.flush(mockResult); ① expect(called).toBe(true);③ }); ``` * ? expectOne(matchFn) matchFn為匹配函數，該函數被調用時傳入值類型為HttpRequest。 * ? 返回值為true表示匹配成功 * ? 斷言返回了默認的請求參數 * ①②③ 順序執行，斷言接收到了返回數據且返回數據符合預期 ## 斷言參數 本著測試粒度最小化原則，再新建一個測試用例： ``` /* 分頁參數測試 */ fit('page params test', () => { service.page({name: 'name', sno: 'sno', klassId: 1, page: 2, size: 20}).subscribe(); /* 斷言發起了http請求，方法為get；請求參數值符合預期 */ const req = TestBed.get(HttpTestingController).expectOne( request => request.url === 'http://localhost:8080/Student' ); ? expect(req.request.method).toEqual('GET'); expect(req.request.params.get('name')).toEqual('name'); ① expect(req.request.params.get('sno')).toEqual('sno'); expect(req.request.params.get('klassId')).toEqual('1'); expect(req.request.params.get('page')).toEqual('2'); expect(req.request.params.get('size')).toEqual('20'); req.flush({}); ? }); ``` * ? 當箭頭函數中僅有一行代碼且使用return返回時，則可以簡寫為此形式 * ① 斷言使用了使用的參數發起了http請求 * ? 由于本例的測試內容為**參數是否正確傳入**，所以可以完全忽略請求返回值，直接將`{}`做為返回值即可 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.6.7](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.6.7) | - | | HttpClient GET | [https://www.angular.cn/api/common/http/HttpClient#get](https://www.angular.cn/api/common/http/HttpClient#get) | - |