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.