lucid-ui
Version:
A UI component library from AppNexus.
214 lines (202 loc) • 10 kB
JavaScript
import _escapeRegExp from "lodash/escapeRegExp";
import _noop from "lodash/noop";
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React from 'react';
import { shallow } from 'enzyme';
import { common } from '../../util/generic-tests';
import { SearchableSingleSelectDumb as SearchableSingleSelect } from './SearchableSingleSelect';
import { DropMenuDumb as DropMenu } from '../DropMenu/DropMenu';
var Option = SearchableSingleSelect.Option;
describe('SearchableSingleSelect', function () {
common(SearchableSingleSelect, {
exemptFunctionProps: ['optionFilter']
});
describe('render', function () {
it('should render selections', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SearchableSingleSelect, null, /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
expect(wrapper.find(DropMenu).length).toBe(1);
});
it('should pass `isDisabled` to `Options`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SearchableSingleSelect, null, /*#__PURE__*/React.createElement(Option, {
isDisabled: true
}, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var _wrapper$find$map = wrapper.find(DropMenu.Option).map(function (option) {
return option.prop('isDisabled');
}),
_wrapper$find$map2 = _slicedToArray(_wrapper$find$map, 3),
first = _wrapper$find$map2[0],
second = _wrapper$find$map2[1],
third = _wrapper$find$map2[2];
expect(first).toBe(true);
expect(second).toBe(false);
expect(third).toBe(false);
});
});
describe('props', function () {
describe('onSearch', function () {
it('should work', function () {
var onSearch = jest.fn();
var wrapper = shallow( /*#__PURE__*/React.createElement(SearchableSingleSelect, {
onSearch: onSearch
}, /*#__PURE__*/React.createElement(Option, {
callbackId: 'zero'
}, "Zero"), /*#__PURE__*/React.createElement(Option, {
callbackId: 'one'
}, "One")));
var expected = {
event: 'fake',
props: {
callbackId: 'zero',
children: 'Zero',
isDisabled: false,
isHidden: false,
isWrapped: true
}
};
wrapper.find('SearchField').prop('onChange')('ero', {
event: 'fake'
});
expect(onSearch).toHaveBeenCalledWith('ero', 0, expected);
});
});
describe('onSelect', function () {
it('should work when fired from the DropMenu', function () {
var onSelect = jest.fn();
var mockSelectionCallback = {
event: {
preventDefault: _noop
},
props: {}
};
var wrapper = shallow( /*#__PURE__*/React.createElement(SearchableSingleSelect, {
onSelect: onSelect
}, /*#__PURE__*/React.createElement(Option, null, "option a")));
wrapper.find('DropMenu').first().prop('onSelect')(10, mockSelectionCallback);
expect(onSelect).toHaveBeenCalledWith(10, mockSelectionCallback);
});
it('should work when selecting filtered options', function () {
var onSelect = jest.fn();
var mockSelectionCallback = {
event: {
stopPropagation: _noop,
preventDefault: _noop
},
props: {}
};
var wrapper = shallow( /*#__PURE__*/React.createElement(SearchableSingleSelect, {
onSelect: onSelect
}, /*#__PURE__*/React.createElement(Option, {
isHidden: true
}, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b")));
wrapper.find('DropMenu').first().prop('onSelect')(0, mockSelectionCallback);
expect(onSelect).toHaveBeenCalledWith(0, mockSelectionCallback);
});
it('should work when fired from the selection removal ', function () {
var onSelect = jest.fn();
var mockSelectionCallback = {
event: {
preventDefault: _noop
},
props: {}
};
var wrapper = shallow( /*#__PURE__*/React.createElement(SearchableSingleSelect, {
onSelect: onSelect,
onSearch: _noop,
selectedIndex: 0
}, /*#__PURE__*/React.createElement(Option, null, "option a")));
wrapper.find('Selection').first().prop('onRemove')(mockSelectionCallback);
expect(onSelect).toHaveBeenCalledWith(null, mockSelectionCallback);
});
});
describe('Error', function () {
it('should apply the appropriate classNames to the saerch', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SearchableSingleSelect, {
Error: 'Erroring out'
}, /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b")));
var searchWrapper = wrapper.find('.lucid-SearchableSingleSelect-search-is-error');
expect(searchWrapper.exists()).toBeTruthy();
});
it('should render out the error div', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SearchableSingleSelect, {
Error: 'Erroring out'
}, /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b")));
var searchWrapper = wrapper.find('.lucid-SearchableSingleSelect-error-content');
expect(searchWrapper.text()).toEqual('Erroring out');
});
it('should not render the error div', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SearchableSingleSelect, {
Error: true
}, /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b")));
var searchWrapper = wrapper.find('.lucid-SearchableSingleSelect-search-is-error');
var errorWrapper = wrapper.find('.lucid-SearchableSingleSelect-error-content');
expect(errorWrapper.exists()).toBeFalsy();
expect(searchWrapper).toBeTruthy();
});
});
});
describe('custom formatting', function () {
it('should render Option child function by passing in {searchText}, setting filterText on each option and using a custom optionFilter', function () {
var optionFilter = function optionFilter(searchText, _ref) {
var filterText = _ref.filterText;
if (filterText) {
return new RegExp(_escapeRegExp(searchText), 'i').test(filterText);
}
return true;
};
expect(shallow( /*#__PURE__*/React.createElement(SearchableSingleSelect, {
optionFilter: optionFilter,
searchText: "tion"
}, /*#__PURE__*/React.createElement(Option, {
name: "OptionA",
Selected: "option a",
filterText: "option a"
}, function (_ref2) {
var searchText = _ref2.searchText;
return /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex'
}
}, /*#__PURE__*/React.createElement("div", {
style: {
width: 100
}
}, searchText), /*#__PURE__*/React.createElement("div", null, "option a"));
}), /*#__PURE__*/React.createElement(Option, {
name: "OptionB",
Selected: "option b",
filterText: "option b"
}, function (_ref3) {
var searchText = _ref3.searchText;
return /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex'
}
}, /*#__PURE__*/React.createElement("div", {
style: {
width: 100
}
}, searchText), /*#__PURE__*/React.createElement("div", null, "option b"));
}), /*#__PURE__*/React.createElement(Option, {
name: "OptionC",
Selected: "option c",
filterText: "option c"
}, function (_ref4) {
var searchText = _ref4.searchText;
return /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex'
}
}, /*#__PURE__*/React.createElement("div", {
style: {
width: 100
}
}, searchText), /*#__PURE__*/React.createElement("div", null, "option c"));
})))).toMatchSnapshot();
});
});
});