Easy CSS unit testing in Node.
Making sure that CSS nice and Genki.
No browser or PhantomJS required!
npm install genki --save-dev
var expect = require('chai').expect;
var genki = require('genki');
var world = genki.start({
file: 'my-styles.css',
});
describe('simple test', function() {
it('should look right', function() {
world.$('body').html(`
<div class="box">Hello</div>
`);
var $box = world.$('.box');
expect($box.css('height')).to.equal('10px');
});
});
Let's break it down!
Require Genki into your .js
file:
var expect = require('chai').expect; // Not necessary, but chai is nice
var genki = require('genki');
Generate your virtual DOM (powered by jsdom) by executing genki.start()
. In the example below, Genki's virtual DOM is assigned to the variable world
.
Genki can help load and render CSS for you inside the Virtual DOM, thanks to seed-barista.
genki.start()
accepts an options
argument (object
).
Bonus: You can load .scss
files too!
var world = genki.start({
file: 'my-styles.css',
});
Genki's virtual DOM comes equipt with jQuery. Use the .$()
to add stuff to your world:
world.$('body').html(`
<div class="box">Hello</div>
`);
Using jQuery's .css()
method, you can check your element's computed CSS against your test assertions:
expect($box.css('height')).to.equal('10px');
Rinse and repeat until your CSS is super Genki!
Stay ε ζ° everyone β€οΈ!