wix-style-react/dist/src/Modal/Modal.spec.js

wix-style-react

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _wixEventually = require('wix-eventually');

var _wixEventually2 = _interopRequireDefault(_wixEventually);

var _Modal = require('./Modal');

var _Modal2 = _interopRequireDefault(_Modal);

var _Modal3 = require('./Modal.driver');

var _Modal4 = _interopRequireDefault(_Modal3);

var _utils = require('../../test/utils');

var _react3 = require('../../test/utils/react');

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

function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }

var MODAL_CLOSE_TIMEOUT = 10;

describe('Modal', function () {
  var testDriver = void 0; // used for cleanup
  var render = function render(jsx) {
    var rendered = (0, _react3.createRendererWithDriver)(_Modal4.default)(jsx);
    testDriver = rendered.driver;
    return rendered;
  };

  afterEach(_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            (0, _react3.cleanup)();

            if (!(testDriver !== null)) {
              _context.next = 4;
              break;
            }

            _context.next = 4;
            return (0, _wixEventually2.default)(function () {
              return !testDriver.isOpen() || Promise.reject();
            }, {
              timeout: MODAL_CLOSE_TIMEOUT * 2,
              interval: 10
            });

          case 4:
            testDriver = null;

          case 5:
          case 'end':
            return _context.stop();
        }
      }
    }, _callee, undefined);
  })));

  var props = {};

  beforeEach(function () {
    props = {};
    props.isOpen = true;
    props.closeTimeoutMS = MODAL_CLOSE_TIMEOUT;
  });

  describe('content', function () {
    it('should not render the modal content if not open by default', function () {
      props.isOpen = false;

      var _render = render(_react2.default.createElement(
        _Modal2.default,
        props,
        _react2.default.createElement('div', { 'data-hook': 'inner-div' })
      )),
          driver = _render.driver;

      expect(driver.getChildBySelector('[data-hook="inner-div"]')).toBeNull();
    });

    it('should render the passed children in the markup', function () {
      props.isOpen = true;

      var _render2 = render(_react2.default.createElement(
        _Modal2.default,
        props,
        _react2.default.createElement('div', { 'data-hook': 'inner-div' })
      )),
          driver = _render2.driver;

      expect(driver.getChildBySelector('[data-hook="inner-div"]')).not.toBeNull();
    });

    it('should pass contentLabel property for a11y support', function () {
      props.isOpen = true;
      props.contentLabel = 'test content label';

      var _render3 = render(_react2.default.createElement(
        _Modal2.default,
        props,
        _react2.default.createElement(
          'div',
          { 'data-hook': 'inner-div' },
          'Dummy Content'
        )
      )),
          driver = _render3.driver;

      expect(driver.getContentLabel()).toEqual(props.contentLabel);
    });

    describe('maxHeight', function () {
      it('should render maxHeight passed in props', function () {
        var _render4 = render(_react2.default.createElement(_Modal2.default, _extends({}, props, { scrollableContent: true, maxHeight: 'calc(100vh - 48px)' }))),
            driver = _render4.driver;

        var _render5 = render(_react2.default.createElement(_Modal2.default, _extends({}, props, {
          scrollableContent: false,
          maxHeight: 'calc(100vh - 48px)'
        }))),
            driver2 = _render5.driver;

        expect(driver.getContentStyle().maxHeight).toBe('calc(100vh - 48px)');
        expect(driver2.getContentStyle().maxHeight).toBe('calc(100vh - 48px)');
      });

      it('should render 100vh maxHeight when maxHeight is set to auto and content is scrollable', function () {
        var _render6 = render(_react2.default.createElement(_Modal2.default, _extends({}, props, { scrollableContent: true, maxHeight: 'auto' }))),
            driver = _render6.driver;

        expect(driver.getContentStyle().maxHeight).toBe('100vh');
      });

      it('content position should be relative', function () {
        var _render7 = render(_react2.default.createElement(_Modal2.default, props)),
            driver = _render7.driver;

        expect(driver.getContentStyle().position).toBe('relative');
      });
    });
  });

  describe('callbacks', function () {
    it('should trigger the onAfterOpen function', function () {
      props.onAfterOpen = jest.fn();

      render(_react2.default.createElement(_Modal2.default, props));
      expect(props.onAfterOpen).toHaveBeenCalledTimes(1);
    });

    it('should trigger the onRequestClose function when clicking the overlay', function () {
      props.onRequestClose = jest.fn();
      props.shouldCloseOnOverlayClick = true;
      props.closeTimeoutMS = 0;

      var _render8 = render(_react2.default.createElement(_Modal2.default, props)),
          driver = _render8.driver;

      driver.clickOnOverlay();

      expect(props.onRequestClose).toHaveBeenCalledTimes(1);
    });

    it('should trigger the onRequestClose function when clicking the close button', function () {
      props.onRequestClose = jest.fn();
      props.shouldDisplayCloseButton = true;
      props.closeTimeoutMS = 0;

      var _render9 = render(_react2.default.createElement(_Modal2.default, props)),
          driver = _render9.driver;

      driver.clickOnCloseButton();

      expect(props.onRequestClose).toHaveBeenCalledTimes(1);
    });

    describe('timeout', function () {
      it('should wait closeTimeoutMS before removing the modal', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
        var _render10, rerender, driver;

        return regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) {
            switch (_context2.prev = _context2.next) {
              case 0:
                props.closeTimeoutMS = 100;

                _render10 = render(_react2.default.createElement(_Modal2.default, props)), rerender = _render10.rerender, driver = _render10.driver;

                expect(driver.isOpen()).toBeTruthy();
                rerender(_react2.default.createElement(_Modal2.default, _extends({}, props, { isOpen: false })));

                _context2.next = 6;
                return (0, _utils.resolveIn)(props.closeTimeoutMS - 50);

              case 6:
                expect(driver.isOpen()).toBeTruthy();
                _context2.next = 9;
                return (0, _utils.resolveIn)(100);

              case 9:
                expect(driver.isOpen()).toBeFalsy();

              case 10:
              case 'end':
                return _context2.stop();
            }
          }
        }, _callee2, undefined);
      })));
    });
  });

  describe('theme', function () {
    it('should set the theme by default to "blue"', function () {
      var _render11 = render(_react2.default.createElement(_Modal2.default, props)),
          driver = _render11.driver;

      expect(driver.isThemeExist('blue')).toBeTruthy();
    });

    it('should allowing setting the theme', function () {
      props.theme = 'green';

      var _render12 = render(_react2.default.createElement(_Modal2.default, props)),
          driver = _render12.driver;

      expect(driver.isThemeExist('green')).toBeTruthy();
      expect(driver.isThemeExist('blue')).toBeFalsy();
    });
  });

  describe('scrollable', function () {
    it('should be set to true by default', function () {
      var _render13 = render(_react2.default.createElement(_Modal2.default, props)),
          driver = _render13.driver;

      expect(driver.isScrollable()).toBe(true);
    });
    it('should allow disabling the scrolling', function () {
      var _render14 = render(_react2.default.createElement(_Modal2.default, _extends({}, props, { scrollable: false }))),
          driver = _render14.driver;

      expect(driver.isScrollable()).toBe(false);
    });
  });

  describe('close button', function () {
    it('should not have a close button', function () {
      props.shouldDisplayCloseButton = false;

      var _render15 = render(_react2.default.createElement(_Modal2.default, props)),
          driver = _render15.driver;

      expect(driver.closeButtonExists()).toBe(false);
    });
    it('should have a close button', function () {
      props.shouldDisplayCloseButton = true;

      var _render16 = render(_react2.default.createElement(_Modal2.default, props)),
          driver = _render16.driver;

      expect(driver.closeButtonExists()).toBe(true);
    });
  });

  describe('appName', function () {
    it('should add aria-hidden body if appElement is not specified', function () {
      render(_react2.default.createElement(_Modal2.default, props));
      expect(document.getElementsByTagName('body')[0].getAttribute('aria-hidden')).toBe('true');
    });

    it('should add aria-hidden to selected element', function () {
      var appElemnt = document.createElement('div');
      appElemnt.setAttribute('id', 'app');
      document.body.appendChild(appElemnt);
      props.appElement = '#app';
      render(_react2.default.createElement(_Modal2.default, props));
      expect(appElemnt.getAttribute('aria-hidden')).toBe('true');
    });
  });
});