Organizing tests

QUnit provides two levels of test grouping named after their respective function calls: module() and test(). The module is like a general category under which the tests will be run; the test is actually a set of tests; the function takes a callback in which all of that test's specific unit tests are run. We'll group our tests by the chapter topic, placing the code in our test/test.js file:

module('Selecting');
test('Child Selector', function() {
  ok(true, 'Placeholder is entered');
});
test('Attribute Selectors', function() {
  ok(true, 'Placeholder is entered');
});
module('Ajax');

Listing B.1

It's not necessary to set up the file with this test structure, but it's good to have some overall structure in mind. In addition to the module() and test() grouping, we added a placeholder assertion within each test. Failing to have at least one assertion per test causes QUnit to throw an error.

Notice that our modules and tests do not need to be placed inside a $(document).ready() call because QUnit by default waits until the window has loaded before it begins running the tests. With this very simple setup, loading the test HTML results in a page that looks like:

Note that the module name is light blue and the test name is darker blue. Clicking on either one will expand the results of that set of tests, which are collapsed by default when all the tests with the set pass. The Ajax module does not appear yet because we haven't written any tests for it.