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 = 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!

Step 1: Bring it in 💪

Require Genki into your .js file:

var expect = require('chai').expect; // Not necessary, but chai is nice
var genki = require('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 = genki.start({
  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.$('body').html(`
  <div class="box">Hello</div>
`);

Step 4: Test your element's style 😎

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 ❤️!