在 Angular 7 DOM 测试中未触发更改事件答案

【问题标题】：Change event not triggering in Angular 7 DOM testing在 Angular 7 DOM 测试中未触发更改事件
【发布时间】：2019-12-04 17:36:35
【问题描述】：

我正在尝试对这个简单的组件进行 DOM 测试：

我正在尝试检查（更改）是否触发了 onChange，因此我需要触发 change。

很简单，对吧？错了。

我尝试使用 Angular 函数和原生 DOM API，但我仍然无法以编程方式触发该函数。

这是我的测试：

  it('should emit filter events', () => {
    spyOn(component, 'onChange');

        const input = fixture.debugElement.nativeElement.querySelector('input');
        input.dispatchEvent(new Event('change', {target: {value: 'Building UUID'}}))

        fixture.detectChanges()

    fixture.whenStable().then(() => {
            expect(component.onChange).toHaveBeenCalled()
    });

  });

<div>
  <input
        #input
    type="text"
    (change)="onChange"
    placeholder="Search by DeviceID or building"
  />
  <a class="reset" (click)="onReset()"></a>
</div>

【问题讨论】：

html 中的 onChange 不应该是 onChange() 吗？

标签： angular unit-testing dom jestjs angular7

【解决方案1】：

尝试使用fakeAsync

 it('should emit filter events', fakeAsync(() => {
    const spyOnChange = spyOn(component, 'onChange');

    const input = fixture.debugElement.nativeElement.querySelector('input');
    input.dispatchEvent(new Event('change', {target: {value: 'Building UUID'}}))

    tick();
    fixture.detectChanges();
    expect(spyOnChange).toHaveBeenCalled()

  }));

【讨论】：

【解决方案2】：

如上所述，应该是onChange() 而不是onChange...谢谢！

【讨论】：