Question

我正在使用jasmine测试我的离子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创建一个模拟器，模拟，例如，用户按下“是”按钮，以便我可以测试Yes按钮处理程序中的代码。在我的单元测试之后。

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

我并不完全熟悉离子，但最后，这只是JavaScript和HTML。您需要做的是获取与要单击的按钮对应的DOM元素，然后调用click方法。

这可能有用。

将ids添加到所有警报控制器按钮，如下所示：

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

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

如何在Ionic中创建AlertController模拟

2 个答案: