测试操纵DOM的Javascript

Question

我一直在研究javascript测试套件,我发现QUnit非常有趣.我理解如何测试计算代码,但......

你如何测试主要用于DOM操作的javascript应用程序？

似乎测试DOM元素的位置/颜色/等是一个没有实际意义的点,因为你最终会像这样做一些东西:

$("li.my_element").css("background-color", "#f00");

然后在你的测试中......

$(function() {
    module("coloring");
    test("test_my_element", function() {
        var li_element_color = $("li.my_element").css('background-color');
        equals(li_element_color, "#f00");
    });
});

这只是感觉不对,因为它基本上只是这样做:

var my_li= $("li.my_element");
my_li.css("background-color", "#f00");
if ( my_li.css("background-color") == "#f00" ) {
    return true;
}

我疯了吗？应该怎么做？

编辑:问题的核心:

我想我得到的是,我需要确保在部署之前代码没有被破坏,但绝大多数是UI助手和ajax.如何测试事物是否正确显示？

几个例子:

• 测试JQuery UI对话框是否出现在所有其他元素之上
• 测试拖拽是否正常工作
• 测试droppable的颜色在元素掉落时会发生变化
• 测试ajax是否都正常工作
• 测试没有无关的逗号会破坏IE

Answer 1

我发现Javascript/DOM测试,尤其是对于您所描述的简单交互,并没有那么有用.您将测试事情是否正确设置,并且由于jQuery是如此声明,因此您的测试看起来很像您的代码.

我目前的想法是,如果你正在编写更大的JS组件,那么将一组相互关联的行为转换为jQuery插件和一组测试是有意义的.

但是从你提到的例子来看,听起来你真的在集成网站中寻找一定程度的保护.像Selenium这样的工具可能会更强大,更适合您.特别是它

• 可以自动化
• 可以针对多种浏览器运行,包括IE
• 在您的Web应用程序和页面的上下文中运行,因此可以在实际发生的位置测试drag-n-drop,而不是在某些测试环境中.
• AJAX可以测试

Answer 2

而不是测试JQuery css函数.您的测试应该模拟css函数,并确保仅使用正确的颜色调用它.测试的代码应该是你的,而不是框架.