How can we execute Unit Tests against DOM manipulation?

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?

Answers


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

Surely what you actually care about is that the val method gets called on the return value of $(“input#ResultTestBox”)—you don't need to test the functionality of the jQuery method itself. Why not inject a mock implementation of the jQuery object and test against that?


You can run them in env.js, if you don't want the hassle of creating html page sandboxes for all your tests.


Need Your Help

NSString instance reports its class as NSCFString

objective-c cocoa class nsstring class-cluster

My objective here is really simple -- I'm trying to set an NSString to some test data, then return the class, which should be NSString. Here's my code:

Facebook "Like" button callback

javascript facebook button callback facebook-like

I am interested in implementing the facebook "Like" button, but I would like to know what user is clicking on this button so I can get some useful information from this. From what I have read, face...