HTML and CSS Enhancements in RCov 0.9.0

Home :: Articles :: Ruby on Rails :: Rails Gems, Plugins, and Engines

Background

Back in May, I posted a writeup of the work that I did on making rcov pretty with custom css. Basically, I had created a fork of rcov that made some improvements to the rendered HTML coverage reports, including the ability to dynamically sort the coverage table, and added support for user-defined CSS files for customizing its output.

A couple of weeks ago my fork got noticed by the rcov core team at Relevance:

Corey,

I just noticed your fork of RCov. I like the style changes you made and would like to make them a part of the official RCov. Since your fork we have actually completely rewritten the output formatters so they are somewhat sane. Do you think you would have time to take what you did and fit it into the new formatter system? I am very busy fixing some of the internals and unfortunately this falls into the “when I have time” bucket, but I would really like to have it!

The Relevance team did a pretty significant overhaul of the output formatters, so unfortunately the work that I did previously was not easily ported over; I had to start again. But that's often the best way to approach rapid development: do it quickly, learn your lessons, throw most of it out, and do again the right way.

Thinking Like a User

Being a (relatively) new convert to test driven development (TDD), I had some new insights the second time around that guided my work on rcov enhancements. Having just finished launching a new Rails app for a client, and simultaneously working on two new gems and a Rails engine, I've spent a lot of hours staring at coverage reports over the past few months. Since I was going to be an rcov contributor as well as a user, I was in a unique position to add the features that would make my daily work as a developer more efficient.

So my to-do list grew beyond re-implementing my initial round of UI enhancements...

Dynamic Filtering

As I'm writing tests, I tend to work at a particular level of the application-- say, models-- until I have good coverage, and then I move on to another level. My rspec options are safely tucked away inside spec/rspec.opts, so even though I could limit my tests to the current level by tweaking args in that file, I don't. Instead I usually end up with a coverage report that is telling me more than I'm ready to deal with at the moment. Being able to sort the report by file name helps, but I realized that what I really wanted was the ability to filter out parts of the application that I wasn't currently working on. Thus the idea of adding dynamic filters to the HTML report was born.

I also wanted to be able to focus on the source files that needed the most attention, so a coverage filter seemed like a good enhancement as well. Again, that's an option that you can pass as an arg to rcov, but I at least never do.

Custom CSS

I wasn't happy with the way I implemented support for custom CSS the first time around. It relied on a custom CSS file existing in a specific location in your project folder, namely spec/rcov.css.

This time around, I decided to extend rcov's command-line args to accept a --css option, which you can use to specify the location of your custom CSS file. Much cleaner.

Wrapping Up

While most of my work focused on the sorting and filtering features, this new fork also brings a much cleaner and more readable layout, color improvements (for usability, aesthetics, black-and-white printing and color blindness accommodation), and graceful degradation in the absence of JavaScript.

08-30-09 UPDATE I worked with Aaron from the core team to merge my fork, so the new features are now part of rcov 0.9.0. You can get it from the core rcov repository at http://github.com/relevance/rcov/tree/master

Thanks to Relevance's work, rcov is significantly faster and more hackable; now it's also easier on the eyes, more customizable, and hopefully more friendly to work with on a daily basis. You can see it in action below.