如何在Ionic 3 Jasmine测试中模拟AlertController按钮点击

我来帮你搞定这个模拟AlertController按钮点击的问题！其实不用依赖第三方mock库，手动创建一个自定义的mock就能精准触发按钮的handler逻辑，步骤如下：

1. 配置TestBed，提供模拟的AlertController #

在你的测试文件的beforeEach块里，我们需要替换原生的AlertController为一个mock对象，这个mock要能捕获你调用create()时传入的按钮配置：

import { AlertController } from 'ionic-angular';

// 创建AlertController的mock
class MockAlertController {
  // 捕获调用create时传入的所有参数
  create(options: any) {
    return {
      present: jasmine.createSpy('present'), // 用spy跟踪present方法的调用
      buttons: options.buttons // 保存传入的按钮配置，方便后续调用handler
    };
  }
}

beforeEach(() => {
  fixture = TestBed.configureTestingModule({
    declarations: [MyPage],
    providers: [
      // 用MockAlertController替换原生的AlertController
      { provide: AlertController, useClass: MockAlertController }
    ]
  }).createComponent(MyPage);
  comp = fixture.componentInstance;
});

2. 在测试用例中触发"Yes"按钮的handler #

现在当你调用comp.myAlert()时，mock的create方法会返回带有按钮数组的对象，我们可以从中找到"Yes"按钮的handler并手动调用它：

it('should set pressedButton to "Yes" when the user press the "Yes" button', () => {
  // 调用弹窗创建方法
  comp.myAlert();

  // 获取最近一次调用create返回的mock弹窗对象
  const alert = comp.alerCtrl.create.calls.mostRecent().returnValue;
  
  // 定位到"Yes"按钮的handler
  const yesButtonHandler = alert.buttons.find(btn => btn.text === 'Yes').handler;
  
  // 手动调用handler，模拟用户点击操作
  yesButtonHandler();

  // 断言逻辑是否执行正确
  expect(comp.pressedButton).toEqual('Yes');
});

额外说明 #

• 注意你的组件里注入的AlertController变量名是alerCtrl（拼写少了一个t），如果后续调整了变量名，记得同步修改测试代码里的对应部分。
• calls.mostRecent().returnValue是Jasmine spy的常用用法，用来获取最近一次方法调用的返回结果，这里就是我们的mock弹窗实例。

这样就能完美模拟用户点击"Yes"按钮的行为，测试handler内的逻辑了！

内容的提问来源于stack exchange，提问作者Diego Grillo