Recently I had to write some JavaScript for a project and needed a way to test it. My first thought was to have a sample page that uses the JavaScript functions and objects I was creating, and in fact I did create this page. It was a good way for me to determine how I wanted my API and it also provided instant feedback. However, it was manual and it was cumbersome to express my expected outcomes from the API calls. I did a little searching and found that there are a number of Unit Testing frameworks for JavaScript out there in the wild. I personally decided upon JSTestDriver on http://code.google.com . JSTestDriver's API is very similar to JUnit which I am familiar with and also allows me to drive multiple browsers at the same time. I won't go thru all the details of how I got this to work, but I will include a few code snippets. Here is the basic process.

  1. Create your project
  2. Download JSTestDriver
  3. Write your JavaScript
  4. Write your Unit Test - you can do this first but i find it helpful to get the test framework running by creating a test after i have a rudimentary class. THEN i start adding tests to the unit test that force me to implement the functionality in my JavaScript.
  5. Create the jsTestDriver.conf File
  6. Locate your browser executables on your machine
  7. Create your run.bat or run.sh file
  8. Run your tests


    9. Create your project

    For the sake of this example I use the following project layout- 
    proj
  /src/main/webapp/jook/eqp
  /src/test/webapp/jook/eqp - I almost always package tests in the same package as the code itself
  /lib


    Download JSTestDriver

    Download JSTestDriver.jar here and add it to the lib/ folder.

    Write your JavaScript



    Write your Unit Test



    Create the jsTestDriver.conf File

    <project_root>/jsTestDriver.conf 
    server: http://localhost:9876

load:
  - src/main/webapp/jook/eqp/*.js
  - src/test/webapp/jook/eqp/*.js


    Locate your browser executables on your machine

    * C:\Program Files (x86)\Mozilla Firefox\firefox.exe * c:\Program Files\Internet Explorer\iexplore.exe * c:\users\zzzzzz\AppData\Local\Google\Chrome\Application\chrome.exe

    Create your run.bat or run.sh file

    This really just is for convenience, but after running it several times I found it easier to run a simple batch script. run_tests.bat 
    java -jar lib\JsTestDriver-1.3.2.jar --port 9876 --browser "C:\Program Files (x86)\Mozilla Firefox\firefox.exe,c:\Program Files\Internet Explorer\iexplore.exe,c:\users\zzzzzz\AppData\Local\Google\Chrome\Application\chrome.exe" --tests all --testOutput target\test


    Run your tests

    Example Output 
    C:\Users\sdtxs01\workspaces\junk\railinc-equipment-js>run_tests_oneshot.bat

C:\Users\sdtxs01\workspaces\junk\railinc-equipment-js>java -jar lib\JsTestDriver-1.3.2.jar --port 9876 --browser "C:\Pro
gram Files (x86)\Mozilla Firefox\firefox.exe,c:\Program Files\Internet Explorer\iexplore.exe,c:\users\sdtxs01\AppData\Lo
cal\Google\Chrome\Application\chrome.exe" --tests all --testOutput target\test
Chrome: Runner reset.
................................Microsoft Internet Explorer: Runner reset.
...........Firefox: Runner reset.
...........................
..........................
Total 96 tests (Passed: 96; Fails: 0; Errors: 0) (55.00 ms)
  Microsoft Internet Explorer 8.0 Windows: Run 32 tests (Passed: 32; Fails: 0; Errors 0) (55.00 ms)
  Chrome 12.0.742.122 Windows: Run 32 tests (Passed: 32; Fails: 0; Errors 0) (41.00 ms)
  Firefox 5.0 Windows: Run 32 tests (Passed: 32; Fails: 0; Errors 0) (28.00 ms)

C:\Users\sdtxs01\workspaces\junk\railinc-equipment-js>
    That's really it. JSTestDriver has plugins for code coverage and has facilities for injecting HTML test fixtures into your tests so that you can write unit tests that manipulate the DOM. Note - The output files are Junit output compatible so they could be collected by the build process and reported on within Hudson.