久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

當(dāng)前組件中引用了TeacherSelect組件。在單元測(cè)試中使用了Test模塊了具有同樣selector的TeacherSelect組件。在班級(jí)管理與學(xué)生管理中，對(duì)嵌套組件的測(cè)試總是不盡如人意。以往的單元測(cè)試中，均未有效的測(cè)試出嵌套組件的`輸入 @Input`及`輸出 @Output`是否生效。之所以無(wú)法測(cè)試嵌入的組件，是由于沒(méi)有獲取測(cè)試嵌套組件的方法可供使用。無(wú)法獲取嵌套組件，當(dāng)然也就無(wú)法對(duì)其進(jìn)行相關(guān)測(cè)試了。  不過(guò)在測(cè)試中卻可以輕松的獲取到被注入的服務(wù)?；诖?一種間接測(cè)試嵌套組件的方法應(yīng)運(yùn)而生:  如此：預(yù)測(cè)試嵌套組件的@Input及@Output是否綁定成功，則直接獲取服務(wù)并對(duì)其@Input、@Output測(cè)試即可。 ## 整理替身 首先使位于Test模塊中的TeacherSelect組件替身?yè)碛信c原組件相同的輸入與輸出。 test/component/teacher-select/teacher-select.component.ts ```typescript export class TeacherSelectComponent implements OnInit { @Output() selected = new EventEmitter<Teacher>(); @Input() teacher: { id: number }; constructor() { } ``` ## 建立替身專用服務(wù) 接著在組件文件夾test/component/teacher-select/中建立此組件的專用服務(wù)`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() { } } ``` 注意：此服務(wù)僅運(yùn)行在測(cè)試環(huán)境中，不需要注入到root模塊中，故刪除`angular cli`自動(dòng)生成的`@Injectable`相關(guān)代碼。以防止在非測(cè)試環(huán)境中誤注入此測(cè)試專用服務(wù)。 刪除`@Injectable`后若想讓其被自動(dòng)注入則需要手動(dòng)的將其聲明在TestModule中。 test/test.module.ts ```typescript providers: [ {provide: TeacherService, useClass: TeacherStubService}, TeacherSelectService ? ] }) export class TestModule { } ``` ? 相當(dāng)于：`{provide: TeacherSelectService, useClass: TeacherSelectService}` ## 于替身組件中注入專用服務(wù) 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; ? } ``` * ? 將組件中的輸出綁定到服務(wù)上 * ? 將組件中的輸入綁定到服務(wù)上 ## 完善專用服務(wù) 以應(yīng)在服務(wù)中增加相應(yīng)字段，完成與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() { } } ``` ## 完成測(cè)試 準(zhǔn)備工作完畢后，開始完成TeacherSelect嵌套組件的測(cè)試： src/app/course/add/add.component.spec.ts ```typescript fit('嵌入TeacherSelect組件測(cè)試', () => { // 獲取組件替身的專用服務(wù) const teacherSelectService: TeacherSelectService = TestBed.get(TeacherSelectService); const teacher = new Teacher(null, null, null); // 服務(wù)彈出teacher，斷言組件接收到teacher teacherSelectService.selected.emit(teacher); expect(component.course.teacher).toBe(teacher); }); ``` 測(cè)試結(jié)果：  ## 修正功能 按單元測(cè)試代碼來(lái)修正組件功能 ### 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; ? } ? ``` 單元測(cè)試通過(guò)，說(shuō)明由組件測(cè)試專用服務(wù)中彈射出的值被Add組件成功接收了，嵌套組件測(cè)試成功。  # 總結(jié) 此方案使用將專用服務(wù)注入到嵌套組件的方法，間接的測(cè)試了嵌套組件是否被成功的綁定了輸入與輸出。雖然在一定程度上解決了無(wú)法直接測(cè)試嵌套組件的問(wèn)題，但筆者認(rèn)為此方案扔顯臃腫，應(yīng)該是筆者還沒(méi)有參透angular團(tuán)隊(duì)在相關(guān)方案的測(cè)試思想。如果你在學(xué)習(xí)實(shí)踐的路上發(fā)現(xiàn)了更好的測(cè)試方案，請(qǐng)果斷放棄此方案。 >[warning] 在TeacherSelect組件中加入專用服務(wù)后，將引發(fā)歷史單元測(cè)試中的一個(gè)注入錯(cuò)誤，請(qǐng)嘗試自行修正。 # 參考文檔 | 名稱 | 鏈接 | 預(yù)計(jì)學(xué)習(xí)時(shí)長(zhǎng)(分） | | --- | --- | --- | | 源碼地址 | [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) | - |