代码之家 › 专栏 › 技术社区 › Jiaaro

测试操纵DOM的Javascript

qunit dom unit-testing jquery javascript

Jiaaro · 技术社区 · 15 年前

我一直在研究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。如何测试事物是否正确显示?

测试jQueryUI对话框是否显示在所有其他元素的顶部
测试当一个元素被拖放到可拖放的对象上时,其颜色是否会发生变化
测试ajax是否工作正常
测试没有多余的逗号会破坏IE

5 回复 | 直到 15 年前

ndp 15 年前

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

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

但是从你提到的例子来看,听起来你真的在你的综合网站中寻找一个保护级别。像Selenium这样的工具可能更强大,更适合您。特别是

可以自动化
在web应用程序和页面的上下文中运行,因此可以在真正发生拖放的地方进行测试,而不是在某些测试环境中进行测试。
AJAX可以测试

Jason Harwig 15 年前

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

J.R. Garcia 15 年前

除了Jason Harwig所说的之外,我还要说单元测试是一种确保代码按预期运行的测试。如果你想测试一下,那么Jason关于你应该怎么做是绝对正确的。如果您希望运行测试来检查DOM操作是否正在进行(UI测试),而不是执行DOM操作(单元测试)的实际代码,那么您可能需要检查以下内容 Selenium , WatiN 或 Watir

ChrisW 15 年前

我猜很多人都会进行视觉测试:也就是说,他们会在显示器上查看浏览器的输出,看看它是否正常就像DOM按预期被操纵一样。

如果需要一个自动化的测试用例(例如回归测试),那么他们可能会记录输出(比如屏幕截图),并做一些类似于比较两个屏幕截图的事情,以查看结果是否相同。

Hogsmill 14 年前

进行AJAX调用
检查DOM以查看是否发生了预期的更改

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