@brightleaf/elements/lib/__tests__/base.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 _base = require("../base");

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

expect.extend({
  toHaveClass: _jestDom.toHaveClass
});
describe('Base component', function () {
  afterEach(_react2.cleanup);
  it('should render', function () {
    var _render = (0, _react2.render)(_react.default.createElement(_base.Base, {
      className: "base-class-to-check"
    }, _react.default.createElement("div", {
      className: "notification"
    }, "This container"))),
        container = _render.container;

    expect(container.firstChild).toMatchSnapshot();
    expect(container.firstChild).toHaveClass('base-class-to-check');
  });
  it('should render with extra classnames', function () {
    var _render2 = (0, _react2.render)(_react.default.createElement(_base.Base, {
      className: "base-class-to-check contained"
    }, _react.default.createElement("div", {
      className: "notification"
    }, "This container is ", _react.default.createElement("strong", null, "centered"), " on desktop."))),
        container = _render2.container;

    expect(container.firstChild).toMatchSnapshot();
    expect(container.firstChild).toHaveClass('base-class-to-check');
    expect(container.firstChild).toHaveClass('contained');
  });
  it('should render with isFluid', function () {
    var _render3 = (0, _react2.render)(_react.default.createElement(_base.Base, {
      isFluid: true
    }, _react.default.createElement("div", {
      className: "notification"
    }, "This container is ", _react.default.createElement("strong", null, "fluid")))),
        container = _render3.container;

    expect(container.firstChild).toMatchSnapshot();
    expect(container.firstChild).toHaveClass('is-fluid');
  });
  it('should render with isWideScreen', function () {
    var _render4 = (0, _react2.render)(_react.default.createElement(_base.Base, {
      isWideScreen: true
    }, _react.default.createElement("div", {
      className: "notification"
    }, "This container is ", _react.default.createElement("strong", null, "isWideScreen")))),
        container = _render4.container;

    expect(container.firstChild).toMatchSnapshot();
    expect(container.firstChild).toHaveClass('is-widescreen');
  });
  it('should render with isWideScreen', function () {
    var _render5 = (0, _react2.render)(_react.default.createElement(_base.Base, {
      isFullHD: true
    }, _react.default.createElement("div", {
      className: "notification"
    }, "This container is ", _react.default.createElement("strong", null, "isFullHD")))),
        container = _render5.container;

    expect(container.firstChild).toMatchSnapshot();
    expect(container.firstChild).toHaveClass('is-fullhd');
  });
  it('should render with isPrimary', function () {
    var _render6 = (0, _react2.render)(_react.default.createElement(_base.Base, {
      isPrimary: true
    }, _react.default.createElement("div", {
      className: "notification"
    }, "This container is ", _react.default.createElement("strong", null, "primary")))),
        container = _render6.container;

    expect(container.firstChild).toMatchSnapshot();
    expect(container.firstChild).toHaveClass('is-primary');
  });
  it('should render with isPrimary and be disabled', function () {
    var _render7 = (0, _react2.render)(_react.default.createElement(_base.Base, {
      isPrimary: true,
      disabled: true
    }, _react.default.createElement("div", {
      className: "notification"
    }, "This container is ", _react.default.createElement("strong", null, "primary")))),
        container = _render7.container;

    expect(container.firstChild).toMatchSnapshot();
    expect(container.firstChild).toHaveClass('is-primary');
  });
  it('should render as label and for', function () {
    var _render8 = (0, _react2.render)(_react.default.createElement(_base.Base, {
      as: "label",
      htmlFor: "something"
    }, _react.default.createElement("input", {
      type: "text",
      id: "something"
    }), _react.default.createElement("div", {
      className: "notification"
    }, "This container is ", _react.default.createElement("strong", null, "primary")))),
        container = _render8.container;

    expect(container.firstChild).toMatchSnapshot();
  });
  it('should render an image tag', function () {
    var _render9 = (0, _react2.render)(_react.default.createElement(_base.Base, {
      as: "img",
      src: "something.jpg",
      alt: "alt attr"
    })),
        container = _render9.container;

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