Do you unit test your CSS? I recently came across few libraries that let you unit test CSS.
My question : is it mainstream and common among UI developers to unit test stylesheets?
I've actually never heard of CSS unit tests...intriguing. I'll have to go do some homework now!
I would say that CSS unit tests are not mainstream from my view, or else I haven't been mainstream in the past 8 years. I know lots of feature tests that check for elements existing on the page, but very few that actually check the "look" of the application. I also wonder how this works, because the look of an application changes from browser to browser and how they render the CSS. Arguably, to verify the look of CSS you would have to run these tests in all browsers.
I know there are some sites that allow you to upload your applications and it takes snapshots in various browsers for this kind of thing, but I often viewed that as double-checking a unique and high-profile element of your website that you want perfect in all browsers vs being a mainstream element of testing.
A good rule of thumb is to use multiple browsers during development to continually check how things are "looking" as well as use some resets to ensure consistency (but note there's a growing debate about how much you should globally reset CSS these days).
Also, from a practical standpoint, I think at some point we can "test too much". I am a test-driven developer, and I write a LOT of tests (last application had 800+ unit/feature tests). But tests are useful in ensuring you don't break previous code and in making sure your business logic is correct.
I have converted to doing only unit tests (isolation) and feature tests (integration). But if you test EVERYTHING, then whenever you change something, your tests break and must be updated.
Depending on how you write your CSS, this could mean a substantial re-write of your CSS specs with the smallest change.
All of this verbage to say: I don't think CSS tests are mainstream and I have never used them in 8 years of developing. I suspect they would be useful in isolated cases or when working on a particular design that must be "just right", but 99% of the time they may not provide justifiable benefit to maintain.
Forget about unit testing as you do it in JS or any other imperative code. We tried nearly every solution and it didn't work. What worked perfectly though is that https://github.com/DevExpress/testcafe. Please give it a shoot. It's worth every minute.
There is a great tool that maybe you are not familiar with - Screenster. It is a test automation tool and 10 times more productive than any other tool, working on the cloud and codeless.
Denny Trebbin
Lead Fullstack Developer. Experimenting with bleeding-edge tech. Irregularly DJ. Hobby drone pilot. Amateur photographer.
I've tried to but everything feels just wrong.
Instead, I use garris.github.io/BackstopJS It uses three different browsers to render the result, take screenshots and then spots the diffs between each screenshot.
This tool does not check if padding: 10 is equal to padding: 10. Such test in CSS land is just wrong because of all the different layout engines we have in the web. Each browser and version interprets CSS differently. Each browser and version optimizes its rendering path differently. Each browser follows a different CSS spec implementation roadmap. That's why it makes no sense to me, to check and compare values of CSS code. Instead I check and compare the real rendered output.