wix-style-react
Version:
wix-style-react
1,261 lines (1,026 loc) • 44 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 _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _enzyme = require('enzyme');
var _times = require('../utils/operators/times');
var _times2 = _interopRequireDefault(_times);
var _enzyme2 = require('../../testkit/enzyme');
var _testkit = require('../../testkit');
var _testkitSanity = require('../../test/utils/testkit-sanity');
var _ModalSelectorLayout = require('./ModalSelectorLayout');
var _ModalSelectorLayout2 = _interopRequireDefault(_ModalSelectorLayout);
var _driverFactory = require('wix-ui-test-utils/driver-factory');
var _ModalSelectorLayout3 = require('./ModalSelectorLayout.driver');
var _ModalSelectorLayout4 = _interopRequireDefault(_ModalSelectorLayout3);
var _utils = require('../../test/utils');
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"); }); }; }
// TODO: remove this hack
// taken from here: https://github.com/facebook/jest/issues/2157#issuecomment-279171856
var flushPromises = function flushPromises() {
return new Promise(function (resolve) {
return setImmediate(resolve);
});
};
var paginatedDataSourceFactory = function paginatedDataSourceFactory(items) {
return function () {
var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(searchQuery, offset, limit) {
var filteredItems;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
filteredItems = items.filter(function (_ref2) {
var title = _ref2.title;
return title.includes(searchQuery);
});
return _context.abrupt('return', {
items: filteredItems.slice(offset, offset + limit),
totalCount: filteredItems.length
});
case 2:
case 'end':
return _context.stop();
}
}
}, _callee, undefined);
}));
return function (_x, _x2, _x3) {
return _ref.apply(this, arguments);
};
}();
};
var paginatedDataSource = paginatedDataSourceFactory((0, _times2.default)(7, function (i) {
return { id: i, title: 'title-' + i, image: _react2.default.createElement('img', null) };
}));
var emptyDataSource = paginatedDataSourceFactory([]);
var createDriver = (0, _driverFactory.createDriverFactory)(_ModalSelectorLayout4.default);
var requiredProps = {
dataSource: emptyDataSource
};
var createDriverWithProps = function createDriverWithProps(props) {
return createDriver(_react2.default.createElement(_ModalSelectorLayout2.default, _extends({}, requiredProps, props)));
};
describe('ModalSelectorLayout', function () {
describe('layout', function () {
it('should show medium loader', function () {
var driver = createDriverWithProps();
expect(driver.mainLoaderDriver().exists()).toBe(true);
expect(driver.mainLoaderDriver().isMedium()).toBe(true);
});
it('should disable "OK" button while loading', function () {
var driver = createDriverWithProps();
expect(driver.okButtonDriver().isButtonDisabled()).toBe(true);
});
it('should hide search while loading', function () {
var driver = createDriverWithProps();
expect(driver.searchDriver().exists()).toBe(false);
});
it('should hide the loader & render only passed empty state when there are no items in data source', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
var driver;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
driver = createDriverWithProps({
dataSource: emptyDataSource,
emptyState: _react2.default.createElement('img', { src: 'empty_state.png' })
});
_context2.next = 3;
return flushPromises();
case 3:
expect(driver.mainLoaderDriver().exists()).toBe(false);
expect(driver.showsNoResultsFoundState()).toBe(false);
expect(driver.searchDriver().exists()).toBe(false);
expect(driver.showsEmptyState()).toBe(true);
expect(driver.getEmptyState()).toBeInstanceOf(HTMLImageElement);
expect(driver.getEmptyState().src).toBe(_utils.ASSET_PREFIX + 'empty_state.png');
expect(driver.listExists()).toBe(false);
case 10:
case 'end':
return _context2.stop();
}
}
}, _callee2, undefined);
})));
it('should hide loader & render the list of items with images, when there are items in data source', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
var dataSource, driver;
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
dataSource = paginatedDataSourceFactory([{
id: 1,
title: 'rick',
subtitle: 'sanchez',
extraText: 'get',
image: _react2.default.createElement('img', { src: 'rick.png' })
}, {
id: 2,
title: 'morty',
subtitle: 'smith',
extraNode: _react2.default.createElement('img', { src: 'shwifty.png' }),
image: _react2.default.createElement('img', { src: 'morty.png' })
}]);
driver = createDriverWithProps({ dataSource: dataSource });
_context3.next = 4;
return flushPromises();
case 4:
expect(driver.mainLoaderDriver().exists()).toBe(false);
expect(driver.showsEmptyState()).toBe(false);
expect(driver.listExists()).toBe(true);
expect(driver.getSelectorDriverAt(0).titleTextDriver().getText()).toBe('rick');
expect(driver.getSelectorDriverAt(0).subtitleTextDriver().getText()).toBe('sanchez');
expect(driver.getSelectorDriverAt(0).getExtraNode().textContent).toBe('get');
expect(driver.getSelectorDriverAt(0).getImage()).toBeInstanceOf(HTMLImageElement);
expect(driver.getSelectorDriverAt(0).getImage().src).toBe(_utils.ASSET_PREFIX + 'rick.png');
expect(driver.getSelectorDriverAt(1).titleTextDriver().getText()).toBe('morty');
expect(driver.getSelectorDriverAt(1).subtitleTextDriver().getText()).toBe('smith');
expect(driver.getSelectorDriverAt(1).getExtraNode()).toBeInstanceOf(HTMLImageElement);
expect(driver.getSelectorDriverAt(1).getExtraNode().src).toBe(_utils.ASSET_PREFIX + 'shwifty.png');
expect(driver.getSelectorDriverAt(1).getImage()).toBeInstanceOf(HTMLImageElement);
expect(driver.getSelectorDriverAt(1).getImage().src).toBe(_utils.ASSET_PREFIX + 'morty.png');
case 18:
case 'end':
return _context3.stop();
}
}
}, _callee3, undefined);
})));
});
describe('texts & callbacks', function () {
it('should allow setting title', function () {
var expectedTitle = 'Wubba Lubba Dub Dub';
var driver = createDriverWithProps({ title: expectedTitle });
expect(driver.getTitle()).toBe(expectedTitle);
});
it('should allow setting subtitle', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
var expectedSubtitle, driver;
return regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
expectedSubtitle = 'Wubba Lubba Dub Dub';
driver = createDriverWithProps({
dataSource: paginatedDataSource,
subtitle: expectedSubtitle
});
_context4.next = 4;
return flushPromises();
case 4:
expect(driver.subtitleTextDriver().getText()).toBe(expectedSubtitle);
case 5:
case 'end':
return _context4.stop();
}
}
}, _callee4, undefined);
})));
it('should call "onClose" when clicking on X icon', function () {
var stub = jest.fn();
var driver = createDriverWithProps({ onClose: stub });
driver.clickOnClose();
expect(stub).toHaveBeenCalled();
});
it('should allow setting "Cancel" button text', function () {
var expectedTitle = 'Wubba Lubba Dub Dub';
var driver = createDriverWithProps({ cancelButtonText: expectedTitle });
expect(driver.cancelButtonDriver().getButtonTextContent()).toBe(expectedTitle);
});
it('should call "onCancel" when clicking on "Cancel" icon', function () {
var stub = jest.fn();
var driver = createDriverWithProps({
cancelButtonText: 'Cancel',
onCancel: stub
});
driver.cancelButtonDriver().click();
expect(stub).toHaveBeenCalled();
});
it('should allow setting "OK" button text', function () {
var expectedTitle = 'Wubba Lubba Dub Dub';
var driver = createDriverWithProps({ okButtonText: expectedTitle });
expect(driver.okButtonDriver().getButtonTextContent()).toBe(expectedTitle);
});
});
describe('search', function () {
it('should render search input after the items are loaded', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
var driver;
return regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
driver = createDriverWithProps({ dataSource: paginatedDataSource });
_context5.next = 3;
return flushPromises();
case 3:
expect(driver.searchDriver().exists()).toBe(true);
case 4:
case 'end':
return _context5.stop();
}
}
}, _callee5, undefined);
})));
it('should allow hiding search', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
var driver;
return regeneratorRuntime.wrap(function _callee6$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
driver = createDriverWithProps({
dataSource: paginatedDataSource,
withSearch: false
});
_context6.next = 3;
return flushPromises();
case 3:
expect(driver.searchDriver().exists()).toBe(false);
case 4:
case 'end':
return _context6.stop();
}
}
}, _callee6, undefined);
})));
it('should allow passing placeholder', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
var expectedPlaceholder, driver;
return regeneratorRuntime.wrap(function _callee7$(_context7) {
while (1) {
switch (_context7.prev = _context7.next) {
case 0:
expectedPlaceholder = 'some placeholder';
driver = createDriverWithProps({
dataSource: paginatedDataSource,
searchPlaceholder: expectedPlaceholder
});
_context7.next = 4;
return flushPromises();
case 4:
expect(driver.searchDriver().inputDriver.getPlaceholder()).toBe(expectedPlaceholder);
case 5:
case 'end':
return _context7.stop();
}
}
}, _callee7, undefined);
})));
it('should show medium loader, and then show filtered items', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
var driver;
return regeneratorRuntime.wrap(function _callee8$(_context8) {
while (1) {
switch (_context8.prev = _context8.next) {
case 0:
driver = createDriverWithProps({ dataSource: paginatedDataSource });
_context8.next = 3;
return flushPromises();
case 3:
driver.searchDriver().inputDriver.focus();
driver.searchDriver().inputDriver.enterText('title-1');
expect(driver.mainLoaderDriver().exists()).toBe(true);
_context8.next = 8;
return flushPromises();
case 8:
driver.scrollDown();
expect(driver.mainLoaderDriver().exists()).toBe(false);
expect(driver.numberOfItemsInList()).toBe(1);
expect(driver.getSelectorDriverAt(0).titleTextDriver().getText()).toBe('title-1');
case 12:
case 'end':
return _context8.stop();
}
}
}, _callee8, undefined);
})));
it('should render noResultsFoundState with current search value only if no results were found', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
var searchValue, driver;
return regeneratorRuntime.wrap(function _callee9$(_context9) {
while (1) {
switch (_context9.prev = _context9.next) {
case 0:
searchValue = 'wubba lubba dub dub';
driver = createDriverWithProps({
dataSource: paginatedDataSource,
noResultsFoundStateFactory: function noResultsFoundStateFactory(_searchValue) {
return _react2.default.createElement('img', { alt: _searchValue, src: 'no-results-found.png' });
}
});
expect(driver.showsNoResultsFoundState()).toBe(false);
_context9.next = 5;
return flushPromises();
case 5:
expect(driver.showsNoResultsFoundState()).toBe(false);
driver.searchDriver().inputDriver.focus();
driver.searchDriver().inputDriver.enterText(searchValue);
expect(driver.showsNoResultsFoundState()).toBe(false);
_context9.next = 11;
return flushPromises();
case 11:
expect(driver.showsNoResultsFoundState()).toBe(true);
expect(driver.getNoResultsFoundState()).toBeInstanceOf(HTMLImageElement);
expect(driver.getNoResultsFoundState().src).toBe(_utils.ASSET_PREFIX + 'no-results-found.png');
expect(driver.getNoResultsFoundState().alt).toBe(searchValue);
driver.searchDriver().inputDriver.clickClear();
_context9.next = 18;
return flushPromises();
case 18:
expect(driver.showsNoResultsFoundState()).toBe(false);
case 19:
case 'end':
return _context9.stop();
}
}
}, _callee9, undefined);
})));
});
describe('pagination', function () {
it('should render the first 50 items by default, show a small loader when scrolled down,\n then render the next page and remove the loader', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
var dataSource, driver;
return regeneratorRuntime.wrap(function _callee10$(_context10) {
while (1) {
switch (_context10.prev = _context10.next) {
case 0:
dataSource = paginatedDataSourceFactory((0, _times2.default)(55, function (i) {
return { id: i, title: '', subtitle: '' };
}));
driver = createDriverWithProps({ dataSource: dataSource });
_context10.next = 4;
return flushPromises();
case 4:
expect(driver.numberOfItemsInList()).toBe(50);
expect(driver.nextPageLoaderDriver().exists()).toBe(true);
expect(driver.nextPageLoaderDriver().isSmall()).toBe(true);
driver.scrollDown();
_context10.next = 10;
return flushPromises();
case 10:
expect(driver.numberOfItemsInList()).toBe(55);
expect(driver.nextPageLoaderDriver().exists()).toBe(false);
case 12:
case 'end':
return _context10.stop();
}
}
}, _callee10, undefined);
})));
it('should allow configuring items per page', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11() {
var driver;
return regeneratorRuntime.wrap(function _callee11$(_context11) {
while (1) {
switch (_context11.prev = _context11.next) {
case 0:
driver = createDriverWithProps({
dataSource: paginatedDataSource,
itemsPerPage: 2
});
_context11.next = 3;
return flushPromises();
case 3:
expect(driver.numberOfItemsInList()).toBe(2);
driver.scrollDown();
_context11.next = 7;
return flushPromises();
case 7:
expect(driver.numberOfItemsInList()).toBe(4);
driver.scrollDown();
_context11.next = 11;
return flushPromises();
case 11:
expect(driver.numberOfItemsInList()).toBe(6);
case 12:
case 'end':
return _context11.stop();
}
}
}, _callee11, undefined);
})));
});
describe('image size', function () {
it('should render tiny images', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
var driver;
return regeneratorRuntime.wrap(function _callee12$(_context12) {
while (1) {
switch (_context12.prev = _context12.next) {
case 0:
driver = createDriverWithProps({
dataSource: paginatedDataSource,
imageSize: 'tiny'
});
_context12.next = 3;
return flushPromises();
case 3:
expect(driver.getSelectorDriverAt(0).isImageTiny()).toBe(true);
case 4:
case 'end':
return _context12.stop();
}
}
}, _callee12, undefined);
})));
it('should render small images', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
var driver;
return regeneratorRuntime.wrap(function _callee13$(_context13) {
while (1) {
switch (_context13.prev = _context13.next) {
case 0:
driver = createDriverWithProps({
dataSource: paginatedDataSource,
imageSize: 'small'
});
_context13.next = 3;
return flushPromises();
case 3:
expect(driver.getSelectorDriverAt(0).isImageSmall()).toBe(true);
case 4:
case 'end':
return _context13.stop();
}
}
}, _callee13, undefined);
})));
it('should render portrait images', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
var driver;
return regeneratorRuntime.wrap(function _callee14$(_context14) {
while (1) {
switch (_context14.prev = _context14.next) {
case 0:
driver = createDriverWithProps({
dataSource: paginatedDataSource,
imageSize: 'portrait'
});
_context14.next = 3;
return flushPromises();
case 3:
expect(driver.getSelectorDriverAt(0).isImagePortrait()).toBe(true);
case 4:
case 'end':
return _context14.stop();
}
}
}, _callee14, undefined);
})));
it('should render large images', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15() {
var driver;
return regeneratorRuntime.wrap(function _callee15$(_context15) {
while (1) {
switch (_context15.prev = _context15.next) {
case 0:
driver = createDriverWithProps({
dataSource: paginatedDataSource,
imageSize: 'large'
});
_context15.next = 3;
return flushPromises();
case 3:
expect(driver.getSelectorDriverAt(0).isImageLarge()).toBe(true);
case 4:
case 'end':
return _context15.stop();
}
}
}, _callee15, undefined);
})));
it('should render cinema images', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16() {
var driver;
return regeneratorRuntime.wrap(function _callee16$(_context16) {
while (1) {
switch (_context16.prev = _context16.next) {
case 0:
driver = createDriverWithProps({
dataSource: paginatedDataSource,
imageSize: 'cinema'
});
_context16.next = 3;
return flushPromises();
case 3:
expect(driver.getSelectorDriverAt(0).isImageCinema()).toBe(true);
case 4:
case 'end':
return _context16.stop();
}
}
}, _callee16, undefined);
})));
it('should render circle images', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
var driver;
return regeneratorRuntime.wrap(function _callee17$(_context17) {
while (1) {
switch (_context17.prev = _context17.next) {
case 0:
driver = createDriverWithProps({
dataSource: paginatedDataSource,
imageShape: 'circle'
});
_context17.next = 3;
return flushPromises();
case 3:
expect(driver.getSelectorDriverAt(0).isImageCircle()).toBe(true);
case 4:
case 'end':
return _context17.stop();
}
}
}, _callee17, undefined);
})));
it('should render rectangular images', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
var driver;
return regeneratorRuntime.wrap(function _callee18$(_context18) {
while (1) {
switch (_context18.prev = _context18.next) {
case 0:
driver = createDriverWithProps({
dataSource: paginatedDataSource,
imageShape: 'rectangular'
});
_context18.next = 3;
return flushPromises();
case 3:
expect(driver.getSelectorDriverAt(0).isImageRectangular()).toBe(true);
case 4:
case 'end':
return _context18.stop();
}
}
}, _callee18, undefined);
})));
});
describe('radio', function () {
var items = [{ id: 1, title: 'first' }, { id: '2', title: 'second' }];
var dataSource = paginatedDataSourceFactory(items);
it('should render radio buttons', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
var driver;
return regeneratorRuntime.wrap(function _callee19$(_context19) {
while (1) {
switch (_context19.prev = _context19.next) {
case 0:
driver = createDriverWithProps({ dataSource: dataSource });
_context19.next = 3;
return flushPromises();
case 3:
expect(driver.getSelectorDriverAt(0).toggleType()).toBe('radio');
expect(driver.getSelectorDriverAt(1).toggleType()).toBe('radio');
case 5:
case 'end':
return _context19.stop();
}
}
}, _callee19, undefined);
})));
it('all rows should be unchecked', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee20() {
var driver;
return regeneratorRuntime.wrap(function _callee20$(_context20) {
while (1) {
switch (_context20.prev = _context20.next) {
case 0:
driver = createDriverWithProps({ dataSource: dataSource });
_context20.next = 3;
return flushPromises();
case 3:
expect(driver.getSelectorDriverAt(0).isChecked()).toBe(false);
expect(driver.getSelectorDriverAt(0).isChecked()).toBe(false);
case 5:
case 'end':
return _context20.stop();
}
}
}, _callee20, undefined);
})));
it('should toggle rows when clicking on them', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21() {
var driver;
return regeneratorRuntime.wrap(function _callee21$(_context21) {
while (1) {
switch (_context21.prev = _context21.next) {
case 0:
driver = createDriverWithProps({ dataSource: dataSource });
_context21.next = 3;
return flushPromises();
case 3:
driver.getSelectorDriverAt(0).toggle();
expect(driver.getSelectorDriverAt(0).isChecked()).toBe(true);
expect(driver.getSelectorDriverAt(1).isChecked()).toBe(false);
driver.getSelectorDriverAt(1).toggle();
expect(driver.getSelectorDriverAt(0).isChecked()).toBe(false);
expect(driver.getSelectorDriverAt(1).isChecked()).toBe(true);
case 9:
case 'end':
return _context21.stop();
}
}
}, _callee21, undefined);
})));
it('should disable the "OK" button until some row is selected', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee22() {
var driver;
return regeneratorRuntime.wrap(function _callee22$(_context22) {
while (1) {
switch (_context22.prev = _context22.next) {
case 0:
driver = createDriverWithProps({ dataSource: dataSource });
_context22.next = 3;
return flushPromises();
case 3:
expect(driver.okButtonDriver().isButtonDisabled()).toBe(true);
driver.getSelectorDriverAt(0).toggle();
expect(driver.okButtonDriver().isButtonDisabled()).toBe(false);
case 6:
case 'end':
return _context22.stop();
}
}
}, _callee22, undefined);
})));
it('should remember the selection if triggered search', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee23() {
var driver;
return regeneratorRuntime.wrap(function _callee23$(_context23) {
while (1) {
switch (_context23.prev = _context23.next) {
case 0:
driver = createDriverWithProps({ dataSource: dataSource });
_context23.next = 3;
return flushPromises();
case 3:
driver.getSelectorDriverAt(0).toggle();
driver.searchDriver().inputDriver.focus();
driver.searchDriver().inputDriver.enterText('second');
_context23.next = 8;
return flushPromises();
case 8:
expect(driver.getSelectorDriverAt(0).isChecked()).toBe(false);
driver.searchDriver().inputDriver.clickClear();
_context23.next = 12;
return flushPromises();
case 12:
expect(driver.getSelectorDriverAt(0).isChecked()).toBe(true);
case 13:
case 'end':
return _context23.stop();
}
}
}, _callee23, undefined);
})));
it('should call "onOk" with the selected item when clicking on "OK" button', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee24() {
var stub, driver;
return regeneratorRuntime.wrap(function _callee24$(_context24) {
while (1) {
switch (_context24.prev = _context24.next) {
case 0:
stub = jest.fn();
driver = createDriverWithProps({ dataSource: dataSource, onOk: stub });
_context24.next = 4;
return flushPromises();
case 4:
driver.getSelectorDriverAt(0).toggle();
driver.okButtonDriver().click();
expect(stub).toHaveBeenCalledWith(items[0]);
case 7:
case 'end':
return _context24.stop();
}
}
}, _callee24, undefined);
})));
});
describe('given `multiple` prop`', function () {
var items = [{ id: 1, title: 'first' }, { id: '2', title: 'second' }];
var dataSource = paginatedDataSourceFactory(items);
var multiselectModalWithItems = function () {
var _ref26 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee25(_items) {
var _dataSource, driver;
return regeneratorRuntime.wrap(function _callee25$(_context25) {
while (1) {
switch (_context25.prev = _context25.next) {
case 0:
_dataSource = paginatedDataSourceFactory(_items);
driver = createDriverWithProps({
dataSource: _dataSource,
multiple: true
});
_context25.next = 4;
return flushPromises();
case 4:
return _context25.abrupt('return', driver);
case 5:
case 'end':
return _context25.stop();
}
}
}, _callee25, this);
}));
return function multiselectModalWithItems(_x4) {
return _ref26.apply(this, arguments);
};
}();
it('should render checkboxes', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee26() {
var driver;
return regeneratorRuntime.wrap(function _callee26$(_context26) {
while (1) {
switch (_context26.prev = _context26.next) {
case 0:
driver = createDriverWithProps({ dataSource: dataSource, multiple: true });
_context26.next = 3;
return flushPromises();
case 3:
expect(driver.getSelectorDriverAt(0).toggleType()).toBe('checkbox');
expect(driver.getSelectorDriverAt(1).toggleType()).toBe('checkbox');
case 5:
case 'end':
return _context26.stop();
}
}
}, _callee26, undefined);
})));
it('should return list when `onOk` is called', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee27() {
var spy, driver;
return regeneratorRuntime.wrap(function _callee27$(_context27) {
while (1) {
switch (_context27.prev = _context27.next) {
case 0:
spy = jest.fn();
driver = createDriverWithProps({
dataSource: dataSource,
multiple: true,
onOk: spy
});
_context27.next = 4;
return flushPromises();
case 4:
driver.getSelectorDriverAt(0).toggle();
driver.getSelectorDriverAt(1).toggle();
driver.okButtonDriver().click();
expect(spy).toHaveBeenCalledWith(items);
case 8:
case 'end':
return _context27.stop();
}
}
}, _callee27, undefined);
})));
it('should support a disabled selector', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee28() {
var driver;
return regeneratorRuntime.wrap(function _callee28$(_context28) {
while (1) {
switch (_context28.prev = _context28.next) {
case 0:
_context28.next = 2;
return multiselectModalWithItems([{ id: 1, title: 'first', disabled: true }]);
case 2:
driver = _context28.sent;
expect(driver.getSelectorDriverAt(0).isDisabled()).toBe(true);
case 4:
case 'end':
return _context28.stop();
}
}
}, _callee28, undefined);
})));
it('should not count selection of disabled items', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee29() {
var driver;
return regeneratorRuntime.wrap(function _callee29$(_context29) {
while (1) {
switch (_context29.prev = _context29.next) {
case 0:
_context29.next = 2;
return multiselectModalWithItems([{ id: 1, title: 'first', disabled: true }]);
case 2:
driver = _context29.sent;
expect(driver.footerSelector().getLabel()).toContain('(0)');
case 4:
case 'end':
return _context29.stop();
}
}
}, _callee29, undefined);
})));
it('should not count selection of disabled items for deselecting all', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee30() {
var driver;
return regeneratorRuntime.wrap(function _callee30$(_context30) {
while (1) {
switch (_context30.prev = _context30.next) {
case 0:
_context30.next = 2;
return multiselectModalWithItems([{ id: 1, title: 'first', disabled: true }]);
case 2:
driver = _context30.sent;
driver.footerSelector().click();
expect(driver.footerSelector().getLabel()).toContain('(0)');
case 5:
case 'end':
return _context30.stop();
}
}
}, _callee30, undefined);
})));
it('should not count selection of disabled items for selecting some', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee31() {
var driver;
return regeneratorRuntime.wrap(function _callee31$(_context31) {
while (1) {
switch (_context31.prev = _context31.next) {
case 0:
_context31.next = 2;
return multiselectModalWithItems([{ id: 1, title: 'first', disabled: true }, { id: 2, title: 'sec' }]);
case 2:
driver = _context31.sent;
driver.getSelectorDriverAt(1).toggle();
expect(driver.footerSelector().getLabel()).toContain('(1)');
case 5:
case 'end':
return _context31.stop();
}
}
}, _callee31, undefined);
})));
it('should count how many left for select all', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee32() {
var driver;
return regeneratorRuntime.wrap(function _callee32$(_context32) {
while (1) {
switch (_context32.prev = _context32.next) {
case 0:
_context32.next = 2;
return multiselectModalWithItems([{ id: 1, title: 'first', disabled: true }, { id: 2, title: 'sec' }]);
case 2:
driver = _context32.sent;
expect(driver.footerSelector().getLabel()).toContain('(1)');
case 4:
case 'end':
return _context32.stop();
}
}
}, _callee32, undefined);
})));
});
describe('given items with `selected`', function () {
var items = [{ id: 1, title: 'first' }, { id: 2, title: 'second', selected: true }, { id: 3, title: 'third', disabled: true, selected: true }];
var dataSource = paginatedDataSourceFactory(items);
it('should show correct label in footer', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee33() {
var driver;
return regeneratorRuntime.wrap(function _callee33$(_context33) {
while (1) {
switch (_context33.prev = _context33.next) {
case 0:
driver = createDriverWithProps({ dataSource: dataSource, multiple: true });
_context33.next = 3;
return flushPromises();
case 3:
expect(driver.footerSelector().getLabel()).toContain(' Deselect All (1)');
case 4:
case 'end':
return _context33.stop();
}
}
}, _callee33, undefined);
})));
it('should deselect all after click', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee34() {
var driver;
return regeneratorRuntime.wrap(function _callee34$(_context34) {
while (1) {
switch (_context34.prev = _context34.next) {
case 0:
driver = createDriverWithProps({ dataSource: dataSource, multiple: true });
_context34.next = 3;
return flushPromises();
case 3:
driver.footerSelector().click();
expect(driver.footerSelector().getLabel()).toContain(' Select All (2)');
expect(driver.getSelectorDriverAt(0).isChecked()).toBe(false);
expect(driver.getSelectorDriverAt(1).isChecked()).toBe(false);
expect(driver.getSelectorDriverAt(2).isChecked()).toBe(true);
expect(driver.getSelectorDriverAt(2).isDisabled()).toBe(true);
case 9:
case 'end':
return _context34.stop();
}
}
}, _callee34, undefined);
})));
});
describe('defaults', function () {
it('should render empty state', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee35() {
var driver;
return regeneratorRuntime.wrap(function _callee35$(_context35) {
while (1) {
switch (_context35.prev = _context35.next) {
case 0:
driver = createDriverWithProps({
dataSource: emptyDataSource
});
_context35.next = 3;
return flushPromises();
case 3:
expect(driver.showsEmptyState()).toBe(true);
expect(driver.getEmptyState().textContent).toBe("You don't have any items");
case 5:
case 'end':
return _context35.stop();
}
}
}, _callee35, undefined);
})));
it('should render noResultsFound state', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee36() {
var searchValue, driver;
return regeneratorRuntime.wrap(function _callee36$(_context36) {
while (1) {
switch (_context36.prev = _context36.next) {
case 0:
searchValue = 'wubba lubba dub dub';
driver = createDriverWithProps({
dataSource: paginatedDataSource
});
_context36.next = 4;
return flushPromises();
case 4:
driver.searchDriver().inputDriver.focus();
driver.searchDriver().inputDriver.enterText(searchValue);
_context36.next = 8;
return flushPromises();
case 8:
expect(driver.showsNoResultsFoundState()).toBe(true);
expect(driver.getNoResultsFoundState().textContent).toBe('No items matched your search "' + searchValue + '"');
case 10:
case 'end':
return _context36.stop();
}
}
}, _callee36, undefined);
})));
it('should render search placeholder "Search..."', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee37() {
var driver;
return regeneratorRuntime.wrap(function _callee37$(_context37) {
while (1) {
switch (_context37.prev = _context37.next) {
case 0:
driver = createDriverWithProps({ dataSource: paginatedDataSource });
_context37.next = 3;
return flushPromises();
case 3:
expect(driver.searchDriver().inputDriver.getPlaceholder()).toBe('Search...');
case 4:
case 'end':
return _context37.stop();
}
}
}, _callee37, undefined);
})));
it('should render "OK" button text "Select"', function () {
var driver = createDriverWithProps();
expect(driver.okButtonDriver().getButtonTextContent()).toBe('Select');
});
it('should render "Cancel" button text "Cancel"', function () {
var driver = createDriverWithProps();
expect(driver.cancelButtonDriver().getButtonTextContent()).toBe('Cancel');
});
it('should render title as "Choose Your Items"', function () {
var driver = createDriverWithProps();
expect(driver.getTitle()).toBe('Choose Your Items');
});
it('should render large rectangular images', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee38() {
var driver;
return regeneratorRuntime.wrap(function _callee38$(_context38) {
while (1) {
switch (_context38.prev = _context38.next) {
case 0:
driver = createDriverWithProps({ dataSource: paginatedDataSource });
_context38.next = 3;
return flushPromises();
case 3:
expect(driver.getSelectorDriverAt(0).isImageLarge()).toBe(true);
expect(driver.getSelectorDriverAt(0).isImageRectangular()).toBe(true);
case 5:
case 'end':
return _context38.stop();
}
}
}, _callee38, undefined);
})));
it('should not render subtitle by default', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee39() {
var driver;
return regeneratorRuntime.wrap(function _callee39$(_context39) {
while (1) {
switch (_context39.prev = _context39.next) {
case 0:
driver = createDriverWithProps({
dataSource: paginatedDataSource
});
_context39.next = 3;
return flushPromises();
case 3:
expect(driver.subtitleTextDriver().exists()).toBe(false);
case 4:
case 'end':
return _context39.stop();
}
}
}, _callee39, undefined);
})));
});
describe('testkits', function () {
describe('vanilla', function () {
it('should exist', function () {
expect((0, _testkitSanity.isTestkitExists)(_react2.default.createElement(_ModalSelectorLayout2.default, requiredProps), _testkit.modalSelectorLayoutTestkitFactory)).toBe(true);
});
});
describe('enzyme', function () {
it('should exist', function () {
expect((0, _testkitSanity.isEnzymeTestkitExists)(_react2.default.createElement(_ModalSelectorLayout2.default, requiredProps), _enzyme2.modalSelectorLayoutTestkitFactory, _enzyme.mount)).toBe(true);
});
});
});
});