有了上一小節的代碼，結合前面設置路由的知識。大家現在可以嘗試下將klass模塊中的index組件添加到app-routing.module的路徑中試一試了。 是的，你會得到一些錯誤。結合前面我們講過的知識點，猜測一下該錯誤是如何產生的吧。 # 初識單元測試 除了向路由中添加映射以外，我們還可以通過單元測試來單獨的開發某個組件。單元測試，顧名思義就是對每個小的單元進行獨立的測試，在團隊合作開發的進程中，大的任務會被分解為一個個小的單元，每位工程師在同一時間負責一個單元。每個小的單元能夠進行單獨的測試開發，是分工合作的基礎。比如我們現在，在開發前臺時，后臺并沒有準備好對應的接口，那么便可以借助優秀的單元測試在后臺沒有提供接口前進行班級列表組件的開發與測試。 在使用`webstorm`的`anuglar`項目中，可以使用以下兩種方法啟動單元測試。 ## 借助`webstorm` 在`webstorm`打開`klass/index/index.component.spec.ts`，并點擊第5行的這個按鈕來來啟動單元測試：  有點耐心，稍等片刻，系統為我們自動打開了瀏覽器，并在如下位置顯示了該組件的內容：  ## 使用命令行啟動 打開`shell`或`webstorm`的控制臺并進行項目路徑。執行`ng test`命令。然后angular自動的進行一系列操作及自動打開瀏覽器同時報告測試結果。  如圖標注所示，區別于`webstorm`的單元測試，在使用`ng test`進行測試時，會執行項目的所有測試。當然我們的項目有兩個測試文件`app/klass/index/index.component.spec.ts`及`app.component.spec.ts`，`app/klass/index/index.component.spec.ts`中有1個測試用例，`app.component.spec.ts`中有3個測試用例，總數為4。其實測試通過的2個，未通過的為2個。 如果你此時編輯`klass/index/index.component.ts `后保存該文件，單元測試還將自動重新執行。 兩者間的對比如下 | | 使用方法 | 測試范圍 | 有語法錯誤時是否繼續執行 | 文件更新后是否自動執行 | | ---- | ---- | ---- |---- | ---- | | `webstorm` | 點擊執行 | 單個文件或單個測試點 | 否 | 否 | | 命令行 | 終端命令執行 | 所有文件及所有測試點 | 是 | 是 | 在實際的開發中由于`命令行啟動測試`高效，實時地自動重復測試的特點，獲取了更多的青睞。我們還可以通過修改某個單元測試文件的`describe`關鍵字來達到僅測試某一個組件的目的。比如我們將`klass/index/index.component.spec.ts`中第5行的內容修改如下： ``` describe('IndexComponent', () => { ? fdescribe('IndexComponent', () => { ? ``` 此時，當我們再次運行`ng test`時，則將僅僅直接此測試文件并為我們構造相應的組件。 當然這同時也意味著：當我們開發當前組件時，僅僅需要這個單元測試文件即。我們可以不再需要為該組件指定路由，也再不需要使用`ng serve`來啟動整個前臺。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 單元測試組件 | [https://angular.cn/guide/testing#component-class-testing](https://angular.cn/guide/testing#component-class-testing) | 15 | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.2.2](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.2.2) | - |