@brightleaf/elements/lib/dropdown/__tests__/dropdown.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
});
describe('DropDownMenu components', function () {
  afterEach(_react2.cleanup);
  it('should render', function () {
    var _render = (0, _react2.render)(_react.default.createElement(_.DropDownMenu, {
      label: "Please Select"
    }, _react.default.createElement(_.DropDownItem, {
      onClick: function onClick(e) {
        e.preventDefault();
      }
    }, "First"), _react.default.createElement(_.DropDownDivider, null), _react.default.createElement(_.DropDownItem, {
      onClick: function onClick(e) {
        e.preventDefault();
      }
    }, "Second"))),
        container = _render.container;

    expect(container).toMatchSnapshot();
    expect(container.firstChild).toHaveClass('dropdown');
  });
  it('should render up', function () {
    var _render2 = (0, _react2.render)(_react.default.createElement(_.DropDownMenu, {
      label: "Please Select",
      isUp: true
    }, _react.default.createElement(_.DropDownItem, {
      onClick: function onClick(e) {
        e.preventDefault();
      }
    }, "First"), _react.default.createElement(_.DropDownDivider, null), _react.default.createElement(_.DropDownItem, {
      onClick: function onClick(e) {
        e.preventDefault();
      }
    }, "Second"))),
        container = _render2.container;

    expect(container).toMatchSnapshot();
    expect(container.firstChild).toHaveClass('dropdown');
    expect(container.firstChild).toHaveClass('is-up');
  });
  it('should when the focused `is-active` class added', function _callee() {
    var _render3, container, trigger;

    return regeneratorRuntime.async(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _render3 = (0, _react2.render)(_react.default.createElement(_.DropDownMenu, {
              label: "Please Select"
            }, _react.default.createElement(_.DropDownItem, {
              onClick: function onClick(e) {
                e.preventDefault();
              }
            }, "First"), _react.default.createElement(_.DropDownDivider, null), _react.default.createElement(_.DropDownItem, {
              onClick: function onClick(e) {
                e.preventDefault();
              }
            }, "Second"))), container = _render3.container;
            expect(container.firstChild.firstChild).toMatchSnapshot();
            trigger = document.querySelector('.dropdown-trigger button');

            _react2.fireEvent.focus(container.firstChild.firstChild);

            expect(container).toMatchSnapshot();
            expect(container.firstChild).toHaveClass('is-active');

            _react2.fireEvent.click(trigger);

            expect(container.firstChild).not.toHaveClass('is-active');

            _react2.fireEvent.click(trigger);

            expect(container.firstChild).toHaveClass('is-active');

            _react2.fireEvent.click(trigger);

            expect(container.firstChild).not.toHaveClass('is-active');

          case 12:
          case "end":
            return _context.stop();
        }
      }
    });
  });
  it('should when the trigger is clicked `is-active` class toggled', function _callee2() {
    var _render4, container, trigger;

    return regeneratorRuntime.async(function _callee2$(_context2) {
      while (1) {
        switch (_context2.prev = _context2.next) {
          case 0:
            _render4 = (0, _react2.render)(_react.default.createElement(_.DropDownMenu, {
              label: "Please Select"
            }, _react.default.createElement(_.DropDownItem, {
              onClick: function onClick(e) {
                e.preventDefault();
              }
            }, "First"), _react.default.createElement(_.DropDownDivider, null), _react.default.createElement(_.DropDownItem, {
              onClick: function onClick(e) {
                e.preventDefault();
              }
            }, "Second"))), container = _render4.container;
            trigger = document.querySelector('.dropdown-trigger button');

            _react2.fireEvent.click(trigger);

            expect(container.firstChild).toHaveClass('is-active');

            _react2.fireEvent.click(trigger);

            expect(container.firstChild).not.toHaveClass('is-active');

            _react2.fireEvent.click(trigger);

            expect(container.firstChild).toHaveClass('is-active');

            _react2.fireEvent.click(trigger);

            expect(container.firstChild).not.toHaveClass('is-active');

          case 10:
          case "end":
            return _context2.stop();
        }
      }
    });
  });
  it('should render with the class `is-up` when isUp is passed and have the up icon', function _callee3() {
    var _render5, container, icon;

    return regeneratorRuntime.async(function _callee3$(_context3) {
      while (1) {
        switch (_context3.prev = _context3.next) {
          case 0:
            _render5 = (0, _react2.render)(_react.default.createElement(_.DropDownMenu, {
              label: "Please Select",
              isUp: true
            }, _react.default.createElement(_.DropDownItem, {
              onClick: function onClick(e) {
                e.preventDefault();
              }
            }, "First"), _react.default.createElement(_.DropDownDivider, null), _react.default.createElement(_.DropDownItem, {
              onClick: function onClick(e) {
                e.preventDefault();
              }
            }, "Second"))), container = _render5.container;
            expect(container.firstChild).toHaveClass('is-up');
            icon = document.querySelector('i.fas');
            expect(icon).toHaveClass('fa-angle-up');

          case 4:
          case "end":
            return _context3.stop();
        }
      }
    });
  });
  it('should render without the class `is-up` and have the down icon', function _callee4() {
    var _render6, container, icon;

    return regeneratorRuntime.async(function _callee4$(_context4) {
      while (1) {
        switch (_context4.prev = _context4.next) {
          case 0:
            _render6 = (0, _react2.render)(_react.default.createElement(_.DropDownMenu, {
              label: "Please Select"
            }, _react.default.createElement(_.DropDownItem, {
              onClick: function onClick(e) {
                e.preventDefault();
              }
            }, "First"), _react.default.createElement(_.DropDownDivider, null), _react.default.createElement(_.DropDownItem, {
              onClick: function onClick(e) {
                e.preventDefault();
              }
            }, "Second"))), container = _render6.container;
            expect(container.firstChild).not.toHaveClass('is-up');
            icon = document.querySelector('i.fas');
            expect(icon).toHaveClass('fa-angle-down');

          case 4:
          case "end":
            return _context4.stop();
        }
      }
    });
  });
});