前后台分别开发完毕后，本节进行集成测试以保障新增课程功能的正确性。 # 清缓存 测试前先清除session缓存以免发生CORS错误。  # 添加路由 添加子路由： course/course-routing.module.ts ```typescript import {AddComponent} from './add/add.component'; const routes: Routes = [ { path: 'add', component: AddComponent } ]; ``` 添加根路由： app-routing.module.ts ```typescript const routes: Routes = [ ... { path: 'course', loadChildren: () => import('./course/course.module').then(mod => mod.CourseModule) } ]; ``` # 初始化登录用户  # 集成测试 使用初始化用户登录系统后在浏览器输入`http://localhost:4200/course/add`  ## 引入模块： ```typescript @NgModule({ declarations: [AddComponent, KlassMultipleSelectComponent], imports: [ CommonModule, CourseRoutingModule, ReactiveFormsModule, ➊ KlassModule, ➋ CoreModule ➌ ] }) export class CourseModule { } ``` * ➊ formGroup所在模块 * ➋ 选择教师组件TeacherSelectComponent所在模块 * ➌ KlassMultipleSelect依赖的多选组件MultipleSelect所在模块 ## 暴露（输出）组件 组件默认被声明到模块的declarations中，表明该组件为本模块的私有组件。若组件需要共享给其它模块，则需要将其声明到exports中。 core/core.module.ts ```typescript exports: [ SelectComponent, MultipleSelectComponent ✚ ] }) export class CoreModule { } ``` klass/klass.module.ts ```typescript ], exports: [ TeacherSelectComponent ✚ ] }) ```  # 添加测试数据 添加几个教师以及几个班级后再次测试.  控制台发生了500错误：  查看网络信息获取发起请求的内容：  ## 修正BUG 发现是由于在提交时没有传入course的名称导致的。排查对应的单元测试及组件代码发现在onSubmit方法中的确没有在提交信息时加入课程名称，修正如下： course/add/add.component.ts ```typescript onSubmit() { this.course.name = this.formGroup.get('name').value; ✚ this.courseService.save(this.course).subscribe((course) => { console.log(course); }); } ``` 同步补充单元测试文件： course/add/add.component.spec.ts ```typescript fit('onSubmit', () => { component.formGroup.get('name').setValue('test'); ... expect(course.name).toEqual('test'); }); ``` # 测试结果  # 参考文档 | 名称 | 链接 | 预计学习时长(分） | | --- | --- | --- | | 源码地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step6.1.8](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step6.1.8) | - |