合理的分頁數據也夠幫助我們快速的發現在組件中發生的邏輯性錯誤，本節我展示如何在MockApi中返回一個合格的分頁數據。 ## 初始化 和后臺的提供的教師分頁接口相同，后臺還提供了一個班級分頁接口： ```bash GET /clazz/page ``` | **類型Type** | **名稱Name** | **描述Description** | 必填 | **類型Schema** | 默認值 | | :------------ | :----------- | :----------------------- | ---- | :--------------------------- | --------- | | Param請求參數 | `page` | 第幾頁 | 否 | `number` | 0 | | Param請求參數 | `size` | 每頁大小 | 否 | `number` | 20 | | Param請求參數 | sort | 排序字段及方式(支持多個) | 否 | `string`例：`sort=name,desc` | `id,desc` | | Response響應 | | Status Code: 200 | | `Page<Clazz>` | | 據此建立相應在clazz對應的MockApi文件夾，我們新建如下模擬返回數據： ```typescript +++ b/first-app/src/app/mock-api/clazz.mock.api.ts @@ -1,4 +1,7 @@ import {ApiInjector, MockApiInterface, randomNumber, RequestOptions} from '@yunzhi/ng-mock-api'; +import {Clazz} from '../entity/clazz'; +import {Teacher} from '../entity/teacher'; +import {Page} from '../entity/page'; /** * 班級模擬API @@ -30,6 +33,30 @@ export class ClazzMockApi implements MockApiInterface { } }; } + }, + { + method: 'GET', + url: '/clazz/page', + result: () => { + const size = 20; + const clazzes = new Array<Clazz>(); + for (let i = 0; i < size; i++) { + clazzes.push(new Clazz({ + id: i, + name: '班級', + teacher: new Teacher({ + id: i, + name: '教師' + }) + })); + } + return new Page<Clazz>({ + content: clazzes, + number: 2, + size, + numberOfElements: 20 + }); + } } ]; } ``` 如上述代碼所示，模擬返回數據中的大多數代碼與我們在上節組件中寫的模擬代碼相同。 ## 測試 MockApi完后后，我們在動態測試模塊中加入相應的攔截器： ```typescript +++ b/first-app/src/app/clazz/clazz.component.spec.ts @@ -1,6 +1,9 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {ClazzComponent} from './clazz.component'; +import {MockApiTestingInterceptor} from '@yunzhi/ng-mock-api/testing'; +import {ClazzMockApi} from '../mock-api/clazz.mock.api'; +import {getTestScheduler} from 'jasmine-marbles'; describe('ClazzComponent', () => { let component: ClazzComponent; @@ -8,7 +11,10 @@ describe('ClazzComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ClazzComponent] + declarations: [ClazzComponent], + imports: [ + MockApiTestingInterceptor.forRoot([ClazzMockApi]) + ] }) .compileComponents(); }); ``` 然后手動控制數據返回，手動渲染組件： ```typescript fit('should create', () => { expect(component).toBeTruthy(); - fixture.autoDetectChanges(); + getTestScheduler().flush(); + fixture.detectChanges(); }); }); ``` 最后，刪除C層中生成模擬數據的方法，轉而調用`httpClient`從而完成班級分頁的請求： ```typescript +++ b/first-app/src/app/clazz/clazz.component.ts @@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core'; import {Page} from '../entity/page'; import {Clazz} from '../entity/clazz'; import {Teacher} from '../entity/teacher'; +import {HttpClient} from '@angular/common/http'; @Component({ selector: 'app-clazz', @@ -23,26 +24,11 @@ export class ClazzComponent implements OnInit { numberOfElements: 0 }); - constructor() { + constructor(private httpClient: HttpClient) { } ngOnInit(): void { - const clazzes = new Array<Clazz>(); - for (let i = 0; i < this.size; i++) { - clazzes.push(new Clazz({ - id: i, - name: '班級', - teacher: new Teacher({ - id: i, - name: '教師' - }) - })); - } - this.pageData = new Page<Clazz>({ - content: clazzes, - number: 2, - size: this.size, - numberOfElements: 20 - }); + this.httpClient.get<Page<Clazz>>('/clazz/page') ?? + .subscribe(pageData => this.pageData = pageData); } } ``` 在這里使用了泛型來先后指定了當前`get`的元素類型為`Page`以及當前`Page`中的元素類型為`Clazz`，還需要注意的一點是雖然我們可以使用`/clazz/page`、`clazz/page`兩種方式，但無論使用哪一種，都要保持組件中的調用與MockApi中的url相統一。 在組件的動態測試模塊中加入MockApi攔截器并進行測試如下： ```typescript +++ b/first-app/src/app/clazz/clazz.component.spec.ts imports: [ HttpClientModule ], providers: [ { provide: HTTP_INTERCEPTORS, multi: true, useClass: MockApiTestingInterceptor.forRoot([ClazzMockApi]) } ] @@ -27,6 +27,7 @@ describe('ClazzComponent', () => { fit('should create', () => { expect(component).toBeTruthy(); - fixture.autoDetectChanges(); + getTestScheduler().flush(); + fixture.detectChanges(); }); }); ``` 最終效果如下：  ## 完善API ### 隨機數 在返回的班級名稱、教師名稱上加入一些隨機數，會起到更好的模擬效果。同時這也有利于我們區分出不同的班級。 ```typescript +++ b/first-app/src/app/mock-api/clazz.mock.api.ts @@ -43,10 +43,10 @@ export class ClazzMockApi implements MockApiInterface { for (let i = 0; i < size; i++) { clazzes.push(new Clazz({ id: i, - name: '班級', + name: '班級' + Math.floor(Math.random() * 100).toString(10), teacher: new Teacher({ id: i, - name: '教師' + name: '教師' + Math.floor(Math.random() * 100).toString(10), }) })); } ``` `Math.random()`會生成一個0至1之間的隨機值，該值與100相乘，會得到一個0-100內的隨機值，`Math.floor()`方法去除其小數部分，最后得到一個0至100間的整數，在整數上調用`toString(10)`方法將其轉換為字符串，期中`toString(10)`中的參數`10`表示轉換為10進制。如此以來，MockApi便可以返回一些更容易區分的模擬數據了。  | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.3.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.3.3.zip) |