Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Test Driven Development for JavaScript: jQuery and QUnit

Unit test your jQuery code at development time to reduce bugs in your JavaScript application. The QUnit JavaScript TDD framework makes it easy.


advertisement

JQuery, the popular open source, cross-browser JavaScript library, simplifies JavaScript programming by enabling developers to easily write code that incorporates event handling, animations and calls to Web services. The library supports browser independence, a simple event-handling model and extensibility through a plug-in API. Combining these features with a Test Driven Development (TDD) approach can greatly reduce bugs in your Web applications.

What is TDD, you ask? TDD is a style of programming in which you test drive your application code during development, i.e., you write your tests first and then your application's source code. With properly planned code reviews, test-driven development can help in designing and implementing high-quality applications as well as in conforming to the stated requirements. As a result, TDD can reduce development time, code complexity, and post-deployment bugs.

In this article, I will explore how to use TDD with jQuery in Visual Studio. To get started, you should have the following installed in your system:

  • Visual Studio 2008
  • Visual Studio 2008 SP1
  • jQuery Library
  • Visual Studio 2008 jQuery Plug-in


You can also use Visual Studio 2010 -- it comes with jQuery by default.

Test Driven Development Using jQuery

Test Driven Development is an Agile development technique that typically involves the following steps:

  1. Write the test
  2. Write the code for the test, i.e., the code that would make the test pass
  3. Run the test
  4. If the test fails, repeat, i.e., refactor the code and run the test again
  5. If the test passes, you can still refactor the code to make it clean and organized
  6. Make sure you re-run your tests every time the application's code changes

Some popular JavaScript TDD frameworks include:

  • QUnit
  • JsUnit
  • JsSpec
  • YUI Test

In this article, I will use the QUnit TDD tool for demonstration. This tool is capable of testing any JavaScript code -- even code written on the server side -- making it great for testing JavaScript libraries and frameworks. Particularly useful for regression testing, QUnit opens up a lot of possibilities for unit testing your JavaScript code. In QUnit, you have the concept of Units and Modules. Units refer to units of testable code; they can be as simple as typical unit tests. Modules on the other hand are a mechanism to group the results of the tests, whether they succeeded or failed.

The following code snippet illustrates how you can use QUnit to unit test your JavaScript code:

// Unit testing using QUnit
function isNumberEvenOrOdd(valueToTest) 
{
     return (valueToTest % 2 === 0);
}
test('isNumberEvenOrOdd()', function() {
     ok(!isNumberEvenOrOdd (1), 'One is an odd number');
     ok(isNumberEvenOrOdd (2), 'Two is an even number');
})

In the above code snippet, ok is an assertion. Other assertions include same, equals, and so on.

You can also use QUnit to run asynchronous tests, meaning tests for functions that are asynchronous. To write such test cases, you'll need to use setTimeout as shown in the code snippet below:

asyncTest('This is an asynchronous test case', function() {
     setTimeout(function() {
          ok(true);
          start();
     }, 250)
})

Review the QUnit API documentation for more information.

Summary

When writing unit tests for JavaScript, the major challenge is making them browser independent. Not all JavaScript TDD frameworks support all browsers. In this article I discussed the features of jQuery and how you can work with one JavaScript TDD framework, QUnit, to practice test driven development using jQuery. Happy coding!



   
Joydip Kanjilal has over 10 years of industry experience with C, C++, Java, C#, VB, VC++, ASP.Net, XML, Design Patterns, UML, etc. He currently works as a senior project leader in a reputable multinational company in Hyderabad, India, and has contributed articles on .NET and related technologies to www.aspalliance.com.
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap