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

Testing your app inside an iframe could work.

What I've found to be better is to stick with the Model-View-Presenter (MVP) paradigm (on the client side alone) along with breaking the UI components into digestible chunks to be able to test each component inside its own "driver" page. Most of the logic resides inside the Presenter(s), which is pure JavaScript and therefore can be tested with pure JavaScript unit tests. Individual UI components can be tested with a framework like Selenium and their testing would simply be ensuring that they throw the right events to the Presenter. The Model can also be made testable as pure-JavaScript if the backend access part is stubbed/mocked out into some sort of Fetcher class.

Answer 3

It might be worth considering Selenium and running some automated tests at the browser level.

Of course, in an ideal world you would work with a unit-testing framework at the code-level, but given that may involve a lot of up-front rework, a solid compromise might be to test that the javascript actually does what you need it to using Selenium or a similar framework.

Answer 4

The visibone browser reference suggests something they call 'assertiveness'. It basically gives a suggestion on how to implement unit testing for JavaScript. Its really quite simple.

See the bottom right of the following picture link:

http://www.visibone.com/products/ebk8-9%5F850.jpg

To summarise here:

Create a function assert():

function assert(fact, details){
    if (!fact) alert("Assert failure: " + details);
}

And you could call it something like this:

assert((parseInt("1") == 1), "Check string '1' is equal to integer 1");

Or possibly with a better === comparison:

assert((parseInt("1") === 1), "Check string '1' is equal to integer 1");

There is more on the linked picture, and your assert functions could become more sophisticaed.

I did a google search on "JavaScript assert", and got quite a few links back, so it might be worth checking out yourself.

Answer 5

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

Answer 6

You may need two approaches, depending on the code:

1. Code that can be unit tested. There is some Javascript that is independent enough that you can use JSUnit to test it with a minimal amount of HTML markup. In a way this markup is your test fixture data.

You may want to figure out how you can restructure your code such that it can be tested in this way. Can you make the JS more modular, or less dependent on a certain markup? (Sadly, sometimes you can't.)

1. Code that requires integration testing. Like you said, it's a pain to recreate all that markup. Someone else suggested selenium (which runs your page in a frame). That's a good approach to test Javascript code in its real environment.

The disadvantage of these is that they tend to be slower to run and a little harder to maintain or brittle. Look up the "Page Object" pattern to help you out on the maintainability front.

We end up automating the JS unit tests using selenium to drive it.

Answer 7

You can use a template engine. Many different template engines exist for many different http server setups, so you'll probably find one that suits your needs, and that is implemented in the (server side) programming language of your choice.

Now once you installed your template engine, you can use your original layout and add a little marker, where you can insert a <script> tag when testing, and nothing when not testing.

The advantage of this approach: there needs to be absolutely no difference between the production pages and the test pages. You can avoid adding an iframe you don't need for anything else than testing.

Answer 8

Windmill is an excellent python based javascript test framework. It's under active development, so it's constantly improving. I would recommend taking a look at it. You can create automated tests it has a nice GUI you also can use to setup tests. There's a bunch of other features, but no reason to list them all here.

Answer 9

So there are two kinds of tests you seem to be asking about. One is unittesting the code you write that consumes jquery. The answer to this is much simpler than everyone usually thinks. Just mock jquery in your unit tests. It's really easy and works pretty much the same way you would do mocking in any other programming language. Except it's easy to do without even a framework in javascript. I actually run these kinds of tests in an automated test suite using Test.TAP and rhino for my projects. No browser required.

The other kind of test is an integration or regression test. This is where a tool like selenium comes in. These tests happen in your actual application and are designed to make sure that all the pieces work together the way your expect. Browser, JQuery, your javascript, and Web-Server. Keeping these two kinds of tests seperate in your mind is key to putting together a test suite for javascript code. Ideally you would run these tests in multiple browsers (possibly even multiple configurations of the browsers).