react-inky/lib/components/__tests__/Spacer.js

React components for Inky

"use strict";

var _react = _interopRequireDefault(require("react"));

var _server = require("react-dom/server");

var _chai = require("chai");

var _Spacer = _interopRequireDefault(require("../Spacer"));

var _Container = _interopRequireDefault(require("../Container"));

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

/* eslint-disable no-irregular-whitespace */
describe('<Spacer />', () => {
  it('creates a spacer element with correct size', () => {
    const wrapper = (0, _server.renderToStaticMarkup)(_react.default.createElement(_Spacer.default, {
      size: 10
    })); // Caution: the space inside <td> is a non-breaking space

    (0, _chai.expect)(wrapper).html.to.equal(`
      <table class="spacer">
        <tbody>
          <tr>
            <td height="10px" style="font-size:10px;line-height:10px"> </td>
          </tr>
        </tbody>
      </table>
    `);
  });
  it('creates a spacer with a default size or no size defined', () => {
    const wrapper = (0, _server.renderToStaticMarkup)(_react.default.createElement(_Spacer.default, null)); // Caution: the space inside <td> is a non-breaking space

    (0, _chai.expect)(wrapper).html.to.equal(`
      <table class="spacer">
        <tbody>
          <tr>
            <td height="16px" style="font-size:16px;line-height:16px"> </td>
          </tr>
        </tbody>
      </table>
    `);
  });
  it('creates a spacer element for small screens with correct size', () => {
    const wrapper = (0, _server.renderToStaticMarkup)(_react.default.createElement(_Spacer.default, {
      sizeSm: 10
    })); // Caution: the space inside <td> is a non-breaking space

    (0, _chai.expect)(wrapper).html.to.equal(`
      <table class="spacer hide-for-large">
        <tbody>
          <tr>
            <td height="10px" style="font-size:10px;line-height:10px"> </td>
          </tr>
        </tbody>
      </table>
    `);
  });
  it('creates a spacer element for large screens with correct size', () => {
    const wrapper = (0, _server.renderToStaticMarkup)(_react.default.createElement(_Spacer.default, {
      sizeLg: 20
    })); // Caution: the space inside <td> is a non-breaking space

    (0, _chai.expect)(wrapper).html.to.equal(`
      <table class="spacer show-for-large">
        <tbody>
          <tr>
            <td height="20px" style="font-size:20px;line-height:20px"> </td>
          </tr>
        </tbody>
      </table>
    `);
  });
  it('creates a spacer element for small and large screens with correct sizes', () => {
    const wrapper = (0, _server.renderToStaticMarkup)(_react.default.createElement(_Spacer.default, {
      sizeSm: 10,
      sizeLg: 20
    })); // Caution: the space inside <td> is a non-breaking space

    (0, _chai.expect)(wrapper).html.to.equal(`
      <table class="spacer hide-for-large">
        <tbody>
          <tr>
            <td height="10px" style="font-size:10px;line-height:10px"> </td>
          </tr>
        </tbody>
      </table>
      <table class="spacer show-for-large">
        <tbody>
          <tr>
            <td height="20px" style="font-size:20px;line-height:20px"> </td>
          </tr>
        </tbody>
      </table>
    `);
  });
  it('copies classes to the final spacer HTML', () => {
    const wrapper = (0, _server.renderToStaticMarkup)(_react.default.createElement(_Spacer.default, {
      size: 10,
      className: "bgColor"
    })); // Caution: the space inside <td> is a non-breaking space

    (0, _chai.expect)(wrapper).html.to.equal(`
      <table class="spacer bgColor">
        <tbody>
          <tr>
            <td height="10px" style="font-size:10px;line-height:10px"> </td>
          </tr>
        </tbody>
      </table>
    `);
  });
  it('with strict mode off, uses a unitless value for height', () => {
    const wrapper = (0, _server.renderToStaticMarkup)(_react.default.createElement(_Container.default, {
      strictMode: false
    }, _react.default.createElement(_Spacer.default, {
      size: 10
    }))); // Caution: the space inside <td> is a non-breaking space

    (0, _chai.expect)(wrapper).html.to.equal(`
      <table align="center" class="container">
        <tbody>
          <tr>
            <td>
              <table class="spacer">
                <tbody>
                  <tr>
                    <td height="10" style="font-size:10px;line-height:10px"> </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    `);
  });
});