What the JavaScript Unit Testing book covers?

The JavaScript Unit Testing book is a comprehensive practical guide that illustrates in details how to efficiently perform and automate JavaScript testing for web applications using the most popular JavaScript unit testing frameworks.

The book starts by explaining the concept of JavaScript unit testing and by exploring the bits of an interactive Ajax web application. Throughout the book chapters, the JavaScript part of the web application is tested using popular JavaScript unit testing frameworks (Jasmine, YUITest, QUnit, and JsTestDriver). The book illustrates how to generate JavaScript test reports, how to automate running the tests in the build and the continuous integration environments, and how to make all of the mentioned JavaScript unit testing frameworks work together in order to test the web applications in the most efficient way.

After reading this book, you will learn everything you need to know in order to make efficient JavaScript tests for the web applications. You will learn how to generate test and code coverage reports, how to automate running the JavaScript tests, and the bits of the JavaScript testing by following the book practical hands-on detailed examples.

You can order the book from: http://www.amazon.com/dp/1782160620/.

Finally, I would like to thank all of the persons that worked with me in order to produce this book (Acquisition Editor, Commissioning Editors, Technical Editors, Copy Editors, Project Coordinator, Proofreaders, Graphics Designers, Production Coordinator) and certainly the technical reviewer of this book Allan Lykke Christensen.

java.lang.RuntimeException: Oh Snap! No server defined!

You may face this problem when you try to run the JsTestDriver (JSTD) tests. The reason behind this error is that JsTestDriver is unable to find the configuration file that declares the server directive. In order to solve this error, you need to specify the configuration file path using the --config parameter in the test running command as follows:

java -jar JsTestDriver.jar --config jsTestDriver.conf --tests all

“Efficient JavaScript unit testing” video session in CONFESS 2012

This video provides a presentation about how to make efficient JavaScript unit testing. I presented it in the CON-FESS 2012 international conference which was held in Leogang, Austria. I wish it can be useful.

See the presentation with the slides on Parleys.com

See the presentation with the slides on Parleys.com

and I included below the presentation:

“Efficient JavaScript unit testing” presentation in CONFESS 2012

I just got back from the International technical conference CONFESS 2012 which was held in Leogang, Austria. The conference was very cool, the hotel and the city were fantastic, the quality of the sessions and the speakers were great.

Now, I got finally some free time to share with you my presentation about my efficient JavaScript unit testing. I hope it will be useful for you. Once I get the video session, I will definitely share it with you as well.

Have a nice time.

JsTestDriver integration with Hudson


JsTestDriver is one of the most efficient JavaScript unit testing tools. Integrating JsTestDriver with continuous integration tools is a mandatory step for ensuring the web application quality. In this article, I will illustrate how this sort of integration can be done between JsTestDriver and Hudson.

Installing Hudson

To install Hudson on your machine, you need to download it from http://hudson-ci.org/.

Run the following command to start Hudson:

java -jar hudson-2.2.0.war

You can start launching Hudson by typing the following address in your browser:


You should now be redirected to the Hudson home page.

Creating Hudson Job

First of all, you need to create a new Job in Hudson. You can do this by clicking on “New Job” and entering the Job name and selecting “Build a free-style software project” as shown in the figure below:

Configuring JsTestDriver with Hudson

Click the “Configure” link of the project. In the configuration page, enter the project description. In order to run the job periodically, you need to configure the “Build Triggers”. Check the “Build periodically” option and enter the cron-like expression. To run the job every 5 mins past the hour (for example), enter the following expression 5 * * * * as shown below in the figure:

In order to execute the JsTestDriver test command, you need to configure the “Build” section. There are many ways to do so, you can either add “Execute Shell”, “Invoke Ant or Maven2 or Maven3”, or “Execute Windows Batch command”. The latter case can be used when you are working on Windows environment. For the case of this example, I use the “Execute Windows Batch command” option and specify the path of the batch file as shown in the screenshot below:

The batch file has the following content:

java -jar JsTestDriver-1.3.4.b.jar 
      --config jsTestDriver.conf 
      --tests all 
      --testOutput c:/outputFolder 

For the matter of simplicity, I assume that the JsTestDriver server is already started and some browsers are already captured. This step is not included in this post, however, This step also can be automated if required.

Testing the integration of JsTestDriver with Hudson

In order to test the integration of JsTestDriver with Hudson, this can be done by manually or automatically (as indicated in the “Build periodically” option). To test the integration manually, click on the “Build Now” link as shown in the screenshot below:

Click the “console output” link to check the output of the results:

setting runnermode QUIET
Firefox: Reset
Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (3.00 ms)
  Firefox 12.0 Windows: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (3.00 ms)


You may face this error while trying to run a new Job:

hudson java.io.IOException: Cannot run program "sh"

In order to fix this error, check this post:

More Information about JsTestDriver

Efficient JavaScript unit testing

Generating Test Reports using JsTestDriver

Running Jasmine on the top of the JsTestDriver test runner

Converting the JsTestDriver coverage files to HTML Reports

In this post, I will show you the detailed steps that are required to convert the JsTestDriver LCOV coverage files to HTML reports. Before reading this post, I recommend you to read this post first “Generating Test Reports using JsTestDriver“.

First of all, you need to download the LCOV visualizer from: http://ltp.sourceforge.net/coverage/lcov.php.

Then install the downloaded rpm file in your Linux Redhat environment using the following command line:

rpm -i lcov-1.9-1.noarch.rpm

To check that the tool is installed correctly, run the genhtml command, you should see the following output:

After that you can start running the HTML report generation command:

genhtml jsTestDriver.conf-coverage.dat

Note that you have to make sure that the paths of the JavaScript source files are correct in the jsTestDriver.conf-coverage.dat file, otherwise you will face the genhtml: ERROR: cannot create directory !

You should see the LCOV visualizer tool is generating the testing report as indicated in the screenshot below:

After the successful generation of the HTML report, click the index.html file in the parent folder to see the HTML report:

As shown in the previous screenshot, the report covers the three main code coverage criteria:
1. Line coverage (statement coverage) which represents the percentage of the source code statements that are tested.
2. Function coverage which represents the percentage of the functions that are tested.
3. Branch coverage which represents the percentage of code branches that are tested.

I attached here the test report files for your reference.

Resolution of genhtml: ERROR: cannot create directory !

When using the LCOV Visualizer tool to generate the HTML reports from the JsTestDriver lcov coverage (.dat) file (usually jsTestDriver.conf-coverage.dat) using the genhtml command:

genhtml jsTestDriver.conf-coverage.dat

You may find the following error:

mkdir: cannot create directory `': No such file or directory
genhtml: ERROR: cannot create directory !

This error happens because the paths of the JavaScript files are not correct in the (.dat) file. To fix this error, open the (.dat) file, you will find its content as follows:


Then edit the SF: values with the correct paths of the JavaScript source (and testing) files and execute the genhtml command again to generate the HTML testing report.

Running Jasmine on the top of the JsTestDriver test runner

In the previous post, I give you a kickstart about the Jasmine JavaScript unit testing framework. In this post, I will show you how to integrate the Jasmine framework with the JsTestDriver. You will combine the best of them, the power of Jasmine pretty syntax and the power of JSTD test runner.

The JsTestDriver is not only a JavaScript unit testing framework but it is also a test runner that can host other JavaScript unit testing frameworks through adapters. The JsTestDriver can host the following JS unit testing frameworks and more:
1. QUnit.
2. Jasmine.
3. YUI UI Test.

First of all to be able to run Jasmine on the top of the JsTestDriver runner, you need to download the Jasmine JSTD adapter from here: https://github.com/ibolmo/jasmine-jstd-adapter.

In order to run Jasmine test suites on the top of JSTD test runner, you need to load the adapter and the source files before the test files as follows in the jsTestDriver.conf file:

server: http://localhost:9876

  - jasmine/lib/jasmine-1.1.0/jasmine.js
  - jasmine/lib/adapter/JasmineAdapter.js  
  - js-src/Basics.js
  - js-test/BasicsSpec.js 

After that you can start the JSTD server, and then run the test cases as usual. I attached below the screenshot of the Jasmine tests on the top of the JSTD test runner.
jstd jasmine screenshot

I attached here the project source for your reference.

“Ajax Status Zero” Resolution

“Ajax status is zero” is one of the hardest errors to debug especially when the Ajax readyState is 4. If we looked at the XMLHTTPRequest documentation, we will find that the readyState attribute can have one of the following values:

  • 0 “The object has been constructed.”
  • 1 “The open() method has been successfully invoked. During this state request headers can be set using setRequestHeader() and the request can be made using the send() method.”
  • 2 “All redirects (if any) have been followed and all HTTP headers of the final response have been received. Several response members of the object are now available.”
  • 3 “The response entity body is being received.”
  • 4 “The data transfer has been completed.”

This means that although the data transfer is completed, the status is not OK (not 200).

After some hours of investigation, I found that the XHR (XMLHTTPRequest) zero status means that there is a permission problem of the Ajax request. In other words, the Ajax request is trying to access a domain that the request is not authorized to access.

The actual problem was that my JavaScript JsTestDriver asynchronous test case was running on the JsTestDriver server which is using a different port other than the one that is used by the application server which hosts the Ajax servlet.

The other interesting point to mention is that I only faced this issue on Firefox 10 while in Internet Explorer 8, the Ajax request worked without any problems.

To solve this problem, I authorized the Ajax request that comes from the JsTestDriver server to access the application server by setting the "Access-Control-Allow-Origin" header from my servlet as follows.

response.setHeader("Access-Control-Allow-Origin", "");

The "" is the JsTestDriver server address from which the Ajax request is constructed and sent to the application server.

After making this workaround the scenario worked fine on all the browsers, I wish that this tip can be helpful for you.

Generating Test Reports using JsTestDriver

JsTestDriver is one of the most powerful JavaScript unit testing tools. I wrote an article in developerWorks about efficient JavaScript unit testing using JsTestDriver, please read first it before reading this post.

In this post, I will show you how to generate test coverage reports using the JsTestDriver. First of all, Let’s understand what is meant by “Test Coverage”. “Test Coverage” is one of the measures of software testing. It describes how much the source code of the program is tested.

The coverage criteria can be on the function level (Function coverage), on the statement level (Statement coverage), and on the code branch level (Branch coverage).

JsTestDriver has a plugin that can generate code coverage for the JavaScript code. To configure this plugin, you should:

  • Download the “coverage.jar” from http://code.google.com/p/js-test-driver/downloads/list
  • Add the coverage plugin declaration to the configuration file (jsTestDriver.conf file) as follows:

    - name: "coverage" 
      jar: "plugins/coverage.jar" 
      module: "com.google.jstestdriver.coverage.CoverageModule"
  • Specify the --testOutput [output_folder] flag in the test running command. This will get the test coverage files in the output_folder you specified.

Currently, The JsTestDriver generates the test coverage files in LCOV format. Unfortunately, JsTestDriver does not generate HTML reports directly as shown in the figure below.
Genarated LCOV files

To generate the HTML reports from the LCOV files, you can use the LCOV visualizer, check it here: http://ltp.sourceforge.net/coverage/lcov.php.

The LCOV visualizer tool is working on Linux Redhat environment. To generate the report from the tool, execute this command on the jsTestDriver.conf-coverage.dat file:

genhtml jsTestDriver.conf-coverage.dat

For more information about how to install the LCOV visualizer on Linux Redhat environment, and converting the LCOV files to HTML reports:

Finally for your reference, You can download the project from here, and the LCOV test coverage files from here.

I wish that this tip can be useful.