ECMAScript/JavaScript Unit Testing

ECMAScript/JavaScript Unit Testing
Using QUnit

Prof. David Bernstein
James Madison University

Computer Science Department

bernstdh@jmu.edu

Getting Started

Distribution:
- QUnit is distributed as two files, one containing the necessary ECMAScript/JavaScript code and the other containing the necessary stylesheet
Setting Up:
- Copy the two files into a folder/directory that is accessible from your project

The HTML Document

Purpose:
- Loads the QUnit stylesheet
- Loads the QUnit framework
- Loads your code to be tested
- Loads your tests
Use:
- The tests are run when the HTML document is loaded
- The document then displays the results

Tests

Encapsulation:
- A test consists of a description and a function
- The function contains one or more assertions, each of which corresponds to a test case
Some Assertions in QUnit:
- equal(actual,expected [, message])
- deepEqual(actual,expected [, message])
- throws()

Tests (cont.)

A Problem:
- Floating point arithmetic is not exact which causes problems when using == or ===
Solutions:
- Write an approxEquals() function that returns a boolean and use the ok() assertion
- Use the toFixed() method

An Example Test

Testing a BMI Calculator

test("Underweight Test", function() {
      equal(calculateBMI(123, 69).toFixed(1), 18.2);      
});

A Complete Example

Testing the BMI Calculator

ecmascriptexamples/clientsidebasics/bmi.js

/**
 * A function to calculate and display the body mass index (BMI)
 *
 * @param {number} weight - The weight in pounds
 * @param {number} height - The height in pounds
 */
function calculateBMI(weight, height)
{
   "use strict"; // ECMAScript 5
   var bmi;
   
   bmi = weight / (height * height) * 703;

   if (bmi < 15){
      bmi = 15;
   }else if (bmi > 60){
      bmi = 60;
   }

   return bmi;
}

ecmascriptexamples/unittesting/bmi-test.html

<!DOCTYPE html>
<html>
  <head>        
    <meta charset="utf-8">
    <title>BMI Test Suite</title>
    <link rel="stylesheet" href="QUnit/qunit.css">
  </head>
  <body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
    <script src="QUnit/qunit.js"></script>
    <script src="../clientsidebasics/bmi.js"></script>
    <script src="bmi-test.js"></script>
  </body>
</html>

ecmascriptexamples/unittesting/bmi-test.js

test("Underweight Tests", function() {
      equal(calculateBMI(145, 75).toFixed(0), 18);      
      equal(calculateBMI(110, 69).toFixed(0), 16);      
});

test("Normal Tests", function() {
      equal(calculateBMI( 91, 58).toFixed(0), 19);      
      equal(calculateBMI( 96, 58).toFixed(0), 20);      
      equal(calculateBMI(115, 58).toFixed(0), 24);      
      equal(calculateBMI(104, 62).toFixed(0), 19);      
      equal(calculateBMI(115, 62).toFixed(0), 21);      
      equal(calculateBMI(180, 76).toFixed(0), 22);      
      equal(calculateBMI(197, 76).toFixed(0), 24);      
});

test("Overweight Tests", function() {
      equal(calculateBMI(150, 65).toFixed(0), 25);      
      equal(calculateBMI(173, 66).toFixed(0), 28);      
      equal(calculateBMI(173, 66).toFixed(0), 32, "Intentional Failure");      
      equal(calculateBMI(238, 76).toFixed(0), 29);      
});

A Warning

A Reminder:
- The code being tested might change state information in unknown/unexpected ways (i.e., have side effects)
The Problem:
- One test case can cause a side effect that leads to a failure of a later test case
Toward a Solution:
- Use atomic tests (i.e., only have one test case per test)
- Use module() to group tests

An Example that uses module()

ecmascriptexamples/unittesting/bmi-test-modules.js

module("Underweight Tests");
test("UW", function() {
      equal(calculateBMI(145, 75).toFixed(0), 18);      
});
test("UW", function() {
      equal(calculateBMI(110, 69).toFixed(0), 16);      
});



module("Normal Tests");
test("N", function() {
      equal(calculateBMI( 91, 58).toFixed(0), 19);      
});
test("N", function() {
      equal(calculateBMI( 96, 58).toFixed(0), 20);      
});
test("N", function() {
      equal(calculateBMI(115, 58).toFixed(0), 24);      
});
test("N", function() {
      equal(calculateBMI(104, 62).toFixed(0), 19);      
});
test("N", function() {
      equal(calculateBMI(115, 62).toFixed(0), 21);      
});
test("N", function() {
      equal(calculateBMI(180, 76).toFixed(0), 22);      
});
test("N", function() {
      equal(calculateBMI(197, 76).toFixed(0), 24);      
});


module("Overweight Tests");
test("OW", function() {
      equal(calculateBMI(150, 65).toFixed(0), 25);      
});
test("OW", function() {
      equal(calculateBMI(173, 66).toFixed(0), 28);      
});
test("OW", function() {
      equal(calculateBMI(173, 66).toFixed(0), 32, "Intentional Failure");      
});
test("OW", function() {
      equal(calculateBMI(238, 76).toFixed(0), 29);      
});

An Additional Benefit of Using module()

An Observation:
- Sometimes you want to execute the same code before and after each test case
Using module():
- The module() function has an optional parameter that can be used to pass a setup and teardown function