久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

同其它組件一樣，首先我們初始化原型: ```bash panjiedeMacBook-Pro:clazz panjie$ ng g c edit CREATE src/app/clazz/edit/edit.component.css (0 bytes) CREATE src/app/clazz/edit/edit.component.html (19 bytes) CREATE src/app/clazz/edit/edit.component.spec.ts (612 bytes) CREATE src/app/clazz/edit/edit.component.ts (267 bytes) UPDATE src/app/clazz/clazz.module.ts (663 bytes) ``` ## V層 班級新建組件中引入了教師選擇列表組件，此時在原型初始化中我們?nèi)匀灰迷摻M件以達(dá)到快速初始化原型的目的： ```html <form class="container-sm"> <div class="mb-3 row"> <label class="col-sm-2 col-form-label">名稱</label> <div class="col-sm-10"> <input type="text" class="form-control"> <small class="text-danger"> 班級名稱不能為空 </small> </div> </div> <div class="mb-3 row"> <label class="col-sm-2 col-form-label">班主任</label> <div class="col-sm-10"> <app-klass-select></app-klass-select> <small class="text-danger"> 必須指定一個班主任 </small> </div> </div> <div class="mb-3 row"> <div class="col-sm-10 offset-2"> <button class="btn btn-primary">保存 </button> </div> </div> </form> ``` 然后在`src/app/clazz/edit/edit.component.spec.ts`下的動態(tài)測試模塊中加入`app-klass-select`對應(yīng)的組件`KlassSelectComponent`： ```typescript await TestBed.configureTestingModule({ declarations: [EditComponent, KlassSelectComponent] }) ``` 最后在單元測試的測試用例上加入`fit`，啟用`ng t`來查看原型:  由于`KlassSelectComponent`依賴于后臺的數(shù)據(jù)，在未引入相關(guān)的模塊和MockApi攔截器前，進(jìn)行單元測試時將觸發(fā)上述錯誤。該錯誤在教師新增組件的測試中已經(jīng)出現(xiàn)過一次，請嘗試自行解決。 ## 圖解原理 隨著項目的增大、組件間的關(guān)系將會逐漸加強(qiáng)。這將會使我們的測試變得越發(fā)不可控制。假設(shè)A組件當(dāng)前僅僅依賴于`AMockApi`，接著我們又開發(fā)了100個依賴于組件A的新組件，在測試時我們分別在100個動態(tài)測試模塊的攔截器上加入了``AMockApi``: ```typescript providers: [ { provide: HTTP_INTERCEPTORS, multi: true, useClass: MockApiInterceptor.forRoot([AMockApi]) } ] ``` 然后正常的事情發(fā)生了：由于需求的變更，A組件增加了新功能，新功能添加完成后，不但要依賴于`AMockApi`，還依賴于`BMockApi`。 想像一下當(dāng)A組件的功能功能后，使用`ng t`來測試其它100個組件時，每個組件都需要加入到`BMockApi`的依賴： ```typescript providers: [ { provide: HTTP_INTERCEPTORS, multi: true, useClass: MockApiInterceptor.forRoot([AMockApi, BMockApi]) } ] ``` 在Angular中，可以建立一個專門用于模擬后臺的模塊，在該模塊中加入所有的`MockApi`來模擬整個后臺。然后再其它需要使用模擬后臺的測試模塊中，僅僅引入這個專門的模塊即可。以前測試模塊為例，按照傳統(tǒng)的解決辦法，若想成功創(chuàng)建教師編輯組件，則應(yīng)該在`imports`中加入`HttpClientModule`: ```typescript beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [EditComponent, KlassSelectComponent], imports: [ HttpClientModule ] }) .compileComponents(); }); ``` 原理圖對應(yīng)如下：  而如果想使用`MockApi`來替代真實的后臺Api，則需要在`provider`中提供`HTTP_INTERCEPTORS`： ```typescript await TestBed.configureTestingModule({ declarations: [EditComponent, KlassSelectComponent], imports: [ HttpClientModule ], providers: [ { provide: HTTP_INTERCEPTORS, multi: true, useClass: MockApiInterceptor.forRoot([]) } ] }) .compileComponents(); ``` 此時`MockApi`請作用的原因是由于`HttpClient`在發(fā)起數(shù)據(jù)請求以前，會查看當(dāng)前模塊中提供的`HTTP_INTERCEPTORS`，如果當(dāng)前模塊提供了`HTTP_INTERCEPTORS`則會調(diào)用第一個`HTTP_INTERCEPTOR`，然后由第一個調(diào)用第二個，依次累推。  但`MockApi`不有按常規(guī)出牌，當(dāng)調(diào)用到它時，它沒有繼續(xù)調(diào)用下一個攔截器，而是直接自己用模擬數(shù)據(jù)回應(yīng)了：  這就是在加入`MockApiInterceptor.forRoot()`攔截器后模擬API起作用的原因。 而`MockApiInterceptor`是根據(jù)`forRoot()`方法中傳入的數(shù)組來返回對應(yīng)的模擬數(shù)據(jù)的，所以若想某些模擬數(shù)據(jù)生效，是需要加相應(yīng)的類加入到`forRoot()`方法中： ```typescript beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [EditComponent, KlassSelectComponent], imports: [ HttpClientModule ], providers: [ { provide: HTTP_INTERCEPTORS, multi: true, useClass: MockApiInterceptor.forRoot([TeacherMockApi]) } ] }) .compileComponents(); ``` 以上我們再一次解釋了引用`HttpModule`以及`MockApi`的原理。 ## 公共測試模塊 我們添加一個公共測試模塊的話，原理圖如下：  我們將提供`HttpClient`的`HttpModule`以及提供攔截器的`MockApiInterceptor`添加到新的模塊中，然后在動態(tài)測試模塊中引用這個新模塊。這樣以來，將動態(tài)測試模塊需要`httpClient`時，則會由其`imports`的**專用用于模擬全部后臺Api的模塊**中的`HttpModule`中引入；當(dāng)`httpClient`發(fā)起請求時，也會由**專用用于模擬全部后臺Api的模塊**中查找`HTTP_INTERCEPTORS`。 下面，讓我們共同來實現(xiàn)上述原理圖。 ### 建立模塊 該模塊的作用是為單元測試中的動態(tài)測試模塊提供MockApi功能，將其命名為`MockApiTestingModule`，并將其建立在`mock-api`下是個不錯的選擇： ```bash panjie@panjie-de-Mac-Pro mock-api % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app/src/app/mock-api panjie@panjie-de-Mac-Pro mock-api % ng g m MockApiTesting --flat CREATE src/app/mock-api/mock-api-testing.module.ts (200 bytes) ``` **注意：** 上述命令使用了`--flat` 參數(shù)，表示把文件創(chuàng)建到當(dāng)前文件夾，如果不加該參數(shù)，`ng`將會當(dāng)前文件夾下創(chuàng)建一個`mock-api-testing`文件夾。 此時`mock-api`文件夾下共存在3個文件： ```bash CREATE src/app/mock-api/mock-api-testing.module.ts (200 bytes) panjie@panjie-de-Mac-Pro mock-api % tree . ├── clazz.mock.api.ts ├── mock-api-testing.module.ts └── teacher.mock.api.ts 0 directories, 3 files ``` 然后打開`mock-api-testing.module.ts`，為其添加對`HttpModule`的依賴，以及提供MockApi攔截器： ```typescript +++ b/first-app/src/app/mock-api/mock-api-testing.module.ts @@ -1,11 +1,20 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; +import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http'; +import {MockApiTestingInterceptor} from '@yunzhi/ng-mock-api/testing'; @NgModule({ declarations: [], imports: [ + HttpClientModule, CommonModule + ], + providers: [ + { + provide: HTTP_INTERCEPTORS, multi: true, + useClass: MockApiTestingInterceptor.forRoot([]) + } ] }) export class MockApiTestingModule { ``` 接下來將所有的MockApi文件，添加到`forRoot([])`方法中的數(shù)組中： ```typescript - useClass: MockApiTestingInterceptor.forRoot([]) + useClass: MockApiTestingInterceptor.forRoot([ + ClazzMockApi, + TeacherMockApi + ]) ``` ## 應(yīng)用模塊 現(xiàn)在可以在相關(guān)的測試中引用`MockApiTestingModule`來快速的滿足組件的各種后臺請求了，打開班級編輯組件對應(yīng)的測試文件，如此配置動態(tài)測試模塊： ```typescript +++ b/first-app/src/app/clazz/edit/edit.component.spec.ts import {MockApiTestingModule} from '../../mock-api/mock-api-testing.module'; beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [EditComponent, KlassSelectComponent], imports: [ MockApiTestingModule ] }) .compileComponents(); }); ``` 此時再查看`ng t`，在控制臺出現(xiàn)了找不到`formControl`的異常。  這是由于教師選擇組件中使用了響應(yīng)式表單，而當(dāng)前動態(tài)測試模塊并沒有引入響應(yīng)式表單模塊，所以提示無法識別`formControl`的錯誤。解決的方法是在當(dāng)前動態(tài)測試模塊中引用響應(yīng)式表單模塊： ```typescript - MockApiTestingModule + MockApiTestingModule, + ReactiveFormsModule ``` 此時控制臺錯誤消息。錯誤雖然消失了，但當(dāng)前方案仍存在一定的問題。這是由于我們在解決該問題時，仍然需要考慮子組件對`ReactiveFormsModule`的依賴問題，如果子組件依賴于多個模塊，我們同樣還需要在當(dāng)前的單元測試中引入其它多個模塊。所以從本質(zhì)上來，我們?nèi)匀幻媾R著某個子組件進(jìn)行更新后，引用它的父組件需要全部在`imports`中增加一遍對應(yīng)模塊的問題。帶著這個問題繼續(xù)學(xué)習(xí)，我們將在后面的章節(jié)中同樣使用抽離模塊的方法來解決該問題。 最后，由于在`MockApiTestingModule`中使用的攔截器是`MockApiTestingInterceptor`而非`MockApiInterceptor`，所以我們需要在測試代碼中手動觸發(fā)數(shù)據(jù)返回，同時啟用變更檢測。 ```typescript fit('should create', () => { expect(component).toBeTruthy(); + getTestScheduler().flush(); + fixture.autoDetectChanges(); }); ``` 最終效果如下：  至此，基于教師選擇組件的班級編輯組件原型初始化完畢。 | 名稱 | 鏈接 | | ---------- | ------------------------------------------------------------ | | 定義提供者 | [https://angular.cn/guide/dependency-injection-providers#defining-providers](https://angular.cn/guide/dependency-injection-providers#defining-providers) | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.4.1.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.4.1.zip) |