我们如何执行针对DOM操作的单元测试? [英] How can we execute Unit Tests against DOM manipulation?

问题描述

QUnit的介绍位于

The introduction to QUnit over at netTuts.com spawns an interesting exchange (never resolved) over how to apply unit tests against actions that manipulate the DOM. The following quote (Alex York) gets to the crux:

如果您有 这样的功能:

What would be nice is that if you had a function like this:

function add(a，b){var result = a + b; $("input#ResultTestBox").val(result);

function add(a, b) { var result = a + b; $("input#ResultTestBox").val(result);

在以上测试中，我很乐意 测试两件事:a和的加法 b，并正确放置结果 变成DOM元素.我喜欢 通过提供第二项测试 一些模拟HTML.有可能吗?

In the above test, I would love to test two things: the addition of a and b, and the result correctly being put into a DOM element. I would love to test the second thing by providing some mock HTML. Possible?

但是，就像我说的...未解决.可解决的吗?

But, like I said...unresolved. Resolvable?

推荐答案

QUnit的最新版本支持#qunit-fixture元素，可用于将HTML添加到QUnit网页.

The latest version of QUnit supports a #qunit-fixture element that lets you add HTML to the QUnit web page.

例如，在您的HTML中:

E.g., in your HTML:

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

并在您的JavaScript中:

and in your JavaScript:

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

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

这篇关于我们如何执行针对DOM操作的单元测试?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！