FireUnit: JavaScript Unit Testing Extension

In my work with the Firebug team over the past couple months I’ve been working with Jan Odvarko on a way to provide some form of unit testing that we can build off of. The result of my work is a new Firefox/Firebug extension called FireUnit.

FireUnit provides a simple JavaScript API for doing simple test logging and viewing within a new tab of Firebug.

For example, here’s some of the API that you can use (we’re starting with the basics and looking to expand with more methods, later).

// Simple true-like/false-like testing
fireunit.ok( true, "I'm going to pass!" );
fireunit.ok( false, "I'm going to fail!" );

// Compare two strings - shows a diff of the
// results if they're different
fireunit.compare(
  "The lazy fox jumped over the log.",
  "The lazy brown fox jumped the log.",
  "Are these two strings the same?"
);

// Compare a string using a regular expression
fireunit.reCompare(
  /The .* fox jumped the log./,
  "The lazy brown fox jumped the log.",
  "Compare a string using a RegExp."
);

// Display the total results
fireunit.testDone();

The results will appear in a ‘Test’ tab in Firebug (which must be installed in order for Fireunit to work). Each of the results can be expanded to show additional information including a full stack trace of where the test ran and a comparison with a diff.

FireUnit also provides a couple methods for simulating native browser events:

// You can also simulate browser events
var input = document.getElementsByTagName("input")[0];
fireunit.mouseDown( input );
fireunit.click( input );
fireunit.focus( input );
fireunit.key( input, "a" );

And a way of running a batch of test files (each of which would contain a number of individual tests).

// Or run multiple pages of tests:
fireunit.runTests("test2.html", "test3.html");

// Place at the end of every test file in order to continue
fireunit.testDone();

We’ve been using this test runner to run a number of Firebug tests, especially ones that are network based.

Depending on the suite it’s pretty easy to adapt existing test suites to display their results in FireUnit.

Running the jQuery selector test suite that has the following snippet added:

if ( typeof fireunit === "object" ) {
	QUnit.log = fireunit.ok;
	QUnit.done = fireunit.testDone;
}

Yields the following results (which are completely navigable):

If you want to get started using FireUnit you can head on over to the Fireunit.org site and download the latest extension.

You can also grab the source off of the repository on Github.

Jan has also written a blog post detailing a little bit more about what we’re using FireUnit for in the Firebug Working Group.

This is still a very early release of our work – there’s obviously a ton of room left to grow – so feedback is expected and appreciated.

Posted: December 18th, 2008

Subscribe for email updates

44 Comments (Show Comments)


Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.

Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

Subscribe for email updates

John Resig Twitter Updates

@jeresig / Mastodon

Infrequent, short, updates and links.