Thursday, February 3, 2011

TDD with jsTestDriver - find image size with Java Script

In my last post I created small java script function that finds the size of image by URL. I used YUI 3 test framework for doing unit tests while I worked on that function.

Because YUI 3 test framework is in-browser framework we are facing the challenge how to automate our unit tests and how to apply TDD with automated continuous build and automated continuous integration. As we have to manually re-run tests it is a challenge to keep testing our java script on several web browsers on different platforms.

jsTestDriver is automation tool for unit testing for java script. It is a server written in Java. From several several browsers you open URL hosted on the jsTestDriver server. The jsTestDriver can then automatically re-run the unit tests whenever they are some changes in the source code and thereof shows if the unit tests failed or passed on the currently connected web browsers. That way you can test as many as you like combinations of browsers and platforms in an automated way.

I'll be working on Linux for the examples, but the jsTestDriver works on Windows too. Also, it is always a good idea to develop your java script libraries outside your web projects and ideally to use in your web projects already tested, optimized and minified java script file.

The installation of jsTestDriver is very simple. Download the jar file from the project's web site:

Just copy the jar file on directory where it is convenient for you. Here is a snipped from my directory structure:

ahristov@medion:~/Desktop/Projects/js/bin$ ls
compiler.jar  JsTestDriver-1.2.2.jar  SoyToJsSrcCompiler.jar

You should export environment variable $JSTESTDRIVER_HOME (%JSTESTDRIVER_HOME% on Windows, go to My Computer -> Properties -> System -> Advanced and change the Environment Variables to make the changes permanent).

ahristov@medion:~/Desktop/Projects/js/bin$ cat ~/.bashrc | tail -n 7

export PATH=".:$HOME/bin:$PATH:/var/lib/gems/1.9.1/bin"
export JSBIN="$HOME/Desktop/Projects/js/bin"

The directory structure for our small project looks like this:

ahristov@medion:~/Desktop/Projects/js/proj/play$ ls
build  deps  jsTestDriver.conf  src  test

As I mentioned in my last post build you can ignore, I normally have build directory where I would generate minified, tested java script - the stuff that I'll be using in my web project. We don't need the deps folder this time, as we will not have any dependencies on 3rd party java script.

The file jsTestDriver.conf is a configuration file for the jsTestDriver with the following content:

ahristov@medion:~/Desktop/Projects/js/proj/play$ cat jsTestDriver.conf
server: http://localhost:4224

- src/*.js
- test/*.js

It states, we'll run the jsTestDriver on port 4224, the server will load all the java script files from directories src and test. All the load paths are relative to the directory where the jsTestDriver.conf file is. Please note that the order the directories and file names are important. In our case the jsTestDriver will first load the source code java script files, then the unit test java script files. More information for the jsTestDriver configuration file you can find on the projects wiki page:

src - this directory holds just one java script file in which is the source code of function ImgSize()

ahristov@medion:~/Desktop/Projects/js/proj/play$ cat src/ImgSize.js
* Calculate the size of image.
* @param {string} url Url of the image which size to find
* @param {function(number, number)} onSizeCalculated Callback function to run once
*   the size of the image calculated
function ImgSize(url, onSizeCalculated) {

// Once the image is loaded, the calls the callback function onSizeCalculated
function setDimensions() {
// scope changed: this = Image object
if (onSizeCalculated) {
onSizeCalculated(this.width, this.height);

// Initialization:
// - sets callback on image loaded - setDimensions;
// - loads the image.
function init() {
var img = new Image(); = url;
img.onload = setDimensions;
img.src = url;

// Run initialization

This is the same function that we developed and tested with the YUI 3 test framework in my last post.

test is the directory where the java script files with the unit tests are

ahristov@medion:~/Desktop/Projects/js/proj/play$ ls test/
ImgSize  ImgSize.html  ImgSize-test.js
ahristov@medion:~/Desktop/Projects/js/proj/play$ ls test/ImgSize

File ImgSize.html is from my last post, you can ignore it for now. The file 137x38.gif is an image with the size 137px / 38px which I'll use for the purpose of the unit testing.

If we were about to test synchronous java script we would use the traditional TestCase runner. Our ImgSize-test.js would look like:

// holds tests for the ImgSize() function
TestCase("ImgSizeTest", {
"test image size should be 137x38": function() {
new ImgSize('',
function assertOnSizeCalculated(width, height) {
assertEquals(137, width);
assertEquals( 38, height);

How that we are going to test asynchronous calls we should use the AsyncTestCase runner, so that our ImgSize-test.js contains:

var ImgSizeTest = AsyncTestCase('ImgSizeTest');

ImgSizeTest.prototype.testImgSizeFunction = function(queue) {


var onSizeCalculated = queue.add(function() {
assertEquals(137, arguments[0][0]);
assertEquals( 38, arguments[0][1]);

new ImgSize('',

The queue parameter accepts inline function via method add(), the function will run whenever the browser downloaded the image and calculated the size of the image.

As you can see, the image file should be accessible from URL from the testing browsers, so I just put the gif image on web server on the following URL above. Keep in mind, you have to adjust that the way you need it.

The syntax is very similar to YUI 3 test and even simpler. Whenever the browser loaded the image, we are going to check if the ImgSize() function gets the proper image size information. Please note that we are not dealing with DOM and UI. If you want to test DOM operations you can add HTML to the unit test files, for more information check the wiki pages of the jsTestDriver project:

The page containing documentation for asynchronous unit tests with jsTestDriver is:

How it is time to start the jsTestDriver server:

ahristov@medion:~$ java -jar $JSTESTDRIVER_HOME/JsTestDriver-1.2.2.jar --port 4224

Next step is to open the URL where the jsTestDriver server is listening:

Enter the URL to the server in the web browser and click in "Capture This Browser"

This browser started waiting for automation from the server to run unit tests. Let's add another browser to the testing:

Clicking on "Capture This Browser":

Connect several web browsers to the jsTestDriver server.

As we are ready to start our unit tests, we have to first run the jsTestDriver server. From the directory where the configuration file jsTestDriver.conf is we run:

ahristov@medion:~/Desktop/Projects/js/proj/play$ java -jar $JSTESTDRIVER_HOME/JsTestDriver-1.2.2.jar --tests all

Which gets the following output:

The test passed on 3 different browsers.

Now, how to repeat the tests automatically whenever the source code of our java script changed?

If you have Ruby installed on your system, you can install the jstdutil package:

gem install jstdutil

It provides a wrapper to jsTestDriver so instead of writing every time this long command lines on the shell, you just - from the directory where the jsTestDriver.conf file is run:

ahristov@medion:~/Desktop/Projects/js/proj/play$ jsautotest

Every time we do changes on our java script source code the jsTestDriver will automatically start doing the unit tests and then will report the result:

Let's change the test, make the test fail, change the following line:

assertEquals( 38, arguments[0][1]);


assertEquals( 39, arguments[0][1]);

as the jsautotest is running. At the moment we save the javascript file, jsautotest automatically re-runs the tests sending the appropriate command to the jsTestDriver server and all currently captured browsers start running the tests. We get error in our tests and the jsautotest console explains this with output similar to:

Changing the assert back from 39 to 38 in the ImgSize-test.js makes jsautotest again to re-run the tests on the jsTestDr4iver server, and this time they successfully pass.

The jsTestDriver project has the following URL:

The home page of the jstdutil Ruby package:

Atanas Hristov

kick it on
Shout it


  1. Hi Atanas ,
    I have a query , can we make use of jstestdriver to load the HTML page , because what I am trying to achieve is the load teh swf file that has the test cases and the result from the swf file is returned in the form of an xml.So was thinking if i can integrate the swf results with the jstestdriver either by calling the html page which will load the swf files or directly by calling it from the jstestdriver.

  2. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    Vee Eee Technologies| Vee Eee Technologies|

  3. Thanks for sharing your info. I really appreciate your efforts.
    mysql services

  4. Excellent post. It makes me realize the energy of words and pictures. I learn a lot, thank you! Please Visit Our Webpage:
    We are expert in Handling, Movers Packers in PUNE and Packing & Shifting of Household Goods, Office goods, Commercial Equipment and Car, Logistics and Transportation.

  5. I really enjoyed reading your blog, you have lots of great content.Please visit here:
    We are expert in Handling, Movers Packers in Ahmedabad and Packing & Shifting of Household Goods, Office goods, Commercial Equipment and Car, Logistics and Transportation.

  6. I really enjoyed while reading your bog thanks for all the great efforts you made.
    Please visit this webpage i assure you that it will be very useful for you-

  7. Packers and Movers Delhi
    Packers And Movers in Delhi appear and recommends you the select foundation of picking a constantly solid packers and movers in Delhi or any place in INDIA. We have an upgraded database of authorized asserted pressing and moving organizations all over INDIA. On recognizing among all discriminating information about your exchanging – like date of exchanging, method of exchanging, a pre-exchange study, supply and arrangement bundling materials for moving, Movers And Packers Delhi look for mixed bag of packers and movers according to your necessity, who are pre-screened prepared individuals and affirm to satisfy every one of your requests progressively at amazingly moderate cost

  8. Local Packers And Movers Kolkata list up the leading #packers and #Movers Company for you to choose best among reputed companies in moving industry. They offer Packers And Movers services Kolkata at your doorstep helping you with shifting #household items, #office relocation, furniture, machinery and equipment, industrial goods, etc. Besides shipping of household goods, Packers And Movers in Kolkata provide modern facilities like warehouse shifting. Our experienced and skilled professional labors are trained to expertise the shifting process without any disturbance and inconvenience to the customer. So as to make their shifting hassle free.
    Packers and Movers Kolkata

  9. Thanks for sharing useful information for us.I really enjoyed reading your blog, you have lots of great content.Please visit here:
    Gurgaon Packers And Movers is recognized as a business manager providing wide-ranging and differentiate service appearance as well as Relocation Shifting, Logistics and Transportation, Facilities managing, strategy & Designing services.thanks a lot for all your efforts...
    Packers And Movers Gurgaon

  10. PACKERS AND MOVERS IN BANGALORE know the estimation of your money and along these lines MOVERS AND PACKERS BANGALORE give you the alternatives of the sensible, sensible and useful organization suppliers so you can go for them as per your needs, prerequisites and their deeds. You can now successfully consider the cost of your development through the diverse quotes gave by the clearing associations recorded with us.
    Packers And Movers Bangalore

  11. really a vry nice blog i really appreciate all your efforts ,thank you so mch for sharing this valuable information with all of us.
    Packers and movers Hyderabad touch base at most elevated amount by virtue of our movement in our organizations. #Movers #Packers #Hyderabad get routinely overhauled with the new transportation vehicles and pressing materials available in business.

  12. I really enjoyed reading your blog, you have lots of great content.Please visit here:
    In loading and unloading is done carefully by experienced workers. In addition, #PackersMovers unpacks the delivery at the target, very efficiently & with maximum care.

  13. Packers And Movers Chandigarh
    I admire the valuable advice you make available in your expertly written content. I want to thank you for this informative read; I really appreciate sharing this great.

  14. Packers And Movers Mumbai
    This is a very good post which I really enjoy reading. It is not every day that I have the possibility to see something like this

  15. I really enjoyed reading your blog, you have lots of great content.Please visit here:

    Packers And Movers Patna

    based company provided that Movers And Packers Patna Services for Office, Home, Local or domestic and commercial purposes.

  16. Packers And Movers Bangalore
    Excellent post! I must thank you for this informative read. I hope you will post again soon.
    Please Visit Our Webpage:

  17. I admire the valuable advice you make available in your expertly written content. I want to thank you for this informative read; I really appreciate sharing this great.Packers And Movers Bhopal

  18. "Enjoyed every bit of your blog article.Really looking forward to read more. Really Cool."
    Packers And Movers Bai Indore
    Packers And Movers Ajnod Indore

  19. Quickbooks Customer Care tech Support- Get 24x7 complete QuickBooks Support from QuickBooks Technical Support team. Contact QuickBooks Support Number 1-888-396-0208 for immediate solution. Get in Touch with us.

  20. QuickBooks Payroll clients require online help or looking for technical support help can get the one-stop arrangement appropriate here according to their altered needs and reasonableness. QuickBooks Payroll running at little undertakings, medium endeavors, and other enormous associations can get QuickBooks Payroll Support benefit here for various issues influencing the center usefulness and execution of the QuickBooks programming.

  21. Have you been looking for the QuickBooks Support number ? Well you have reached the right place. Many business owners, accountant, CA, CPAs use QuickBooks Full Service Support to get set up, calculate taxes and pay employees. But unfortunately, they do get various kinds of issues, errors for which they want to contact QuickBooks Support Phone Number Support . Give us a call on ++1800-291-2485.Dial our number right now to get a 10% discount as well.

  22. In Today’s World the Quickbooks Tech Has Got a Very Significant Role. Because Most Of The Users Are Not Able To Resolve Intuit Related Issues On Their Own. Thus They Prefer To Hire Online Quickbook Tech Support Phone Number 1888-396-0208 And The Expert Technicians Who Provides Instant And Affordable Solutions Related To Quickbooks Issues. Pick your phone and dial our toll free number anytime, We are here to help you 24/7.

  23. The professional's present, they will give well ordered support to you, identified with your QuickBooks, Like, Downloading, Upgrading, Setting up Different QB Files over the system in the multi-client approach. As you connect with the QuickBooks Support Phone Number 1888-396-0208, they influence sure to offer world-class to support to you. The introduction of QuickBooks is upgraded numerous folds with their help to your bugs.

  24. QuickBooks enterprise arrangement is the propel specialized programming. This product is exceptionally valuable for Accounting reason and client effortlessly utilized it and influence your work to wind up simple. Quickbooks Enterprise Support Number 1800-291-2485.

  25. You don't require a super PC to work Quickbooks POS Support 1800-291-2485. It's definitely not hard to setup and can be presented on your PC or workstation. You don't have to encounter the bother of outlining the item application, as most of the features are presently pre-masterminded. Thusly, you can use the item out of the container!