wix-style-react/dist/src/TPA/TpaStyleInjector/TpaStyleInjector.spec.js

wix-style-react

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _enzyme = require('enzyme');

var _TpaStyleInjector = require('./TpaStyleInjector');

var _TpaStyleInjector2 = _interopRequireDefault(_TpaStyleInjector);

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

var DummyComponent = function DummyComponent() {
  return _react2.default.createElement(
    'div',
    null,
    'Dummy Component'
  );
};
DummyComponent.displayName = 'DummyComponent';

var DummyComponent2 = function DummyComponent2() {
  return _react2.default.createElement(
    'div',
    null,
    'Dummy Component 2'
  );
};
DummyComponent2.displayName = 'DummyComponent2';

var DummyComponentWithoutDisplayName = function DummyComponentWithoutDisplayName() {
  return _react2.default.createElement(
    'div',
    null,
    'Dummy Component'
  );
};

var MockStyle = function MockStyle() {};
MockStyle.prototype.toString = function () {
  return '.a { background-color: red; }';
};
var mockStyle = new MockStyle();

var WiredMockStyle = function WiredMockStyle() {};
WiredMockStyle.prototype.toString = function () {
  return '.a { background-color: "{{ color-1 }}"; }';
};
var wiredMockStyle = new WiredMockStyle();

var head = document.head;

describe('TpaStyleInjector', function () {
  it('Should render wrapped component', function () {
    var Component = (0, _TpaStyleInjector2.default)(DummyComponent);
    var wrapper = (0, _enzyme.mount)(_react2.default.createElement(Component, null));
    expect(wrapper.html()).toBe('<div>Dummy Component</div>');
  });

  it('Should throw when component missing displayName', function () {
    expect(function () {
      return (0, _TpaStyleInjector2.default)(DummyComponentWithoutDisplayName);
    }).toThrow('Component must have a displayName');
  });

  describe('Stylesheet injection', function () {
    beforeEach(function () {
      var Component = (0, _TpaStyleInjector2.default)(DummyComponent, mockStyle);
      (0, _enzyme.mount)(_react2.default.createElement(Component, null));
    });

    afterEach(function () {
      Array.from(head.children).forEach(function (element) {
        return element.remove();
      });
    });

    it('Should inject stylesheet', function () {
      expect(head.firstChild.tagName).toBe('STYLE');
    });

    it('Should set attribute wix-style to element', function () {
      expect(head.firstChild.getAttribute('wix-style')).toBe('');
    });

    it('Should set attribute wix-style-react-[Component.displayName] to element', function () {
      expect(head.firstChild.getAttribute('wix-style-react-DummyComponent')).toBeTruthy();
    });

    it('Should inject stylesheet contents', function () {
      expect(head.firstChild.innerText).toBe(mockStyle.toString());
    });
  });

  describe('Idempotent stylesheet', function () {
    var Component = (0, _TpaStyleInjector2.default)(DummyComponent, mockStyle);

    beforeEach(function () {
      (0, _enzyme.mount)(_react2.default.createElement(Component, null));
    });

    afterAll(function () {
      Array.from(head.children).forEach(function (element) {
        return element.remove();
      });
    });

    it('Should inject stylesheet on first rendering', function () {
      expect(head.children).toHaveLength(1);
    });

    it('Should not inject after the second rendering', function () {
      expect(head.children).toHaveLength(1);
    });
  });

  describe('Stylesheet injection - more than one component', function () {
    beforeEach(function () {
      var Component1 = (0, _TpaStyleInjector2.default)(DummyComponent, mockStyle);
      var Component2 = (0, _TpaStyleInjector2.default)(DummyComponent2, mockStyle);
      (0, _enzyme.mount)(_react2.default.createElement(Component1, null));
      (0, _enzyme.mount)(_react2.default.createElement(Component2, null));
    });

    afterAll(function () {
      Array.from(head.children).forEach(function (element) {
        return element.remove();
      });
    });

    it('Should inject correct attributes', function () {
      expect(head.firstChild.getAttribute('wix-style-react-DummyComponent2')).toBeTruthy();
      expect(head.children[1].getAttribute('wix-style-react-DummyComponent')).toBeTruthy();
    });

    it('Should keep stylesheets from duplications', function () {
      expect(head.children).toHaveLength(2);
    });
  });

  describe('Wired styling', function () {
    var Component = (0, _TpaStyleInjector2.default)(DummyComponent, wiredMockStyle);

    beforeEach(function () {
      (0, _enzyme.mount)(_react2.default.createElement(Component, null));
    });

    afterAll(function () {
      Array.from(head.children).forEach(function (element) {
        return element.remove();
      });
    });

    it('Should remove quotes from wired styles', function () {
      expect(head.firstChild.innerText).toBe('.a { background-color: {{ color-1 }}; }');
    });
  });
});