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.

dojo updates

You gotta give the dojo guys credit. Thanks to @uhop for following up on my previous blog post. Even though my bug was pretty edge case, its great to see the dojo community going the extra mile to fix it. Its small things like this which make all the difference.

On another dojo related note, I attended the DDD at AOL in Mountain View on Thursday. Always good times hanging out with the dojo crew. Some really cool stuff in the pipeline too. It was great to get some samples of the dojo/django collaboration happening with Tobias and Mike's drawing samples were really cool too - I didn't know stuff like that was possible in the browser. Looking forward to dojo 1.4 already. Rob Christiansen from Adobe AIR popped in too - sounds like there's a lot in the pipeline for AIR 2.0. Maybe the dair dojo project will get rejuvenated with the arrival of AIR 2.0 and dojo 1.4

dojo drag and drop in AIR

Looking at common.js in the dojo.dnd package, I see this nice utility function:

Paste your text here.dojo.dnd._isMac = navigator.appVersion.indexOf("Macintosh") >= 0;
dojo.dnd._copyKey = dojo.dnd._isMac ? "metaKey" : "ctrlKey";

dojo.dnd.getCopyKeyState = function(e) {
 // summary: abstracts away the difference between selection on Mac and PC,
 // and returns the state of the "copy" key to be pressed.
 // e: Event: mouse event
 return e[dojo.dnd._copyKey]; // Boolean
};

However, this doesn't seem to work in AIR (only tested running on mac so far).

Switching the code to look like:

dojo.dnd._isMac = navigator.appVersion.indexOf("Macintosh") >= 0;
dojo.dnd._isAir = navigator.appVersion.indexOf("AdobeAIR") >= 0;
dojo.dnd._copyKey = dojo.dnd._isMac && !dojo.dnd._isAir ? "metaKey" : "ctrlKey";

seems to do the trick

Migrating to dojo 1.3

Recently enough I just pushed some software which included an upgrade to dojo 1.3. Prior to this, I was using dojo 1.0.2, so this migration to the latest version of dojo represented around 2 years of work from the dojo guys.

Having previously migrated from dojo 0.4.3 to a dev build of dojo 0.9 to dojo 1.0.2, I've had my fair share of experience with dojo upgrades. Having previously worked on framework code in a prior job, I'm always ready to try out the latest a greatest versions of frameworks. My main reasons behind the migration to dojo 1.3 were:

1. Official support for Chrome and IE 8.

2. Speed speed speed. I'm not sure what the numbers are like in taskspeed for dojo 1.0.2, but the 1.3 numbers stack up pretty well against some of the major JS toolkit vendors on the market at the moment.

3. I wanted to start exploring some of the new APIs available in dojo 1.3 such as dojo.data, BusyButton, dojo.place and dojo.create

4. Start exploring the dair extensions for integration between dojo and Adobe AIR.

5. Testing. One of the areas where the application I work on is definitely deficient is automated testing. I wanted to start looking into DOH and the dojo robot.

So, I had plenty of reasons to migrate and the move couldn't have gone easier. I honestly only got stung once where once of my custom widgets had a member variable called _created which stepped on the _created member variable in dijit._Widget. The vast majority of headaches were more related to svn and importing the 1.3 version of dojo into my repository than actually migrating my code to use the new dojo APIs. Kudos to the dojo dev team for keeping such a clean and consistent API.

Already looking forward to the 1.4 version of dojo ...

Running Wireshark on MAC OSX

If I have to open Wireshark at all, I know I'm in trouble. Its a fantastic tool, but as a web developer, I default to Firebug. I've only ever really needed Wireshark for debugging IE network issues.

I've been taking a look at Adobe AIR recently which has a very similar Firebug like console called AIRIntrospector. However, when attempting to execute Jsonp requests in Adobe AIR, my timeout callbacks were being invoked and the requests weren't showing up in the "XHR" tab in AIRIntrospector. This was despite the fact that I could see the apache logs filling up with requests on the API server I was trying to hit.

So, I tried firing up Wireshark to listen and inspect the response from the API server only to be greeted with:


The capture session could not be initiated ((no devices found) /dev/bpf0: Permission denied).


After a few quick Googles, I found this helpful post. Apparently, you need to start Wireshark as root. So,


$cd /Applications/Wireshark.app/Contents/MacOS
$sudo ./Wireshark


After that quick sudo, I could listen for API responses without needing to rely on the AIRIntrospector.