More Test Driven Development With Javascript: JsTestDriver

Just got back from the gym and it’s time for yet another evening of experimenting with test driven development in javascript. I’ve been hearing a lot about JsTestDriver lately, so tonight I’m going to see what all the fuss is about. 🙂


I’m currently looking over the page at http://code.google.com/p/js-test-driver/ right now… and so far I like what I see. It seems that js-test-driver isn’t just a TDD framework, but a whole test runner that runs tests in every configured browser. Not that we haven’t seen this before, but so far I like what I see. They even include a video of it in action, which is very good.

Alright, enough of that. Let’s look into…

The Dirty Details

The syntax reminds me of berlios.de jsunit. which I like as it is nicely object oriented. You can also see it has the familiar JUnit like syntax as well. Apparently it also includes a test server that lets you run tests in multiple browsers from the commandline.

License
js-test-driver is licensed under the Apache License 2.0, a far cry from the usual MIT license of other javascript related stuff. I suspect it’s the java portion of it… if it was written in ruby it’d probably be under the L/GPL. 🙂

Last Update
The latest release as of this writing is dated May 23, 2009. The last subversion activity was June 15th, 2009 (yesterday).

Support
In addition to the wiki on Google Code, there is also a google group.

Alright! Let’s Try It Out!

I’m going to go ahead and download the latest beta release on the js-test-driver download page and check out the getting started instructions on the wiki. Looks like I’ll be using eclipse for this one… so I’m going to fire up eclipse and create a general project called js-test-driver-example with the project structure specified in the getting started instructions.

Now, time to write the first test!

Html5PlaceholderTest = TestCase("Html5PlaceholderTest");

Html5PlaceholderTest.prototype.setUp = function(){
	var sandbox = $('<div></div>');
	sandbox.append('<input type="text" name="firstName" id="name" placeholder="Enter Your Name">');
	
	this.inputWithPlaceholder = $('#name', sandbox);
	this.emulator = new Html5Emulator(sandbox);
}

Html5PlaceholderTest.prototype.testInputValueIsPopulatedByPlaceholderAttribute = function(){
	this.emulator.emulatePlaceholders();
	
	assertEquals("Enter Your Name", this.inputWithPlaceholder.val());
}

Fair enough… feels just like JUnit! Lets write a little skeleton code so this doesn’t scream about Html5Emulator being undefined.

function Html5Emulator(dom){
	this.emulatePlaceholders = function(){
		
	};
}

Now, before kicking things off, I’ll create a jsTestDriver.conf file with the same contents as those listed on the getting started page:

server: http://localhost:9876

load:
  - src/*.js
  - src-test/*.js

Okay! Time to run it and see what we get!

Looks like we started up okay… now what? Looks like it wants me to navigate to http://localhost:9876 and click capture this browser for the next step. Since I only have one browser open and I’m writing this post in it, I’ll open something else up instead. How about Konqueror?

I click the capture this browser link, and now I see a green bar with JsTestDriver on it in the window. Nothing fancy. So Now we have a server running and a browser captured, let’s try running the tests!

Sweet… got the error message I would have expected: the value attribute is empty. Let’s fix that:

function Html5Emulator(dom){
	this.emulatePlaceholders = function(){
		$('input', dom).each(function(){
			$(this).val($(this).attr('placeholder'));
		});
	};
}

Rerun and

Now I will note that the first time I ran it, it kept giving me the previous result (where I set the value to “BLAH”) over and over even though it was set to something else. I reset the server and I never had the problem again, but it was an oddity. (Update Actually I did experience this quite a few more times, but not sure if it was due to browser caching or the fact my version of konqueror is a nightly build, or something else)

Now as usual, I’m going to finish the basics of the placeholder emulation and share the results in my github javascript-testdrive-examples project.

What I Liked

  • The server runner is by far the EASIEST I have ever used. I was able to get my tests running in both konqueror and opera no problem
  • Completely decoupled from html, includes jquery magically (somewhere) to provide dom manipulation
  • Clean syntax similar to berlios jsunit
  • Seems like it would be pretty easy to transition to for those used to JUnit
  • It’s a trivial matter to get tests running automatically from your ide

What I Didn’t Like

  • I kind of prefer spec style tests more than unit tests these days…
  • The weird bug where I kept rerunning tests and getting the last result even though I modified all kinds of things, forcing me to reboot -> rerun to get my tests to pass.

Summary

Overall I think it’s a good start and it looks VERY promising. If there could even be some eclipse integration it would win hands down for me. What I really want is to be able to run this with jspec on top of it… running my specs in multiple browsers at the same time.