wix-style-react
Version:
wix-style-react
246 lines (203 loc) • 10.4 kB
JavaScript
import React from 'react';
import ReactTestUtils from 'react-dom/test-utils';
import multiSelectCheckboxDriverFactory from './MultiSelectCheckbox.driver';
import MultiSelectCheckbox from './MultiSelectCheckbox';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import { multiSelectCheckboxTestkitFactory } from '../../testkit';
import { multiSelectCheckboxTestkitFactory as enzymeMultiSelectCheckboxTestkitFactory } from '../../testkit/enzyme';
import { mount } from 'enzyme';
describe('multiSelectCheckbox', function () {
var createDriver = createDriverFactory(multiSelectCheckboxDriverFactory);
var options = [{ value: 'Alabama', id: 'Alabama-1' }, { value: 'Alaska', id: 'Alaska' }, { value: React.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(React.createElement(MultiSelectCheckbox, { options: options })),
inputDriver = _createDriver.inputDriver;
expect(inputDriver.getReadOnly()).toBeTruthy();
});
it('should show dropdown on input click', function () {
var _createDriver2 = createDriver(React.createElement(MultiSelectCheckbox, { 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(React.createElement(MultiSelectCheckbox, { 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(React.createElement(MultiSelectCheckbox, { 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(React.createElement(MultiSelectCheckbox, { 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(React.createElement(MultiSelectCheckbox, { 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(React.createElement(MultiSelectCheckbox, { 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(React.createElement(MultiSelectCheckbox, {
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(React.createElement(MultiSelectCheckbox, {
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(React.createElement(MultiSelectCheckbox, {
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(React.createElement(MultiSelectCheckbox, {
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(React.createElement(MultiSelectCheckbox, {
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(React.createElement(MultiSelectCheckbox, { 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(React.createElement(MultiSelectCheckbox, { 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(React.createElement(MultiSelectCheckbox, { 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(React.createElement(MultiSelectCheckbox, {
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(ReactTestUtils.renderIntoDocument(React.createElement(
'div',
null,
React.createElement(MultiSelectCheckbox, {
dataHook: dataHook,
selectedOptions: selectedOptions,
options: options
})
)));
var multiSelectCheckboxTestkit = 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 = mount(React.createElement(MultiSelectCheckbox, {
dataHook: dataHook,
selectedOptions: selectedOptions,
options: options
}));
var multiSelectCheckboxTestkit = enzymeMultiSelectCheckboxTestkitFactory({ wrapper: wrapper, dataHook: dataHook });
expect(multiSelectCheckboxTestkit.driver.exists()).toBeTruthy();
expect(multiSelectCheckboxTestkit.inputDriver.exists()).toBeTruthy();
expect(multiSelectCheckboxTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
});
});
});