Javascript - 测试 DOM 操作

标签 javascript jquery unit-testing dom testing

我开始使用 Mocha 和 Chai 为我的 javascript 编写单元测试,并通过 Node.js 执行测试。 如果我可以通过节点运行所有测试并且不需要真正的浏览器/html 页面,我会更喜欢它。
.js 文件被编写为 RequireJs 模块,我想我已经掌握了如何编写一些逻辑单元测试(即不操作 DOM 的单元测试)的诀窍。

我现在遇到的问题是,如何测试执行 DOM 操作的函数?

我是否会被迫更改函数签名以传入我将作为参数操作的所有元素? (这可能不是一件坏事 - 但如果我正在处理许多元素,可能会导致传入大量参数)?

此外,如何在不访问服务器的情况下测试 AJAX 响应? 我想做的是模拟 AJAX 响应并测试我的代码如何处理它。例如伪造一个 404 响应,看看会发生什么。
我听说过 SinonJs,但还不熟悉。
如果我将 JQuery 用于我的 AJAX 调用,我是否应该删除 $.ajax 以获得所需的结果?

根据以上内容,我在 js 测试方面是否遗漏了什么? 是否有任何明显的我在上面描述的没有意义或似乎我正在以错误的方式进行的事情?

我见过 PhantomJs,但不太确定它适合什么地方,它看起来最适合针对运行环境进行测试(我想更接近于集成测试)——这是一个正确的假设吗?

最佳答案

关于 DOM 操作的测试,您可以使用一个名为 jsdom 的模块,它是一个用 JavaScript 实现的 headless 浏览器。所以你得到了一个 DOM,但你的测试仍然在 Node.js 中运行并且速度很快。缺点是您无法测试浏览器特定的异常情况,因为 jsdom 独立于其他浏览器。

关于AJAX调用的测试,sinon.js确实很有帮助。您可以删除 $.ajax,但如果您想测试更深层次,您也可以在浏览器中(或实际上在 jsdom 中)删除 XMLHttpRequest。我写了一篇关于此的博客文章:http://nicolerauch.de/2015/12/20/lightweight-stubbing-of-ajax-requests-in-javascript.html (在底部有一个指向 Github 存储库的链接,其中包含使用 mocha、node.js 和 jsdom 的工作代码和测试)。

关于Javascript - 测试 DOM 操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37362224/

相关文章:

javascript - 视差滚动与 JQuery 动画绊倒

c# - 如果我使用 try/catch,为什么我的 C# 异常单元测试会失败?

java - 编写 JUnit 测试用例的最佳规则

javascript - 使用javascript NOT php的电子邮件中的倒数计时器gif

javascript - 如何将日期选择器格式更改为 YYYY-MM-DD

javascript - Backbone.js DOM 尚未在渲染方法中准备好应用 jquery 魔法

android - 通过 Dagger Provide 模拟 AccountManager 时出现 Java.lang.reflect.InvocationTargetException。怎么修?

javascript - 如何在 jQuery/Javascript 中生成鼠标滚轮事件?

javascript - jquery多重选择显示和隐藏谷歌地图标记

jquery - 将 JQuery UI 选项卡与底部对齐