测试操纵DOM的Javascript [英] Testing Javascript that Manipulates the DOM

问题描述

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

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

似乎测试DOM元素的位置/颜色/ etc将是一个模糊点，因为你最终会像这样做某事：

  $（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

解决方案

我发现了Javascript / DOM测试，特别是对于简单你所描述的互动并不那么有用。你会测试的东西是正确的，因为jQuery是如此声明，你的测试看起来很像你的代码。

我目前的想法是，如果你是编写较大的JS组件时，将jQuery插件和一组测试的一组相互关联的行为提取出来是有意义的。

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

• 可以自动化


• 可以针对多个浏览器运行，包括IE
• 
  
• 在您的网页应用程序和页面的上下文中运行，所以拖放可以测试真正发生的地方，而不是在某些测试环境中。


• AJAX可以测试

I've been looking into javascript test suites and I have found QUnit to be very interesting. I understand how to test computational code, but...

How do you test javascript applications written primarily for DOM manipulation?

it seems like testing the position/color/etc of DOM elements would be a moot point because you'd end up doing somethign like this:

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

and then in your test...

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

this just doesn't feel right because it basically just doing this:

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

Am I nuts? How is this supposed to be done?

edit: the heart of the question:

I guess what I'm getting at is, I need to make sure the code isn't broken before I deploy, but the vast majority of it is UI helpers and ajax. How do I test that things are appearing correctly?

A few examples:

• test that a JQuery UI dialog is appearing on top of all other elements
• test that the drag-n-drop is working properly
• test that the color of a droppable changes when an element is dropped on it
• test that the ajax is all working properly
• test that there are no extraneous commas that will break IE

解决方案

I have found the Javascript/DOM tests, especially for the simple interactions that you are describing, are not that useful. You'll testing that things are set up right, and since jQuery is so declarative, your tests look a lot like your code.

My current thinking is that if you are writing larger JS components, it makes sense to pull out a set of interrelated behaviors both into a jQuery plugin and a set of tests for it.

But from the examples you mentioned, it sounds like you're really looking for a level of protection within your integrated website. A tool like Selenium will probably be more powerful and appropriate for you. In particular, it

• can be automated
• can run against multiple browsers, including IE
• runs within the context of your web app and pages, so drag-n-drop can be tested where it really happens instead of in some test environment.
• AJAX can be tested

这篇关于测试操纵DOM的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！