Question

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);

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?

Answer 1

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

E.g., in your HTML:

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

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");