How to unit test ion-picker with angular

Issue

I have a ion-picker in my component, declared as:

   const picker = await this.pickerController.create({
      buttons: [
        {
          text: 'Seleccionar',
          handler: (selected) => {
            this.setDatesPerWeek(selected.week.value);
          }
        }
      ],
      columns: [
        {
          name: 'week',
          selectedIndex: this.currentWeek - 1,
          options: this.setOptionsPicker()
        }
      ],
      cssClass: 'pickerWeeks'
    });

So I have a unit test for the creation and presence of the component ion-picker. But the coverage shows that handler of button "Seleccionar" should be tested. In my spec.ts y have:

  it('check picker present', (done) => {
    component.presentPicker();
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      expect(pickerSpy.present).toHaveBeenCalled();
      done();
    });
  });

But IDK, how to test the handler of a button inside ion-picker. I tried to get the button and force the click but I got null in the var of the button. Does anyone have an idea about how to cover this function?

Solution

You can emulate the click on the picker button by leveraging the jasmine spy API. After the click, you can check the expected outcome.

it('set dates when Seleccionar button of picker clicked', async () => {
   component.presentPicker();
   fixture.detectChanges();
   await fixture.whenStable();
   const buttons = pickerCtrlSpy.create.calls.first().args[0].buttons;
   const selectButton = buttons.find(btn => btn.text === 'Seleccionar');

   await selectButton.handler();

   expect(this.datePerWeek).toEqual(expectedValue)
});

Answered By - IAfanasov