测试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) | - |