styled-components/lib/constructors/test/keyframes.test.js

**This is a work in progress** based off of [this demo](https://github.com/geelen/css-components-demo).

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _templateObject = _taggedTemplateLiteral(['\n      0% {\n        opacity: 0;\n      }\n      100% {\n        opacity: 1;\n      }\n    '], ['\n      0% {\n        opacity: 0;\n      }\n      100% {\n        opacity: 1;\n      }\n    ']),
    _templateObject2 = _taggedTemplateLiteral(['', ''], ['', '']);

var _expect = require('expect');

var _expect2 = _interopRequireDefault(_expect);

var _proxyquire = require('proxyquire');

var _proxyquire2 = _interopRequireDefault(_proxyquire);

var _keyframes = require('../keyframes');

var _keyframes2 = _interopRequireDefault(_keyframes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var KEYFRAMES_REGEX = /@keyframes\s*(\S+)\s*\{/;

var hasValidKeyframesDeclaration = function hasValidKeyframesDeclaration(str) {
  return KEYFRAMES_REGEX.test(str);
};
var getKeyframesNameFromCSS = function getKeyframesNameFromCSS(str) {
  return str.match(KEYFRAMES_REGEX)[1];
};

/**
 * Setup
 */
var insertSpy = _expect2.default.createSpy();

var StubStylesheet = function () {
  function StubStylesheet() {
    _classCallCheck(this, StubStylesheet);
  }

  _createClass(StubStylesheet, [{
    key: 'inject',
    value: function inject() {}
  }, {
    key: 'insert',
    value: function insert() {
      insertSpy.apply(undefined, arguments);
    }
  }]);

  return StubStylesheet;
}();

var stubbedSheet = {
  StyleSheet: StubStylesheet,
  '@global': true
};

var stubbedKeyframes = (0, _proxyquire2.default)('../keyframes', {
  '../vendor/glamor/sheet': stubbedSheet
});

describe('keyframes', function () {
  beforeEach(function () {
    insertSpy.reset();
  });

  it('should return its name', function () {
    (0, _expect2.default)((0, _keyframes2.default)(_templateObject)).toBeA('string');
  });

  it('should insert the correct styles', function () {
    var rules = '\n      0% {\n        opacity: 0;\n      }\n      100% {\n        opacity: 1;\n      }\n    ';

    var name = stubbedKeyframes(_templateObject2, rules);

    (0, _expect2.default)(insertSpy).toHaveBeenCalled();
    (0, _expect2.default)(insertSpy.calls.length).toEqual(1);
    (0, _expect2.default)(hasValidKeyframesDeclaration(insertSpy.calls[0].arguments[0])).toEqual(true);
    (0, _expect2.default)(getKeyframesNameFromCSS(insertSpy.calls[0].arguments[0])).toEqual(name);
    (0, _expect2.default)(insertSpy.calls[0].arguments[0]).toInclude(rules);
  });
});