Pages

Friday, 6 June 2008

Test Driven JavaScript using QUnit

I have a little project that I started writing in OpenLaszlo. I chose OpenLaszlo because I thought I could script it in standard JavaScript but during the development of my minor app I found a few errors with the OpenLaszlo JavaScript implementation and the project stalled. Now, having started a new job, where the development team use splendid new technologies like QUnit, and JQuery, I resurrected my app.

So I present, to you, some notes on my experience of Test Driven JavaScript using QUnit.

I class myself as a real novice with JavaScript. My best JavaScript app yet has major issues with Internet Explorer and so I guess I should really class myself as pretty rubbish at JavaScript... however I remain undeterred and convinced I can learn this stuff.

Fortunately the development team gave me a quick demo of QUnit at work so I understood a little about the technology, and no better teacher than experience can help me understand, so time to dabble.

As a novice, I followed the instructions on the QUnit site and created a basic test page (called test_eprime.htm).

I added a new 'test' to the set of tests. The test had the name "html char conversion". I created the code of the test as an unnamed function. The purpose of the test? To check the function convertToHTMLIfRequired function returns &gt; when called with the parameter '>'

So now I save my test_eprime.htm file and reload it into FireFox.

And voila...

...my test failed. Hopefully as you expected, after all I didn't write any code.

So off I go to my trusty text editor and create a new file called eprime.js which looks like this

function convertToHTMLIfRequired(c){ return '&gt;'; }

Run the tests again by refreshing the page in the browser. And...

Wha! Oh, I forgot to include eprime.js into my test_eprime.htm, OK, easy fix.

the fact that I haven't had to read the manual yet, and have managed to make a lot of progress,

that I can keep running my tests easily,

by loading my test page into different browers I can check for browser compatibility

I will now go off and finish my little e-prime application in 'proper' JavaScript, using TDD and shall forget about OpenLaszlo for the moment. (I'll write up the reasons for this on CompendiumDev at some point).

4 comments:

Thanks for the heads-up on QTest. What would you say are the benefits of QTest over jsUnit?

The QTest uses semantics reminiscent of of a framework I wrote some time ago for some Perl developers who were more used to using Test::More... http://www.testingreflections.com/node/view/5333(please excuse the formatting issues on that link - trying to fix them)

Love posts like this one... nothing evil about them :-)

Antony Marcano

Thanks Antony,

I only looked at JSUnit once about a year ago and for some reason I found it hard to get my head around, I don't quite know what I really found difficult, since I just had another look and it seemed simple enough. I do plan to have another look at JSUnit.

Other blogs I read describe JSUnit as slow, and difficult to use for Ajax, but I cannot corroborate that from experience.

JSUnit has not had an update for over 2 years (according to the sourceforge news).

JSUnit being used as part of JQuery testing gives it a whole lot of Qudos.

The ‘0 tests of 0 failed’ problem happens because testrunner.js calls runTest() on document ready. Since that script is loaded before your document ready code, the results are generated before your tests are run.

To get rid of the problem, run your tests as a script tag in the head section, which means they run before doc ready.

Thanks for the article, it was a useful intro =)Fantastic info thanks.