Barista is a Javascript utility for (S)CSS unit testing, compatible with most major test runners and assertion libraries.
Seed isn't required for Barista to work. Although, Barista does make it easier to write tests for Seed CSS.
For added convenience, we recommend trying out seed-bistro.
It comes with Barista + other libraries for CSS testing goodness 🙌
The latest versions of Barista require Node.js v6 or newer to work (and not explode).
npm install seed-barista --save-dev
Below is an example of how you can setup a Mocha test with Barista. A fast and simple way to test .scss output is to verify the rendered output matches against expected strings.
var expect = require('chai').expect;
var barista = require('seed-barista');
describe('harry component styles', function() {
it('should render a class of wizard + harry', function() {
var output = barista({ file: '_wizard.scss' });
var rule = output.rule('.your-a-wizard.harry');
expect(rule.exists()).to.be.true;
expect(rule.prop('background')).to.equal('red');
expect(rule.prop('color')).to.equal('yellow');
});
});Check out the full API documentation
Mounted based testing creates a virtual DOM, allowing you to write assertions against DOM elements. Barista's Mounted API uses jQuery to retrieve computed CSS styles.
var expect = require('chai').expect;
var barista = require('seed-barista');
describe('harry component styles', function() {
it('should render a class of wizard + harry', function() {
var output = barista({ file: '_wizard.scss' }).mount();
var rule = output.find('.your-a-wizard.harry');
expect(rule.prop('background')).to.equal('red');
expect(rule.prop('color')).to.equal('yellow');
});
});Check out the full API documentation
Check out an example test