lucid-ui
Version:
A UI component library from AppNexus.
329 lines (316 loc) • 17.4 kB
JavaScript
import _size from "lodash/size";
import _forEach from "lodash/forEach";
import _map from "lodash/map";
import _first from "lodash/first";
import _isEqual from "lodash/isEqual";
import _includes from "lodash/includes";
import React from 'react';
import { mount, shallow } from 'enzyme';
import assert from 'assert';
import { filterTypes, rejectTypes } from '../../util/component-types';
import { common } from '../../util/generic-tests';
import { SingleSelectDumb as SingleSelect } from './SingleSelect';
import { DropMenuDumb as DropMenu } from '../DropMenu/DropMenu';
var _ref = SingleSelect,
Placeholder = _ref.Placeholder,
Option = _ref.Option,
OptionGroup = _ref.OptionGroup;
describe('SingleSelect', function () {
common(SingleSelect, {
exemptChildComponents: ['Selected', 'FixedOption', 'NullOption']
});
describe('render', function () {
it('should render a DropMenu', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, null, /*#__PURE__*/React.createElement(Placeholder, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
assert.equal(wrapper.find('DropMenu').length, 1);
});
});
describe('props', function () {
describe('children', function () {
it('should not render any direct child elements which are not SingleSelect-specific', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, null, /*#__PURE__*/React.createElement("button", null, "button"), /*#__PURE__*/React.createElement(Placeholder, null, "control", /*#__PURE__*/React.createElement("i", null, "italic")), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c"), /*#__PURE__*/React.createElement("h1", null, "header")));
assert.equal(wrapper.find('button').length, 0);
assert.equal(wrapper.find('h1').length, 0);
assert.equal(wrapper.find('i').length, 1);
});
});
describe('hasReset', function () {
var wrapper;
afterEach(function () {
if (wrapper) {
wrapper.unmount();
}
});
it('should render the placeholder option as the first one in the menu and be a null option', function () {
wrapper = mount( /*#__PURE__*/React.createElement(SingleSelect, {
hasReset: true,
selectedIndex: 1,
DropMenu: {
isExpanded: true
}
}, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var menuDOMNode = document.querySelector('.lucid-ContextMenu-FlyOut .lucid-DropMenu-option-container');
assert(_includes(menuDOMNode.children[0].className, 'lucid-DropMenu-Option-is-null'));
});
it('should not render the placeholder null option as the first one in the menu', function () {
wrapper = mount( /*#__PURE__*/React.createElement(SingleSelect, {
hasReset: false,
selectedIndex: 1,
DropMenu: {
isExpanded: true
}
}, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var menuDOMNode = document.querySelector('.lucid-ContextMenu-FlyOut');
assert(!_includes(menuDOMNode.children[0].className, 'lucid-DropMenu-Option-is-null'));
});
});
describe('isDisabled', function () {
it('should pass the `isDisabled` prop thru to the underlying DropMenu', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, {
isDisabled: true
}, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var dropMenuWrapper = wrapper.find('DropMenu');
assert.equal(dropMenuWrapper.prop('isDisabled'), true);
});
it('should apply the appropriate classNames to the control', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, {
isDisabled: true,
selectedIndex: 2
}, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var controlWrapper = wrapper.find('.lucid-SingleSelect-Control');
assert(controlWrapper.hasClass('lucid-SingleSelect-Control-is-disabled'));
assert(!controlWrapper.hasClass('lucid-SingleSelect-Control-is-selected'));
});
});
describe('isSelectionHighlighted', function () {
describe('default', function () {
it('should apply the appropriate classNames to the control', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, {
selectedIndex: 2
}, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var controlWrapper = wrapper.find('.lucid-SingleSelect-Control');
assert(controlWrapper.hasClass('lucid-SingleSelect-Control-is-selected'));
assert(controlWrapper.hasClass('lucid-SingleSelect-Control-is-highlighted'));
});
});
describe('false', function () {
it('should apply the appropriate classNames to the control', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, {
isSelectionHighlighted: false,
selectedIndex: 2
}, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var controlWrapper = wrapper.find('.lucid-SingleSelect-Control');
assert(!controlWrapper.hasClass('lucid-SingleSelect-Control-is-selected'));
assert(!controlWrapper.hasClass('lucid-SingleSelect-Control-is-highlighted'));
});
});
});
describe('selectedIndex', function () {
it('should pass the selectedIndex in an array of 1 to the underlying DropMenu', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, {
selectedIndex: 2
}, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var dropMenuWrapper = wrapper.find('DropMenu');
assert(_isEqual(dropMenuWrapper.prop('selectedIndices'), [2]));
});
it('should render selected option in the control', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, {
selectedIndex: 2
}, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var dropMenuWrapper = wrapper.find('DropMenu');
var dropMenuControlProps = _first(_map(filterTypes(dropMenuWrapper.prop('children'), DropMenu.Control), 'props'));
var dropMenuControlWrapper = shallow(dropMenuControlProps.children);
assert.equal('option c', dropMenuControlWrapper.find('.lucid-SingleSelect-Control-content').text());
});
});
describe('maxMenuHeight', function () {
it('should pass through to DropMenu prop `flyOutStyle.maxHeight`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, {
maxMenuHeight: 123
}, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var dropMenuWrapper = wrapper.find(DropMenu);
var flyOutStyle = dropMenuWrapper.prop('flyOutStyle');
assert.equal(123, flyOutStyle.maxHeight, 'must match prop value');
});
});
describe('DropMenu', function () {
it('should pass thru all DropMenu props to the underlying DropMenu', function () {
var explicitDropMenuProps = {
isExpanded: true,
direction: 'up',
focusedIndex: 2
};
var wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, {
DropMenu: explicitDropMenuProps
}, /*#__PURE__*/React.createElement(Placeholder, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var dropMenuProps = wrapper.find('DropMenu').props();
_forEach(explicitDropMenuProps, function (value, key) {
assert(_isEqual(dropMenuProps[key], value));
});
});
});
});
describe('child elements', function () {
describe('Placeholder', function () {
it('should pass the placeholder thru to the underlying DropMenu Control when no option is selected', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, {
selectedIndex: null
}, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(Option, {
name: "OptionA"
}, "option a"), /*#__PURE__*/React.createElement(Option, {
name: "OptionB"
}, "option b"), /*#__PURE__*/React.createElement(Option, {
name: "OptionC"
}, "option c"))); // navigate down the virutal DOM tree to find the Control content
var dropMenuWrapper = wrapper.find('DropMenu');
var dropMenuChildren = dropMenuWrapper.prop('children');
var controlProps = _first(_map(filterTypes(dropMenuChildren, DropMenu.Control), 'props'));
var dropMenuControlChildElement = _first(React.Children.toArray(controlProps.children));
var singleSelectControlChildren = React.Children.toArray(dropMenuControlChildElement.props.children);
var singleSelectControlContent = singleSelectControlChildren[0];
assert.equal(React.Children.toArray(singleSelectControlContent.props.children)[0], 'select one');
});
it('should pass the placeholder thru to the underlying DropMenu NullOption when an option is selected', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, {
selectedIndex: 1
}, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(Option, {
name: "OptionA"
}, "option a"), /*#__PURE__*/React.createElement(Option, {
name: "OptionB"
}, "option b"), /*#__PURE__*/React.createElement(Option, {
name: "OptionC"
}, "option c"))); // navigate down the virutal DOM tree to find the Control content
var dropMenuWrapper = wrapper.find('DropMenu');
var dropMenuChildren = dropMenuWrapper.prop('children');
var nullOptionProps = _first(_map(filterTypes(dropMenuChildren, DropMenu.NullOption), 'props'));
assert.equal(React.Children.toArray(nullOptionProps.children)[0], 'select one');
});
});
describe('Option', function () {
it('should pass options thru to the underlying DropMenu', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, null, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(Option, {
name: "OptionA"
}, "option a"), /*#__PURE__*/React.createElement(Option, {
name: "OptionB"
}, "option b"), /*#__PURE__*/React.createElement(Option, {
name: "OptionC"
}, "option c")));
var dropMenuWrapper = wrapper.find('DropMenu');
var dropMenuChildren = dropMenuWrapper.prop('children');
var optionsProps = _map(filterTypes(dropMenuChildren, DropMenu.Option), 'props');
assert.equal(_size(optionsProps), 3);
assert(_isEqual(optionsProps[0], {
name: 'OptionA',
children: 'option a',
isDisabled: false,
isHidden: false,
isWrapped: true
}));
assert(_isEqual(optionsProps[1], {
name: 'OptionB',
children: 'option b',
isDisabled: false,
isHidden: false,
isWrapped: true
}));
assert(_isEqual(optionsProps[2], {
name: 'OptionC',
children: 'option c',
isDisabled: false,
isHidden: false,
isWrapped: true
}));
});
it('should render Option.Selected in the Placeholder area', function () {
expect(shallow( /*#__PURE__*/React.createElement(SingleSelect, {
selectedIndex: 1
}, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(Option, {
name: "OptionA",
Selected: "option a"
}, /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex'
}
}, /*#__PURE__*/React.createElement("div", {
style: {
width: 100
}
}, "id"), /*#__PURE__*/React.createElement("div", null, "option a"))), /*#__PURE__*/React.createElement(Option, {
name: "OptionB",
Selected: "option b"
}, /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex'
}
}, /*#__PURE__*/React.createElement("div", {
style: {
width: 100
}
}, "id"), /*#__PURE__*/React.createElement("div", null, "option b"))), /*#__PURE__*/React.createElement(Option, {
name: "OptionC",
Selected: "option c"
}, /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex'
}
}, /*#__PURE__*/React.createElement("div", {
style: {
width: 100
}
}, "id"), /*#__PURE__*/React.createElement("div", null, "option c")))))).toMatchSnapshot();
});
});
describe('OptionGroup', function () {
var wrapper;
var dropMenuWrapper;
var dropMenuChildren;
var optionGroupProps;
beforeEach(function () {
wrapper = shallow( /*#__PURE__*/React.createElement(SingleSelect, null, /*#__PURE__*/React.createElement(Placeholder, null, "select one"), /*#__PURE__*/React.createElement(OptionGroup, {
name: "TestGroup"
}, "Group Label", /*#__PURE__*/React.createElement(Option, {
name: "OptionA"
}, "option a"), /*#__PURE__*/React.createElement(Option, {
name: "OptionB"
}, "option b"), /*#__PURE__*/React.createElement(Option, {
name: "OptionC"
}, "option c"))));
dropMenuWrapper = wrapper.find('DropMenu');
dropMenuChildren = dropMenuWrapper.prop('children');
optionGroupProps = _first(_map(filterTypes(dropMenuChildren, DropMenu.OptionGroup), 'props'));
});
it('should pass thru all props to the underlying DropMenu OptionGroup', function () {
assert.equal(optionGroupProps.name, 'TestGroup');
});
it('should pass options thru to the underlying DropMenu OptionGroup Options', function () {
var optionsProps = _map(filterTypes(optionGroupProps.children, DropMenu.Option), 'props');
assert.equal(_size(optionsProps), 3);
assert(_isEqual(optionsProps[0], {
name: 'OptionA',
children: 'option a',
isDisabled: false,
isHidden: false,
isWrapped: true
}));
assert(_isEqual(optionsProps[1], {
name: 'OptionB',
children: 'option b',
isDisabled: false,
isHidden: false,
isWrapped: true
}));
assert(_isEqual(optionsProps[2], {
name: 'OptionC',
children: 'option c',
isDisabled: false,
isHidden: false,
isWrapped: true
}));
});
it('should pass all other elemens thru to the underlying DropMenu OptionGroup', function () {
var otherOptionGroupChildren = rejectTypes(optionGroupProps.children, [Placeholder, Option, OptionGroup]);
assert.equal(_first(otherOptionGroupChildren), 'Group Label');
});
});
});
});