@vtex/styleguide/lib/EXPERIMENTAL_Modal/index.test.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _ = require(".");

var _2 = _interopRequireDefault(_);

var _Input = require("../Input");

var _Input2 = _interopRequireDefault(_Input);

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

/* eslint-disable jsx-a11y/no-autofocus */
describe('Modal', function () {
  jest.spyOn(window, 'scroll').mockImplementation();
  it('should have a default export', function () {
    expect(typeof _2.default).toBe('object');
  });
  describe('onClose', function () {
    it('should be called on click close button', function () {
      var onClose = jest.fn();

      var _render = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose
      }, "Foo")),
          getByRole = _render.getByRole;

      var closeButton = getByRole('button');

      _react3.fireEvent.click(closeButton);

      expect(onClose).toHaveBeenCalled();
    });
    it('should be called on esc by default', function () {
      var onClose = jest.fn();

      var _render2 = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose
      }, "Foo")),
          getByRole = _render2.getByRole;

      _react3.fireEvent.keyDown(getByRole('dialog'), {
        key: 'Escape',
        keyCode: 27
      });

      expect(onClose).toHaveBeenCalled();
    });
    it('should not be called when closeOnEsc prop is false', function () {
      var onClose = jest.fn();

      var _render3 = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose,
        closeOnEsc: false
      }, "Foo")),
          getByRole = _render3.getByRole;

      _react3.fireEvent.keyDown(getByRole('dialog'), {
        key: 'Escape',
        keyCode: 27
      });

      expect(onClose).not.toHaveBeenCalled();
    });
    it('should be called when click on the overlay by default', function () {
      var _document$querySelect;

      var onClose = jest.fn();

      var _render4 = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose
      }, "Foo")),
          container = _render4.container;

      _react3.fireEvent.click((_document$querySelect = document.querySelector('[data-testid="modal__overlay"]')) != null ? _document$querySelect : container);

      expect(onClose).toHaveBeenCalled();
    });
    it('should not be called when closeOnOverlayClick prop is false', function () {
      var _document$querySelect2;

      var onClose = jest.fn();

      var _render5 = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose,
        closeOnOverlayClick: false
      }, "Foo")),
          container = _render5.container;

      _react3.fireEvent.click((_document$querySelect2 = document.querySelector('[data-testid="modal__overlay"]')) != null ? _document$querySelect2 : container);

      expect(onClose).not.toHaveBeenCalled();
    });
  });
  describe('title', function () {
    it('should render title prop', function () {
      var containerModal = document.createElement('div');
      var onClose = jest.fn();
      var title = 'modal title';

      var _render6 = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose,
        title: title,
        container: containerModal
      }, "Foo"), {
        container: containerModal
      }),
          getByText = _render6.getByText,
          asFragment = _render6.asFragment;

      expect(getByText(title)).not.toBeNull();
      expect(asFragment()).toMatchSnapshot();
    });
  });
  describe('isOpen', function () {
    it('Should show modal when isOpen is true and hide when is false', function () {
      var onClose = jest.fn();
      var containerModal = document.createElement('div');

      var _render7 = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose,
        container: containerModal
      }, "Foo"), {
        container: containerModal
      }),
          rerender = _render7.rerender,
          container = _render7.container;

      expect(container).toMatchSnapshot();
      rerender(_react2.default.createElement(_2.default, {
        isOpen: false,
        onClose: onClose,
        container: containerModal
      }, "Foo"));
      expect(container).toMatchSnapshot();
    });
  });
  describe('bottomBar', function () {
    it('should render bottomBar', function () {
      var onClose = jest.fn();
      var containerModal = document.createElement('div');

      var _render8 = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose,
        bottomBar: _react2.default.createElement("div", null, "Bar"),
        container: containerModal
      }, "Foo"), {
        container: containerModal
      }),
          getByText = _render8.getByText,
          container = _render8.container;

      expect(getByText('Bar')).not.toBeNull();
      expect(container).toMatchSnapshot();
    });
  });
  describe('container', function () {
    it('should render modal inside it', function () {
      var onClose = jest.fn();
      var containerModal = document.createElement('div');

      var _render9 = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose,
        container: containerModal
      }, "Foo"), {
        container: document.body.appendChild(containerModal)
      }),
          container = _render9.container;

      expect(container.querySelector('[data-testid="modal__modal"]')).not.toBeNull();
      expect(container).toMatchSnapshot();
    });
  });
  describe('CSS API', function () {
    it('default', function () {
      var containerModal = document.createElement('div');
      var onClose = jest.fn();

      var _render10 = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose,
        container: containerModal
      }, "Foo"), {
        container: containerModal
      }),
          container = _render10.container;

      expect(container).toMatchSnapshot();
    });
    it('responsiveFullScreen true', function () {
      var containerModal = document.createElement('div');
      var onClose = jest.fn();

      var _render11 = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose,
        responsiveFullScreen: true,
        container: containerModal
      }, "Foo"), {
        container: containerModal
      }),
          container = _render11.container;

      expect(container).toMatchSnapshot();
    });
    it('showTopBar false', function () {
      var containerModal = document.createElement('div');
      var onClose = jest.fn();

      var _render12 = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose,
        showTopBar: false,
        container: containerModal
      }, "Foo"), {
        container: containerModal
      }),
          container = _render12.container;

      expect(container).toMatchSnapshot();
    });
    it('showBottomBarBorder false', function () {
      var containerModal = document.createElement('div');
      var onClose = jest.fn();

      var _render13 = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose,
        showBottomBarBorder: false,
        container: containerModal
      }, "Foo"), {
        container: containerModal
      }),
          container = _render13.container;

      expect(container).toMatchSnapshot();
    });
    it('centered', function () {
      var containerModal = document.createElement('div');
      var onClose = jest.fn();

      var _render14 = (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose,
        centered: true,
        container: containerModal
      }, "Foo"), {
        container: containerModal
      }),
          container = _render14.container;

      expect(container).toMatchSnapshot();
    });
  });
  describe('Focus', function () {
    it('Should respect focus controlled outside Modal', function () {
      var containerModal = document.createElement('div');
      var onClose = jest.fn();
      (0, _react3.render)(_react2.default.createElement(_2.default, {
        isOpen: true,
        onClose: onClose,
        container: containerModal
      }, _react2.default.createElement(_Input2.default, {
        autoFocus: true,
        placeholder: "Type your name...",
        size: "small"
      })), {
        container: containerModal
      });
      var currentFocused = document.activeElement;
      expect(currentFocused).toBe(document.querySelector('input'));
    });
  });
});