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

正式的編碼以前，畫(huà)個(gè)時(shí)序圖以更好的理清功能：  按時(shí)序圖進(jìn)行初始化工作如下： ## 添加刪除按鈕 src/app/student/index/index.component.html ```html <td> <a routerLink="./edit/{{student.id}}" class="btn btn-sm btn-info">編輯</a> <button (click)="onDelete(student)" class="btn btn-sm btn-danger">刪除</button> ? </td> ``` ### 單元測(cè)試 運(yùn)行單元測(cè)試，并將對(duì)應(yīng)的用例由`it`暫時(shí)變更為`fit`。 src/app/student/index/index.component.spec.ts ```javascript fit('組件初始化V層渲染', () => { ... expect(table.rows.item(row).cells.item(col++).innerText).toBe('testKlass'); expect(table.rows.item(row).cells.item(col++).innerText).toBe('編輯'); // ? expect(table.rows.item(row).cells.item(col++).innerText).toBe('編輯刪除'); // ? }); ``` * ? 增加刪除按鈕 ## C層添加刪除方法 src/app/student/index/index.component.ts ``` /** * 刪除學(xué)生 * @param student 學(xué)生 */ onDelete(student: Student): void { } ``` ### 單元測(cè)試 測(cè)試點(diǎn)擊刪除按鈕后，是否使用成功的調(diào)用了C層的`onDelete`方法 src/app/student/index/index.component.spec.ts ```javascript fit('刪除按鈕點(diǎn)擊測(cè)試', () => { // 將C層的onDelete方法設(shè)置為替身 // 點(diǎn)擊第一行的刪除按鈕 // 斷言onDelete替身被成功調(diào)用 }); ``` 補(bǔ)充代碼： src/app/student/index/index.component.spec.ts ``` fit('刪除按鈕點(diǎn)擊測(cè)試', () => { // 將C層的onDelete方法設(shè)置為替身 spyOn(component, 'onDelete'); // 點(diǎn)擊第一行的刪除按鈕 FormTest.clickButton(fixture, 'table button:first-child'); // 斷言onDelete替身被成功調(diào)用 expect(component.onDelete).toHaveBeenCalledWith(component.pageStudent.content[0]); // ? }); ``` * 斷言傳入了C層中的第一個(gè)學(xué)生 測(cè)試：  測(cè)試反饋說(shuō)期望的onDelete方法根本就沒(méi)有被調(diào)用過(guò)。經(jīng)幾番排查，最終發(fā)現(xiàn)這是由于上面的css選擇器拼寫(xiě)的不正確造成的，由于在調(diào)用`FormTest.clickButton(fixture, 'table button:first-child');`方法時(shí)并沒(méi)有通過(guò)對(duì)應(yīng)的css選擇器來(lái)找到對(duì)應(yīng)的button，所以點(diǎn)擊的操作也隨之并未完成。`css`選擇器書(shū)寫(xiě)有誤證明了我學(xué)業(yè)不精，故上述測(cè)試代碼未按預(yù)期發(fā)起點(diǎn)擊事件本無(wú)可厚非，但沒(méi)有找到按鈕卻沒(méi)有任何的提示，就是`FormTest.clickButton`的不對(duì)了。 ## 合理的拋出異常 在ts中需要進(jìn)行異常提示時(shí)，使用` throw new Error() `方法。 打開(kāi)`app -> testing -> FormTest.ts`后仔細(xì)回想一下，其實(shí)在前面的重構(gòu)設(shè)置`setInputValue`方法時(shí)已經(jīng)使用了拋出異常來(lái)代替返回false來(lái)處理通過(guò)`css`選擇器獲取到對(duì)應(yīng)的元素的情況了。參考該方法，對(duì)`clickButton`改造如下： src/app/testing/FormTest.ts ```javascript static clickButton(fixture: ComponentFixture<any>, cssSelector: string): boolean { const selectorElement = this.getSelectorElement(fixture, cssSelector); if (isNull(selectorElement)) { return false; ? throw new Error(`未找到css選器${cssSelector}對(duì)應(yīng)的html元素`); ? } const htmlButtonElement: HTMLButtonElement = selectorElement.nativeElement; htmlButtonElement.click(); return true; } ``` * ? 使用拋出異常的方法來(lái)替代`return false` 此時(shí)再看單元測(cè)試的提示信息  ## CSS選擇器 怎樣使用正確的css選擇器來(lái)獲取刪除按鈕貌似成為了當(dāng)前破局的關(guān)鍵點(diǎn)。在沒(méi)有工具的幫助下，想使用CSS選擇器來(lái)一次性的獲取某個(gè)元素并不是一件簡(jiǎn)單的事情。但有工具就不一樣了，下面來(lái)展示使用chrome的控制臺(tái)來(lái)快速獲取某個(gè)html元素選擇器的方法：  > [info] 吾嘗終日而思矣，不如須臾之所學(xué)也；吾嘗跂而望矣，不如登高之博見(jiàn)也。登高而招，臂非加長(zhǎng)也，而見(jiàn)者遠(yuǎn)；順風(fēng)而呼，聲非加疾也，而聞?wù)哒?。假輿馬者，非利足也，而致千里；假舟楫者，非能水也，而絕江河。君子生非異也，**善假于物也**。 荀子《勸學(xué)》 依此方法替換CSS選擇器： src/app/student/index/index.component.spec.ts ```javascript fit('刪除按鈕點(diǎn)擊測(cè)試', () => { // 將C層的onDelete方法設(shè)置為替身 spyOn(component, 'onDelete'); // 點(diǎn)擊第一行的刪除按鈕 FormTest.clickButton(fixture, '#root1 > table > tr:nth-child(2) > td:nth-child(6) > button'); // 斷言onDelete替身被成功調(diào)用 expect(component.onDelete).toHaveBeenCalledWith(component.pageStudent.content[0]); }); ``` 測(cè)試通過(guò)。 ## M層添加刪除方法 M層添加`deleteById`方法以備調(diào)用: src/app/service/student.service.ts ``` /** * 刪除學(xué)生 * @param id 學(xué)生id */ deleteById(id: number) { return null; } ``` 至此初始化工作完成。 # 參考文檔 | 名稱 | 鏈接 | 預(yù)計(jì)學(xué)習(xí)時(shí)長(zhǎng)(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.8.1](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step4.8.1) | - |