我们如何针对DOM操作执行单元测试？

Question

QUnit over netTuts.com的介绍产生了一个有趣的交换（从未解决），如何对操作DOM的操作应用单元测试。以下引用（亚历克斯约克）引起了关键：

  

如果你有，那将是多么美好   像这样的函数：

     

function add（a，b）{var result = a +   b;   $（“输入＃ResultTestBox”）VAL（结果）;

     

在上面的测试中，我很乐意   测试两件事：增加一个和   b，正确放置结果   进入DOM元素。我喜欢   通过提供测试第二件事   一些模拟HTML。可能的？

但是，就像我说的......没有解决。分辨？

Answer 1

最新版本的QUnit支持#qunit-fixture元素，可让您将HTML添加到QUnit网页。

例如，在你的HTML中：

<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>

并在您的JavaScript中：

$('<input id="ResultTestBox" type="text"/>').appendTo('#qunit-fixture');
var result = add(a, b);

equals(result, $('input#ResultTestBox').val(), "testing result box value");

Answer 2

你实际关心的是你在val的返回值上调用$(“input#ResultTestBox”)方法 - 你不需要测试jQuery的功能方法本身。为什么不注入jQuery对象的模拟实现并对其进行测试？

Answer 3

如果您不想为所有测试创建html页面沙箱的麻烦，可以在env.js中运行它们。