使用 jQuery-Chai 测试元素

Question

我有几个使用 jQuery 的函数。而且我无法理解在 Mocha+Chai 中使用 jQuery-Chai 测试它们的正确方法。

我在 jQuery-Chai 插件中看到了断言列表。但是，我不明白我们从哪里获取 DOM 数据来运行这些断言？

理想情况下，我想插入一行 html。在上面运行函数。并使用 jQuery-Chai 断言进行验证。

有人可以帮我弄清楚我应该在哪里包含夹具来测试这些功能吗？

提前致谢。

使用：Testem 与 Mocha+Chai。

Answer 1

如您所述，chai-jquery 仅提供可用于 DOM 元素的断言。您需要使用不同的库来实际填充 DOM。由于您已经need jQuery included for chai-jquery to work，最简单的解决方案可能是使用jQuery 的append() 函数将子元素添加到DOM，然后在测试结束时使用jQuery 的remove() 函数删除它们。

或者，如果您想稍微抽象一下 DOM 操作，您可以尝试引入一个固定库。为此，我最喜欢的是js-fixtures。如果您只需要这样，您仍然可以使用 set() 函数轻松插入一行 html：

fixtures.set('<div>Your html here</div>');

如果您的测试 html 变得更加复杂，您可以将其提取到一个示例 html 文件中，然后使用 load() 函数将其全部加载到 DOM 中：

fixtures.load('yourTestPage.html');

最后，当您的测试完成后，您可以使用fixtures.cleanUp() 轻松清洁您的夹具。