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

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

expect.extend({
  toHaveClass: _jestDom.toHaveClass,
  toHaveAttribute: _jestDom.toHaveAttribute,
  toContainElement: _jestDom.toContainElement
});
describe('The Heading Component', function () {
  afterEach(_react2.cleanup);
  it('should render a div with the class heading', function () {
    var _render = (0, _react2.render)(_react.default.createElement(_.Heading, null, " ")),
        container = _render.container;

    expect(container.firstChild).toMatchSnapshot();
    expect(container.firstChild).toHaveClass('heading');
  });
  it('should render a div with the class heading and the className passed in', function () {
    var _render2 = (0, _react2.render)(_react.default.createElement(_.Heading, {
      className: "heading-test"
    })),
        container = _render2.container;

    expect(container.firstChild).toMatchSnapshot();
    expect(container.firstChild).toHaveClass('heading');
    expect(container.firstChild).toHaveClass('heading-test');
  });
  it('should render a p with the class heading when as property is set to `div`', function () {
    var _render3 = (0, _react2.render)(_react.default.createElement(_.Heading, {
      as: "div"
    })),
        container = _render3.container;

    expect(container).toMatchSnapshot();
    expect(container.firstChild).toHaveClass('heading');
    var p = document.querySelector('div.heading');
    expect(container).toContainElement(p);
  });
});