单元测试：点击后应该改变类

Question

点击<mat-expansion-panel> (Angular Material) 时，它应该添加一个类mat-expanded，但每当我运行该函数时，当我记录它时，DOM 仍然是一样的，并没有添加该类。

HTML

<mat-expansion-panel (opened)="toggleCollapseRow('open')" (closed)="toggleCollapseRow('closed')">
...

component.ts 中的函数

public toggleCollapseRow(openOrClosed: string): void {
    if (openOrClosed === 'open') {
        this.expandCollapseIcon = 'ic_collapse_default';
    } else if (openOrClosed === 'closed') {
        this.expandCollapseIcon = 'ic_expand_default';
    }
}

单元测试

it('should expand on click', fakeAsync(() => {
    fixture.detectChanges();
    const panel = fixture.nativeElement.querySelector('mat-expansion-panel');
    const spy = spyOn(component, 'toggleCollapseRow').and.callThrough();
    panel.click();
    component.toggleCollapseRow('open');
    tick();
    fixture.detectChanges();
    // this logs the same output with no class added
    console.log(fixture.nativeElement.querySelector('mat-expansion-panel'));
    expect(spy);
    expect(component.toggleCollapseRow).toHaveBeenCalled();
    expect(component.expandCollapseIcon).toEqual('ic_collapse_default');
}));

这一切都成功了，但是当我添加以下内容时，它失败了，因为 DOM 仍然相同：

expect(fixture.nativeElement.querySelector('.mat-expanded')).toBeTruthy()

Answer 1

如果测试测试toggleCollapseRow 的工作原理，则不应涉及点击。如果它测试模板的工作方式，则不应直接调用component.toggleCollapseRow('open')。正因为如此，期望才成功。

如the guide 中所述，DOM 事件应使用DebugElement triggerEventHandler 触发，因为HTMLElement click 不涉及绑定。

应该是这样的：

const panelDE = fixture.debugElement.query(By.directive(MatExpansionPanel));
const spy = spyOn(component, 'toggleCollapseRow').and.callThrough();
panelDE.triggerEventHandler('click', null);
tick();
fixture.detectChanges();
expect(component.toggleCollapseRow).toHaveBeenCalled();
expect(component.expandCollapseIcon).toEqual('ic_collapse_default');
expect(panelDE.classes['mat-expanded']).toBeTruthy()