JavaScript Code Coverage In Rails

For the past several months, I've been working on a Rails contract for a membership site that provides analysis of tennis matches captured from a iPhone app.  The heart of the site is a dashboard of stats and charts of one or more tennis matches, and is heavy on the JavaScript side of things.

I'm a believer in TDD and have a fairly strong set of tests to verify my calculations of the different relevant tennis stats, but I didn't have a sense of what code I was testing.

After searching around, I found Blanket.js, a nice tool for JavaScript code coverage.  It integrates well with QUnit, my current JavaScript framework of choice.  The only configuration was to add a "data-cover" attribute to any script tag that coverage data was needed for.  Perfect! Well almost...

I'm using the qunit-rails gem, which pulls in JavaScript files using the Asset Pipeline behind the scenes, and doesn't give the opportunity to add the "data-cover" attribute, at least that I know of.

My solution was to simply use jQuery to dynamically add in the attribute for all files that I want coverage on, which works very well.  I created a file in /test/javascripts called blanket_helper.js with the following code:

// Add coverage to all js source files in the chart_dashboard directory
$("script[src^='/assets/chart_dashboard/']").attr("data-cover", "data-cover");

Presto! Code coverage using Blanket.js, QUnit, and qunit-rails.

Written by Alex Brinkman who lives and works in Denver, but plays in the mountains.