wix-style-react
Version:
wix-style-react
278 lines (216 loc) • 9.42 kB
JavaScript
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 _this = this;
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"); }); }; }
import React from 'react';
import eventually from 'wix-eventually';
import Modal from './Modal';
import ModalFactory from './Modal.driver';
import { resolveIn } from '../../test/utils';
import { createRendererWithDriver, cleanup } from '../../test/utils/react';
var MODAL_CLOSE_TIMEOUT = 10;
describe('Modal', function () {
var testDriver = void 0; // used for cleanup
var render = function render(jsx) {
var rendered = createRendererWithDriver(ModalFactory)(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:
cleanup();
if (!(testDriver !== null)) {
_context.next = 4;
break;
}
_context.next = 4;
return eventually(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, _this);
})));
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(React.createElement(
Modal,
props,
React.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(React.createElement(
Modal,
props,
React.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(React.createElement(
Modal,
props,
React.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(React.createElement(Modal, _extends({}, props, { scrollableContent: true, maxHeight: 'calc(100vh - 48px)' }))),
driver = _render4.driver;
var _render5 = render(React.createElement(Modal, _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(React.createElement(Modal, _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(React.createElement(Modal, 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(React.createElement(Modal, 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(React.createElement(Modal, 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(React.createElement(Modal, 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(React.createElement(Modal, props)), rerender = _render10.rerender, driver = _render10.driver;
expect(driver.isOpen()).toBeTruthy();
rerender(React.createElement(Modal, _extends({}, props, { isOpen: false })));
_context2.next = 6;
return resolveIn(props.closeTimeoutMS - 50);
case 6:
expect(driver.isOpen()).toBeTruthy();
_context2.next = 9;
return resolveIn(100);
case 9:
expect(driver.isOpen()).toBeFalsy();
case 10:
case 'end':
return _context2.stop();
}
}
}, _callee2, _this);
})));
});
});
describe('theme', function () {
it('should set the theme by default to "blue"', function () {
var _render11 = render(React.createElement(Modal, props)),
driver = _render11.driver;
expect(driver.isThemeExist('blue')).toBeTruthy();
});
it('should allowing setting the theme', function () {
props.theme = 'green';
var _render12 = render(React.createElement(Modal, 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(React.createElement(Modal, props)),
driver = _render13.driver;
expect(driver.isScrollable()).toBe(true);
});
it('should allow disabling the scrolling', function () {
var _render14 = render(React.createElement(Modal, _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(React.createElement(Modal, props)),
driver = _render15.driver;
expect(driver.closeButtonExists()).toBe(false);
});
it('should have a close button', function () {
props.shouldDisplayCloseButton = true;
var _render16 = render(React.createElement(Modal, 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(React.createElement(Modal, 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(React.createElement(Modal, props));
expect(appElemnt.getAttribute('aria-hidden')).toBe('true');
});
});
});