Extract from SitePoint article “Testing a Sass Library” by Hugo Giraudel
Published June 23, 2015
Lately, I have spent a decent amount of time working with Eduardo Bouças on include-media. We went through a lot of refactoring so decided to write some tests and run them on every commit to be sure we did not break anything. I’ll go through the details in this article.
If you don’t know include-media yet, it is a very lightweight yet powerful breakpoint manager in Sass.
The provided public API is a single mixin, media(..) (hence the name of the library), but the whole thing is well thought enough so you can actually do wonders with it. A short example before getting started:
.my-component {
width: 100%;
// On screens larger or equal to *small* breakpoint,
// make the component floated and half the size
@include media('≥small') {
float: left;
width: 50%;
}
}
Now that’s pretty rad, isn’t it?
Anyway, so we came up with a little testing system that I would like to share with you guys. Of course, if you want to test a full framework, you might want to use True from Eric Suzanne instead, which is a full blown testing framework written in Sass, for Sass and was introduced and explained by David in a recent article on SitePoint.
What’s the idea?
We wanted to run a few tests on the main private functions from the library any time we commit to the repository. If any test fails, the commit is aborted and the code needs to be fixed to allow the commit to pass. This way, we make sure that we can safely work on the library without risking breaking it (which is usually a bad thing).
Achieving something like this ended up being surprisingly easy: we set up a pre-commit Git hook to run tests in both LibSass and Ruby Sass before any commiting. If the test is failing, we kill the process.