Testing JavaScript code without recreating markup?

Question

I want to test the JavaScript code in our web app. We are using the jQuery library and .Net MVC. I've looked at these answers, and jqUnit looked nice, so I tried it, just to realize that I'll have to pretty much recreate all markup for every page I want to test.

Am I missing something? Are there any alternative approaches for testing JS/jQuery code? Our markup is at times complex, and changes drastically as a result of AJAX calls.

The best I can think of is trying to stick our app in an iframe on a test page. Haven't tried it yet.

Answer 1

If your testing javascript functions/objects, might i suggest YUI's testing component.

http://developer.yahoo.com/yui/yuitest/

Very similar setup to JUnit but only requires that you include a few test javascript files. It would be pretty easy to include this in your page while in a Test mode only.

Answer 2

You could just create the structure you want to test in the memory without appending it to the document. This won't work will all the tests (as for example CSS propeties won't affect items not inserted to the document but in some cases this may be worth a try).

First it's very fast, and second you don't spoil your document with test items you need to remove after you complete the tests.

Here's that idea in a very simple example.

test('My tests', function () {
    var testSubj = $('<div>This <b>is</b> my <span>test subject</span></div>');

    ok(testSubj.children('span') == 'test subject', 'Span is correct');
});