In this recipe, we will learn how to keep the tests logically organized by using the QUnit.module method.
While working on a real project, the number of tests can be pretty huge; for example, the jQuery test suite contains about 6,000 tests shown in the following screenshot:
Navigation on such lists without any grouping abilities would be a tough task. Luckily, QUnit provides the module method, which allows us to organize the tests and run a specific group of tests individually.
Imagine we have an application handles user interaction with the Sign In and Password Reset forms. We don't need any implementation details for now, but a high-level concept as follows:
var ResetPasswordForm = function() {
return {
/** Render and synchronize UI */
init: function() {
},
/** Show panel */
show: function() {},
/** Hide panel */
hide: function() {},
/** Validate form input */
validateInput: function() {}
};
},
SignInForm = function() {
return {
/** Render and synchronize UI */
init: function() {
},
/** Show panel */
show: function() {},
/** Hide panel */
hide: function() {},
/** Validate form input */
validateInput: function() {}
};
}Thus, we have two object constructors and three methods each that must be tested. Let's split up the test into two groups, one for the SignIn form and one for Rest PasswordForm.
Define a test group (
module) for theSignInFormconstructor.QUnit.module("SignInForm");Put underneath all the tests relevant to the group.
QUnit.test( "show method", function( assert ){ // Stub assertion assert.ok( true ); }); QUnit.test( "hide method", function( assert ){ // Stub assertion assert.ok( true ); }); QUnit.test( "validateInput method", function( assert ){ // Stub assertion assert.ok( true ); }); Repeat the flow for theResetPasswordFormconstructor. // Define the group QUnit.module("ResetPasswordForm"); QUnit.test( "show method", function( assert ){ // Stub assertion assert.ok( true ); }); QUnit.test( "hide method", function( assert ){ // Stub assertion assert.ok( true ); }); QUnit.test( "validateInput method", function( assert ){ // Stub assertion assert.ok( true ); });Load the test runner in a browser and examine the results shown in the following screenshot:
