CSS unit testing. Lightning-fast. tape-style.
Isolates DOM and styles for reproducible unit tests. As elegant and lightweight as tape itself.
That’s how budo + tap-dev-tool + tape-css play together. Other great options: hihat, testron.
Looks slow?
$ npm install tape-cssPick your favorite flavor of tape – be it tape itself, tape-catch, blue-tape or whatever.
const tape = require('tape');
const test = require('tape-css')(tape); // We don’t change `tape` in any way.Pass the DOM tree and styles you want to test. We’ll add it to the <body>* before your test begins – and clean them up right after it has ended.
test('Roses are red, <span>s are blue', {
dom: document.createElement('span'),
styles: '* { color: red; } span { color: blue; }',
}, (t) => {
// Our span and styles are here to play with.
t.equal(
getComputedStyle(document.querySelector('span')).getPropertyValue('color'),
'rgb(0, 0, 255)'
);
t.end();
// We’ve now cleaned up the place!
});tape-css is made to play well with other tools. hyperscript and computed-style can make your tests nicer to read and write:
const h = require('hyperscript');
const style = require('computed-style');
const personOne = h('.person');
const personTwo = h('.person');
test('Everyone has some space to breathe', {
dom: h('div', [personOne, personTwo]),
styles: '.person { margin-bottom: 10px } * { padding: 5px }',
}, (is) => {
is.equal(
personTwo.getBoundingClientRect().bottom -
personOne.getBoundingClientRect().top,
10,
'10 px between people'
);
is.equal(
style(personOne, 'padding-right'),
'5px',
'one has room to move his arm'
);
is.end();
})Whenever you want to see how your layout actually looks like, use test.only. We’ll only execute this one test and we won’t reset the DOM and styles afterwards. That’s pretty useful while debugging.
test('All is well', /* … */);
test.only('Need to debug this', /* … */);
test('Works alright', /* … */);Does 928 ms for 21 tests look slow to you? We thought so as well – so we wanted to check why. We created 400 specs with 1000 assertions to check that. Every spec had its own DOM tree and style element created, injected and cleaned up (4 operations per spec). We run and timed that a couple of times in the very same Chrome you’re seeing in the screencast.
Running it took 3 seconds ±200 ms. That’s over 330 tests and 500 DOM operations per second!
tape-css just feels lightening-fast.
It turns out much of the measured time is just the browser rendering the initial page. We tried to time how much that takes – we got wildly differing results though. Feel free to submit a PR if you manage to work this out.
If you use tape, you’ll feel right at home. Give us an instance of tape.
We won’t change its existing API in any way. We just add a couple
of options:
-
dom– one or more DOM elements. We’ll add it to the<body>before your test and clean it up after your test has ended. Default: nothing. -
styles– a string of CSS. We’ll add it as a<style>to the<head>before your test – and clean it up after your test has ended. Default: nothing. -
document– a custom implementation ofdocument. It may be useful for testing outside a browser. Default:window.document.
This module was inspired by quixote. Thumbs up for the great idea @jamesshore!
It turned out that quixote wasn’t easy to use with tape though. As well as that, it comes with heavy abstractions (over 3K lines of code) and its own assertion engine – while everything you need for assertions comes with tape already.
We were after something simple which does one thing (<50 LOC last time we checked). And plays well with other simple tools.