Genki
Easy CSS unit testing in Node.
Making sure that CSS nice and Genki.
No browser or PhantomJS required!
Install
npm install genki --save-dev
Getting Started
var expect = expect;var genki = ;var world = genkistart file: 'my-styles.css'; ;
Let's break it down!
Step 1: Bring it in 💪
Require Genki into your .js
file:
var expect = expect; // Not necessary, but chai is nicevar genki = ;
Step 2: Create your world 🌈
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 = genkistart file: 'my-styles.css';
Step 3: Add your elements ✨
Genki's virtual DOM comes equipt with jQuery. Use the .$()
to add stuff to your world:
world;
Step 4: Test your element's style 😎
Using jQuery's .css()
method, you can check your element's computed CSS against your test assertions:
to;
Rinse and repeat until your CSS is super Genki!
Stay 元気 everyone ❤️!