前后臺分別開發完畢后，本節進行集成測試以保障新增課程功能的正確性。 # 清緩存 測試前先清除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) | - |