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

Question

我正在尝试 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>

Answer 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()

  }));

Answer 2

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

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

Change event not triggering in Angular 7 DOM testing

dom

unit-testing

jestjs

angular

angular7