如何解决测试反应确认玩笑和酵素中的警报
我有一个数据表,每行都有一个删除按钮,以删除该特定行的数据。当某人单击删除按钮时,将向用户显示一个弹出窗口,以确认他使用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标签的末尾添加弹出窗口。任何帮助将不胜感激。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。