While working on my JavaScript form field validator based on the Commons validator, I used JsUnit to do unit tests on my code.
"Unit tests for JavaScript?" you will say. "That’s overkill, I don’t need that," which is true for a lot of places we use JavaScript. But since I was working on a more substantial chunk of code, and refactoring large parts of it, unit testing was the only way that I could be assured that all of the old functions still worked. Plus, since JsUnit runs in a plain HTML page, I saved myself hours because I didn’t have to deploy anything to test my code.
JsUnit is apparently a port of JUnit to JavaScript, so writing unit tests works very similarly to writing unit tests in Java. It has functions like assertEquals and assertNotTrue, you can create mock objects, and it has the setup – tear down idea of functions that run before and after every test.
These JavaScript unit tests can then be incorporated into your automated build process, like the rest of your unit tests. JsUnit comes with a build.xml file that includes an Ant task to run the JS tests. You can configure it to run the tests in multiple browsers, including whatever browsers are available on the testing machine (which I have tried), and even other browsers on remote machines (which I haven’t yet tried). Instant cross-platform testing!
Using JsUnit
To use JsUnit, you set up a bare-bones HTML page that contains the JsUnit JavaScript, like so:
<html> <head> <title>JS Tests</title> <script language="javascript" src="../../lib/jsunit/app/jsUnitCore.js"></script> ... other script includes you need for your code ... <script language="javascript"> ... your code goes here ... </script> </head> <body> ...other HTML your code needs... </body>
A simple example
I’ll use some examples from the validator test page. The validator needs a form to work on, so this page has a simple form in the body tags:
<form action="" id="thisForm"> <input id="testInputDifferentId" name="testInput" type="text"/> </form>
You can start with a setUp function, which will get run before each test, where you can set up your variables and reset the form fields.
<script language="javascript">
var validator;
function setUp() {
validator = new Validator($('thisForm'));
var testInput = $('testInputDifferentId');
testInput.value = "some stuff";
}
</script>
Writing tests
Then you write your tests in functions whose names begin with test. The validator has a function called getFieldId, which takes a form field and tries to get the ID, if available, or the name of the field I am interested in. Here’s a test for it:
function testFieldId() {
var testInput = $('testInputDifferentId');
assertEquals("testInputDifferentId", validator.getFieldId(testInput));
}
(The test seems tautological, but the function is there to smooth over cases where the ID doesn’t exist.)
Running tests
Now we are ready to run our test. Point your browser at the JsUnit testRunner.html page, which is included with the JsUnit distribution. From there, you select your test page, click the Run button, and watch your tests pass (green = yay!) or fail (red = boo!). Very satisfying.
Other stuff
For AJAX tests, you can set up a mock request object that will mock out the server behavior, so you can test purely your code. I won’t show an example with the details here, but there are some examples in the template project.
Tags: JavaScript, jsunit, testing, unit tests
