The jQuery Developer’s Testing Toolkit

Hey guys. Today I wanted to share some useful developer’s tools and resources that will help you correctly stress-test and fine-tune your jQuery code whether it’s a small plugin or a large scale web application. Many of these are tools used and recommended by both myself and member’s of the jQuery core team, so you know for sure that they they’ve come in handy a few times. Please feel free to share this list to help other devs out there.

How To Create Unit Tests For Your JavaScript/jQuery Code Using QUnit

As Christian Heilmann frequently mentions in his JavaScript talks, a solid build process with unit-testing should be used for testing and releasing any serious jQuery application. Manual functional testing is great from a user-interface perspective, but Unit testing will allow you to stress-test your code to find out if all the inner-workings of it perform as intended. Below is a good tutorial on how to get started with QUnit – a popular jQuery Unit testing tool which is quite straight-forward to use. You may alternatively like to check out JSUnit or FireUnit but QUnit is by far the most widely used of the three and my personal unit testing tool of choice.

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-test-your-javascript-code-with-qunit/

Mock Your Ajax Requests with MockJax & jQuery for Rapid Development

The MockJax plugin is a really fantastic development and testing tool for intercepting and simulating ajax requests made with jQuery with a minimal impact on changes to production code. I recommend this for testing web applications that frequently use Ajax connections. TamperData is also useful for testing of this type. Read the complete tutorial on using MockJax below.

http://enterprisejquery.com/2010/07/mock-your-ajax-requests-with-mockjax-for-rapid-development/

Getting Started With Test-Driven Development For jQuery

The concept of test-driven development is quite simple. Anytime you want to add a new feature to your application, you need to write a test for it before writing any code for that feature. To write the test, you need to fully understand the specifications and requirements for what that feature does.  At the start, your test will of course fail, but the goal is to ultimately code up a solution to that feature which is considered finished if the test passes. Here is an excellent tutorial on how to get started with test-driven development for jQuery with Elijah Manor.

http://msdn.microsoft.com/en-us/scriptjunkie/ff452703.aspx

How FireQuery Can Make Debugging Your jQuery Code A Little Easier

If you regularly work on websites or web applications, you may be familiar with the popular FireFox plugin FireBug. FireBug basically allows you to inspect the DOM hierarchy and make live changes to your HTML/CSS which appear in your browser instantly. FireQuery is an add-on which extends FireBug with some jQuery focused features. I think it’s really useful because you can output your jQuery expressions to the FireBug console visually see embdedded data elements and event handlers that were added via jQuery. A recommended add-on, you can check out a thorough tutorial on FireQuery below.

Digging Into The FireQuery Add-on for jQuery

Automating jQuery testing with Browser Launching, Test Execution And Result Reporting

If building a large-scale web application that heavily relies on JavaScript, chances are you’ll want to test your code in a number of different web browsers but also on a number of different platforms. You can achieve this without needing to do a lot of manual work using a number of existing frameworks. John Resig recommends WebDriver (Java), Watir (Ruby) and JSTestDriver for achieving these. Selenium RC is also popular for this purpose. These are the best tools to use if testing is performed in-house. If you’re looking to use an external source of systems for your testing, see the next section.

Distributed jQuery Testing via the Grid

Large-scale javascript powered applications require a lot of cross-system testing. We don’t all have access to budgets which can help us perform this, but there are a few different choices you have you don’t have a whole lab of computers to perform your testing on. The first of these which I recommend is TestSwarm – it allows you to push tests to a wide ‘swarm’ of clients which can then report back to the server. The Selenium Grid also allows you to push tests to multiple systems, however in my own opinion it may be better suited to academic environments. TestSwarm is my personal recommendation for grid based testing.

JavaScript Code Coverage Testing

Code coverage is the concept of analyzing code execution to find out what lines of a script were executed and which were missed. This is very useful for discovering areas of your code which may either be broken or simply not being correctly interpreted by a particular browser. For jQuery and JavaScript projects, I recommend using JSCoverage for this as it supports all modern browsers on both Windows and Linux. Their blog also features a number of useful case studies on how JSCoverage can be used effectively as part of a web application test suite (including using it with Selenium).

Debugging And Testing JavaScript In A Scripting Environment With Envjs and BumbleBee

Envjs is a tool which provides a JavaScript implementation of the browser as a usable scripting environment. This enables developers to effectively run jQuery and JavaScript in a console which can be useful for debugging purposes. The default implementation of Envjs is Rhino.

Rhino (Java) is a great tool for running JavaScript in either shell form or embedded in other applications – in shell form it can be used as the debugger mentioned above. Rhino basically converts JavaScript code into Java classes and its primarily intended to be used in server-side applications. If your build process is based on using ANT or something similar, placing Rhino’s JAR file into your classpath would allow your build to execute JavaScript.

A good testing toolkit for Envjs is BumbleBee which was released this year. Bumblebee combines Rhino, JSpec, Envjs and Ant to provide an "out of the box" JavaScript testing toolkit where specs can easily be added to your automated build. I recommend checking it out!.