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

React components for Inky

"use strict";

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

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

var _chai = require("chai");

var _Column = _interopRequireDefault(require("../Column"));

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

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

describe('<Column />', () => {
  it('creates a basic column', () => {
    const wrapper = (0, _server.renderToStaticMarkup)(_react.default.createElement(_Column.default, null));
    (0, _chai.expect)(wrapper).html.to.equal(`
      <th class="small-12 large-12 columns">
        <table>
          <tr>
            <th></th>
            <th class="expander"></th>
          </tr>
        </table>
      </th>
    `);
  });
  it('renders a column with first class', () => {
    const wrapper = (0, _server.renderToStaticMarkup)(_react.default.createElement(_Column.default, {
      first: true
    }));
    (0, _chai.expect)(wrapper).html.to.equal(`
      <th class="small-12 large-12 columns first">
        <table>
          <tr>
            <th></th>
            <th class="expander"></th>
          </tr>
        </table>
      </th>
    `);
  });
  it('renders a column with last class', () => {
    const wrapper = (0, _server.renderToStaticMarkup)(_react.default.createElement(_Column.default, {
      last: true
    }));
    (0, _chai.expect)(wrapper).html.to.equal(`
      <th class="small-12 large-12 columns last">
        <table>
          <tr>
            <th></th>
            <th class="expander"></th>
          </tr>
        </table>
      </th>
    `);
  });
  it('allows expander to be removed', () => {
    const wrapper = (0, _server.renderToStaticMarkup)(_react.default.createElement(_Column.default, {
      expander: false
    }));
    (0, _chai.expect)(wrapper).html.to.equal(`
      <th class="small-12 large-12 columns">
        <table>
          <tr>
            <th></th>
          </tr>
        </table>
      </th>
    `);
  });
  it('allows for children', () => {
    const wrapper = (0, _server.renderToStaticMarkup)(_react.default.createElement(_Column.default, null, "Column"));
    (0, _chai.expect)(wrapper).html.to.equal(`
      <th class="small-12 large-12 columns">
        <table>
          <tr>
            <th>Column</th>
            <th class="expander"></th>
          </tr>
        </table>
      </th>
    `);
  });
  it('can use context of <Container />', () => {
    const wrapper = (0, _server.renderToStaticMarkup)(_react.default.createElement(_Container.default, {
      columnCount: 16
    }, _react.default.createElement(_Column.default, null)));
    (0, _chai.expect)(wrapper).html.to.equal(`
      <table  align="center" class="container">
        <tbody>
          <tr>
            <td>
              <th class="small-16 large-16 columns">
                <table>
                  <tr>
                    <th></th>
                    <th class="expander"></th>
                  </tr>
                </table>
              </th>
            </td>
          </tr>
        </tbody>
      </table>
    `);
  });
});