我们有时候也把这种将多个模块或是前后台组合起来一起看效果的测试称为**集成测试**,而优秀的单元测试是集成测试的有效保障手段。由于前面我们的单元测试做的够充分,相信本节一定会遇到最少的问题。 # 启动程序 分别启动数据库、后台应用及前台应用,并打开[http://localhost:4200/](http://localhost:4200/) ## 定制路由 klass/klass.module.ts ``` /*定义路由*/ const routes: Routes = [ { path: '', component: IndexComponent }, { path: 'add', component: AddComponent }, { ✚ path: 'edit/:id', ✚ component: EditComponent ✚ } ]; ``` ## 新增编辑链接 klass/index/index.component.html ``` ... <table> <tr> <th>序号</th> <th>名称</th> <th>辅导员</th> <th>操作</th> ✚ </tr> <tr *ngFor="let klass of klasses; index as i"> <td>{{i + 1}}</td> <td>{{klass.name}}</td> <td>{{klass.teacher.name}}</td> <td><a routerLink="./edit/{{klass.id}}">编辑</a></td> ✚ </tr> </table> ``` ## 测试 ![](https://img.kancloud.cn/49/30/49304ac5ccdf5216419acf5b7334270e_516x382.gif) 果真,没有发生预期外的错误。 # 参考文档 | 名称 | 链接 | 预计学习时长(分) | | --- | --- | --- | | 源码地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.4.7](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.4.7) | - |