AJAX and Unit Testing - it's time to mingle
February 13, 2006
I've decided to write a little two part introduction into unit testing your AJAX applications with JSUnit. AJAX applications now are adding a new complexity into our development lives. Introducing business logic into our presentation tier. It is now not enough to write some adhoc javascript form validation functions that work most of the time. You now need to take accountability for your javascript code as it can affect your business logic on the server side.
As briefly as I can describe it unit testing gives a developer freedom. "Freedom?? but I have to write more code how the hell is that free?". Unit testing can free you as a developer by making sure your code is accounted for with automated tests. If you're in a multi-developer environment this is crucial to the success and bug management of your project. Imagine you spend weeks writing this great class library, all the code is pretty, well documented, works great! Now Kevin comes in a decides he wants to change the functionality of one of your methods to match something he's working on. His code now works but that change just broke 10 other areas where it was being used. F'ing Kevin! You will never catch this unless you're monitoring every change list that developers submit, or you have an automated testing harness that will run the code nightly (at least) and report failures. If you had a properly tested library, this would have been caught after Kevin ran the unit test suite and realized that code he change did have a purpose and he could look at the test and now see what the purpose was. That my friend is the power of the unit test.
Ok so with that out of the way let's talk about how to harness your new great AJAX code!
First thing you're going to need is a unit test suite for javascript. The current gold standard is JSUnit (http://www.edwardh.com/jsunit/). JSUnit allows you to write html pages with javascript assertions built in. Download the latest JSUnit package to your hard-drive and you'll notice in there it will unzip itself to a jsunit/ directory. The main thing you will be concerned is the jsUnitCore.js file in the jsunit/app directory. That's the file that makes the magic happen. You will need to include this in your testing scripts. The other file of note is jsunit/testRunner.html file. This will be the main test runner page that you will use to view the status of your tests. Mmmmm the Green bar!
Lets take a look at this image to give us an overview of how we want our testing structure setup to start with.
What this relationship shows is that we have our main testRunner.html page which we'll access through the browser. If you take a look at this UI shot of the testRunner interface, you'll notice a UI text box to put in a test script.
This test script can be a single page or a "suite" of pages. The nice part about the suite is you can have suites of suites. What this means is let's say you have an inventory module you are working on. You also have an order entry module you just finished. The inventory modules has 2 javascript classes in 2 files, so you created two test scripts so far. You can roll those into what's called a "suite" so you only have to run one page to actually run both sets of tests. You could also have a "TOTAL PACKAGE" suite that runs all your modules. Sometimes though you might just want to test a module you're working on for speed's sake.
Lets jump into our first script just to make sure we're up and running. This will just cover getting us up and running. I will post another write up on how to actually test your ajax application.
Environment setup:
Let's assume we downloaded jsunit to our root directory so our web structure looks like this:
Htdocs/jsunit/
First things first. Let's make sure everything unpackaged correctly and go to: http://localhost/jsunit/testRunner.html
(if you installed to a different location, point your browser to the appropriate place. Unix servers must also take note of the capital R in testRunner.html)
You should now be looking at the same UI screen that I've shown at the beginning of this page.
Now let's write our first script in the TDD (test driven development) fashion where tests come before code. We just want to make sure we're working properly so here we go.
Step 1:
Create a file called testOfJSUnit.htm
So all we're trying to do is assert that 1 does in fact equal 1 which will give us a passing score. We just want to make sure we're all setup properly. So now we have a bonafide JSUnit test script. Here's what we did:
You'll notice at the top this line
That's the meat and potatoes. We want to include the core library for JSUnit so we have access to all the assert methods.
The function above is a test function. Anything that begins with "test" gets run in JSUnit. We're using the function assertEquals which takes 3 arguments. The args are: a comment to show if the test fails, the condition to match and a condition to test. So we're testing that 1 is equal to 1.
Now go back to your browser and make sure you're at http://localhost/jsunit/testRunner.html
You'll see that text input where it says: "Enter the filename of the Test Page to be run:" In there type in the path to the file you created, so for me I would type in:
"localhost/Projects/test/testOfJSUnit.htm". Notice they already add the http:// for you. Click the run button and you should see a green bar for a passing test like this below:
If you see the green bar congrats! You have successfully installed JSUnit. This week I'll be doing a write up on how to test some common ajax functionality as well as setting up a test suite to run all our tests. If you didn’t get JSUnit installed correctly visit their mailing list here: http://groups.yahoo.com/group/jsunit/
As briefly as I can describe it unit testing gives a developer freedom. "Freedom?? but I have to write more code how the hell is that free?". Unit testing can free you as a developer by making sure your code is accounted for with automated tests. If you're in a multi-developer environment this is crucial to the success and bug management of your project. Imagine you spend weeks writing this great class library, all the code is pretty, well documented, works great! Now Kevin comes in a decides he wants to change the functionality of one of your methods to match something he's working on. His code now works but that change just broke 10 other areas where it was being used. F'ing Kevin! You will never catch this unless you're monitoring every change list that developers submit, or you have an automated testing harness that will run the code nightly (at least) and report failures. If you had a properly tested library, this would have been caught after Kevin ran the unit test suite and realized that code he change did have a purpose and he could look at the test and now see what the purpose was. That my friend is the power of the unit test.
Ok so with that out of the way let's talk about how to harness your new great AJAX code!
First thing you're going to need is a unit test suite for javascript. The current gold standard is JSUnit (http://www.edwardh.com/jsunit/). JSUnit allows you to write html pages with javascript assertions built in. Download the latest JSUnit package to your hard-drive and you'll notice in there it will unzip itself to a jsunit/ directory. The main thing you will be concerned is the jsUnitCore.js file in the jsunit/app directory. That's the file that makes the magic happen. You will need to include this in your testing scripts. The other file of note is jsunit/testRunner.html file. This will be the main test runner page that you will use to view the status of your tests. Mmmmm the Green bar!
Lets take a look at this image to give us an overview of how we want our testing structure setup to start with.
What this relationship shows is that we have our main testRunner.html page which we'll access through the browser. If you take a look at this UI shot of the testRunner interface, you'll notice a UI text box to put in a test script.
This test script can be a single page or a "suite" of pages. The nice part about the suite is you can have suites of suites. What this means is let's say you have an inventory module you are working on. You also have an order entry module you just finished. The inventory modules has 2 javascript classes in 2 files, so you created two test scripts so far. You can roll those into what's called a "suite" so you only have to run one page to actually run both sets of tests. You could also have a "TOTAL PACKAGE" suite that runs all your modules. Sometimes though you might just want to test a module you're working on for speed's sake.
Lets jump into our first script just to make sure we're up and running. This will just cover getting us up and running. I will post another write up on how to actually test your ajax application.
Environment setup:
Let's assume we downloaded jsunit to our root directory so our web structure looks like this:
Htdocs/jsunit/
First things first. Let's make sure everything unpackaged correctly and go to: http://localhost/jsunit/testRunner.html
(if you installed to a different location, point your browser to the appropriate place. Unix servers must also take note of the capital R in testRunner.html)
You should now be looking at the same UI screen that I've shown at the beginning of this page.
Now let's write our first script in the TDD (test driven development) fashion where tests come before code. We just want to make sure we're working properly so here we go.
Step 1:
Create a file called testOfJSUnit.htm
So all we're trying to do is assert that 1 does in fact equal 1 which will give us a passing score. We just want to make sure we're all setup properly. So now we have a bonafide JSUnit test script. Here's what we did:
You'll notice at the top this line
That's the meat and potatoes. We want to include the core library for JSUnit so we have access to all the assert methods.
The function above is a test function. Anything that begins with "test" gets run in JSUnit. We're using the function assertEquals which takes 3 arguments. The args are: a comment to show if the test fails, the condition to match and a condition to test. So we're testing that 1 is equal to 1.
Now go back to your browser and make sure you're at http://localhost/jsunit/testRunner.html
You'll see that text input where it says: "Enter the filename of the Test Page to be run:" In there type in the path to the file you created, so for me I would type in:
"localhost/Projects/test/testOfJSUnit.htm". Notice they already add the http:// for you. Click the run button and you should see a green bar for a passing test like this below:
If you see the green bar congrats! You have successfully installed JSUnit. This week I'll be doing a write up on how to test some common ajax functionality as well as setting up a test suite to run all our tests. If you didn’t get JSUnit installed correctly visit their mailing list here: http://groups.yahoo.com/group/jsunit/
srini says:
February 15, 2006 @ 01:26 — Reply
Your article is amazing..I wanna work on this topic i.e unit testing Ajax Please help me and give me enough cooperation
dave says:
February 16, 2006 @ 13:51 — Reply
Ankit
asdasd says:
July 30, 2006 @ 22:09 — Reply
Intresting post! Thanx!...
Luisd says:
April 14, 2006 @ 03:36 — Reply
Jim, when are you planning to publish the second part of your tutorial?
Ad says:
August 14, 2006 @ 10:49 — Reply
Thank you very much for writting this tutorial it has really helped me get this Unit testing off the ground!!
N says:
August 16, 2006 @ 22:12 — Reply
Thank you for the info, very helpfull for getting a start on JsUnit :-D.
ramu says:
October 6, 2006 @ 07:48 — Reply
hi whether is it possible to mingle jsunit with ajax
hebiryu says:
November 16, 2006 @ 14:34 — Reply
thanks man.. very simple and very helpful what about unit testing with script.aculo.us can u make something like that?
Alex says:
January 30, 2007 @ 15:22 — Reply
For AJAX testing I can recommend SWEXplorerAutomation SWEA (http:\\webiussoft.com)
Darrell says:
January 30, 2007 @ 19:59 — Reply
Someone asked about part 2 of this article. It was published on November 21, 2006 at http://www.litfuel.net/plush/?postid=154.
Hungnm says:
March 3, 2007 @ 04:28 — Reply
Very userfull Jim, and I have a prblem with unit ajax application, all everyboy can help me, - I' developing an struts app + ajax + json, how do I could test json object before return to client? Thanks very much
Ed Burns says:
March 23, 2007 @ 01:59 — Reply
Here's a little thing that lets you use JUnit or TestNG to test an ajax application. http://www.theserverside.com/tt/articles/article.tss?l=UsingMCPTestingAjax
Luca says:
June 5, 2007 @ 08:12 — Reply
hi people, anyone here tried AJAX testing with Mercury QuickTest Professional? and what were the results? Thanks!
Prasad Pathak says:
August 17, 2007 @ 12:03 — Reply
This is really a nice article. This gives idea to a whole new concept of testing for js code, classes etc. Its Amazing !!!
Pallet Jacks says:
June 20, 2010 @ 06:26 — Reply
Comment pending moderation
Anonymoussdfsdf says:
November 23, 2009 @ 03:04 — Reply
Comment pending moderation
Anonymoussd says:
November 23, 2009 @ 03:05 — Reply
Comment pending moderation
replica watches says:
November 23, 2009 @ 03:07 — Reply
Comment pending moderation
nike shox says:
December 20, 2009 @ 11:50 — Reply
Comment pending moderation
migliori siti di Black Jack says:
December 22, 2009 @ 11:38 — Reply
Comment pending moderation
buy r4i software says:
January 21, 2010 @ 13:11 — Reply
Comment pending moderation
watches says:
March 24, 2010 @ 01:10 — Reply
Comment pending moderation
watches says:
March 24, 2010 @ 01:14 — Reply
Comment pending moderation
watches says:
March 24, 2010 @ 01:18 — Reply
Comment pending moderation
Anonymous says:
April 2, 2010 @ 05:12 — Reply
Comment pending moderation
ladies watches says:
April 2, 2010 @ 07:01 — Reply
Comment pending moderation
Magento Development India says:
April 2, 2010 @ 07:58 — Reply
Comment pending moderation
get him back forever review says:
April 17, 2010 @ 16:45 — Reply
Comment pending moderation
mobile kitchen rental says:
May 27, 2010 @ 17:54 — Reply
Comment pending moderation
blu ray ripper says:
April 18, 2010 @ 10:58 — Reply
Comment pending moderation
Hollywood Wallpapers says:
April 19, 2010 @ 01:35 — Reply
Comment pending moderation
Airport Car Rentals says:
April 19, 2010 @ 19:48 — Reply
Comment pending moderation
replica watches says:
April 20, 2010 @ 16:19 — Reply
Comment pending moderation
omega watches says:
April 20, 2010 @ 16:22 — Reply
Comment pending moderation
convert hd video says:
May 5, 2010 @ 06:52 — Reply
Comment pending moderation
Satellite Internet Service Providers says:
May 7, 2010 @ 02:30 — Reply
Comment pending moderation
ev dekorasyon says:
May 10, 2010 @ 11:22 — Reply
Comment pending moderation
logo design says:
May 11, 2010 @ 06:34 — Reply
Comment pending moderation
sumit arora says:
May 12, 2010 @ 07:42 — Reply
Comment pending moderation
mobile kitchen rental says:
May 16, 2010 @ 12:13 — Reply
Comment pending moderation
Jeux de moto says:
May 18, 2010 @ 15:36 — Reply
Comment pending moderation
Giochi per ragazze says:
May 18, 2010 @ 16:58 — Reply
Comment pending moderation
Anonymous says:
May 18, 2010 @ 21:12 — Reply
Comment pending moderation
cilt bakımı says:
May 18, 2010 @ 21:15 — Reply
Comment pending moderation
642-067 says:
May 19, 2010 @ 07:56 — Reply
Comment pending moderation
medium season 6 episode 22 says:
May 21, 2010 @ 11:33 — Reply
Comment pending moderation
wife swap season 6 episode 8 says:
May 21, 2010 @ 11:34 — Reply
Comment pending moderation
shopping says:
May 21, 2010 @ 12:33 — Reply
Comment pending moderation
Pariloto says:
May 21, 2010 @ 18:05 — Reply
Comment pending moderation
Get Him Back Forever Review says:
May 22, 2010 @ 16:42 — Reply
Comment pending moderation
piese auto says:
May 26, 2010 @ 15:21 — Reply
Comment pending moderation
laptop battery supplier says:
May 29, 2010 @ 07:14 — Reply
Comment pending moderation
Jeux de voiture says:
May 30, 2010 @ 12:35 — Reply
Comment pending moderation
nike shox says:
June 5, 2010 @ 03:08 — Reply
Comment pending moderation
virbram five fingers says:
June 5, 2010 @ 03:15 — Reply
Comment pending moderation
santa letters says:
June 5, 2010 @ 18:27 — Reply
Comment pending moderation
Business Logo says:
June 5, 2010 @ 23:25 — Reply
Comment pending moderation
coach purse says:
June 7, 2010 @ 08:55 — Reply
Comment pending moderation
tiffany jewellery says:
June 8, 2010 @ 01:43 — Reply
Comment pending moderation
adjustable beds says:
June 8, 2010 @ 06:24 — Reply
Comment pending moderation
MKV to iPad says:
June 9, 2010 @ 07:52 — Reply
Comment pending moderation
online pharmacy says:
June 9, 2010 @ 08:11 — Reply
Comment pending moderation
asdf says:
June 10, 2010 @ 04:54 — Reply
Comment pending moderation
air max 90 says:
June 12, 2010 @ 07:56 — Reply
Comment pending moderation
CT0-101 says:
June 13, 2010 @ 01:04 — Reply
Comment pending moderation
eurodebt says:
June 15, 2010 @ 13:05 — Reply
Comment pending moderation
web designers says:
June 15, 2010 @ 13:44 — Reply
Comment pending moderation
Acne Scar Treatment says:
June 16, 2010 @ 11:40 — Reply
Comment pending moderation
edhardy says:
June 17, 2010 @ 07:46 — Reply
Comment pending moderation
replica tag watches says:
June 18, 2010 @ 02:44 — Reply
Comment pending moderation
fake tag watches says:
June 18, 2010 @ 02:46 — Reply
Comment pending moderation
navicekarper says:
June 19, 2010 @ 06:51 — Reply
Comment pending moderation
Self Dumping Hopper says:
June 22, 2010 @ 09:08 — Reply
Comment pending moderation
watches replica says:
June 19, 2010 @ 07:30 — Reply
Comment pending moderation
Pallet Jacks says:
June 20, 2010 @ 06:27 — Reply
Comment pending moderation
jewellery earrings says:
June 21, 2010 @ 07:32 — Reply
Comment pending moderation
replicas watches says:
June 21, 2010 @ 07:35 — Reply
Comment pending moderation
Meiru says:
June 21, 2010 @ 08:06 — Reply
Comment pending moderation
buy replica watches says:
June 22, 2010 @ 06:44 — Reply
Comment pending moderation
Save my marriage today review says:
June 22, 2010 @ 15:55 — Reply
Comment pending moderation
full lace wigs says:
June 23, 2010 @ 05:21 — Reply
Comment pending moderation
payday loans says:
June 23, 2010 @ 18:02 — Reply
Comment pending moderation
fast cash advance says:
June 23, 2010 @ 18:04 — Reply
Comment pending moderation
online payday loans canada says:
June 23, 2010 @ 18:06 — Reply
Comment pending moderation
air jordan says:
June 24, 2010 @ 08:23 — Reply
Comment pending moderation
air max says:
June 24, 2010 @ 08:32 — Reply
Comment pending moderation
rolex watches says:
June 24, 2010 @ 09:48 — Reply
Comment pending moderation
POP Displays says:
June 24, 2010 @ 11:05 — Reply
Comment pending moderation
Bet Promotion says:
June 25, 2010 @ 08:33 — Reply
Comment pending moderation