Change event not triggering in Angular 7 DOM testing

Question

I'm trying to DOM test this simple component:

I'm trying to check that (change) is triggering onChange, and thus I need to fire change.

Simple, right? Wrong.

I tried using Angular functions, and native DOM API, but I still can't trigger the function programmatically.

Here's my test:

  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

As stated, it should be onChange() instead of onChange... Thanks!