Ionic - Unit test ionChange event for ion-select

Question

I am trying to unit test a change event for ion-select.

<ion-select slot="end" value="all" interface="popover" class="area-select" (ionChange)="onAreaChange($event)">
  <ion-select-option value="all">All</ion-select-option>
  <ion-select-option *ngFor="let item of areaList" [value]="item">{{item}}</ion-select-option>
</ion-select>

Below I am adding test that I wrote for checking change events. But the onAreaChange function on ionChange is not triggering.

  it('should change area', () => {
    component.areaList = areas;
    fixture.whenStable().then(() => {
      spyOn(component, 'onAreaChange');
      const select = fixture.debugElement.query(By.css('.area-select')).nativeElement;
      select.dispatchEvent(new Event('change'));
      fixture.detectChanges();
      expect(component.onAreaChange).toHaveBeenCalled();
    });
  });

Can someone please help me to complete this testing?

Answer 1

Usually for these kind of situations, I stay away from the DOM events (new Event) because as you can see it is difficult to do so. I usually use triggerEventHandler. You can read more about it here: https://netbasal.com/simulating-events-in-angular-unit-tests-5482618cd6c6

it('should change area', () => {
    component.areaList = areas;
    fixture.whenStable().then(() => {
      spyOn(component, 'onAreaChange');
      // get the DebugElement
      const select = fixture.debugElement.query(By.css('.area-select'));
      // the first argument is the event name, second argument is $event
      select.triggerEventHandler('ionChange', {/* mock $event how you wish here */});
      fixture.detectChanges();
      expect(component.onAreaChange).toHaveBeenCalled();
    });
  });