32

我一直在研究 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 对话框是否出现在所有其他元素之上
  • 测试拖放是否正常工作
  • 测试当一个元素被拖放到一个可放置对象上时它的颜色会发生变化
  • 测试ajax是否正常工作
  • 测试没有多余的逗号会破坏 IE
4

5 回答 5

16

我发现 Javascript/DOM 测试，特别是对于您所描述的简单交互，并没有那么有用。您将测试设置是否正确，并且由于 jQuery 是如此声明性，您的测试看起来很像您的代码。

我目前的想法是，如果你正在编写更大的 JS 组件，那么将一组相互关联的行为提取到一个 jQuery 插件和一组测试中是有意义的。

但是从您提到的示例中，听起来您确实在寻找集成网站中的保护级别。像 Selenium 这样的工具可能会更强大，更适合您。特别是，它

  • 可以自动化
  • 可以在多个浏览器上运行，包括 IE
  • 在您的 Web 应用程序和页面的上下文中运行，因此可以在实际发生的地方而不是在某些测试环境中测试拖放操作。
  • 可以测试AJAX
于 2009-09-19T03:58:47.043 回答
12

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

于 2009-09-17T14:00:18.447 回答
3

除了 Jason Harwig 所说的之外，我想说的是单元测试是一种确保代码按预期运行的测试。如果您想对此进行测试，那么 Jason 关于您应该如何进行测试是绝对正确的。如果您想运行测试来检查 DOM 操作是否正在发生（UI 测试），而不是执行 DOM 操作的实际代码（单元测试），那么您可能需要检查诸如Selenium、WatiN或Watir之类的东西。

于 2009-09-17T14:09:47.933 回答
1

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

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

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

于 2009-09-16T20:02:42.020 回答
0

我像这样测试 AJAX 的东西：

  1. 进行 AJAX 调用
  2. 设置 JavaScript 计时器
  3. 检查 DOM 以查看是否发生了预期的更改

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

于 2010-12-18T12:45:26.267 回答