ECMAScript/JavaScript Test Coverage

ECMAScript/JavaScript Test Coverage
Using Blanket and QUnit

Prof. David Bernstein
James Madison University

Computer Science Department

bernstdh@jmu.edu

Getting Started

Distribution:
- Blanket.js is distributed as one file (containing the necessary ECMAScript/JavaScript code)
Setting Up:
- Copy the file into a folder/directory that is accessible from your project
- Note: The file you download might be named blanket.js or it might be named blanket.min.js

The HTML Document

Loading Blanket:
- Add a script element that loads Blanket (named appropriately) to the HTML document that sets up the QUnit tests
Specifying the Code to Track:
- For each module that you want to track, include the property data-cover="true" in the script tag

Running the Tests

As with QUnit:
- Load the HTML document
Afterwards:
- Select the "Enable coverage" checkbox
- Click on the file to see the details
A Note:
- You may have trouble if you use the file:// protocol (i.e., you may have to load the files from an HTTP server)

An Example

Testing the BMI Calculator

ecmascriptexamples/unittesting/bmi-coverage-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="Blanket/blanket.min.js"></script>

    <script src="../clientsidebasics/bmi.js" data-cover="true"></script>
    <script src="bmi-test-nofailures.js"></script>
  </body>
</html>