測試button相對比較簡單，在測試過程中，注意以下兩點即可： * 組件進行頁面渲染是異步且需要一定的時間的，所以在獲取html時，必須使用`fixture.whenStable().then()`來等待V層渲染完畢。 * 在單元測試中，變更完C層的數據后組件并不會自動的進行V層的渲染，如果需要斷言渲染后的數據，需要使用`fixture.detectChanges();`方法。 ``` fit('測試查詢按鈕', () => { ① expect(component).toBeTruthy(); ② const name = 'hello'; ? component.params.name = name; ? fixture.detectChanges(); ③ fixture.whenStable().then(() => { const queryButton: HTMLButtonElement = fixture.debugElement.query(By.css('button')).nativeElement; ? queryButton.click(); ? const req = httpTestingController.expectOne(`http://localhost:8080/Klass?name=${name}`); ④ req.flush([ ⑤ new Klass(1, 'hello班', new Teacher(1, 'zhagnsan', '張三')) ]); fixture.detectChanges(); ⑥ fixture.whenStable().then(() => { const debugElement: DebugElement = fixture.debugElement; ⑦ const tableElement = debugElement.query(By.css('table')); ⑧ const tableHtml: HTMLTableElement = tableElement.nativeElement; ? expect(tableHtml.rows.length).toBe(2); ⑨ }); }); }); ``` * ① 使用`fit`在單元測試中跳過`it`測試。 * ② 斷言組件被成功創建（與前面的`it`相冗余，無實際的意義，主要是防止報測試用例無任何斷言的錯誤） * ? 定義參數 * ? 給參考賦值 * ③ 重新渲染V層 * ? 通過`CSS`定位器來獲取`button` * ? 發送按鈕點擊事件 * ④ 斷言截取到了一個http請求，請求地址中帶有我們定義的參數? * ⑤ 模擬返回http請求的數據 * ⑥ 重新渲染V層 * ⑦ 獲取整個debug元素 * ⑧ 獲取table原生元素（該元素兼容非HTML） * ? 由table原生元素中獲取table Html元素 * ⑨ 斷言table有兩行（其中一行為表頭，一行為數據） ## 測試 使用`ng test`進行測試：  測試通過 # 參考文檔 | 名稱 | 鏈接 | 預計學習時長(分） | | --- | --- | --- | | 源碼地址 | [https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.2.7](https://github.com/mengyunzhi/spring-boot-and-angular-guild/releases/tag/step3.2.7) | - |