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
在您的网络应用和网页的上下文中运行，因此可以在实际发生的地方测试drag-n-drop，而不是在某些测试环境中进行测试。
可以测试AJAX

Answer 2

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

Answer 3

除了Jason Harwig所说的内容之外，我会说单元测试是一项测试，以确保代码按预期运行。如果你想测试一下，那么Jason对你应该如何做到这一点是完全正确的。如果您想运行测试来检查DOM操作是否正在进行（UI测试）而不是执行DOM操作的实际代码（单元测试），那么您可能需要查看Selenium之类的内容， WatiN或Watir。

Answer 4

我猜测很多人在视觉上进行测试：即他们在他们的显示器上查看浏览器的输出，看看看起来是否像预期的那样操纵了DOM。

如果需要自动化测试用例（例如，用于回归测试），那么他们可能会记录输出（如屏幕截图）并执行比较两个屏幕截图以查看结果是否相同的内容。

您可以捕获整个DOM，而不是捕获屏幕截图，并对捕获的DOM树进行并排比较（比较像素可能不太容易出错）。

Answer 5

我测试这样的AJAX：

进行AJAX通话
设置JavaScript计时器
检查DOM以查看是否发生了预期的更改

现在，可能是在您进行检查之前没有返回AJAX调用，但这也是有用的测试信息;通过AJAX调用，（通常）有一段时间后我们称之为失败。举个例子，如果我们正在做一个建议弹出窗口，并且需要30秒才能回来，那就是失败。

测试操纵DOM的Javascript

编辑：问题的核心：

5 个答案: