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

Question

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

我正在尝试检查 (change) 是否触发了 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>

标签： angularunit-testingdomjestjsangular7

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

  }));