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

wix-style-react

import React from 'react';
import { mount } from 'enzyme';
import tpaStyleInjector from './TpaStyleInjector';

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

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

var DummyComponentWithoutDisplayName = function DummyComponentWithoutDisplayName() {
  return React.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 = tpaStyleInjector(DummyComponent);
    var wrapper = mount(React.createElement(Component, null));
    expect(wrapper.html()).toBe('<div>Dummy Component</div>');
  });

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

  describe('Stylesheet injection', function () {
    beforeEach(function () {
      var Component = tpaStyleInjector(DummyComponent, mockStyle);
      mount(React.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 = tpaStyleInjector(DummyComponent, mockStyle);

    beforeEach(function () {
      mount(React.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 = tpaStyleInjector(DummyComponent, mockStyle);
      var Component2 = tpaStyleInjector(DummyComponent2, mockStyle);
      mount(React.createElement(Component1, null));
      mount(React.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 = tpaStyleInjector(DummyComponent, wiredMockStyle);

    beforeEach(function () {
      mount(React.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 }}; }');
    });
  });
});