Javascript - 测试DOM操作

时间:2016-05-21 11:17:02

标签: javascript jquery unit-testing dom testing

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

我现在坚持的是,如何测试执行DOM操作的函数?

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

另外,如何测试AJAX响应而不让它到达服务器? 我想做的是模拟AJAX响应并测试我的代码如何处理它。例如伪造404响应,看看会发生什么。
我听说过SinonJs,但还不熟悉它。
如果我使用JQuery进行AJAX调用,我是否应该将$ .ajax删除以获得所需的结果?

基于以上所述,我在js测试方面有什么遗漏? 我上面所描述的有什么明显的东西没有意义,或者看起来我的方式错误吗?

我已经看过PhantomJs,但不太确定它适合的位置,看起来它最适合测试运行环境(我猜更接近集成测试) - 这是一个正确的假设?

1 个答案:

答案 0 :(得分:1)

关于DOM操作的测试,您可以使用名为jsdom的模块,这是一个用JavaScript实现的无头浏览器。所以你得到一个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的工作代码和测试)。