Recommendation and Tip: The QUnit JavaScript Automated Tests Library
I've begun working on a JavaScript port of some algorithmic perl code, to allow it to run inside a browser. As a result, I had to find a good JavaScript automated tests library to allow me to write automated tests for the code. I first looked at Test.More and Test.Harness from JSAN (the JavaScript Archive Network) but as it turned out, JSAN was defunct, and no one had time to mark it as such. Then I asked the “Test.Run” developer (another thing I had found on jsan) to instruct me how to get it up and running, and he gave me a link to its archive, which was 1.5 mb compressed (!), and so was not acceptable.
I looked at the Wikipedia list of unit testing frameworks, but there were too many. at least I understood that jsUnit was no longer actively maintained. I looked at Jasmine, which is a bdd framework for JS, but its syntax seemed too horrid and unnatural.
Eventually, I decided to ask for recommendation on Stack Overflow and, as after I wrote my title, I found a a previous question, where there was a recommendation of QUnit, which I noticed was developed by the jQuery people, and as I'm fond of jQuery, I decided to look deeper into it.
I wasn't disappointed by QUnit - it does what it does well, and I was able to write my test suite using it, so I can recommend it as well. It has primitives that are very similar to perl's Test::More, and it can even assert that the number of assertions ran within a test are right (like Test::More can).
So here's a tip for it: if you're writing your testing code in a different file, and you wish to check that no compile-time or run-time exception was thrown (which will cause qunit to report a success with zero assertions) you should wrap the testing code in a try { .. } catch block and in the catch block, run ok(false...).
Here's an example from my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ABCPath Test</title>
<script src="jquery-latest.js"></script>
<link rel="stylesheet" href="qunit.css" type="text/css" media="screen" />
<script type="text/javascript" src="qunit.js"></script>
<script type="text/javascript" src="joose.mini.js"></script>
<script type="text/javascript" src="abc-path.js"></script>
<script type="text/javascript" src="abc-path-test.js"></script>
<script type="text/javascript">
$(document).ready(function () {
try {
test_abc_path();
}
catch (err) {
module("Meta");
test("global_failure", function() {
ok (false, 'test_abc_path() has thrown an exception or is invalid.');
});
}
// Hide passed tests by default.
$('#qunit-tests').addClass('hidepass');
});
</script>
</head>
<body>
<h1 id="qunit-header">QUnit example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
</body>
</html>
Enjoy.
