wix-style-react
Version:
wix-style-react
265 lines (209 loc) • 11.1 kB
JavaScript
;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _testUtils = require('react-dom/test-utils');
var _testUtils2 = _interopRequireDefault(_testUtils);
var _MultiSelectCheckbox = require('./MultiSelectCheckbox.driver');
var _MultiSelectCheckbox2 = _interopRequireDefault(_MultiSelectCheckbox);
var _MultiSelectCheckbox3 = require('./MultiSelectCheckbox');
var _MultiSelectCheckbox4 = _interopRequireDefault(_MultiSelectCheckbox3);
var _driverFactory = require('wix-ui-test-utils/driver-factory');
var _testkit = require('../../testkit');
var _enzyme = require('../../testkit/enzyme');
var _enzyme2 = require('enzyme');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
describe('multiSelectCheckbox', function () {
var createDriver = (0, _driverFactory.createDriverFactory)(_MultiSelectCheckbox2.default);
var options = [{ value: 'Alabama', id: 'Alabama-1' }, { value: 'Alaska', id: 'Alaska' }, { value: _react2.default.createElement(
'div',
null,
'Arkansas'
), id: 'Arkansas', label: 'Arkansan Label' }, { value: 'Arkansas', id: 'Arkansas' }, { value: 'California', id: 'California' }, { value: 'California2', id: 'California2' }, { value: 'California3', id: 'California3' }, { value: 'California4', id: 'California4' }, { value: 'California5', id: 'California5' }, { value: 'California6', id: 'California6' }, { value: 'California7', id: 'California7', disabled: true }, { value: 'Two words', id: 'Two words' }];
it('should have a readonly input', function () {
var _createDriver = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, { options: options })),
inputDriver = _createDriver.inputDriver;
expect(inputDriver.getReadOnly()).toBeTruthy();
});
it('should show dropdown on input click', function () {
var _createDriver2 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, { options: options })),
inputDriver = _createDriver2.inputDriver,
dropdownLayoutDriver = _createDriver2.dropdownLayoutDriver;
inputDriver.click();
expect(dropdownLayoutDriver.isShown()).toBeTruthy();
});
it('should not show dropdown on input click when disabled', function () {
var _createDriver3 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, { disabled: true, options: options })),
inputDriver = _createDriver3.inputDriver,
dropdownLayoutDriver = _createDriver3.dropdownLayoutDriver;
inputDriver.click();
expect(dropdownLayoutDriver.isShown()).toBeFalsy();
});
it('should close dropdown on second input click', function () {
var _createDriver4 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, { options: options })),
inputDriver = _createDriver4.inputDriver,
dropdownLayoutDriver = _createDriver4.dropdownLayoutDriver;
inputDriver.click();
inputDriver.click();
expect(dropdownLayoutDriver.isShown()).toBeFalsy();
});
it('should close dropdown on Escape', function () {
var _createDriver5 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, { options: options })),
inputDriver = _createDriver5.inputDriver,
dropdownLayoutDriver = _createDriver5.dropdownLayoutDriver;
inputDriver.click();
inputDriver.focus();
inputDriver.keyDown('Escape');
expect(dropdownLayoutDriver.isShown()).toBeFalsy();
});
var OPEN_DROPDOWN_CHARS = [{ key: 'ArrowDown', keyCode: 40, which: 40 }, { key: 'Enter', keyCode: 13, which: 13 }, { key: 'Space', keyCode: 32, which: 32 }];
OPEN_DROPDOWN_CHARS.forEach(function (charData) {
it('should show dropdown on input focus and press on ' + charData.key, function () {
var _createDriver6 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, { options: options })),
inputDriver = _createDriver6.inputDriver,
dropdownLayoutDriver = _createDriver6.dropdownLayoutDriver;
inputDriver.focus();
inputDriver.trigger('keyDown', charData);
expect(dropdownLayoutDriver.isShown()).toBeTruthy();
});
});
it('should not lose Focus or close the list on selection with a mouse click', function () {
var _createDriver7 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, { options: options })),
inputDriver = _createDriver7.inputDriver,
dropdownLayoutDriver = _createDriver7.dropdownLayoutDriver;
inputDriver.focus();
dropdownLayoutDriver.clickAtOption(0);
expect(inputDriver.isFocus()).toBeTruthy();
});
it('should display a selectedOptions separetaed by default delimiter', function () {
var selectedOptions = [options[0].id, options[1].id];
var _createDriver8 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, {
options: options,
selectedOptions: selectedOptions
})),
inputDriver = _createDriver8.inputDriver;
expect(inputDriver.getValue()).toBe(options[0].value + ', ' + options[1].value);
});
it('should display a selectedOptions separetaed by custom delimiter', function () {
var selectedOptions = [options[0].id, options[1].id];
var delimiter = ';';
var _createDriver9 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, {
options: options,
selectedOptions: selectedOptions,
delimiter: delimiter
})),
inputDriver = _createDriver9.inputDriver;
expect(inputDriver.getValue()).toBe(options[0].value + ';' + options[1].value);
});
it('should not display the selectedOptions that not included in options', function () {
var selectedOptions = [options[0].id, 'NOT_LEGAL_ID', options[1].id];
var _createDriver10 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, {
options: options,
selectedOptions: selectedOptions
})),
inputDriver = _createDriver10.inputDriver;
expect(inputDriver.getValue()).toBe(options[0].value + ', ' + options[1].value);
});
it('should use provided valueParser that will enable handling option with a component in value', function () {
var specialOption = options.find(function (x) {
return typeof x.value !== 'string';
});
var selectedOptions = [specialOption.id];
var valueParser = function valueParser(option) {
return typeof option.value === 'string' ? option.value : option.label;
};
var _createDriver11 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, {
valueParser: valueParser,
options: options,
selectedOptions: selectedOptions
})),
driver = _createDriver11.driver;
expect(driver.getLabelAt(0)).toBe(specialOption.label);
});
it('should contain specific selected values', function () {
var selectedOptions = [options[0].id, options[1].id];
var _createDriver12 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, {
options: options,
selectedOptions: selectedOptions
})),
driver = _createDriver12.driver;
expect(driver.getNumOfLabels()).toBe(selectedOptions.length);
expect(driver.getLabelAt(0)).toBe(options[0].value);
expect(driver.getLabelAt(1)).toBe(options[1].value);
});
it('should not close dropdown after clicking on an option', function () {
var _createDriver13 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, { options: options })),
inputDriver = _createDriver13.inputDriver,
dropdownLayoutDriver = _createDriver13.dropdownLayoutDriver;
inputDriver.click();
dropdownLayoutDriver.clickAtOption(0);
expect(dropdownLayoutDriver.isShown()).toBeTruthy();
});
it('should call onSelect when selecting unselected option', function () {
var onSelect = jest.fn();
var _createDriver14 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, { options: options, onSelect: onSelect })),
dropdownLayoutDriver = _createDriver14.dropdownLayoutDriver;
dropdownLayoutDriver.clickAtOption(0);
expect(onSelect.mock.calls).toHaveLength(1);
expect(onSelect).toHaveBeenCalledWith(options[0].id, options[0]);
});
it('should not call onSelect when selecting a disabled option', function () {
var onSelect = jest.fn();
var indexOfDisabled = options.findIndex(function (opt) {
return opt.disabled;
});
var _createDriver15 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, { options: options, onSelect: onSelect })),
dropdownLayoutDriver = _createDriver15.dropdownLayoutDriver;
dropdownLayoutDriver.clickAtOption(indexOfDisabled);
expect(onSelect).not.toHaveBeenCalled();
});
it('should call onDeselect when selecting selected option', function () {
var selectedOptions = [options[0].id, options[1].id];
var onDeselect = jest.fn();
var _createDriver16 = createDriver(_react2.default.createElement(_MultiSelectCheckbox4.default, {
options: options,
selectedOptions: selectedOptions,
onDeselect: onDeselect
})),
dropdownLayoutDriver = _createDriver16.dropdownLayoutDriver;
dropdownLayoutDriver.clickAtOption(0);
expect(onDeselect).toHaveBeenCalledWith(options[0].id, options[0]);
});
describe('testkit', function () {
it('should exist', function () {
var div = document.createElement('div');
var dataHook = 'myDataHook';
var selectedOptions = [options[0].id];
var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
'div',
null,
_react2.default.createElement(_MultiSelectCheckbox4.default, {
dataHook: dataHook,
selectedOptions: selectedOptions,
options: options
})
)));
var multiSelectCheckboxTestkit = (0, _testkit.multiSelectCheckboxTestkitFactory)({
wrapper: wrapper,
dataHook: dataHook
});
expect(multiSelectCheckboxTestkit.driver.exists()).toBeTruthy();
expect(multiSelectCheckboxTestkit.inputDriver.exists()).toBeTruthy();
expect(multiSelectCheckboxTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
});
});
describe('enzyme testkit', function () {
it('should exist', function () {
var dataHook = 'myDataHook';
var selectedOptions = [options[0].id];
var wrapper = (0, _enzyme2.mount)(_react2.default.createElement(_MultiSelectCheckbox4.default, {
dataHook: dataHook,
selectedOptions: selectedOptions,
options: options
}));
var multiSelectCheckboxTestkit = (0, _enzyme.multiSelectCheckboxTestkitFactory)({ wrapper: wrapper, dataHook: dataHook });
expect(multiSelectCheckboxTestkit.driver.exists()).toBeTruthy();
expect(multiSelectCheckboxTestkit.inputDriver.exists()).toBeTruthy();
expect(multiSelectCheckboxTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
});
});
});