有了上一小节的代码，结合前面设置路由的知识。大家现在可以尝试下将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) | - |