Javascript 如何正确地进行按钮点击的茉莉花测试

我最近开始使用Jasmine进行javascript测试，我遇到了一个问题。我相信这里有人能帮我

我有以下简单代码，发布在：

HTML：

删除Div

CSS：

.container{
显示器：flex；
弯曲方向：立柱；
填充：20px；
背景色：#eef；
}
钮扣{
填充：10px0；
字号：1rem；
背景色：#fdd；
}
#托拜雷斯{
填充：10px；
边框：1px实心#ffdddd；
背景色：#ffccdd；
边缘底部：20px；
}

还有JavaScript：

const-eraseDiv=（）=>{
const myDiv=$（“#toBeErased”）；
myDiv.children（'p'）。淡出（300，（）=>{
myDiv.fadeOut（600，（）=>{
myDiv.remove（）；
});
})  
}
常量addMyDiv=（）=>{
常数myDiv=$(`
此div及其所有内容将被删除。
单击下面的按钮将其删除。

`);
if（！document.queryselectoral（'#tobeerase'）.length）{
$（'div.container'）.append（myDiv）；
}
};
$（文档）.ready（（）=>{
$（'button#btneratesiv'）。在（'click'，（）=>{
擦除div（）；
});
});
//现在开始测试
描述（“擦除按钮功能”，（）=>{
在每个之前（（）=>{
addMyDiv（）；
});
它（'当btnEraseDiv单击时应删除div-使用async'，async（）=>{
//这里的测试是模糊的
常量btn=$（“按钮生成IV”）；
等待btn。单击（）；
expect（$（'div#toBeErased'）.length）。小于（1）；
});
它（'当bGeneraseDiv单击时应删除div-使用完成和超时'，（完成）=>{
//这是有效的，但我肯定它不是正确的用法
常量btn=$（“按钮生成IV”）；
点击（）；
设置超时（（）=>{
expect（$（'div#toBeErased'）.length）。小于（1）；
完成（）；
}, 2000);
});
});

阅读文档，我得出了这个测试失败：

it（'当bGeneraseDiv单击时应该删除div-使用async'，async（）=>{
//这里的测试是模糊的
常量btn=$（“按钮生成IV”）；
等待btn。单击（）；
expect（$（'div#toBeErased'）.length）。小于（1）；
});

然后我让另一个的超时时间大于淡出持续时间，它可以工作，但感觉不合适

it（'当bGeneraseDiv单击时应删除div-使用完成和超时'，（完成）=>{
//这是有效的，但我肯定它不是正确的用法
常量btn=$（“按钮生成IV”）；
点击（）；
设置超时（（）=>{
expect（$（'div#toBeErased'）.length）。小于（1）；
完成（）；
}, 2000);
});

有人能给我指出正确的方向，或者给我举个例子说明这种情况吗

谢谢你抽出时间

我认为您使用

done

param的“不正确”解决方案实际上是一个不错的选择。使用

async

/

await

的第一个解决方案不太可行，因为jQuery

click（）

方法没有返回可等待的类型（承诺或“thenable”）

如果您希望使用

异步

/

等待

解决方案，您可以尝试以下方法：

//为测试添加可重用的实用工具方法。
const wait=async ms=>new Promise（res=>setTimeout（res，ms））；
它（'当btnEraseDiv单击时应删除div-使用async'，async（）=>{
$（“按钮生成IV”）。单击（）；
等待等待（2000）；//等待动画完成。
expect（$（'div#toBeErased'）.length）。小于（1）；
});

旁注

您可能需要考虑的另一件事，特别是如果您要编写和维护大量UI测试，使用E2E/UI测试库，比如，Seleor，或者（如果您使用角度）。

---

这些库将允许您编写独立于实现代码的测试。您可以在普通浏览器或无头浏览器实例中运行它们。它们都内置了“驱动程序”API函数，允许您“等待”某些DOM条件。例如，来自Nightwatch的

waitForElementPresent（）

，或来自Puppeter的

waitForSelector（）

。有更多的API方法可以帮助您轻松编写可维护的E2E/UI测试。

谢谢，我将尝试夜视。