當前組件中引用了TeacherSelect組件。在單元測試中使用了Test模塊了具有同樣selector的TeacherSelect組件。在班級管理與學生管理中，對嵌套組件的測試總是不盡如人意。以往的單元測試中，均未有效的測試出嵌套組件的`輸入 @Input`及`輸出 @Output`是否生效。之所以無法測試嵌入的組件，是由于沒有獲取測試嵌套組件的方法可供使用。無法獲取嵌套組件，當然也就無法對其進行相關測試了。  不過在測試中卻可以輕松的獲取到被注入的服務。基于此,一種間接測試嵌套組件的方法應運而生:  如此：預測試嵌套組件的@Input及@Output是否綁定成功，則直接獲取服務并對其@Input、@Output測試即可。 ## 整理替身 首先使位于Test模塊中的TeacherSelect組件替身擁有與原組件相同的輸入與輸出。 test/component/teacher-select/teacher-select.component.ts ```typescript export class TeacherSelectComponent implements OnInit { @Output() selected = new EventEmitter<Teacher>(); @Input() teacher: { id: number }; constructor() { } ``` ## 建立替身專用服務 接著在組件文件夾test/component/teacher-select/中建立此組件的專用服務`TeacherSelectService` ``` panjiedeMac-Pro:teacher-select panjie$ ng g s TeacherSelect --skip-tests CREATE src/app/test/component/teacher-select/teacher-select.service.ts (142 bytes) ``` test/component/teacher-select/teacher-select.service.ts ```typescript export class TeacherSelectService { constructor() { } } ``` 注意：此服務僅運行在測試環境中，不需要注入到root模塊中，故刪除`angular cli`自動生成的`@Injectable`相關代碼。以防止在非測試環境中誤注入此測試專用服務。 刪除`@Injectable`后若想讓其被自動注入則需要手動的將其聲明在TestModule中。 test/test.module.ts ```typescript providers: [ {provide: TeacherService, useClass: TeacherStubService}, TeacherSelectService ? ] }) export class TestModule { } ``` ? 相當于：`{provide: TeacherSelectService, useClass: TeacherSelectService}` ## 于替身組件中注入專用服務 test/component/teacher-select/teacher-select.component.ts ```typescript export class TeacherSelectComponent implements OnInit { @Output() selected = new EventEmitter<Teacher>(); @Input() teacher: { id: number }; constructor(private teacherSelectService: TeacherSelectService) { teacherSelectService.selected = this.selected; ? teacherSelectService.teacher = this.teacher; ? } ``` * ? 將組件中的輸出綁定到服務上 * ? 將組件中的輸入綁定到服務上 ## 完善專用服務 以應在服務中增加相應字段，完成與C層的輸入輸出一一綁定。 test/component/teacher-select/teacher-select.service.ts ```typescript import {EventEmitter} from '@angular/core'; import {Teacher} from '../../../norm/entity/Teacher'; export class TeacherSelectService { selected: EventEmitter<Teacher>; teacher: { id: number }; constructor() { } } ``` ## 完成測試 準備工作完畢后，開始完成TeacherSelect嵌套組件的測試： src/app/course/add/add.component.spec.ts ```typescript fit('嵌入TeacherSelect組件測試', () => { // 獲取組件替身的專用服務 const teacherSelectService: TeacherSelectService = TestBed.get(TeacherSelectService); const teacher = new Teacher(null, null, null); // 服務彈出teacher，斷言組件接收到teacher teacherSelectService.selected.emit(teacher); expect(component.course.teacher).toBe(teacher); }); ``` 測試結果：  ## 修正功能 按單元測試代碼來修正組件功能 ### V層 src/app/course/add/add.component.html ```html <app-teacher-select (selected)="course.teacher"></app-teacher-select> ? <app-teacher-select (selected)="onTeacherSelect($event)"></app-teacher-select> ``` ### C層 src/app/course/add/add.component.ts ```typescript ngOnInit() { this.formGroup = this.formBuilder.group({ name: ['', [Validators.minLength(2), Validators.required]] }); this.course = new Course(); ? } onTeacherSelect($event: Teacher) { ? this.course.teacher = $event; ? } ? ``` 單元測試通過，說明由組件測試專用服務中彈射出的值被Add組件成功接收了，嵌套組件測試成功。  # 總結 此方案使用將專用服務注入到嵌套組件的方法，間接的測試了嵌套組件是否被成功的綁定了輸入與輸出。雖然在一定程度上解決了無法直接測試嵌套組件的問題，但筆者認為此方案扔顯臃腫，應該是筆者還沒有參透angular團隊在相關方案的測試思想。如果你在學習實踐的路上發現了更好的測試方案，請果斷放棄此方案。 >[warning] 在TeacherSelect組件中加入專用服務后，將引發歷史單元測試中的一個注入錯誤，請嘗試自行修正。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step6.1.2](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step6.1.2) | - |