Barista:
CSS Unit Testing.

Compatible with most major test runners and assertion libraries.

Install Barista

Run the following command to add Barista to your project:

npm install seed-barista --save-dev

Although Barista is compatible with most major test runners, the Barista’s documentation uses Mocha and Chai

These can be added with the following command:

npm install mocha chai --save-dev

Basic Usage

Static

Below is an example of how you can set up 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

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.

Example

Below is a sample test for a Button component with the styles written inline.

// Test :: Examples :: Button
'use strict';

var barista = require('seed-barista');
var expect = require('chai').expect;

describe('example: test: button', function() {
  var styles = `
    .btn {
      background: blue;
      border: 1px solid;
      border-color: blue;
      &:hover {
        background: red;
      }
      &:active {
        background: purple;
      }
      &:focus {
        border-color: red;
        &:active {
          border-color: purple;
        }
      }
    };
  `;
  var output = barista({
    content: styles,
  });

  it('should have an active state + style', function() {
    var rule = output.rule('.btn:active');

    expect(rule.prop('background')).to.equal('purple');
  });

  it('should have a focus state + style', function() {
    var rule = output.rule('.btn:focus');

    expect(rule.prop('border-color')).to.equal('red');
  });

  it('should have a focus:active state + style', function() {
    var rule = output.rule('.btn:focus:active');

    expect(rule.exists()).to.be.true;
    expect(rule.prop('border-color')).to.equal('purple');
  });
});

In the wild

Barista has been used extensively in Seed Packs. (We’re working towards 100% coverage!).

Below are a couple of packs already using Barista for testing:

↑Back to top

Help Scout Developers