wix-style-react
Version:
wix-style-react
546 lines (422 loc) • 22.6 kB
JavaScript
'use strict';
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _testUtils = require('react-dom/test-utils');
var _testUtils2 = _interopRequireDefault(_testUtils);
var _MultiSelect = require('./MultiSelect.driver');
var _MultiSelect2 = _interopRequireDefault(_MultiSelect);
var _MultiSelect3 = require('./MultiSelect');
var _MultiSelect4 = _interopRequireDefault(_MultiSelect3);
var _testkit = require('../../testkit');
var _enzyme = require('../../testkit/enzyme');
var _enzyme2 = require('enzyme');
var _deprecationLog = require('../utils/deprecationLog');
var _unit = require('../../test/utils/unit');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
describe('MultiSelect', function () {
var render = (0, _unit.createRendererWithDriver)(_MultiSelect2.default);
var createDriver = function createDriver(jsx) {
return render(jsx).driver;
};
var options = [{ value: 'Alabama', id: 'Alabama', tag: { label: 'Alabama' } }, { value: 'Alaska', id: 'Alaska' }, { value: 'Arkansas', id: 'Arkansas', tag: { label: 'Arkansas' } }, { 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' }, { value: 'Two words', id: 'Two words' }];
afterEach(function () {
(0, _unit.cleanup)();
});
it('should NOT show dropdown when autofocus is on', function () {
var _createDriver = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options, autoFocus: true })),
inputDriver = _createDriver.inputDriver,
dropdownLayoutDriver = _createDriver.dropdownLayoutDriver;
expect(inputDriver.isFocus()).toBeTruthy();
expect(dropdownLayoutDriver.isShown()).toBeFalsy();
});
it('should remove options that were selected and became tags', function () {
var tags = [{ id: 'Alabama', label: 'Alabama' }];
var _render = render(_react2.default.createElement(_MultiSelect4.default, { options: options, autoFocus: true })),
multiSelectDriver = _render.driver,
rerender = _render.rerender;
var dropdownLayoutDriver = multiSelectDriver.dropdownLayoutDriver;
expect(dropdownLayoutDriver.optionsLength()).toBe(options.length);
expect(dropdownLayoutDriver.isOptionExists('Alabama')).toBeTruthy();
rerender(_react2.default.createElement(_MultiSelect4.default, { options: options, tags: tags, autoFocus: true }));
expect(dropdownLayoutDriver.optionsLength()).toBe(options.length - tags.length);
expect(dropdownLayoutDriver.isOptionExists('Alabama')).toBeFalsy();
});
it('should not filter anything without predicate function', function () {
var onSelect = jest.fn();
var _createDriver2 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options, onSelect: onSelect })),
driver = _createDriver2.driver,
dropdownLayoutDriver = _createDriver2.dropdownLayoutDriver;
driver.focus();
expect(dropdownLayoutDriver.optionsLength()).toBe(options.length);
});
it('should not lose Focus or close the list on selection with a mouse click', function () {
var _createDriver3 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options })),
driver = _createDriver3.driver,
inputDriver = _createDriver3.inputDriver,
dropdownLayoutDriver = _createDriver3.dropdownLayoutDriver;
driver.pressKey('ArrowDown');
dropdownLayoutDriver.clickAtOption(0);
expect(dropdownLayoutDriver.isShown()).toBeTruthy();
expect(inputDriver.isFocus());
});
it('should not lose Focus or close the list on selection with enter press', function () {
var _createDriver4 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options })),
driver = _createDriver4.driver,
inputDriver = _createDriver4.inputDriver,
dropdownLayoutDriver = _createDriver4.dropdownLayoutDriver;
driver.focus();
driver.pressKey('ArrowDown');
driver.pressKey('Enter');
expect(dropdownLayoutDriver.isShown()).toBeTruthy();
expect(inputDriver.isFocus()).toBeTruthy();
});
it('should not lose Focus or close the list on selection with tab press', function () {
var onSelect = jest.fn();
var _createDriver5 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options, onSelect: onSelect })),
driver = _createDriver5.driver,
inputDriver = _createDriver5.inputDriver,
dropdownLayoutDriver = _createDriver5.dropdownLayoutDriver;
driver.pressKey('ArrowDown');
driver.pressKey('ArrowDown');
driver.pressKey('Tab');
expect(onSelect).toBeCalledWith([{ id: options[0].id, label: options[0].value }]);
expect(dropdownLayoutDriver.isShown()).toBeTruthy();
expect(inputDriver.isFocus()).toBeTruthy();
});
it('should not lose Focus or close the list on selection with comma press', function () {
var onSelect = jest.fn();
var onChange = jest.fn();
var _createDriver6 = createDriver(_react2.default.createElement(_MultiSelect4.default, {
value: options[0].value,
options: options,
delimiters: [','],
onSelect: onSelect,
onChange: onChange
})),
driver = _createDriver6.driver,
inputDriver = _createDriver6.inputDriver,
dropdownLayoutDriver = _createDriver6.dropdownLayoutDriver;
driver.pressKey('ArrowDown');
inputDriver.trigger('keyDown', { key: ',' });
expect(onSelect).toBeCalledWith([{ id: options[0].id, label: options[0].value }]);
expect(onChange).toBeCalledWith({ target: { value: '' } });
expect(dropdownLayoutDriver.isShown()).toBeTruthy();
expect(inputDriver.isFocus()).toBeTruthy();
});
describe('click-outside', function () {
it('should call onSelect on click-outside if options empty', function () {
var onSelect = jest.fn();
var _createDriver7 = createDriver(_react2.default.createElement(_MultiSelect4.default, { value: 'bob', onSelect: onSelect })),
driver = _createDriver7.driver;
driver.outsideClick();
expect(onSelect).toBeCalledWith([{ id: 'bob', label: 'bob' }]);
});
it('should not call onSelect on click-outside if options is not empty', function () {
var onSelect = jest.fn();
var _createDriver8 = createDriver(_react2.default.createElement(_MultiSelect4.default, { value: 'bob', options: options, onSelect: onSelect })),
driver = _createDriver8.driver;
driver.outsideClick();
expect(onSelect.mock.calls).toHaveLength(0);
});
it('should not call onSelect on click-outside if input is empty', function () {
var onSelect = jest.fn();
var _createDriver9 = createDriver(_react2.default.createElement(_MultiSelect4.default, { value: '', onSelect: onSelect })),
driver = _createDriver9.driver;
driver.outsideClick();
expect(onSelect.mock.calls).toHaveLength(0);
});
it('should call onChange on click-outside if options is open', function () {
var onChange = jest.fn();
var _createDriver10 = createDriver(_react2.default.createElement(_MultiSelect4.default, { value: '', onChange: onChange })),
driver = _createDriver10.driver;
driver.pressKey('ArrowDown');
driver.outsideClick();
expect(onChange.mock.calls).toHaveLength(1);
});
it('should not call onChange on click-outside if options is hidden', function () {
var onChange = jest.fn();
var _createDriver11 = createDriver(_react2.default.createElement(_MultiSelect4.default, { value: '', onChange: onChange })),
driver = _createDriver11.driver;
driver.outsideClick();
expect(onChange.mock.calls).toHaveLength(0);
});
});
it('should support custom delimiters', function () {
var onSelect = jest.fn();
var onChange = jest.fn();
var _createDriver12 = createDriver(_react2.default.createElement(_MultiSelect4.default, {
value: options[0].value,
options: options,
delimiters: [';'],
onSelect: onSelect,
onChange: onChange
})),
driver = _createDriver12.driver,
inputDriver = _createDriver12.inputDriver,
dropdownLayoutDriver = _createDriver12.dropdownLayoutDriver;
driver.pressKey('ArrowDown');
inputDriver.trigger('keyDown', { key: ';' });
expect(onSelect).toBeCalledWith([{ id: options[0].id, label: options[0].value }]);
expect(onChange).toBeCalledWith({ target: { value: '' } });
expect(dropdownLayoutDriver.isShown()).toBeTruthy();
expect(inputDriver.isFocus()).toBeTruthy();
});
it('should display a placeholder if there are no tags', function () {
var placeholder = 'myPlaceholder';
var _createDriver13 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options, placeholder: placeholder })),
inputDriver = _createDriver13.inputDriver;
expect(inputDriver.getPlaceholder()).toBe(placeholder);
});
it('should render readonly input on select mode', function () {
var _createDriver14 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options, mode: 'select' })),
inputDriver = _createDriver14.inputDriver;
expect(inputDriver.getReadOnly()).toBeTruthy();
});
it('should render arrow on select mode', function () {
var _createDriver15 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options, mode: 'select' })),
inputDriver = _createDriver15.inputDriver;
expect(inputDriver.hasMenuArrow()).toBeTruthy();
});
it('should render input wrapper with error', function () {
var _createDriver16 = createDriver(_react2.default.createElement(_MultiSelect4.default, { error: true, options: options })),
driver = _createDriver16.driver;
expect(driver.inputWrapperHasError()).toBeTruthy();
});
it('should not display a placeholder if there are any tags', function () {
var tags = [{ id: 'Alabama', label: 'Alabama' }];
var placeholder = 'myPlaceholder';
var _createDriver17 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options, tags: tags, placeholder: placeholder })),
inputDriver = _createDriver17.inputDriver;
expect(inputDriver.getPlaceholder()).toBe('');
});
it('should focus the input when clicking on the input wrapper', function () {
var _createDriver18 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options })),
driver = _createDriver18.driver,
inputDriver = _createDriver18.inputDriver;
expect(inputDriver.isFocus()).toBeFalsy();
driver.clickOnInputWrapper();
expect(inputDriver.isFocus()).toBeTruthy();
});
it('should check that wrapper has focus when the input element does', function () {
var _createDriver19 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options })),
driver = _createDriver19.driver,
inputDriver = _createDriver19.inputDriver;
driver.clickOnInputWrapper();
expect(inputDriver.isFocus()).toBeTruthy();
expect(driver.inputWrapperHasFocus()).toBeTruthy();
});
it('should contain specific tags', function () {
var tags = [{ id: 'Alabama', label: 'Alabama' }, { id: 'Alaska', label: 'Alaska' }];
var _createDriver20 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options, tags: tags })),
driver = _createDriver20.driver;
expect(driver.numberOfTags()).toBe(tags.length);
expect(driver.getTagLabelAt(0)).toBe('Alabama');
expect(driver.getTagLabelAt(1)).toBe('Alaska');
});
it('should support pasting legal multiple tags', function () {
var onSelect = jest.fn();
var onChange = jest.fn();
var _createDriver21 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options, onSelect: onSelect, onChange: onChange })),
driver = _createDriver21.driver,
inputDriver = _createDriver21.inputDriver;
driver.focus();
inputDriver.trigger('paste');
inputDriver.enterText(options[0].value + ', ' + options[2].value);
expect(onChange).toBeCalledWith({ target: { value: '' } });
expect(onSelect).toBeCalledWith([{ id: options[0].id, label: options[0].value }, { id: options[2].id, label: options[2].value }]);
});
it('should support pasting illegal multiple tags with error theme', function () {
var onSelect = jest.fn();
var onChange = jest.fn();
var _createDriver22 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options, onSelect: onSelect, onChange: onChange })),
driver = _createDriver22.driver,
inputDriver = _createDriver22.inputDriver;
driver.focus();
inputDriver.trigger('paste');
inputDriver.enterText(options[0].value + ', Arkansa');
expect(onChange).toHaveBeenCalledTimes(3); // FIXME: should be 1
expect(onChange.mock.calls[0][0].target.value).toBe('');
expect(onSelect).toHaveBeenCalledTimes(1);
var onSelectCallArgs = onSelect.mock.calls[0][0];
expect(onSelectCallArgs[0]).toEqual({
id: options[0].id,
label: options[0].value
});
expect(onSelectCallArgs[1].label).toEqual('Arkansa');
expect(onSelectCallArgs[1].theme).toEqual('error');
expect(onSelectCallArgs[1].id.startsWith('customOption_')).toEqual(true);
});
describe('onManuallyCalled', function () {
it('should be called after Enter is pressed and input is not empty', function () {
var onManuallyInput = jest.fn();
var _createDriver23 = createDriver(_react2.default.createElement(_MultiSelect4.default, {
options: options,
onManuallyInput: onManuallyInput,
value: 'custom value'
})),
driver = _createDriver23.driver,
inputDriver = _createDriver23.inputDriver;
driver.focus();
inputDriver.enterText('custom value');
driver.pressKey('Enter');
expect(onManuallyInput.mock.calls).toHaveLength(1);
});
it('should be called after delimiter is pressed and input is not empty', function () {
var onManuallyInput = jest.fn();
var _createDriver24 = createDriver(_react2.default.createElement(_MultiSelect4.default, {
options: options,
onManuallyInput: onManuallyInput,
value: 'custom value'
})),
driver = _createDriver24.driver,
inputDriver = _createDriver24.inputDriver;
driver.focus();
inputDriver.enterText('custom value');
driver.pressKey(',');
expect(onManuallyInput.mock.calls).toHaveLength(1);
expect(onManuallyInput.mock.calls[0][0]).toBe('custom value');
});
it('should be called after delimiter is pressed given no options', function () {
var onManuallyInput = jest.fn();
var _createDriver25 = createDriver(_react2.default.createElement(_MultiSelect4.default, { onManuallyInput: onManuallyInput, value: 'custom value' })),
driver = _createDriver25.driver,
inputDriver = _createDriver25.inputDriver;
driver.focus();
inputDriver.enterText('custom value');
driver.pressKey(',');
expect(onManuallyInput.mock.calls).toHaveLength(1);
expect(onManuallyInput.mock.calls[0][0]).toBe('custom value');
});
});
describe('onKeyDown', function () {
it('should be called once when character key pressed', function () {
var onKeyDown = jest.fn();
var _createDriver26 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options, onKeyDown: onKeyDown })),
driver = _createDriver26.driver,
inputDriver = _createDriver26.inputDriver;
driver.focus();
inputDriver.keyDown('a');
expect(onKeyDown.mock.calls).toHaveLength(1);
});
});
it('should call onRemoveTag when removing tags', function () {
var tagId = 'SweetHome';
var tags = [{ id: tagId, label: 'Alabama' }];
var onRemoveTag = jest.fn();
var _createDriver27 = createDriver(_react2.default.createElement(_MultiSelect4.default, { autoFocus: true, tags: tags, onRemoveTag: onRemoveTag })),
driver = _createDriver27.driver;
var tagDriver = driver.getTagDriverByTagId(tagId);
tagDriver.removeTag();
expect(onRemoveTag).toHaveBeenCalledWith(tagId);
});
it('should set maxHeight to initial when no height limit introduced', function () {
var _createDriver28 = createDriver(_react2.default.createElement(_MultiSelect4.default, { options: options })),
driver = _createDriver28.driver;
expect(driver.getMaxHeight()).toBe('initial');
});
it('should set maxHeight when maxNumRows defined', function () {
var _createDriver29 = createDriver(_react2.default.createElement(_MultiSelect4.default, { maxNumRows: 2, options: options })),
driver = _createDriver29.driver;
expect(driver.getMaxHeight()).toBe('70px');
});
it('should set maxHeight when maxNumRows defined (large tags)', function () {
var _options = [{ value: 'Alaska', id: 'Alaska', label: 'Alaska', size: 'large' }];
var _createDriver30 = createDriver(_react2.default.createElement(_MultiSelect4.default, { maxNumRows: 2, tags: _options, options: _options })),
driver = _createDriver30.driver;
expect(driver.getMaxHeight()).toBe('94px');
});
it('should allow to write any text as tag when options are empty', function () {
var onSelect = jest.fn();
var _createDriver31 = createDriver(_react2.default.createElement(_MultiSelect4.default, { value: 'aab', onSelect: onSelect })),
driver = _createDriver31.driver;
driver.pressKey(',');
expect(onSelect).toBeCalledWith([{ id: 'aab', label: 'aab' }]);
});
it('should allow to write tags only from options', function () {
var onSelect = jest.fn();
var _createDriver32 = createDriver(_react2.default.createElement(_MultiSelect4.default, { value: 'aab', options: options, onSelect: onSelect })),
driver = _createDriver32.driver;
driver.pressKey(',');
expect(onSelect).toBeCalledWith([{ id: options[0].id, label: options[0].value }]);
});
// TODO: dnd testkit is missing - once it's available, this test has to be completed and run
xit('should allow reordering the tags', function () {
var tags = [{ label: 'Alabama', id: 'Alabama' }, { label: 'California2', id: 'California2' }, { label: 'California3', id: 'California3' }, { label: 'California4', id: 'California4' }];
var onReorder = jest.fn();
var _createDriver33 = createDriver(_react2.default.createElement(_MultiSelect4.default, {
draggable: true,
options: options,
tags: tags,
onReorder: onReorder,
autoFocus: true
})),
_createDriver33$drive = _createDriver33.driver,
getTagLabelAt = _createDriver33$drive.getTagLabelAt,
getTagDriverByTagId = _createDriver33$drive.getTagDriverByTagId;
getTagDriverByTagId('Alabama').dragTo(getTagDriverByTagId('California3').element);
expect(onReorder).toBeCalledWith({ removedIndex: 0, addedIndex: 2 });
expect(getTagLabelAt(0)).toBe('California3');
expect(getTagLabelAt(2)).toBe('Alabama');
});
describe('upgrade deprecation logs', function () {
var consoleErrorSpy = void 0;
beforeEach(function () {
consoleErrorSpy = jest.spyOn(global.console, 'error').mockImplementation(jest.fn());
});
afterEach(function () {
consoleErrorSpy.mockRestore();
});
describe('with upgrade', function () {
it('should have propTypes error log when \'valueParser\' is provided', function () {
render(_react2.default.createElement(_MultiSelect4.default, { options: options, valueParser: function valueParser() {}, upgrade: true }));
expect(consoleErrorSpy).toBeCalledWith(expect.stringContaining('When \'upgrade\' is passed then \'valueParser\' will not be used. Please remove the \'valueParser\' prop.'));
});
});
describe('without upgrade', function () {
it('should have deprecation log when \'upgrade\' is not true', function () {
var depLogSpy = jest.spyOn(_deprecationLog.depLogger, 'log');
render(_react2.default.createElement(_MultiSelect4.default, { options: options }));
expect(depLogSpy).toBeCalledWith('MultiSelect: New API! Please upgrade by passing the prop \'upgrade=true\', and refer to documentation.');
depLogSpy.mockRestore();
});
});
});
describe('testkit', function () {
it('should exist', function () {
var div = document.createElement('div');
var dataHook = 'myDataHook';
var tags = [{ id: 'Alabama', label: 'Alabama' }];
var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
'div',
null,
_react2.default.createElement(_MultiSelect4.default, { dataHook: dataHook, tags: tags })
)));
var multiSelectTestkit = (0, _testkit.multiSelectTestkitFactory)({
wrapper: wrapper,
dataHook: dataHook
});
expect(multiSelectTestkit.driver.exists()).toBeTruthy();
expect(multiSelectTestkit.inputDriver.exists()).toBeTruthy();
expect(multiSelectTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
expect(multiSelectTestkit.driver.getTagDriverByTagId('Alabama').exists()).toBeTruthy();
});
});
describe('enzyme testkit', function () {
it('should exist', function () {
var dataHook = 'myDataHook';
var tags = [{ id: 'Alabama', label: 'Alabama' }];
var wrapper = (0, _enzyme2.mount)(_react2.default.createElement(_MultiSelect4.default, { dataHook: dataHook, tags: tags }));
var multiSelectTestkit = (0, _enzyme.multiSelectTestkitFactory)({
wrapper: wrapper,
dataHook: dataHook
});
expect(multiSelectTestkit.driver.exists()).toBeTruthy();
expect(multiSelectTestkit.inputDriver.exists()).toBeTruthy();
expect(multiSelectTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
expect(multiSelectTestkit.driver.getTagDriverByTagId('Alabama').exists()).toBeTruthy();
});
});
}); /*
This test suit should be deleted once we release the next major version
where the `upgrade` behavior is the default and the deprecated behavior is removed.
*/