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

本節(jié)讓我們看看如何使用代碼的方式來完成點擊教師列表的動作，初步的接觸下自動化的魅力。 當(dāng)前測試用例下，我們需要模擬用戶點擊教師列表，以測試教師列表被點擊后，是否在組件的`@Output`上接收到了相應(yīng)的值。比如我們模擬點擊教師列表中的最后一個教師： ```typescript +++ b/first-app/src/app/clazz/klass-select/klass-select.component.spec.ts @@ -41,5 +41,10 @@ describe('KlassSelectComponent', () => { fixture.autoDetectChanges(); component.beChange .subscribe((data: number) => console.log('接收到了彈出的數(shù)據(jù)', data)); + // 模擬點擊教師列表中的第二個教師 }); }); ``` ### 模擬點擊option 在響應(yīng)式表中，模擬點擊某個`option`僅需要以下兩步： 1. 獲取預(yù)點擊`option`對應(yīng)的值 2. 將值使用`setValue()`方法送入`FormControl` ```typescript @@ -44,6 +42,7 @@ describe('KlassSelectComponent', () => { component.beChange .subscribe((data: number) => console.log('接收到了彈出的數(shù)據(jù)', data)); // 模擬點擊教師列表中的第二個教師 + const teacher = component.teachers[1]; + console.log(teacher); }); }); ``` 打開控制臺我們得到了一個undefined:  產(chǎn)生該問題的原因從根上來講是由于JavaScript的異步機制。從當(dāng)前應(yīng)用層面上來講，是由于我們的MockApi模擬了真實網(wǎng)絡(luò)的延遲。當(dāng)前對組件的測試大概發(fā)生了以下事件：  如上圖示，由于`MockApi`的延遲發(fā)送數(shù)據(jù)，所以在執(zhí)行到`const teacher = component.teachers[1];`時，`component.teachers`仍然是個空數(shù)組。 ```typescript // 模擬點擊教師列表中的第二個教師 + console.log(component.teachers.length); const teacher = component.teachers[1]; console.log(teacher); ```  但當(dāng)前我們希望的是單元測試按以下流程執(zhí)行：  ## getTestScheduler() 預(yù)使在發(fā)生http請求時`MockApi`馬上發(fā)送數(shù)據(jù)，則需要使用`jasmine-marbles`提供的`getTestScheduler()`，該方法的作用是：馬上發(fā)送（本計劃延遲發(fā)送的）數(shù)據(jù) 。由于`jasmine-marbles`只被應(yīng)用在測試環(huán)境下，所以我們使用`npm install --save-dev jasmine-marbles`來安裝： ```bash panjie@panjies-Mac-Pro first-app % pwd /Users/panjie/github/mengyunzhi/angular11-guild/first-app panjie@panjies-Mac-Pro first-app % npm install --save-dev jasmine-marbles ... + jasmine-marbles@0.8.1 added 1 package, removed 1 package and audited 1472 packages in 9.079s ... ``` <hr> **以下內(nèi)容了解即可** 實際上`MockApi`提供了兩種延遲發(fā)送數(shù)據(jù)的方案：`MockApiInterceptor`與`MockApiTestingInterceptor`。`MockApiInterceptor`用于沒有后臺的演示環(huán)境，該延遲是通過RxJS的`delay`方法實現(xiàn)的；而`MockApiTestingInterceptor`專門用于測試環(huán)境，該延遲是通的RxJS的彈珠來實現(xiàn)的。而彈珠測試的數(shù)據(jù)發(fā)送，是可以通過`jasmine-marbles`手動控制的。 **以下內(nèi)容了解即可** <hr> 然后我們在當(dāng)前動態(tài)測試模塊下引入支持`jasmine-marbles`馬上發(fā)送數(shù)據(jù)的`MockApiTestingInterceptor`來替換原`MockApiInterceptor`: ```typescript +++ b/first-app/src/app/clazz/klass-select/klass-select.component.spec.ts -import {MockApiInterceptor} from '@yunzhi/ng-mock-api'; +import {MockApiTestingInterceptor} from '@yunzhi/ng-mock-api/testing'; @@ -22,7 +22,7 @@ describe('KlassSelectComponent', () => { providers: [ { provide: HTTP_INTERCEPTORS, multi: true, - useClass: MockApiInterceptor.forRoot([ + useClass: MockApiTestingInterceptor.forRoot([ TeacherMockApi ]) } ``` 接下來便可以在測試代碼中調(diào)用`getTestScheduler()`方法來手動控制數(shù)據(jù)發(fā)送了： ```typescript +++ b/first-app/src/app/clazz/klass-select/klass-select.component.spec.ts @@ -5,6 +5,7 @@ import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http'; import {TeacherMockApi} from '../../mock-api/teacher.mock.api'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MockApiTestingInterceptor} from '@yunzhi/ng-mock-api/testing'; +import {getTestScheduler} from 'jasmine-marbles'; describe('KlassSelectComponent', () => { let component: KlassSelectComponent; @@ -41,6 +42,10 @@ describe('KlassSelectComponent', () => { fixture.autoDetectChanges(); component.beChange .subscribe((data: number) => console.log('接收到了彈出的數(shù)據(jù)', data)); + + // 手動控制MockApi發(fā)送數(shù)據(jù) + getTestScheduler().flush(); + // 模擬點擊教師列表中的第二個教師 console.log(component.teachers.length); ```  需要**注意**的是： 1. 這種數(shù)據(jù)發(fā)送方式產(chǎn)生的數(shù)據(jù)變化并不會被`fixture`感知到，所以如果我們需要查看V層的效果，則需要在數(shù)據(jù)發(fā)送完成后，手動調(diào)用`detectChanges()`以使V層重新進行渲染。 2. 引入`MockApiTestingInterceptor`后，在測試中僅當(dāng)調(diào)用`getTestScheduler().flush();`時才會發(fā)送數(shù)據(jù)，否則不會發(fā)送數(shù)據(jù)。 ```typescript +++ b/first-app/src/app/clazz/klass-select/klass-select.component.spec.ts @@ -45,6 +45,7 @@ describe('KlassSelectComponent', () => { // 手動控制MockApi發(fā)送數(shù)據(jù) getTestScheduler().flush(); + fixture.detectChanges(); // 模擬點擊教師列表中的第二個教師 console.log(component.teachers.length); ``` 此時我們將在V層中將查看到教師列表中的兩個教師。 ### setValue() 最后調(diào)用`FormControl`的`setValue()`完成`option`的模擬點擊： ```typescript +++ b/first-app/src/app/clazz/klass-select/klass-select.component.spec.ts @@ -51,5 +51,7 @@ describe('KlassSelectComponent', () => { console.log(component.teachers.length); const teacher = component.teachers[1]; console.log(teacher); + + component.teacherId.setValue(teacher.id); }); }); panjie ```  ## 其它方式 我們還可以在單元測試中使用代碼的形式來模擬option的點擊（實際上Angular在select中的option點擊做的并不好），但此方法使用的代碼較多，難度相對較大，實際在生產(chǎn)中我們也很少使用。在這我們僅給出相應(yīng)的代碼供參考： ```typescript fit('模擬點擊option', () => { expect(component).toBeTruthy(); component.beChange .subscribe((data: number) => console.log('接收到了彈出的數(shù)據(jù)', data)); // 手動控制MockApi發(fā)送數(shù)據(jù) getTestScheduler().flush(); fixture.detectChanges(); // 獲取select const htmlSelect = fixture.debugElement.query(By.css('select')).nativeElement as HTMLSelectElement; htmlSelect.click(); // 獲取第二個選項 const htmlOption = htmlSelect.options[1]; // 用該選項的值設(shè)置select的值，從而實現(xiàn)模塊點擊 htmlSelect.value = htmlOption.value; // 發(fā)送change事件，通知瀏覽器、angular、觀察者select值已經(jīng)發(fā)生了變化 htmlSelect.dispatchEvent(new Event('change')); }); ``` ## 上結(jié) 本結(jié)我們使用`getTestScheduler()`方法控制了`MockApi`返回值的時機。這使得我們在脫離后臺的開發(fā)中，即可以決定http請求返回什么值，又可以決定其值在什么時候返回。這有利于我們掌握組件在http請求前后的狀態(tài)。 我們還調(diào)用了`formControl`的`setValue()`方法來快速的模擬用戶的點擊，這為以后使用代碼來完全代替不可靠的人工點擊打下了基礎(chǔ)。 | 名稱 | 鏈接 | | -------- | ------------------------------------------------------------ | | 本節(jié)源碼 | [https://github.com/mengyunzhi/angular11-guild/archive/step6.2.3.zip](https://github.com/mengyunzhi/angular11-guild/archive/step6.2.3.zip) |