Question

我有一个数据表，每行都有一个删除按钮，以删除该特定行的数据。当某人单击删除按钮时，将向用户显示一个弹出窗口，以确认他使用library - react-confirm-alert删除行数据的操作。

handleDelete = category => {
    const { deleteCategory } = this.props;

    confirmAlert({
        title: 'Please confirm',
        message: `Are you sure, you want to delete this category?`,
        buttons: [
            {
                label: 'Yes',
                onClick: () => {
                    if (typeof deleteCategory === 'function') {
                        deleteCategory({
                            id: category._id,
                            callback: (deletedCategory) => {
                                if (deletedCategory._id) {
                                    toastr.success('Delete Category', `Successfully deleted category with id ${deletedCategory._id}`);
                                    this.getCategories();
                                } else {
                                    toastr.error('Delete Category', `Failed to delete the category with id ${category._id}`);
                                }
                            }
                        });
                    }
                }
            },
            {
                label: 'No',
                onClick: () => {
                    toastr.error('Delete Action', 'Operation cancelled!');
                }
            }
        ]
    });
}

我需要测试此删除按钮的功能，使其涵盖以下情况

单击时会弹出确认对话框
如果用户单击“是”以确认删除，则必须将操作分派到redux存储。
如果用户单击“否”，则弹出窗口必须关闭。

我正在使用以下内容对其进行测试并面临问题

it('confirmation popup appears', () => {
     const modalRoot = global.document.querySelector('.react-confirm-alert-body');
     expect(modalRoot.hasChildNodes()).toBeTruthy();
})

我使用此控件的原因是，该弹出窗口是在当前组件外部创建的，因此浅层渲染当前组件或对其进行安装将无法帮助我通过find（）访问它。

尽管它能解决问题，但它似乎不是正确的方法，我无法理解如何单击此弹出窗口上的2个按钮？

const modalRoot = global.document.querySelector('.react-confirm-alert-body');
modalRoot.find('button) // gives error

我认为该库在内部使用react门户在body标签的末尾添加弹出窗口。任何帮助将不胜感激。

测试反应确认玩笑和酵素中的警报

0 个答案: