正式的編碼以前，畫個時序圖以更好的理清功能：  按時序圖進行初始化工作如下： ## 添加刪除按鈕 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> ``` ### 單元測試 運行單元測試，并將對應的用例由`it`暫時變更為`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 ``` /** * 刪除學生 * @param student 學生 */ onDelete(student: Student): void { } ``` ### 單元測試 測試點擊刪除按鈕后，是否使用成功的調用了C層的`onDelete`方法 src/app/student/index/index.component.spec.ts ```javascript fit('刪除按鈕點擊測試', () => { // 將C層的onDelete方法設置為替身 // 點擊第一行的刪除按鈕 // 斷言onDelete替身被成功調用 }); ``` 補充代碼： src/app/student/index/index.component.spec.ts ``` fit('刪除按鈕點擊測試', () => { // 將C層的onDelete方法設置為替身 spyOn(component, 'onDelete'); // 點擊第一行的刪除按鈕 FormTest.clickButton(fixture, 'table button:first-child'); // 斷言onDelete替身被成功調用 expect(component.onDelete).toHaveBeenCalledWith(component.pageStudent.content[0]); // ? }); ``` * 斷言傳入了C層中的第一個學生 測試：  測試反饋說期望的onDelete方法根本就沒有被調用過。經幾番排查，最終發現這是由于上面的css選擇器拼寫的不正確造成的，由于在調用`FormTest.clickButton(fixture, 'table button:first-child');`方法時并沒有通過對應的css選擇器來找到對應的button，所以點擊的操作也隨之并未完成。`css`選擇器書寫有誤證明了我學業不精，故上述測試代碼未按預期發起點擊事件本無可厚非，但沒有找到按鈕卻沒有任何的提示，就是`FormTest.clickButton`的不對了。 ## 合理的拋出異常 在ts中需要進行異常提示時，使用` throw new Error() `方法。 打開`app -> testing -> FormTest.ts`后仔細回想一下，其實在前面的重構設置`setInputValue`方法時已經使用了拋出異常來代替返回false來處理通過`css`選擇器獲取到對應的元素的情況了。參考該方法，對`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}對應的html元素`); ? } const htmlButtonElement: HTMLButtonElement = selectorElement.nativeElement; htmlButtonElement.click(); return true; } ``` * ? 使用拋出異常的方法來替代`return false` 此時再看單元測試的提示信息  ## CSS選擇器 怎樣使用正確的css選擇器來獲取刪除按鈕貌似成為了當前破局的關鍵點。在沒有工具的幫助下，想使用CSS選擇器來一次性的獲取某個元素并不是一件簡單的事情。但有工具就不一樣了，下面來展示使用chrome的控制臺來快速獲取某個html元素選擇器的方法：  > [info] 吾嘗終日而思矣，不如須臾之所學也；吾嘗跂而望矣，不如登高之博見也。登高而招，臂非加長也，而見者遠；順風而呼，聲非加疾也，而聞者彰。假輿馬者，非利足也，而致千里；假舟楫者，非能水也，而絕江河。君子生非異也，**善假于物也**。 荀子《勸學》 依此方法替換CSS選擇器： src/app/student/index/index.component.spec.ts ```javascript fit('刪除按鈕點擊測試', () => { // 將C層的onDelete方法設置為替身 spyOn(component, 'onDelete'); // 點擊第一行的刪除按鈕 FormTest.clickButton(fixture, '#root1 > table > tr:nth-child(2) > td:nth-child(6) > button'); // 斷言onDelete替身被成功調用 expect(component.onDelete).toHaveBeenCalledWith(component.pageStudent.content[0]); }); ``` 測試通過。 ## M層添加刪除方法 M層添加`deleteById`方法以備調用: src/app/service/student.service.ts ``` /** * 刪除學生 * @param id 學生id */ deleteById(id: number) { return null; } ``` 至此初始化工作完成。 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [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) | - |