2.4.6 測試中的路由 · Angular入門實例教程

# 單元測試本節中，我們繼續使用`ng t`來開發教師編輯組件。讓我們坐上時光機先回到本節的第一小節關于`ng t`仍然啟動了Add組件的問題上。在本節的第一小節中，之所以`ng t`仍然顯示的為Add組件，是由于Add組件單元測試文件中的`fdescribe`關鍵字，一個`f`表明強制執行該測試而忽略其它測試。所以我們可以通過移除Add組件的強制測試、同時在Edit組件對應的單元測試文件中加入`fdescribe`關鍵字來在單元測試中啟動編輯組件。使用`ng t`啟動項目后將得到如下錯誤： ![image-20210227141103305](https://img.kancloud.cn/ad/8e/ad8ecbf8e3d13db6e95768f879d06d01_772x119.png) 提示說：并沒有找到`ActivatedRoute`的提供者。復習本節的第二小節得知，Angular內置的`RouterModule`可能提供`ActivatedRoute`: ## RouterTestingModule ```typescript +++ b/first-app/src/app/edit/edit.component.spec.ts @@ -1,6 +1,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {EditComponent} from './edit.component'; +import {RouterModule} from '@angular/router'; fdescribe('EditComponent', () => { let component: EditComponent; @@ -8,7 +9,8 @@ fdescribe('EditComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [EditComponent] + declarations: [EditComponent], + imports: [RouterModule] }) .compileComponents(); }); ``` 保存代碼后重新查看測試結果： ![image-20210227141103305](https://img.kancloud.cn/ad/8e/ad8ecbf8e3d13db6e95768f879d06d01_772x119.png) 我們確認引用了能提供`ActivatedRoute`的`RouterModule`后，錯誤并未消失。這是由于：由在單元測試的理念是**以代碼來驗證代碼**，而`RouterModule`提供的`ActivatedRoute`卻做不到這一點，所以Angular為了準備了可以遵循**以代碼來驗證代碼**的`RouterTestingModule`，其同樣具有提供`ActivatedRoute`的能力，專門的適配于單元測試。 ```typescript +++ b/first-app/src/app/edit/edit.component.spec.ts @@ -1,6 +1,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {EditComponent} from './edit.component'; +import {RouterTestingModule} from '@angular/router/testing'; fdescribe('EditComponent', () => { let component: EditComponent; @@ -8,7 +9,8 @@ fdescribe('EditComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [EditComponent] + declarations: [EditComponent], + imports: [RouterTestingModule] }) .compileComponents(); }); ``` 繼續測試，錯誤如下： ![image-20210227142445552](https://img.kancloud.cn/d5/37/d537971ece494f0c682348c3d1137184_666x95.png) ## HttpClientTestingModule 與專門用于測試的`RouterTestingModule`相同，Angular同樣為我們準備了同樣具體提供`HttpClient`能力的`HttpClientTestingModule`來替換`HttpClientModule`。 ```typescript +import {HttpClientTestingModule} from '@angular/common/http/testing'; fdescribe('EditComponent', () => { let component: EditComponent; @@ -10,7 +11,8 @@ fdescribe('EditComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [EditComponent], - imports: [RouterTestingModule] + imports: [RouterTestingModule, + HttpClientTestingModule] }) .compileComponents(); }); ``` 對于Anguar而言，能夠成功的完成依賴注入取決于模塊是否擁有注入條件，比如要想成功完成Edit組件的依賴注入： ```typescript constructor(private activeRoute: ActivatedRoute, private httpClient: HttpClient, private appComponent: AppComponent) { } ``` 則當前測試專用動態測試模塊需要擁有注入`ActivatedRoute`,`HttpClient`、`AppComponent`的能力，而這些能力具體是由誰提供的，Angular并不關心。 ![image-20210227143146566](https://img.kancloud.cn/db/b4/dbb4b207249f6d440081390c3e6585b6_699x99.png) ## AppComponet 注入一個能提供AppComponet的provider(`HttpClientTestingModule`、`RouterTestingModule`、`HttpClientModule`、``RouterModule`都是provider )有多種方式，在此我們使用較簡單的方式： ```typescript +++ b/first-app/src/app/edit/edit.component.spec.ts @@ -3,6 +3,7 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {EditComponent} from './edit.component'; import {RouterTestingModule} from '@angular/router/testing'; import {HttpClientTestingModule} from '@angular/common/http/testing'; +import {AppComponent} from '../app.component'; fdescribe('EditComponent', () => { let component: EditComponent; @@ -12,7 +13,10 @@ fdescribe('EditComponent', () => { await TestBed.configureTestingModule({ declarations: [EditComponent], imports: [RouterTestingModule, - HttpClientTestingModule] + HttpClientTestingModule], + providers: [ + AppComponent + ] }) .compileComponents(); }); ``` 頁面再次刷新后，顯示錯誤消失。接下來查看控制臺： ![image-20210227143932111](https://img.kancloud.cn/c3/cc/c3cc50d6326331741ad9c52710cd5d03_570x147.png) 這是有兩種依賴于第三方的聲明方法：第一種是在構造函數中，第二種則是在V層模板中。我們在前面解決了在構造函數中的三個依賴，但沒有解決模板中`[(ngModel)]`的依賴：`姓名：<input value="張三" name="name" [(ngModel)]="teacher.name">` 在此`[(ngModel)]`被稱為一個指令，該指令可由Angular的`FormsModule`提供： ```typescript +++ b/first-app/src/app/edit/edit.component.spec.ts @@ -14,7 +14,8 @@ fdescribe('EditComponent', () => { await TestBed.configureTestingModule({ declarations: [EditComponent], imports: [RouterTestingModule, - HttpClientTestingModule], + HttpClientTestingModule, + FormsModule], providers: [ AppComponent ] ``` 再次查看界面，頁面錯誤消息，控制臺錯誤消失： ![image-20210227144309953](https://img.kancloud.cn/30/b0/30b06c541ef20ab803373e49a910ab61_699x289.png) ## 未完待續在以上幾個providers的支持下，我們現在絕對可以單獨的來測試當前編輯組件了。但是歷史經驗表明，在初始的學習階段過多的強調單元測試，會無意中增加Angular的學習成本，這將使整個學習路徑過于陡峭。所以我們將在后續的章節中，逐步加強對單元測試的講解。 | 名稱 | 地址 | 備注 | | -------------------------- | ------------------------------------------------------------ | ---- | | 測試 -- 具有依賴的組件 | [https://angular.cn/guide/testing-components-scenarios#component-with-a-dependency](https://angular.cn/guide/testing-components-scenarios#component-with-a-dependency) | | | 測試 -- 對嵌套組件進行測試 | [https://angular.cn/guide/testing-components-scenarios#nested-component-tests](https://angular.cn/guide/testing-components-scenarios#nested-component-tests) | | | 測試 -- 路由目標組件 | [https://angular.cn/guide/testing-components-scenarios#routed-components](https://angular.cn/guide/testing-components-scenarios#routed-components) | | | 測試http請求 | [https://angular.cn/guide/http#testing-http-requests](https://angular.cn/guide/http#testing-http-requests) | | | 本節源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step2.4.6.zip](https://github.com/mengyunzhi/angular11-guild/archive/step2.4.6.zip) | |