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

本節(jié)繼續(xù)前一小節(jié)的單元測(cè)試，完成提交數(shù)據(jù)的單元測(cè)試部分。 # 初始化 在編寫代碼前先寫清自己編寫代碼的功能以及實(shí)現(xiàn)功能的步驟是個(gè)非常好的開發(fā)習(xí)慣，這將使你在處理復(fù)雜的問題的時(shí)候顯得得心應(yīng)手： klass/edit/edit.component.spec.ts ``` /** * 數(shù)據(jù)更新測(cè)試，步驟： * 1. 設(shè)置路由參數(shù) * 2. 輸入input的值 * 3. 點(diǎn)擊提交扭鈕：斷言向預(yù)期的地址以對(duì)應(yīng)的方法提交了表單中的數(shù)據(jù) * 4. 斷言跳轉(zhuǎn)到''路由地址 */ fit('更新數(shù)據(jù)測(cè)試', () => { expect(component).toBeTruthy(); }); ``` ## 造輪子 測(cè)試方法需要設(shè)置input的值以值點(diǎn)擊對(duì)應(yīng)的提交按鈕，由于此方法前面我們使用過，所以確定為重復(fù)的方法，故在testing/FormTest.ts中新造輪子如下： ``` /** * 設(shè)置input的值 * @param fixture 夾具 * @param cssSelector CSS選擇器 * @param value 要設(shè)置的值 * @return 成功true 失敗false */ static setInputValue(fixture: ComponentFixture<any>, cssSelector: string, value: string): boolean { const selectorElement = this.getSelectorElement(fixture, cssSelector); if (isNull(selectorElement)) { return false; } const htmlInputElement: HTMLInputElement = selectorElement.nativeElement; htmlInputElement.value = value; htmlInputElement.dispatchEvent(new Event('input')); return true; } /** * 獲取button按鈕，并點(diǎn)擊 * @param fixture 夾具 * @param cssSelector CSS選擇器 * @return 成功true 失敗false */ static clickButton(fixture: ComponentFixture<any>, cssSelector: string): boolean { const selectorElement = this.getSelectorElement(fixture, cssSelector); if (isNull(selectorElement)) { return false; } const htmlButtonElement: HTMLButtonElement = selectorElement.nativeElement; htmlButtonElement.click(); return true; } /** * 根據(jù)CSS選擇器來獲取夾具中Debug元素 * @param fixture 夾具 * @param cssSelector CSS選擇器 * @return Debug元素 */ static getSelectorElement(fixture: ComponentFixture<any>, cssSelector: string): DebugElement { const debugElement: DebugElement = fixture.debugElement; return debugElement.query(By.css(cssSelector)); } ``` 在造上述輪子的時(shí)候我們發(fā)現(xiàn)兩個(gè)輪子中也存在同樣的方法，于是在輪子中又剝離中一個(gè)新輪子`getSelectorElement`。 ## 完善測(cè)試 我們添加一個(gè)onSubmitTest方法用于測(cè)試更新操作，由于更新操作依賴于數(shù)據(jù)獲取操作，所以該方法在數(shù)據(jù)成功獲取后調(diào)用: ``` const testGetHttp = (id: number) => { ... fixture.whenStable().then(() => { ... onSubmitTest(1); ① }); }; /** * 數(shù)據(jù)更新測(cè)試，步驟： * 1. 設(shè)置路由參數(shù) * 2. 輸入input的值 * 3. 點(diǎn)擊提交扭鈕：斷言向預(yù)期的地址以對(duì)應(yīng)的方法提交了表單中的數(shù)據(jù) * 4. 斷言跳轉(zhuǎn)到''路由地址 */ const onSubmitTest = (id: number) => { FormTest.setInputValue(fixture, '#name', '測(cè)試更新班級(jí)'); FormTest.setInputValue(fixture, '#teacherId', '100'); fixture.whenStable().then(() => { FormTest.clickButton(fixture, 'button'); const httpTestController: HttpTestingController = TestBed.get(HttpTestingController); const req = httpTestController.expectOne(`http://localhost:8080/Klass/${id}`); expect(req.request.method).toEqual('PUT'); const klass: Klass = req.request.body.valueOf(); expect(klass.name).toEqual('測(cè)試更新班級(jí)'); expect(klass.teacher.id).toEqual(100); req.flush(null, {status: 204, statusText: 'No Content'}); httpTestController.verify(); ? }); }; ``` * ① 獲取要編輯的數(shù)據(jù)后，開始測(cè)試編輯數(shù)據(jù) * ? httpTestController.verify(); 來保證所有的http請(qǐng)求都是符合我們的預(yù)期的。在執(zhí)行此方法時(shí)如果還有其它的http請(qǐng)求，則會(huì)在控制臺(tái)中打印異常信息。 由于一些異常僅僅會(huì)打印在控制臺(tái)中而未反饋到測(cè)試界面上，所以我們?cè)跍y(cè)試的過程中應(yīng)該：**輕界面重控制臺(tái)** # 測(cè)試間諜SPY 我們看似完成了所有的操作，但來到klass/edit/edit.component.ts中卻發(fā)現(xiàn)我們并不能夠確認(rèn)這行代碼是否成功的被執(zhí)行了： klass/edit/edit.component.ts ``` /** * 用戶提交時(shí)執(zhí)行的操作 */ onSubmit(): void { const data = { name: this.formGroup.value.name, teacher: {id: this.formGroup.value.teacherId} }; this.httpClient.put(this.getUrl(), data) .subscribe(() => { this.router.navigateByUrl('', {relativeTo: this.route}); ① }, () => { console.error(`在${this.getUrl()}上的PUT請(qǐng)求發(fā)生錯(cuò)誤`); }); } ``` * ① 此行代碼是否成功的觸發(fā)我們并不清楚 要測(cè)試該方法是否成功的被執(zhí)行了，我們使用上個(gè)小節(jié)剛剛講過的方法。即：模擬一個(gè)和this.route一樣具有`navigateByUrl`方法的服務(wù)，然后在`providers`中聲明使用該模擬服務(wù)來替換原服務(wù)，最終我們?nèi)y(cè)試模擬服務(wù)中該方法是否被觸發(fā)了。比如： router-stub.ts ``` import {ActivatedRoute} from '@angular/router'; export class RouterStub { path: string; config: {relativeTo: ActivatedRoute}; navigateByUrl(path: string, config: {relativeTo: ActivatedRoute}): void { this.path = path; this.config = config; } } ``` 然后我們使用`providers`來注入此`RouterStud`來替換原來的`Router`。最終我們來斷言`RouterStud`中的`path`是否為`''`。為`''`則說明執(zhí)行了此方法；仍然是`undefined`則說明未執(zhí)行此方法。 klass/edit/edit.component.ts ``` providers: [ {provide: ActivatedRoute, useClass: ActivatedRouteStub}, {provide: Router, useClass: RouterStub} ] ... req.flush(null, {status: 204, statusText: 'No Content'}); httpTestController.verify(); const router: RouterStub = TestBed.get(Router); ? expect(router.path).toEqual(''); ? }); ``` 除此以外angular來為我們提供了更為簡(jiǎn)單的測(cè)試方法 ---- 測(cè)試間諜 ## 生成間諜 間諜的作用同我們剛剛建立的`stub`模擬服務(wù)一樣，都是向測(cè)試的組件提供一個(gè)覆蓋原服務(wù)的測(cè)試服務(wù)。但測(cè)試間諜的生成方法更加的簡(jiǎn)單，比如我們?cè)谑褂胉spy`方法來生成一個(gè)Router測(cè)試服務(wù)，則只需要：`const routerSpy = jasmine.createSpyObj<Router>('Router', ['navigateByUrl']);`即可。 它表示：創(chuàng)建一個(gè)擁有`navigateByUrl`方法的模擬`Router`的間諜服務(wù)。有了這個(gè)服務(wù)，我們直接將其添加到`providers`中即可： klass/edit/edit.component.ts ``` beforeEach(async(() => { const routerSpy = jasmine.createSpyObj<Router?>('Router', ['navigateByUrl']); TestBed.configureTestingModule({ declarations: [EditComponent], imports: [ ReactiveFormsModule, HttpClientTestingModule, RouterTestingModule ], providers: [ {provide: ActivatedRoute, useClass: ActivatedRouteStub}, {provide: Router, useValue?: routerSpy} ] }) .compileComponents(); })); ``` * ? 在使用RouterStub時(shí)，我們使用關(guān)鍵字`useClass`來表示：當(dāng)組件需要具有Router功能的對(duì)象(服務(wù))時(shí)，使用RouterStub`類`來實(shí)例化一個(gè)對(duì)象給它。 * ? 在使用routerSpy時(shí)，我們我們使用關(guān)鍵字`useValue`來表示 ：當(dāng)組件需要具有Router功能的對(duì)象(服務(wù))時(shí)，將routerSpy的`值`給它。 * ? 使用`<Router>`表示該間諜的根據(jù)`Router`生成的并用于模擬`Router`功能的。 ## 使用間諜斷言 klass/edit/edit.component.ts ``` /** * 數(shù)據(jù)更新測(cè)試，步驟： * 1. 設(shè)置路由參數(shù) * 2. 輸入input的值 * 3. 點(diǎn)擊提交扭鈕：斷言向預(yù)期的地址以對(duì)應(yīng)的方法提交了表單中的數(shù)據(jù) * 4. 斷言跳轉(zhuǎn)到''路由地址 */ const onSubmitTest = (id: number) => { FormTest.setInputValue(fixture, '#name', '測(cè)試更新班級(jí)'); FormTest.setInputValue(fixture, '#teacherId', '100'); fixture.whenStable().then(() => { FormTest.clickButton(fixture, 'button'); const httpTestController: HttpTestingController = TestBed.get(HttpTestingController); const req = httpTestController.expectOne(`http://localhost:8080/Klass/${id}`); expect(req.request.method).toEqual('PUT'); const klass: Klass = req.request.body.valueOf(); expect(klass.name).toEqual('測(cè)試更新班級(jí)'); expect(klass.teacher.id).toEqual(100); const routerSpy: SpyObj<Router> = TestBed.get(Router); ? expect(routerSpy.navigateByUrl.calls.any()).toBe(false); ? req.flush(null, {status: 204, statusText: 'No Content'}); expect(routerSpy.navigateByUrl.calls.any()).toBe(true); ? httpTestController.verify(); }); }; ``` * ? 獲取我們?cè)趐roviders中聲明的spy對(duì)象。 * ? 斷言：該間諜服務(wù)的navigateByUrl從未調(diào)用過。 * ? 斷言：該間諜服務(wù)的navigateByUrl已經(jīng)被調(diào)用過了。 至此，我們?cè)陂g諜的幫助下快速的完成了編輯組件提交的測(cè)試工作。 # 參考文檔 | 名稱 | 鏈接 | 預(yù)計(jì)學(xué)習(xí)時(shí)長(zhǎng)(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.4.4](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.4.4) | - | | 使用間諜(spy)進(jìn)行測(cè)試 | [https://www.angular.cn/guide/testing#testing-with-a-spy](https://www.angular.cn/guide/testing#testing-with-a-spy) | | Spy | [https://jasmine.github.io/api/3.3/Spy.html](https://jasmine.github.io/api/3.3/Spy.html) | | | Spy calls | [https://jasmine.github.io/api/3.3/Spy\_calls.html](https://jasmine.github.io/api/3.3/Spy_calls.html) | | 依賴提供商 | [https://www.angular.cn/guide/dependency-injection-providers#dependency-providers](https://www.angular.cn/guide/dependency-injection-providers#dependency-providers) | 15 |