Angular测试mat-table排序：点击button角色div无响应问题

问题描述 #

我在Angular组件中使用了带有matSort表头的mat-table，想要测试点击排序选项后表格是否发生变化，编写的测试代码如下：

it('Should properly sort table', () => {
        const compiled = fixture.debugElement.nativeElement;
        const table = compiled.querySelector('table'); 
        const buttons = compiled.querySelectorAll('div.mat-sort-header-container');
        buttons[0].click();
        fixture.detectChanges();
        const reCompiled = fixture.debugElement.nativeElement;
        const sortedTable = reCompiled.querySelector('table');
        console.log(table === sortedTable); //Returns true
    });

我的排序按钮并非真实HTML按钮，而是带有button角色的div，怀疑是未成功触发点击操作导致表格未产生排序变化，求解决建议。

解决建议 #

1. 使用DebugElement的triggerEventHandler触发点击 #

直接调用原生DOM的click()可能无法触发Angular绑定的事件逻辑，应该通过Angular的DebugElement来触发事件：

it('Should properly sort table', () => {
    // 获取表头容器的DebugElement
    const sortHeader = fixture.debugElement.query(By.css('div.mat-sort-header-container'));
    // 触发点击事件
    sortHeader.triggerEventHandler('click', null);
    fixture.detectChanges();

    // 验证排序状态而非DOM元素
    expect(component.dataSource.sort.active).toBe('目标列字段名');
    expect(component.dataSource.sort.direction).toBe('asc');
    
    // 或验证表格行的内容顺序
    const rows = fixture.debugElement.queryAll(By.css('tr.mat-row'));
    expect(rows[0].nativeElement.textContent).toContain('排序后首行的预期内容');
});

2. 确保matSort已正确初始化 #

测试中需确认matSort实例已和表格的dataSource关联，若组件中通过@ViewChild获取matSort，可在测试前手动初始化：

beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    component = fixture.componentInstance;
    // 手动关联matSort和dataSource
    component.sort = fixture.debugElement.query(By.directive(MatSort)).componentInstance;
    component.dataSource.sort = component.sort;
    fixture.detectChanges();
});

3. 模拟完整的MouseEvent事件 #

若triggerEventHandler无效，可尝试创建完整的鼠标事件并分发：

it('Should properly sort table', () => {
    const sortHeaderEl = fixture.debugElement.nativeElement.querySelector('div.mat-sort-header-container');
    const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
    sortHeaderEl.dispatchEvent(clickEvent);
    fixture.detectChanges();

    // 验证排序方向或数据
    expect(component.dataSource.sort.direction).toBe('asc');
});

4. 避免通过DOM元素相等性判断排序 #

你代码中table === sortedTable返回true是正常现象——DOM元素实例不会随内容变化而改变，应该验证表格数据的顺序或行内容，而非比较DOM元素本身。

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