Mat-Table行点击事件测试失败：无法触发未定义元素的点击事件

问题场景 #

你的Mat-Table中，code列的<td>带有clickable-link类和(click)="openSummary(element.code)"事件，但测试时使用ngMocks.click('.clickable-link')或fixture.debugElement.query(By.css('mat-checkbox'))无法找到元素，返回undefined，无法验证点击事件是否触发了filesService.getFormByCode。

核心原因 #

测试时表格未正确渲染出数据行——通常是因为数据源未初始化，或没有等待异步渲染完成，导致DOM中不存在目标元素。

解决方案步骤 #

1. 确保测试前初始化数据源

在测试用例中，先给组件的dataSource赋值，让表格渲染出数据行：

component.dataSource = new MatTableDataSource(formList); // formList是你的测试数据集合

2. 等待异步渲染完成

Angular表格渲染可能涉及异步操作，需要等待组件稳定后再查找元素：

• 使用await fixture.whenStable()（async/await模式）
• 或fakeAsync结合tick()（同步测试模式）

3. 正确触发点击事件

根据测试工具选择合适的方式：

方式一：使用Angular原生测试工具

import { fakeAsync, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

it('should open summary when clicking code cell', fakeAsync(() => {
  // 1. 初始化数据源并触发初始渲染
  component.dataSource = new MatTableDataSource(formList);
  fixture.detectChanges();
  tick(); // 处理异步渲染队列

  // 2. 定位目标元素
  const codeCell = fixture.debugElement.query(By.css('.clickable-link'));
  if (!codeCell) {
    fail('Clickable code cell not found'); // 可选：断言元素存在，便于排查问题
  }

  // 3. 触发点击事件
  codeCell.triggerEventHandler('click', null);
  fixture.detectChanges();

  // 4. 验证服务方法被调用
  expect(filesService.getFormByCode).toHaveBeenCalledWith(formList[0].code);
}));

方式二：使用ngMocks工具

it('should open summary when clicking code cell', async () => {
  // 1. 初始化数据源并等待组件稳定
  component.dataSource = new MatTableDataSource(formList);
  await fixture.whenStable();
  fixture.detectChanges();

  // 2. 查找并点击元素
  const codeLink = ngMocks.find('.clickable-link');
  ngMocks.click(codeLink);

  // 3. 验证服务调用
  expect(filesService.getFormByCode).toHaveBeenCalled();
});

针对Mat-Checkbox的额外说明

你的mat-checkbox添加了$event.stopPropagation()，点击复选框不会触发行/单元格的点击事件。如果需要测试复选框的change事件，同样需要确保数据源初始化后再查找元素：

it('should toggle selection when checkbox is clicked', fakeAsync(() => {
  component.dataSource = new MatTableDataSource(formList);
  fixture.detectChanges();
  tick();

  const checkbox = fixture.debugElement.query(By.css('mat-checkbox'));
  checkbox.triggerEventHandler('change', { target: { checked: true } });
  fixture.detectChanges();

  expect(component.selection.isSelected(formList[0])).toBeTrue();
}));

内容的提问来源于stack exchange，提问作者dakim236