Monday, March 15, 2010

Javascript unit testing and code coverage

Back in the day, when I earned my crust as a Java developer, I wouldn't dare commit a new change to a code base without some unit tests. Junit and emma proved to be useful tools to make sure that any new additions to a codebase didn't adversely affect existing functionality.

Moving to developing in JavaScript - I guess I got lazy with unit tests. Not having a code coverage tool to let me know which sections of my code were being exercised by test code meant that I didn't have that 'green bar' motivator.

Then I found out about jscoverage. For an example of what this tool can produce, check out their sample reports for dojo. Getting jscoverage up and running on mac can be a bit of a pain though - here's the steps I followed:

1. There's no auto-built dmg for mac, so you have to download and install macports.

2. Once you have that up and running, open a terminal and execute:
sudo port install jscoverage

jscoverage should now be installed on your machine.

3. Check out the jscoverage documentation for examples on how to run jscoverage.

4. I use dojo's doh testing framework to run my tests. If you do too, you need to edit the runner.html file in the doh directory to include the following buton:
<h3 style="margin: 5px 5px 0px 5px; float: left;">D.O.H.: The Dojo Objective Harness</h3>
<button style="margin-top: 5px; float: left;" onclick="window.open('../../jscoverage.html');">Coverage Report</button>
<img src="small_logo.png" height="40" style="margin: 0px 5px 0px 5px; float: right;">

5. All you need to do then is point your browser at whatever file you use to run your dojo tests and you should be all set. Just click on the "Coverage Report" button once your tests have run.

Its that simple ...

Thursday, March 4, 2010

Javascript testing in Adobe AIR

I'm in the process of migrating a web application to an Adobe AIR application and I finally got around to trying to migrate some of my JavaScript unit tests to run in AIR. I'd previously written some doh tests and wanted to get them up and running in AIR. Turns out it was relatively simple. All you need to do is:

In your apache configuration file, add an entry to point to the base of your AIR project:
<VirtualHost *>
ServerName air-testing.my.domain
DocumentRoot /path/to/my/trunk/htdocs
</VirtualHost>

(The htdocs directory here should have a subdirectory called dojo which has the 4 dojo subdirectories (dojo, dijit, dojox, util)

Then, in the .html file where you previously had a <meta> redirect (lets call this runTests.html - it probably looked something like this)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Unit Tests</title>
<meta http-equiv="REFRESH" content="0; url=../../dojo/util/doh/runner.html?testModule=my.module.testAll&registerModulePath=mydomain,../../mydomain">
</head>
<body>
Redirecting to D.O.H runner.
</body>
</html>

... change this file to look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Unit Tests</title>
<script type="text/javascript">
var addOnLoad = function() {
window.location = "http://air-testing.my.domain/dojo/util/doh/runner.html?testModule=my.module.testAll&registerModulePath=mydomain,../../mydomain"";
}
</script>
</head>
<body onload="addOnLoad();">
Redirecting to D.O.H runner.
</body>
</html>

I found it useful to have a testing application descriptor xml file in the same directory as my runTests.html test file:
<?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
<id>tests</id>
<filename>runTests</filename>
<name>
<text xml:lang="en_US">Run Tests</text>
</name>
<version>0.0001</version>
<description>
<text xml:lang="en_US">Run Tests</text>
</description>
<initialWindow>
<title>TESTS</title>
<content>runTests.html</content>
<systemChrome>standard</systemChrome>
<transparent>false</transparent>
<visible>true</visible>
<width>1250</width>
<height>900</height>
<x>20</x>
<y>20</y>
<minimizable>true</minimizable>
<maximizable>true</maximizable>
<minSize>850 636</minSize>
<resizable>true</resizable>
</initialWindow>
</application>

Running adl on this new test application descriptor file should kick off your doh unit tests.