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测试中未触发更改事件

2 个答案: