@brightleaf/elements/lib/columns/__tests__/columns.test.js

React UI elements styled with Bulma CSS

"use strict";

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

var _react2 = require("@testing-library/react");

var _jestDom = require("@testing-library/jest-dom");

var _columns = require("../columns");

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

expect.extend({
  toHaveClass: _jestDom.toHaveClass
});
describe('Column and Columns', function () {
  afterEach(_react2.cleanup);
  it('should render', function () {
    var _render = (0, _react2.render)(_react.default.createElement(_columns.Columns, null, _react.default.createElement(_columns.Column, null, "Hi"))),
        container = _render.container;

    expect(container.firstChild).toMatchSnapshot();
  });
  it('should render One Third Column when isOneThird is true', function () {
    var _render2 = (0, _react2.render)(_react.default.createElement(_columns.Columns, null, _react.default.createElement(_columns.Column, {
      isOneThird: true
    }, "Hi"))),
        container = _render2.container,
        getByText = _render2.getByText;

    expect(container.firstChild).toMatchSnapshot();
    var col = getByText('Hi');
    expect(col).toHaveClass('is-one-third');
  });
  it('should render Two Thirds Column when isTwoThirds is true', function () {
    var _render3 = (0, _react2.render)(_react.default.createElement(_columns.Columns, null, _react.default.createElement(_columns.Column, {
      isTwoThirds: true
    }, "Hi"))),
        container = _render3.container,
        getByText = _render3.getByText;

    expect(container.firstChild).toMatchSnapshot();
    var col = getByText('Hi');
    expect(col).toHaveClass('is-two-thirds');
  });
  it('should render one half Column when isHalf is true', function () {
    var _render4 = (0, _react2.render)(_react.default.createElement(_columns.Columns, null, _react.default.createElement(_columns.Column, {
      isHalf: true
    }, "Hi"))),
        container = _render4.container,
        getByText = _render4.getByText;

    expect(container.firstChild).toMatchSnapshot();
    var col = getByText('Hi');
    expect(col).toHaveClass('is-half');
  });
  it('should render three quarters Column when isThreeQuarters is true', function () {
    var _render5 = (0, _react2.render)(_react.default.createElement(_columns.Columns, null, _react.default.createElement(_columns.Column, {
      isThreeQuarters: true
    }, "Hi"))),
        container = _render5.container,
        getByText = _render5.getByText;

    expect(container.firstChild).toMatchSnapshot();
    var col = getByText('Hi');
    expect(col).toHaveClass('is-three-quarters');
  });
  it('should render one quarter Column when isOneQuarter is true', function () {
    var _render6 = (0, _react2.render)(_react.default.createElement(_columns.Columns, null, _react.default.createElement(_columns.Column, {
      isOneQuarter: true
    }, "Hi"))),
        container = _render6.container,
        getByText = _render6.getByText;

    expect(container.firstChild).toMatchSnapshot();
    var col = getByText('Hi');
    expect(col).toHaveClass('is-one-quarter');
  });
  it('should render Full Column', function () {
    var _render7 = (0, _react2.render)(_react.default.createElement(_columns.Columns, null, _react.default.createElement(_columns.FullColumn, null, "Hi"))),
        container = _render7.container,
        getByText = _render7.getByText;

    expect(container.firstChild).toMatchSnapshot();
    var full = getByText('Hi');
    expect(full).toHaveClass('is-full');
  });
  it('should render nested columns', function () {
    var _render8 = (0, _react2.render)(_react.default.createElement(_columns.Columns, null, _react.default.createElement(_columns.Column, null, _react.default.createElement("p", {
      className: "bd-notification is-info"
    }, "First column"), _react.default.createElement(_columns.Columns, {
      className: "is-mobile"
    }, _react.default.createElement(_columns.Column, null, _react.default.createElement("p", {
      className: "bd-notification is-info"
    }, "First nested column")), _react.default.createElement(_columns.Column, null, _react.default.createElement("p", {
      className: "bd-notification is-info"
    }, "Second nested column")))), _react.default.createElement(_columns.Column, null, _react.default.createElement("p", {
      className: "bd-notification is-danger"
    }, "Second column"), _react.default.createElement(_columns.Columns, {
      isMobile: true
    }, _react.default.createElement(_columns.Column, {
      isHalf: true
    }, _react.default.createElement("p", {
      className: "bd-notification is-danger"
    }, "50%")), _react.default.createElement(_columns.Column, null, _react.default.createElement("p", {
      className: "bd-notification is-danger"
    }, "Auto")), _react.default.createElement(_columns.Column, null, _react.default.createElement("p", {
      className: "bd-notification is-danger"
    }, "Auto")))))),
        container = _render8.container;

    expect(container.firstChild).toMatchSnapshot();
  });
});