JavaScript Code Coverage
JavaScript is a powerful client-side scripting language. It has been long used for enhancing the user experience on web pages. JavaScript is also being used widely in game development and Mobile application development. In recent times, NodeJS made it possible to run JavaScript on the server side as well.
In this post, we’ll take a look at various code coverage tools available to measure JavaScript code coverage.
JSCoverage
JSCoverage instruments the JavaScript code used in web pages, before it gets executed. JSCoverage collects code coverage statistics when the instrumented JavaScript executes in a web browser. To start with, Download JSCoverage file and compile it:
tar jxvf jscoverage-0.5.1.tar.bz2
cd jscoverage-0.5.1/
./configure
make
On compilation, jscoverage and jscoverage-server executables are created. Install them with below command
make install
Next instrument your JavaScript code
jscoverage
Where source directory is the location of your JavaScript that needs instrumentation and destination directory is the location where the instrumented code will be written. JSCoverage instruments all the files with .js extension within source directory and if needed creates a recursive directory to place all instrumented files, preserving source directory structure. Hence destination directory contains all the files from source directory along with instrumented js files. JSCoverage also writes file named jscoverage.html to destination directory in addition to other files.
This file is used to execute the instrumented code. To view this file open it in your browser. It may happen your browser doesn’t allow access to it with file:// protocol. Host this file on any local server of your choice. For example, if you have an apache server running, place it in web folder and access it using http:// scheme. Or if you have chrome installed, open it with –allow-file-access-from-files option.
jscoverage.html file, has tabbed view containing Browser, Summary, Source and About tabs.
The Browser tab displays pages with instrumented scripts, Summary has code coverage data, Source shows the number of times each line of the JavaScript code was executed and About displays current JSCoverage version.
Navigate to Browser tab, here provide url for any page within destination directory and click Open in frame. Now to view generated a report, navigate to Summary tab where you can view current code coverage statistics. Here you have link to the script file, which will give you a detailed view of a JavaScript source file. Reports are cumulative until you refresh jscoverage.html file. Once you refresh the code all statistics reset to zero.
If you are facing errors while loading the url in iframe from Browser tab. Try clicking second option as Open in window. This will load your url in a new window.
JSCoverage also provides jscoverage-server program, which is a web server and can be used to host files from your code directory. Navigate to your code root directory and execute below command:
jscoverage-server --verbose
Once the server is running, access web interface from url http://127.0.0.1:8080/jscoverage.html This page will have an extra tab Store in addition to the ones generated by jscoverage program. Click Store Report button in this tab to get coverage data saved in jscoverage-report/ directory. To view this report file you don’t need jscoverage-server to be running. View jscoverage-report/jscoverage.html file from any of your web browser. To stop the server, execute the below command:
jscoverage-server --shutdown
Istanbul
Istanbul supports instrumentation of ES5 and ES2015+ JavaScript code. You can track your unit-test coverage on your codebase efficiently using Istanbul as it instruments code with line counters. Istanbul has command-line-client nyc which works with a most JavaScript testing framework like AVA, Mocha and tap. Install nyc as a development dependency:
$ npm install --save-dev nyc
We will see how Istanbul uses nyc in testing framework Mocha. Open your npm package.json file and add below snippet:
{ "scripts": { "test": "nyc ava --timeout=3000" } }
Save the file. Now whenever the tests execute your code or any subprocess that it spawns, it will get instrumented.
By default report file is generated in text format. Get it in html by modifying above snippet as:
{ "scripts": { "test": "nyc --reporter=html --reporter=text mocha" } }
This will write report file to ./coverage/index.html file. Change –reporter value for getting a report in another format. AVA and Node Tap also uses nyc and you need to make similar changes as above to your package.json file. For tap, add snippet as below to get coverage file in HTML format
{
“scripts”: {
“test”: “tap –coverage –coverage-report=html”
}
}
For continuous-integration flows, integrate Istanbul with coveralls.io. Add coveralls dependency to module as
npm install coveralls --save-dev
Now update scripts in package.json file as
{
“script”: {
“test”: “nyc –reporter=html –reporter=text mocha”,
“coverage”: “nyc report –reporter=text-lcov | coveralls”
}
}
This will give you latest code-coverage statistics on all of your repositories including the total percentages covered and the lines covered.
Intern is another test system for JavaScript which helps in writing and running consistent, high-quality cases for your JavaScript libraries and applications. Intern has code coverage as core feature, which is implemented by Istanbul. Glob string or array of glob strings are used in Intern configuration file to indicate which files need to be covered. Update the config file as
{ "coverage": "_build/src/**/*.js" }
Or run the command directly from command-line
npx intern coverage='_build/src/**/*.js'
Files present in the coverage list are instrumented at the time for loading. Intern has node based reporters, which output coverage summary to the console, in case coverage data is collected. Cobertura (‘cobertura’), html (‘htmlcoverage’), json (‘jsoncoverage’), and lcov (‘lcov’) Istanbul reporters are accessible from Intern. Just add reporters detail in config file
{
“reporters”: [ “runner”, “jsoncoverage” ]
}
Or run in command-line
npx intern reporters=runner reporters=jsoncoverage
File reports are written to coverage/* directory in the project root by default. You can specify alternate directory by adding below in your config file
{
“reporters”: [
“runner”,
{
“name”: “jsoncoverage”,
“filename”: “coverage.json”
}
]
}
This will generate file in location you specify in filename attribute.
Summary
JavaScript is one the most popular programming languages today. We reviewed how the JavaScript community approaches the testing and code coverage aspect of the software development process.
In this post we learnt about code coverage tools like JSCoverage and Istanbul. JSCoverage offers features like line, branch, and function coverage without requiring a browser to run. Since it is written in Java, JSCoverage is platform independent and easy to setup.
Istanbul on the other hand is a general purpose coverage platform that works well with JavaScript testing frameworks like Mocha, Jasmine and others.