Testing is the pinnacle of development, when you develop in a MVC model the controllers expect unit tests to prove it works as expected. Many of these libraries for Ruby are of the likes of Minitest, RSpec and many more.
With Ruby, a common library used to see what the outputed code coverage is, is Simplecov. This tool is one I love, shows you what lines are covered, what was missed, and what you have defined as skipped. You also have the ability to configured many other settings. One of those settings is the formatter. You can describe one or many, out of the box comes a HTML Formatter that produces a webpage found in the coverage/index.html. This has been a format I have lived by for years but as I have used it on large projects with large file sets and long file names, it has not been the cleanest UX to work with. I have found it to be outdated and needing to be upgraded.
With that, I decided to go to the drawing board to design and build a new UX for a HTML web output that leveraged the new standards of Material Design. I analyzed what worked and what didn't with the HTML Formatter offered and concluded the following.
The Goods
- Ability to search files in a group.
- Ability to see groups.
The Bads
- When groups get over 6 in total it starts to cause the page to look weird.
- When file name get long and screen is small rows fall off of table view and become unreadable.
- Difficult to read coverage per file and per group.
- Scrolling on a file view could scroll past the file if your cursor was in the wrong spot.
- When viewing an individual file source you really didn't know what file you clicked on or what the details were about that file without closing the modal to view the table.
I knew that I had to maintain a singular page generation to ensure not to many dependency files were needed when generating. This led me to move away from a tabular approach and more for a left navigation approach. This would allow for a scrollable user interaction. I also looked to move the sentence about the numbers, which was to much and hard to read. So I looked to change that to a tile grid at the top of each group page. There were little changes that will be noticed throughout the page such as, the footer is cleaner, the name of the project is displayed with dashes and underscores stripped out, the text for a file is cut off with ellipses in the table to ensure rows adhere to column width appropriately. From a repo structure I looked to implement and use Webpack to generate the output application js and css files for usage.
The results are as follows with a before (simplecov-html) and after (simplecov-material).
Before (simplecov-html)
Full View
Individual File View
After (simplecov-material)
Full View
Individual View
As seen above the look is drastically different in styles, but still maintains the same data, and functionality prior and some. I hope to expand the functionality based on community feedback overtime so please if you have any feedback checkout the repo here and leave your comments under the following:
Thank you for taking the time to read this on the approach I took to develop Simplecov Material Formatter and hope you love it as much as I do! It's just so clean and easy to use!!
To use this gem simply install the gem in your repo by adding to your gemfile. This gem is hosted on rubygems.org and on the new Github Registry
To add to your gemfile see below or checkout the Readme.md on the repo for reference
Ruby Gems Host
# ./Gemfile
group :test do
gem "simplecov"
gem "simplecov-material"
end
Github Rubygems Host
# ./Gemfile
group :test do
gem "simplecov"
end
source "https://rubygems.pkg.github.com/chiefpansancolt"
group :test do
gem "simplecov-material"
end
end
Top comments (0)