有了上一小節(jié)的代碼，結(jié)合前面設(shè)置路由的知識(shí)。大家現(xiàn)在可以嘗試下將klass模塊中的index組件添加到app-routing.module的路徑中試一試了。
是的，你會(huì)得到一些錯(cuò)誤。結(jié)合前面我們講過的知識(shí)點(diǎn)，猜測一下該錯(cuò)誤是如何產(chǎn)生的吧。
# 初識(shí)單元測試
除了向路由中添加映射以外，我們還可以通過單元測試來單獨(dú)的開發(fā)某個(gè)組件。單元測試，顧名思義就是對每個(gè)小的單元進(jìn)行獨(dú)立的測試，在團(tuán)隊(duì)合作開發(fā)的進(jìn)程中，大的任務(wù)會(huì)被分解為一個(gè)個(gè)小的單元，每位工程師在同一時(shí)間負(fù)責(zé)一個(gè)單元。每個(gè)小的單元能夠進(jìn)行單獨(dú)的測試開發(fā)，是分工合作的基礎(chǔ)。比如我們現(xiàn)在，在開發(fā)前臺(tái)時(shí)，后臺(tái)并沒有準(zhǔn)備好對應(yīng)的接口，那么便可以借助優(yōu)秀的單元測試在后臺(tái)沒有提供接口前進(jìn)行班級(jí)列表組件的開發(fā)與測試。
在使用`webstorm`的`anuglar`項(xiàng)目中，可以使用以下兩種方法啟動(dòng)單元測試。
## 借助`webstorm`
在`webstorm`打開`klass/index/index.component.spec.ts`，并點(diǎn)擊第5行的這個(gè)按鈕來來啟動(dòng)單元測試：
有點(diǎn)耐心，稍等片刻，系統(tǒng)為我們自動(dòng)打開了瀏覽器，并在如下位置顯示了該組件的內(nèi)容：
## 使用命令行啟動(dòng)
打開`shell`或`webstorm`的控制臺(tái)并進(jìn)行項(xiàng)目路徑。執(zhí)行`ng test`命令。然后angular自動(dòng)的進(jìn)行一系列操作及自動(dòng)打開瀏覽器同時(shí)報(bào)告測試結(jié)果。
如圖標(biāo)注所示，區(qū)別于`webstorm`的單元測試，在使用`ng test`進(jìn)行測試時(shí)，會(huì)執(zhí)行項(xiàng)目的所有測試。當(dāng)然我們的項(xiàng)目有兩個(gè)測試文件`app/klass/index/index.component.spec.ts`及`app.component.spec.ts`，`app/klass/index/index.component.spec.ts`中有1個(gè)測試用例，`app.component.spec.ts`中有3個(gè)測試用例，總數(shù)為4。其實(shí)測試通過的2個(gè)，未通過的為2個(gè)。
如果你此時(shí)編輯`klass/index/index.component.ts `后保存該文件，單元測試還將自動(dòng)重新執(zhí)行。
兩者間的對比如下
| | 使用方法 | 測試范圍 | 有語法錯(cuò)誤時(shí)是否繼續(xù)執(zhí)行 | 文件更新后是否自動(dòng)執(zhí)行 |
| ---- | ---- | ---- |---- | ---- |
| `webstorm` | 點(diǎn)擊執(zhí)行 | 單個(gè)文件或單個(gè)測試點(diǎn) | 否 | 否 |
| 命令行 | 終端命令執(zhí)行 | 所有文件及所有測試點(diǎn) | 是 | 是 |
在實(shí)際的開發(fā)中由于`命令行啟動(dòng)測試`高效，實(shí)時(shí)地自動(dòng)重復(fù)測試的特點(diǎn)，獲取了更多的青睞。我們還可以通過修改某個(gè)單元測試文件的`describe`關(guān)鍵字來達(dá)到僅測試某一個(gè)組件的目的。比如我們將`klass/index/index.component.spec.ts`中第5行的內(nèi)容修改如下：
```
describe('IndexComponent', () => { ?
fdescribe('IndexComponent', () => { ?
```
此時(shí)，當(dāng)我們再次運(yùn)行`ng test`時(shí)，則將僅僅直接此測試文件并為我們構(gòu)造相應(yīng)的組件。
當(dāng)然這同時(shí)也意味著：當(dāng)我們開發(fā)當(dāng)前組件時(shí)，僅僅需要這個(gè)單元測試文件即。我們可以不再需要為該組件指定路由，也再不需要使用`ng serve`來啟動(dòng)整個(gè)前臺(tái)。
# 參考文檔
| 名稱 | 鏈接 | 預(yù)計(jì)學(xué)習(xí)時(shí)長(分） |
| --- | --- | --- |
| 單元測試組件 | [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) | - |
- 序言
- 第一章：Hello World
- 第一節(jié)：Angular準(zhǔn)備工作
- 1 Node.js
- 2 npm
- 3 WebStorm
- 第二節(jié)：Hello Angular
- 第三節(jié)：Spring Boot準(zhǔn)備工作
- 1 JDK
- 2 MAVEN
- 3 IDEA
- 第四節(jié)：Hello Spring Boot
- 1 Spring Initializr
- 2 Hello Spring Boot!
- 3 maven國內(nèi)源配置
- 4 package與import
- 第五節(jié)：Hello Spring Boot + Angular
- 1 依賴注入【前】
- 2 HttpClient獲取數(shù)據(jù)【前】
- 3 數(shù)據(jù)綁定【前】
- 4 回調(diào)函數(shù)【選學(xué)】
- 第二章 教師管理
- 第一節(jié) 數(shù)據(jù)庫初始化
- 第二節(jié) CRUD之R查數(shù)據(jù)
- 1 原型初始化【前】
- 2 連接數(shù)據(jù)庫【后】
- 3 使用JDBC讀取數(shù)據(jù)【后】
- 4 前后臺(tái)對接
- 5 ng-if【前】
- 6 日期管道【前】
- 第三節(jié) CRUD之C增數(shù)據(jù)
- 1 新建組件并映射路由【前】
- 2 模板驅(qū)動(dòng)表單【前】
- 3 httpClient post請求【前】
- 4 保存數(shù)據(jù)【后】
- 5 組件間調(diào)用【前】
- 第四節(jié) CRUD之U改數(shù)據(jù)
- 1 路由參數(shù)【前】
- 2 請求映射【后】
- 3 前后臺(tái)對接【前】
- 4 更新數(shù)據(jù)【前】
- 5 更新某個(gè)教師【后】
- 6 路由器鏈接【前】
- 7 觀察者模式【前】
- 第五節(jié) CRUD之D刪數(shù)據(jù)
- 1 綁定到用戶輸入事件【前】
- 2 刪除某個(gè)教師【后】
- 第六節(jié) 代碼重構(gòu)
- 1 文件夾化【前】
- 2 優(yōu)化交互體驗(yàn)【前】
- 3 相對與絕對地址【前】
- 第三章 班級(jí)管理
- 第一節(jié) JPA初始化數(shù)據(jù)表
- 第二節(jié) 班級(jí)列表
- 1 新建模塊【前】
- 2 初識(shí)單元測試【前】
- 3 初始化原型【前】
- 4 面向?qū)ο蟆厩啊?/a>
- 5 測試HTTP請求【前】
- 6 測試INPUT【前】
- 7 測試BUTTON【前】
- 8 @RequestParam【后】
- 9 Repository【后】
- 10 前后臺(tái)對接【前】
- 第三節(jié) 新增班級(jí)
- 1 初始化【前】
- 2 響應(yīng)式表單【前】
- 3 測試POST請求【前】
- 4 JPA插入數(shù)據(jù)【后】
- 5 單元測試【后】
- 6 惰性加載【前】
- 7 對接【前】
- 第四節(jié) 編輯班級(jí)
- 1 FormGroup【前】
- 2 x、[x]、{{x}}與(x)【前】
- 3 模擬路由服務(wù)【前】
- 4 測試間諜spy【前】
- 5 使用JPA更新數(shù)據(jù)【后】
- 6 分層開發(fā)【后】
- 7 前后臺(tái)對接
- 8 深入imports【前】
- 9 深入exports【前】
- 第五節(jié) 選擇教師組件
- 1 初始化【前】
- 2 動(dòng)態(tài)數(shù)據(jù)綁定【前】
- 3 初識(shí)泛型
- 4 @Output()【前】
- 5 @Input()【前】
- 6 再識(shí)單元測試【前】
- 7 其它問題
- 第六節(jié) 刪除班級(jí)
- 1 TDD【前】
- 2 TDD【后】
- 3 前后臺(tái)對接
- 第四章 學(xué)生管理
- 第一節(jié) 引入Bootstrap【前】
- 第二節(jié) NAV導(dǎo)航組件【前】
- 1 初始化
- 2 Bootstrap格式化
- 3 RouterLinkActive
- 第三節(jié) footer組件【前】
- 第四節(jié) 歡迎界面【前】
- 第五節(jié) 新增學(xué)生
- 1 初始化【前】
- 2 選擇班級(jí)組件【前】
- 3 復(fù)用選擇組件【前】
- 4 完善功能【前】
- 5 MVC【前】
- 6 非NULL校驗(yàn)【后】
- 7 唯一性校驗(yàn)【后】
- 8 @PrePersist【后】
- 9 CM層開發(fā)【后】
- 10 集成測試
- 第六節(jié) 學(xué)生列表
- 1 分頁【后】
- 2 HashMap與LinkedHashMap
- 3 初識(shí)綜合查詢【后】
- 4 綜合查詢進(jìn)階【后】
- 5 小試綜合查詢【后】
- 6 初始化【前】
- 7 M層【前】
- 8 單元測試與分頁【前】
- 9 單選與多選【前】
- 10 集成測試
- 第七節(jié) 編輯學(xué)生
- 1 初始化【前】
- 2 嵌套組件測試【前】
- 3 功能開發(fā)【前】
- 4 JsonPath【后】
- 5 spyOn【后】
- 6 集成測試
- 7 @Input 異步傳值【前】
- 8 值傳遞與引入傳遞
- 9 @PreUpdate【后】
- 10 表單驗(yàn)證【前】
- 第八節(jié) 刪除學(xué)生
- 1 CSS選擇器【前】
- 2 confirm【前】
- 3 功能開發(fā)與測試【后】
- 4 集成測試
- 5 定制提示框【前】
- 6 引入圖標(biāo)庫【前】
- 第九節(jié) 集成測試
- 第五章 登錄與注銷
- 第一節(jié)：普通登錄
- 1 原型【前】
- 2 功能設(shè)計(jì)【前】
- 3 功能設(shè)計(jì)【后】
- 4 應(yīng)用登錄組件【前】
- 5 注銷【前】
- 6 保留登錄狀態(tài)【前】
- 第二節(jié)：你是誰
- 1 過濾器【后】
- 2 令牌機(jī)制【后】
- 3 裝飾器模式【后】
- 4 攔截器【前】
- 5 RxJS操作符【前】
- 6 用戶登錄與注銷【后】
- 7 個(gè)人中心【前】
- 8 攔截器【后】
- 9 集成測試
- 10 單例模式
- 第六章 課程管理
- 第一節(jié) 新增課程
- 1 初始化【前】
- 2 嵌套組件測試【前】
- 3 async管道【前】
- 4 優(yōu)雅的測試【前】
- 5 功能開發(fā)【前】
- 6 實(shí)體監(jiān)聽器【后】
- 7 @ManyToMany【后】
- 8 集成測試【前】
- 9 異步驗(yàn)證器【前】
- 10 詳解CORS【前】
- 第二節(jié) 課程列表
- 第三節(jié) 果斷
- 1 初始化【前】
- 2 分頁組件【前】
- 2 分頁組件【前】
- 3 綜合查詢【前】
- 4 綜合查詢【后】
- 4 綜合查詢【后】
- 第節(jié) 班級(jí)列表
- 第節(jié) 教師列表
- 第節(jié) 編輯課程
- TODO返回機(jī)制【前】
- 4 彈出框組件【前】
- 5 多路由出口【前】
- 第節(jié) 刪除課程
- 第七章 權(quán)限管理
- 第一節(jié) AOP
- 總結(jié)
- 開發(fā)規(guī)范
- 備用