I’d like to say I always write tests before I write any JavaScript code… Those times when I do write tests, I use the QUnit framework, which is used to test jQuery, so pretty well-tested itself.
I’ve recently been putting together an Adobe AIR application using HTML, CSS and JavaScript (aka Web Standards), which is very empowering and everything, but turned out to be a little tricky to write tests for. All the interesting stuff I wanted to do through AIR’s window.runtime object, such as opening native windows and messing with dock icons, is missing from the browser if you’re trying to test the JavaScript components in isolation. The ideal would be able to run your QUnit tests within the AIR runtime itself.
Fortunately, it’s straightforward to create a test app that wraps the QUnit test runner in the AIR runtime and exercises your code. Here’s how I got going:
Setting up the file structure
The folder structure I am using for the AIR app is like this:
/myApp
myApp.html
myApp-app.xml
/js
myApp.js
/css
styles.css
The myApp-app.xml file is the “application descriptor” that AIR uses to create the .air package when you build the app.
I added two folders at the same level as /myApp, to contain the test framework and test code; the complete structure looks like:
/myApp
myApp.html
myApp-app.xml
/js
myApp.js
AIRAliases.js
jquery-1.3.2.min.js
/css
styles.css
/myAppTests
runner.html
tests.js
myAppTests-app.xml
/qunit
testrunner.js
testsuite.css
Configuring the test app
The application descriptor for myAppTests is not very different from the descriptor for myApp; here they are:
myApp-app.xml:
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
<id>examples.html.myApp</id>
<version>0.1</version>
<filename>myApp</filename>
<initialWindow>
<content>myApp.html</content>
<visible>true</visible>
<width>400</width>
<height>800</height>
</initialWindow>
</application>
myAppTests-app.xml:
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
<id>examples.html.myAppTests</id>
<version>0.1</version>
<filename>myAppTests</filename>
<initialWindow>
<content>myAppTests/runner.html</content>
<visible>true</visible>
<width>400</width>
<height>800</height>
</initialWindow>
</application>
The main structural difference is that myApp-app.xml has an initialWindow.content property set to myApp.html, whereas myAppTests-app.xml refers to the test runner from a directory above: myAppTests/runner.html. This is needed because the test app needs to have its working directory set to the top-level of the file structure, otherwise runner.html won’t be able to get at all the files it needs in other directories (more below).
Putting the correct files in runner.html
Here’s a runner.html that works with the folder structure described above:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test Suite</title> <link rel="stylesheet" type="text/css" href="../qunit/testsuite.css"> <script src="../myApp/js/AIRAliases.js" type="text/javascript"></script> <script src="../myApp/js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../qunit/testrunner.js" type="text/javascript"></script> <script src="../myApp/js/myApp.js"></script> <script src="tests.js" type="text/javascript"></script> </head> <body> <h2 id="banner"></h2> <h2 id="userAgent"></h2> <ol id="tests"></ol> <div id="main"></div> </body> </html>
Running the test suite in debug mode
The easiest way to run the test suite is to use the built-in Adobe Debugger, which lets you test your app without having to build it into an AIR package:
adl myAppTests/myAppTests-app.xml .
Don’t forget the ‘.’ character on the end – this tells the debugger to run with the top-level directory as the working directory – without it, the default is the same directory as XML file.
