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

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”的处理程序。在我的规范中，你有：

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

但是 IDK，如何测试 ion-picker 中按钮的处理程序。我试图获取按钮并强制单击，但我在按钮的 var 中得到了 null。有谁知道如何覆盖这个功能？

Answer 1

您可以利用 jasmine spy 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)
});