如何在 Ionic 中创建 AlertController 模拟

Question

我正在使用 Jasmine 测试我的 Ionic 3 应用程序，我想知道如何模拟创建确认警报的 AlertController。

创建确认警报的函数如下：

pressedButton:string="";
myAlert() {
    let confirm = this.alerCtrl.create({
        title: 'Title',
        message: 'Some message here',
        buttons: [
        {
            text: 'No',
            handler: () => {
                this.pressedButton = 'No';
            }
        },
        {
            text: 'Yes',
            handler: () => {
                this.pressedButton = 'Yes';
            }
        }]
    });
    confirm.present()
}

基本上，我想要为AlertController 创建一个模拟，例如，模拟用户按下“是”按钮，以便我可以测试“是”按钮处理程序中的代码。按照我的单元测试。

beforeEach(() => {
    fixture = TestBed.createComponent(MyPage);
    comp = fixture.componentInstance;
});

it('should set pressedButton to "Yes" when the user press the "Yes" button', () => {
    comp.myAlert(); //I want a mock that simulates the Yes button being pressed
    expect(comp.pressedButton).toEqual('Yes');
});

我查看了 ionic3-mocks（下面的链接），但我不知道如何在警报中强制按钮操作。 https://www.npmjs.com/package/ionic3-mocks

Answer 1

我正在使用 Ionic 4（以前是 3），添加新的模拟似乎对我来说也很麻烦。使用AlertController，您可以在我之前的评论中找到有用的信息：https://stackoverflow.com/a/59193696/1594579。

Answer 2

我对 ionic 并不完全熟悉，但归根结底，这只是 JavaScript 和 HTML。您需要做的是抓取与您要单击的按钮对应的 DOM 元素，然后调用 click 方法。

以下是可行的方法。

为所有警报控制器按钮添加 ID，如下所示：

let confirm = this.alerCtrl.create({
    title: 'Title',
    message: 'Some message here',
    buttons: [
    {
        text: 'No',
        handler: () => {
            this.pressedButton = 'No';
        },
        id: 'no-alert'
    },
    {
        text: 'Yes',
        handler: () => {
            this.pressedButton = 'Yes';
        },
        id: 'yes-alert'
    }]
});
confirm.present()

然后在你的测试中，抓取按钮元素：

let yesButton = document.getElementById('yes-alert');
yesButton.click();
...continue the test...

---

更新最好测试控制器本身并确保所有操作都正确连接，但如果这不可能，您可以直接测试处理程序代码。

这样的事情会起作用：

export const yesHandler = () => ...
export const noHandler = () => ...

pressedButton:string="";
myAlert() {
    let confirm = this.alerCtrl.create({
        title: 'Title',
        message: 'Some message here',
        buttons: [
        {
            text: 'No',
            handler: noHandler
        },
        {
            text: 'Yes',
            handler: yesHandler
        }]
    });
    confirm.present()
}

然后您可以直接在测试中测试这些处理程序。