如何使用 angular 对离子选择器进行单元测试

Question

我的组件中有一个 ion-picker，声明为：

   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'
    });

所以我对组件的创建和存在进行了单元测试 ion-picker。但是报道显示应该测试按钮“Seleccionar”的处理程序。在我的 spec.ts 中有：

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

但是 IDK，如何测试离子选择器中按钮的处理程序。我试图获取按钮并强制单击，但我在按钮的 var 中得到了 null。有人知道如何覆盖这个功能吗？

Answer 1

您可以利用 jasmine 间谍 API 模拟点击选择器按钮。点击后可以查看预期效果

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)
});

如何使用 angular 对离子选择器进行单元测试

How to unit test ion-picker with angular

unit-testing

karma-jasmine

ionic-framework

angular