npm install --save-dev xray-css
CSS code, like JavaScript code, changes all the time. Many attempts at verifying that changes don't cause unwanted effects are brittle. We can unit test CSS visually at a component level though to great effect.
We want to unit test CSS visually. Let's break that last statement down:
unit test CSS visually
Unit testing code using small, controlled test cases can be very effective compared to full integration tests. Integration tests suffer from false positives when someone tweaks some text. Unit tests on the other hand keep their environment controlled and won't newly break if your home page changes. For example, say you want to test your buttons:
button.css:
button {
background-color: blue;
border-radius: 3px;
color: white;
min-width: 50rem;
max-width: 200rem;
overflow: hidden;
text-overflow: ellipsis;
}
button[disabled] {
background-color: gray;
color: lightgray;
}We start by simply enumerating the cases we care about (short text, long text, disabled).
button.html:
<link href="button.css" rel="stylesheet"/>
<example title="a simple button">
<button>Short</button>
</example>
<example title="long text">
<button>Some really long text that could happen, you know?</button>
</example>
<example title="disabled">
<button disabled>Disabled</button>
</example>Now, when we run xray-css for the first time, it'll generate an expected
screenshot of just this unit test. If you were to run it again, you'd
expect the screenshot to stay the same. Now if someone were to come along and
change the min-width of a button, xray-css would fail to compare correctly
against the last screenshot. If someone were to change a button on your home
page though, this unit test would not be affected: your buttons are likely
still all-ok CSS-wise.
In this way of unit testing CSS, we can avoid false positives in unreleated changes in how our CSS is used.
unit test CSS visually
Using a pre- or post-processor? That's cool (if not, you should be). Since xray-css only cares about the end result and rendering a unit test page, it's agnostic to your current toolchain. To help you with your processing though, it knows how to generate the resulting CSS for inclusion into the test page.
unit test CSS visually
Some concepts of unit testing CSS try to use the expected computed CSS values
as their expected result. We've noticed this also can generate false positives
when someone changes both padding and margin. Generally, we only care
about the output, which we consider to be the visual look of the page. Since
we're doing screenshot diffing, tweaking related values that would result in
identical visuals is fine.
CSS can cover a lot of states. Here are a few ways to deal with them all.
https://css-tricks.com/controlling-css-animations-transitions-javascript/
animation-play-state: paused
https://css-tricks.com/controlling-css-animations-transitions-javascript/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent