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

有了公用的多擇組件后我們嘗試使用它打造班級(jí)選擇組件。來到course模塊中，并新建KlassMultipleSelect組件。 ``` panjiedeMac-Pro:course panjie$ ng g c KlassMultipleSelect CREATE src/app/course/klass-multiple-select/klass-multiple-select.component.sass (0 bytes) CREATE src/app/course/klass-multiple-select/klass-multiple-select.component.html (36 bytes) CREATE src/app/course/klass-multiple-select/klass-multiple-select.component.spec.ts (721 bytes) CREATE src/app/course/klass-multiple-select/klass-multiple-select.component.ts (328 bytes) UPDATE src/app/course/course.module.ts (478 bytes) ``` V層初始化如下： course/klass-multiple-select/klass-multiple-select.component.html ```html <app-multiple-select [list$]="klasses$" (changed)="onChange($event)"></app-multiple-select> ``` C層初始化如下： course/klass-multiple-select/klass-multiple-select.component.ts ```typescript import { Component, OnInit } from '@angular/core'; import {Observable} from 'rxjs'; import {Klass} from '../../norm/entity/Klass'; @Component({ selector: 'app-klass-multiple-select', templateUrl: './klass-multiple-select.component.html', styleUrls: ['./klass-multiple-select.component.sass'] }) export class KlassMultipleSelectComponent implements OnInit { klasses$: Observable<Klass[]>; constructor() { } ngOnInit() { } onChange($event: Array<Klass>) { } } ``` # 單元測(cè)試 我們已經(jīng)掌握了對(duì)嵌套組件的測(cè)試的方法，本例中將展示一種更貼近于官方最佳實(shí)踐的測(cè)試組織方法。以HttpClient為例，angular同時(shí)提供了可用于生產(chǎn)環(huán)境的HttpClientModule以及用于測(cè)試環(huán)境的HttpClientTestingModule來做為HttpClient的提供者。官方的這種做法使得在測(cè)試過程中引入HttpClient的替身變成一件非常輕松的事情。 反觀我們當(dāng)前的測(cè)試，將相關(guān)測(cè)試文件統(tǒng)一加入到TestModule快速的解決了測(cè)試過程中依賴問題，這本無可厚非，但卻不是一個(gè)好的習(xí)慣。從簡單的意義上來講，由于并沒有貼近于官言的最佳實(shí)踐所以這種模式必然會(huì)存在問題，當(dāng)前沒有發(fā)現(xiàn)問題的原因只能是我們對(duì)angular理解的還不夠深入，應(yīng)用的還不夠廣泛；從復(fù)雜點(diǎn)的意義上來，在實(shí)際的前端開發(fā)中團(tuán)隊(duì)需要抽離出如用戶登錄、注銷、權(quán)限驗(yàn)證、菜單生成、AppOnReady等眾多公用服務(wù)做為單獨(dú)的angular庫在應(yīng)用到不同的項(xiàng)目中，而在對(duì)應(yīng)的模塊中同步建立測(cè)試模塊以提供測(cè)試替身則符合angular的規(guī)范及習(xí)慣，使得團(tuán)隊(duì)其它項(xiàng)目引入公用服務(wù)時(shí)的單元測(cè)試更加規(guī)范以提升整體的開發(fā)效率。 ## CoreTestingModule 在CoreMoudle中同步建立測(cè)試Module ---- CoreTestingModule ``` panjiedeMac-Pro:core panjie$ ng g m CoreTesting CREATE src/app/core/core-testing/core-testing.module.ts (197 bytes) ``` 建立對(duì)應(yīng)的組件替身 ``` panjiedeMac-Pro:core panjie$ cd core-testing/ panjiedeMac-Pro:core-testing panjie$ ng g c MultipleSelect --skip-tests CREATE src/app/core/core-testing/multiple-select/multiple-select.component.sass (0 bytes) CREATE src/app/core/core-testing/multiple-select/multiple-select.component.html (30 bytes) CREATE src/app/core/core-testing/multiple-select/multiple-select.component.ts (305 bytes) UPDATE src/app/core/core-testing/core-testing.module.ts (307 bytes) panjiedeMac-Pro:core-testing panjie$ ``` 參考angular官方的HttpClientTestingModule提供HttpTestingController，提供CoreTestingController ``` panjiedeMac-Pro:core-testing panjie$ ng g class CoreTestingController --skip-tests CREATE src/app/core/core-testing/core-testing-controller.ts (39 bytes) ``` # 一種示例 如何整理CoreTestingModule以及CoreTestingController相信會(huì)有千萬種方案，本例給出一種以共生產(chǎn)環(huán)境參考： >[warning] 本示例已超出本教程的解釋范圍，是生產(chǎn)環(huán)境下組織單元測(cè)試文件的一種方法，僅做參考。 在CoreTesting模塊中聲明提供CoreTestingController，以便在單元測(cè)試中使用Test.get(CoreTestingController)方法來獲取CoreTestingController： core/core-testing/core-testing.module.ts ```typescript ], providers: [ CoreTestingController ? ] }) export class CoreTestingModule { } ``` * ? 聲明模塊提供CoreTestingController 在測(cè)試控制中提供加入、獲取相關(guān)單元的功能。 src/app/core/core-testing/core-testing-controller.ts ```typescript /** * 該方案僅適用于在嵌套組件的數(shù)量為1. * 由于在get方法中直接以instanceof方法獲取了相關(guān)組件 * 所以如果某個(gè)組件在被測(cè)試組件中多次被引用時(shí) * 只能獲取第一個(gè)被push進(jìn)來的組件 */ export class CoreTestingController { /** * 存儲(chǔ)組件、指令或管道 */ private units = new Array<any>(); constructor() { } /** * 添加單元（組件、指令或管道） * @param unit 單元 */ addUnit(unit: any): void { this.units.push(unit); } /** * 獲取單元（組件、指令或管道） * @param clazz 類型 */ get(clazz: Clazz): any { let result: any = null; this.units.forEach((value) => { if (value.constructor.name === clazz.name) { result = value; } }); return result; } } /** * 定義一個(gè)Clazz類型，用于參數(shù)中接收 類、接口等 */ export type Clazz = new(...args: any[]) => any; ``` 組件替身聲明與組件具有相同的輸入與輸出，同時(shí)將組件本身添加到測(cè)試控制器中。 core/core-testing/multiple-select/multiple-select.component.ts ```typescript import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {CoreTestingController} from '../core-testing-controller'; import {Observable} from 'rxjs'; @Component({ selector: 'app-multiple-select', templateUrl: './multiple-select.component.html', styleUrls: ['./multiple-select.component.sass'] }) export class MultipleSelectComponent implements OnInit { /** 數(shù)據(jù)列表 */ @Input() ? list$: Observable<Array<{ name: string }>>; /** 事件彈射器，用戶點(diǎn)選后將最終的結(jié)點(diǎn)彈射出去 */ @Output() ? changed = new EventEmitter<Array<any>>(); constructor(private coreTestingController: CoreTestingController?) { this.coreTestingController.addUnit(this); ? } ngOnInit() { } } ``` * ? 聲明與被替組件具有相同的輸入與輸出 * ? 注入測(cè)試控制器 * ? 將組件本身加入到測(cè)試控制器中 # 小試牛刀 來到course模塊的班級(jí)多選組件中進(jìn)行嵌套組件測(cè)試如下： course/klass-multiple-select/klass-multiple-select.component.spec.ts ```typescript beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [KlassMultipleSelectComponent], imports: [ CoreTestingModule ? ] }) .compileComponents(); })); fit('嵌套組件MultipleSelectComponent測(cè)試', () => { const coreTestingController = TestBed.get(CoreTestingController); ? const multipleSelect = coreTestingController.get(MultipleSelectComponent)? as MultipleSelectComponent; ? // 斷言input expect(multipleSelect.list$).toBe(component.klasses$); // 斷言output spyOn(component, 'onChange'); const klasses = [new Klass(null, null, null)]; multipleSelect.changed.emit(klasses); expect(component.onChange).toHaveBeenCalledWith(klasses); }); ``` * ? 引入MultipleSelectComponent所在CoreModule對(duì)應(yīng)的測(cè)試模塊CoreTestingModule * ? 像angular官方一樣優(yōu)雅地獲取測(cè)試控制器 * ? 像angular官方一樣優(yōu)雅地獲取被嵌套組件 * ? 此處的MultipleSelectComponent無論是真實(shí)的組件還是與組件同名的替身均可正常工作 # 功能開發(fā) 班級(jí)多選組件中可供選擇的班級(jí)來源于數(shù)據(jù)表klass，為此按MVC的開發(fā)理論，首先補(bǔ)充KlassService用于獲取全部的班級(jí)列表。 ## service ```javascript panjiedeMac-Pro:service panjie$ ng g s klass CREATE src/app/service/klass.service.spec.ts (328 bytes) CREATE src/app/service/klass.service.ts (134 bytes) ``` 增加all方法來獲取全部的班級(jí)數(shù)據(jù)。由于在前面的章節(jié)中并沒有為klass建立單獨(dú)的service，而是選擇在klass模塊的index組件中直接向后臺(tái)發(fā)請(qǐng)的請(qǐng)求。所以此時(shí)需要去查看對(duì)應(yīng)組件中獲取全部班級(jí)的代碼。最終確認(rèn)獲取全部方法的接口信息為：`GET http://localhost:8080/Klass?name=`，于是獲取全部班級(jí)的代碼如下： service/klass.service.ts ```typescript import {Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {Klass} from '../norm/entity/Klass'; import {HttpClient, HttpParams} from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class KlassService { private url = 'http://localhost:8080/Klass'; constructor(private httpClient: HttpClient) { } /** * 獲取所有班級(jí) */ all(): Observable<Klass[]> { const httpParams = new HttpParams().append('name', ''); return this.httpClient.get<Klass[]>(this.url, {params: httpParams}); } } ``` ### 單元測(cè)試 service/klass.service.spec.ts ```typescript import {TestBed} from '@angular/core/testing'; import {KlassService} from './klass.service'; import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing'; import {Klass} from '../norm/entity/Klass'; describe('KlassService', () => { beforeEach(() => TestBed.configureTestingModule({ imports: [ HttpClientTestingModule ] })); it('should be created', () => { const service: KlassService = TestBed.get(KlassService); expect(service).toBeTruthy(); }); fit('all', () => { // 數(shù)據(jù)準(zhǔn)備，調(diào)用被測(cè)方法 const service: KlassService = TestBed.get(KlassService); let result; service.all().subscribe((data) => { result = data; }); // 斷言發(fā)起請(qǐng)求符合預(yù)期 const testingController: HttpTestingController = TestBed.get(HttpTestingController); const request = testingController.expectOne((req) => req.url === 'http://localhost:8080/Klass'); expect(request.request.headers.has('name')); expect(request.request.method).toEqual('GET'); // 斷言成功的接收到返回值 const klasses = [new Klass(null, null, null)]; request.flush(klasses); expect(result).toBe(klasses); }); }); ``` ## C層 course/klass-multiple-select/klass-multiple-select.component.ts ```typescript import {Component, EventEmitter, OnInit, Output} from '@angular/core'; import {Observable} from 'rxjs'; import {Klass} from '../../norm/entity/Klass'; import {KlassService} from '../../service/klass.service'; @Component({ selector: 'app-klass-multiple-select', templateUrl: './klass-multiple-select.component.html', styleUrls: ['./klass-multiple-select.component.sass'] }) export class KlassMultipleSelectComponent implements OnInit { klasses$: Observable<Klass[]>; @Output() changed = new EventEmitter<Klass[]>(); constructor(private klassService: KlassService) { } ngOnInit() { this.klasses$ = this.klassService.all(); } onChange($event: Array<Klass>) { this.changed.emit($event); } } ``` ### 單元測(cè)試 該組件依賴于KlassService，為此在進(jìn)行單元測(cè)試前先建立KlassService的測(cè)試替身KlassStubService ``` panjiedeMac-Pro:service panjie$ ng g s KlassStub --skip-tests CREATE src/app/service/klass-stub.service.ts (138 bytes) ``` 在替身中同樣創(chuàng)建all方法。 service/klass-stub.service.ts ```typescript import {Observable} from 'rxjs'; import {Klass} from '../norm/entity/Klass'; export class KlassStubService { constructor() { } all(): Observable<Klass[]> { return null; } } ``` 補(bǔ)充班級(jí)選擇組件ngOnInit方法及changed方法的測(cè)試： course/klass-multiple-select/klass-multiple-select.component.spec.ts ```typescript providers: [ {provide: KlassService, useClass: KlassStubService} ] fit('onChange', () => { let result; component.changed.subscribe((data) => { result = data; }); const klasses = [new Klass(null, null, null)]; component.onChange(klasses); expect(result).toBe(klasses); }); fit('ngOnInit', () => { const klassService: KlassService = TestBed.get(KlassService); const klasses$ = of([new Klass(null, null, null)]); spyOn(klassService, 'all').and.returnValue(klasses$); component.ngOnInit(); expect(component.klasses$).toBe(klasses$); }); ``` 單元測(cè)試通過，本節(jié)完成：  # 本節(jié)小測(cè) 請(qǐng)參考本節(jié)中的測(cè)試示例，請(qǐng)嘗試在course文件夾中建立CourseModule對(duì)應(yīng)的測(cè)試CourseTestingModule以及相關(guān)文件。 # 參考文檔 | 名稱 | 鏈接 | 預(yù)計(jì)學(xué)習(xí)時(shí)長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step6.1.4](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step6.1.4) | - |