lucid-ui
Version:
A UI component library from AppNexus.
602 lines • 38.4 kB
JavaScript
import _noop from "lodash/noop";
import _isElement from "lodash/isElement";
import _isNil from "lodash/isNil";
import _isEqual from "lodash/isEqual";
import _includes from "lodash/includes";
import React from 'react';
import { mount, shallow } from 'enzyme';
import assert from 'assert';
import sinon from 'sinon';
import { common } from '../../util/generic-tests';
import { DropMenuDumb as DropMenu } from './DropMenu';
import ContextMenu from '../ContextMenu/ContextMenu';
import * as KEYCODE from '../../constants/key-code';
var _ref = DropMenu,
Control = _ref.Control,
Header = _ref.Header,
Option = _ref.Option,
OptionGroup = _ref.OptionGroup,
NullOption = _ref.NullOption;
describe('DropMenu', function () {
common(DropMenu);
describe('render', function () {
it('should render a ContextMenu', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true
}, /*#__PURE__*/React.createElement(Control, 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('ContextMenu').length, 1);
});
});
describe('props', function () {
describe('children', function () {
it('should not render any direct child elements which are not DropMenu-specific', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
className: "MyDropMenu"
}, /*#__PURE__*/React.createElement("button", null, "button"), /*#__PURE__*/React.createElement(Control, 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('className', function () {
it('should pass the className prop thru to the root element', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
className: "MyDropMenu"
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var dropMenuClassName = wrapper.first().prop('className');
assert(_includes(dropMenuClassName, 'MyDropMenu'));
});
describe('FlyOut', function () {
var wrapper;
afterEach(function () {
if (wrapper) {
wrapper.unmount();
}
});
it('should pass the className prop thru to the FlyOut (portal) element', function () {
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
className: "MyDropMenu"
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var flyOutClassName = document.querySelector('.lucid-DropMenu.lucid-ContextMenu-FlyOut').className;
assert(_includes(flyOutClassName, 'MyDropMenu'));
});
});
});
describe('style', function () {
it('should pass the style prop thru to the root element', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
style: {
flex: 2
}
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var dropMenuStyle = wrapper.first().prop('style');
assert(_isEqual(dropMenuStyle, {
flex: 2
}));
});
});
describe('isDisabled', function () {
it('should make the control handle `onClick`, `onKeyDown`, and have a `tabIndex` when `false`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isDisabled: false
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var controlElement = wrapper.find('.lucid-DropMenu-Control');
assert(!_isNil(controlElement.prop('tabIndex')));
assert(!_isNil(controlElement.prop('onClick')));
assert(!_isNil(controlElement.prop('onKeyDown')));
});
it('should make the control not handle `onClick`, `onKeydown`, or have a `tabIndex` when `true`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isDisabled: true
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var controlElement = wrapper.find('.lucid-DropMenu-Control');
assert(_isNil(controlElement.prop('tabIndex')));
assert(_isNil(controlElement.prop('onClick')));
assert(_isNil(controlElement.prop('onKeyDown')));
});
});
describe('isExpanded', function () {
it('should pass isExpanded to the underlying ContextMenu component thru props', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var contextMenuIsExpanded = wrapper.find('ContextMenu').prop('isExpanded');
assert.equal(contextMenuIsExpanded, true);
});
});
describe('direction', function () {
it('should pass the direction to the underlying ContextMenu component thru props', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
direction: "up"
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var contextMenuDirection = wrapper.find('ContextMenu').prop('direction');
assert.equal(contextMenuDirection, 'up');
});
});
describe('selectedIndices', function () {
var wrapper;
afterEach(function () {
wrapper.unmount();
});
it('should render the selected options with appropriate className', function () {
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
selectedIndices: [0, 2]
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var optionDOMNodes = document.querySelectorAll('.lucid-ContextMenu-FlyOut .lucid-DropMenu-Option');
assert(_includes(optionDOMNodes[0].className, 'lucid-DropMenu-Option-is-selected'));
assert(!_includes(optionDOMNodes[1].className, 'lucid-DropMenu-Option-is-selected'));
assert(_includes(optionDOMNodes[2].className, 'lucid-DropMenu-Option-is-selected'));
});
});
describe('focusedIndex', function () {
var wrapper;
afterEach(function () {
wrapper.unmount();
});
it('should render the focused option with appropriate className', function () {
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
focusedIndex: 2
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var optionDOMNodes = document.querySelectorAll('.lucid-ContextMenu-FlyOut .lucid-DropMenu-Option');
assert(!_includes(optionDOMNodes[0].className, 'lucid-DropMenu-Option-is-focused'));
assert(!_includes(optionDOMNodes[1].className, 'lucid-DropMenu-Option-is-focused'));
assert(_includes(optionDOMNodes[2].className, 'lucid-DropMenu-Option-is-focused'));
});
});
describe('portalId', function () {
var wrapper;
afterEach(function () {
if (wrapper) {
wrapper.unmount();
}
});
it('should render an element under document.body with the same id', function () {
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
portalId: "test-dropmenu-portal",
isExpanded: true
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var portalDOMNode = document.getElementById('test-dropmenu-portal');
assert(_isElement(portalDOMNode));
assert.equal(document.body, portalDOMNode.parentNode);
});
});
describe('flyOutStyle', function () {
it('should pass flyOutStyle style object to the ContextMenu.FlyOut', function () {
var styleObj = {
width: 123,
height: 321,
backgroundColor: 'tan'
};
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
flyOutStyle: styleObj
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
assert.deepEqual(styleObj, wrapper.find(ContextMenu.FlyOut).prop('style'), 'style object must be passed through to ContextMenu.FlyOut');
});
});
describe('onExpand', function () {
describe('mouse', function () {
it('should be called when DropMenu [not expanded, clicked]', function () {
var onExpand = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: false,
onExpand: onExpand
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('.lucid-DropMenu-Control').simulate('click');
assert(onExpand.called);
});
it('should not be called when DropMenu [expanded, clicked]', function () {
var onExpand = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
onExpand: onExpand
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('.lucid-DropMenu-Control').simulate('click');
assert(onExpand.notCalled);
});
});
describe('keyboard', function () {
it('should be called when DropMenu [not expanded, has focus, Down Arrow key pressed]', function () {
var onExpand = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: false,
onExpand: onExpand
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('.lucid-DropMenu-Control').simulate('keydown', {
keyCode: KEYCODE.ArrowDown,
preventDefault: _noop
});
assert(onExpand.called);
});
});
});
describe('onCollapse', function () {
describe('mouse', function () {
it('should be called when DropMenu [expanded, control clicked]', function () {
var onCollapse = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
onCollapse: onCollapse
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('.lucid-DropMenu-Control').simulate('click');
assert(onCollapse.called);
});
it('should not be called when DropMenu [not expanded, control clicked]', function () {
var onCollapse = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: false,
onCollapse: onCollapse
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('.lucid-DropMenu-Control').simulate('click');
assert(onCollapse.notCalled);
});
it('should be called when DropMenu [expanded, ContextMenu onClickOut called]', function () {
var onCollapse = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
onCollapse: onCollapse
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('ContextMenu').prop('onClickOut')();
assert(onCollapse.called);
});
});
describe('keyboard', function () {
it('should be called when DropMenu [expanded, Escape key pressed]', function () {
var onCollapse = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
onCollapse: onCollapse
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('.lucid-DropMenu-Control').simulate('keydown', {
keyCode: KEYCODE.Escape,
preventDefault: _noop
});
assert(onCollapse.called);
});
});
});
describe('onSelect', function () {
describe('mouse', function () {
var onSelect;
var wrapper;
beforeEach(function () {
onSelect = sinon.spy();
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
onSelect: onSelect
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
});
afterEach(function () {
wrapper.unmount();
onSelect.reset();
});
it('should be called when DropMenu [expanded, option clicked]', function () {
var optionDOMNodes = document.querySelectorAll('.lucid-ContextMenu-FlyOut .lucid-DropMenu-Option');
optionDOMNodes[2].click();
assert(onSelect.called);
assert(onSelect.calledWith(2));
});
});
describe('keyboard', function () {
it('should be called when DropMenu [expanded, option focused, Enter key pressed]', function () {
var onSelect = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
focusedIndex: 2,
onSelect: onSelect
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('.lucid-DropMenu-Control').simulate('keydown', {
keyCode: KEYCODE.Enter,
preventDefault: _noop
});
assert(onSelect.called);
assert(onSelect.calledWith(2));
});
});
});
describe('onFocusOption', function () {
describe('keyboard', function () {
it('should be called when DropMenu [expanded, focusedIndex=null, Down Arrow key pressed]', function () {
var onFocusOption = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
focusedIndex: null,
onFocusOption: onFocusOption
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('.lucid-DropMenu-Control').simulate('keydown', {
keyCode: KEYCODE.ArrowDown,
preventDefault: _noop
});
assert(onFocusOption.called);
});
it('should be called when DropMenu [expanded, focusedIndex={not last option}, Down Arrow key pressed]', function () {
var onFocusOption = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
focusedIndex: 1,
onFocusOption: onFocusOption
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('.lucid-DropMenu-Control').simulate('keydown', {
keyCode: KEYCODE.ArrowDown,
preventDefault: _noop
});
assert(onFocusOption.called);
});
it('should not be called when DropMenu [expanded, focusedIndex={last option}, Down Arrow key pressed]', function () {
var onFocusOption = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
focusedIndex: 2,
onFocusOption: onFocusOption
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('.lucid-DropMenu-Control').simulate('keydown', {
keyCode: KEYCODE.ArrowDown,
preventDefault: _noop
});
assert(onFocusOption.notCalled);
});
it('should be called when DropMenu [expanded, focusedIndex={not first option}, Up Arrow key pressed]', function () {
var onFocusOption = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
focusedIndex: 2,
onFocusOption: onFocusOption
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('.lucid-DropMenu-Control').simulate('keydown', {
keyCode: KEYCODE.ArrowUp,
preventDefault: _noop
});
assert(onFocusOption.called);
});
it('should not be called when DropMenu [expanded, focusedIndex={first option}, Up Arrow key pressed]', function () {
var onFocusOption = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
focusedIndex: 0,
onFocusOption: onFocusOption
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('.lucid-DropMenu-Control').simulate('keydown', {
keyCode: KEYCODE.ArrowUp,
preventDefault: _noop
});
assert(onFocusOption.notCalled);
});
it('should not be called when DropMenu [expanded, focusedIndex={null}, Up Arrow key pressed]', function () {
var onFocusOption = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
focusedIndex: null,
onFocusOption: onFocusOption
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
wrapper.find('.lucid-DropMenu-Control').simulate('keydown', {
keyCode: KEYCODE.ArrowUp,
preventDefault: _noop
});
assert(onFocusOption.notCalled);
});
});
describe('mouse', function () {
var onFocusOption;
var wrapper;
beforeEach(function () {
onFocusOption = sinon.spy();
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true,
onFocusOption: onFocusOption
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
});
afterEach(function () {
wrapper.unmount();
onFocusOption.reset();
});
it('should be called when user moves mouse over option', function () {
var optionDOMNodes = document.querySelectorAll('.lucid-ContextMenu-FlyOut .lucid-DropMenu-Option');
var mouseMoveEvent = document.createEvent('MouseEvents');
mouseMoveEvent.initMouseEvent('mousemove', //event type : click, mousedown, mouseup, mouseover, mousemove, mouseout.
true, //canBubble
false, //cancelable
window, //event's AbstractView : should be window
1, // detail : Event's mouse click count
50, // screenX
50, // screenY
50, // clientX
50, // clientY
false, // ctrlKey
false, // altKey
false, // shiftKey
false, // metaKey
0, // button : 0 = click, 1 = middle button, 2 = right button
null // relatedTarget : Only used with some event types (e.g. mouseover and mouseout). In other cases, pass null.
);
optionDOMNodes[2].dispatchEvent(mouseMoveEvent);
assert(onFocusOption.called);
assert(onFocusOption.calledWith(2));
assert(true);
});
});
});
});
describe('child elements', function () {
describe('Control', function () {
it('should render the children of Control to the control container', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(DropMenu, null, /*#__PURE__*/React.createElement(Control, null, "control")));
assert.equal('control', wrapper.find('.lucid-DropMenu-Control').text());
});
});
describe('Option', function () {
var wrapper;
afterEach(function () {
if (wrapper) {
wrapper.unmount();
}
});
it('should render the children of each Option in option nodes of the flyout menu', function () {
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var flyOutDOMNode = document.querySelector('.lucid-DropMenu.lucid-ContextMenu-FlyOut');
var optionDOMNodes = flyOutDOMNode.querySelectorAll('.lucid-DropMenu-Option');
assert.equal(optionDOMNodes.length, 3);
assert.equal(optionDOMNodes[0].innerHTML, 'option a');
assert.equal(optionDOMNodes[1].innerHTML, 'option b');
assert.equal(optionDOMNodes[2].innerHTML, 'option c');
});
it('should not render children with `isHidden`', function () {
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, {
isHidden: true
}, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var flyOutDOMNode = document.querySelector('.lucid-DropMenu.lucid-ContextMenu-FlyOut');
var optionDOMNodes = flyOutDOMNode.querySelectorAll('.lucid-DropMenu-Option');
assert.equal(optionDOMNodes.length, 2);
assert.equal(optionDOMNodes[0].innerHTML, 'option b');
assert.equal(optionDOMNodes[1].innerHTML, 'option c');
});
it('should render children options with `Selection` properties without generating React warnings', function () {
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(Option, {
Selection: {
kind: 'warning'
}
}, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var flyOutDOMNode = document.querySelector('.lucid-DropMenu.lucid-ContextMenu-FlyOut');
var optionDOMNodes = flyOutDOMNode.querySelectorAll('.lucid-DropMenu-Option');
assert.equal(optionDOMNodes.length, 3);
assert.equal(optionDOMNodes[0].innerHTML, 'option a');
assert.equal(optionDOMNodes[1].innerHTML, 'option b');
assert.equal(optionDOMNodes[2].innerHTML, 'option c');
});
});
describe('OptionGroup', function () {
var wrapper;
afterEach(function () {
if (wrapper) {
wrapper.unmount();
}
});
it('should render the Options in each OptionGroup separated by dividers', function () {
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(OptionGroup, null, /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")), /*#__PURE__*/React.createElement(OptionGroup, null, /*#__PURE__*/React.createElement(Option, null, "option p"), /*#__PURE__*/React.createElement(Option, null, "option q")), /*#__PURE__*/React.createElement(OptionGroup, null, /*#__PURE__*/React.createElement(Option, null, "option x"), /*#__PURE__*/React.createElement(Option, null, "option y"), /*#__PURE__*/React.createElement(Option, null, "option z"))));
var flyOutDOMNode = document.querySelector('.lucid-DropMenu.lucid-ContextMenu-FlyOut .lucid-DropMenu-option-container');
assert.equal(flyOutDOMNode.children.length, 10);
assert.equal(flyOutDOMNode.children[0].innerHTML, 'option a');
assert.equal(flyOutDOMNode.children[1].innerHTML, 'option b');
assert.equal(flyOutDOMNode.children[2].innerHTML, 'option c');
assert.equal(flyOutDOMNode.children[3].className, 'lucid-DropMenu-OptionGroup-divider');
assert.equal(flyOutDOMNode.children[4].innerHTML, 'option p');
assert.equal(flyOutDOMNode.children[5].innerHTML, 'option q');
assert.equal(flyOutDOMNode.children[6].className, 'lucid-DropMenu-OptionGroup-divider');
assert.equal(flyOutDOMNode.children[7].innerHTML, 'option x');
assert.equal(flyOutDOMNode.children[8].innerHTML, 'option y');
assert.equal(flyOutDOMNode.children[9].innerHTML, 'option z');
assert(_includes(flyOutDOMNode.children[0].className, 'lucid-DropMenu-Option-is-grouped'));
assert(_includes(flyOutDOMNode.children[1].className, 'lucid-DropMenu-Option-is-grouped'));
assert(_includes(flyOutDOMNode.children[2].className, 'lucid-DropMenu-Option-is-grouped'));
assert(_includes(flyOutDOMNode.children[4].className, 'lucid-DropMenu-Option-is-grouped'));
assert(_includes(flyOutDOMNode.children[5].className, 'lucid-DropMenu-Option-is-grouped'));
assert(_includes(flyOutDOMNode.children[7].className, 'lucid-DropMenu-Option-is-grouped'));
assert(_includes(flyOutDOMNode.children[8].className, 'lucid-DropMenu-Option-is-grouped'));
assert(_includes(flyOutDOMNode.children[9].className, 'lucid-DropMenu-Option-is-grouped'));
});
it('should render the ungrouped and grouped Options separated by dividers', function () {
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(OptionGroup, null, /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")), /*#__PURE__*/React.createElement(Option, null, "option x"), /*#__PURE__*/React.createElement(Option, null, "option y"), /*#__PURE__*/React.createElement(Option, null, "option z")));
var flyOutDOMNode = document.querySelector('.lucid-DropMenu.lucid-ContextMenu-FlyOut .lucid-DropMenu-option-container');
assert.equal(flyOutDOMNode.children.length, 7);
assert.equal(flyOutDOMNode.children[0].innerHTML, 'option a');
assert.equal(flyOutDOMNode.children[1].innerHTML, 'option b');
assert.equal(flyOutDOMNode.children[2].innerHTML, 'option c');
assert.equal(flyOutDOMNode.children[3].className, 'lucid-DropMenu-OptionGroup-divider');
assert.equal(flyOutDOMNode.children[4].innerHTML, 'option x');
assert.equal(flyOutDOMNode.children[5].innerHTML, 'option y');
assert.equal(flyOutDOMNode.children[6].innerHTML, 'option z');
assert(_includes(flyOutDOMNode.children[0].className, 'lucid-DropMenu-Option-is-grouped'));
assert(_includes(flyOutDOMNode.children[1].className, 'lucid-DropMenu-Option-is-grouped'));
assert(_includes(flyOutDOMNode.children[2].className, 'lucid-DropMenu-Option-is-grouped'));
assert(!_includes(flyOutDOMNode.children[4].className, 'lucid-DropMenu-Option-is-grouped'));
assert(!_includes(flyOutDOMNode.children[5].className, 'lucid-DropMenu-Option-is-grouped'));
assert(!_includes(flyOutDOMNode.children[6].className, 'lucid-DropMenu-Option-is-grouped'));
});
it('should render non-Option children of OptionGroups as group labels', function () {
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(OptionGroup, null, "Preferred", /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")), /*#__PURE__*/React.createElement(OptionGroup, null, "Available", /*#__PURE__*/React.createElement(Option, null, "option x"), /*#__PURE__*/React.createElement(Option, null, "option y"), /*#__PURE__*/React.createElement(Option, null, "option z"))));
var flyOutDOMNode = document.querySelector('.lucid-DropMenu.lucid-ContextMenu-FlyOut .lucid-DropMenu-option-container');
assert.equal(flyOutDOMNode.children.length, 9);
assert.equal(flyOutDOMNode.children[0].textContent, 'Preferred');
assert.equal(flyOutDOMNode.children[1].innerHTML, 'option a');
assert.equal(flyOutDOMNode.children[2].innerHTML, 'option b');
assert.equal(flyOutDOMNode.children[3].innerHTML, 'option c');
assert.equal(flyOutDOMNode.children[4].className, 'lucid-DropMenu-OptionGroup-divider');
assert.equal(flyOutDOMNode.children[5].textContent, 'Available');
assert.equal(flyOutDOMNode.children[6].innerHTML, 'option x');
assert.equal(flyOutDOMNode.children[7].innerHTML, 'option y');
assert.equal(flyOutDOMNode.children[8].innerHTML, 'option z');
assert(_includes(flyOutDOMNode.children[0].className, 'lucid-DropMenu-label'));
assert(_includes(flyOutDOMNode.children[5].className, 'lucid-DropMenu-label'));
});
it('should not render OptionGroups with `isHidden`', function () {
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(OptionGroup, {
isHidden: true
}, "Preferred", /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")), /*#__PURE__*/React.createElement(OptionGroup, null, "Available", /*#__PURE__*/React.createElement(Option, null, "option x"), /*#__PURE__*/React.createElement(Option, null, "option y"), /*#__PURE__*/React.createElement(Option, null, "option z"))));
var flyOutDOMNode = document.querySelector('.lucid-DropMenu.lucid-ContextMenu-FlyOut .lucid-DropMenu-option-container');
assert.equal(flyOutDOMNode.children.length, 4);
assert.equal(flyOutDOMNode.children[0].textContent, 'Available');
assert.equal(flyOutDOMNode.children[1].innerHTML, 'option x');
assert.equal(flyOutDOMNode.children[2].innerHTML, 'option y');
assert.equal(flyOutDOMNode.children[3].innerHTML, 'option z');
assert(_includes(flyOutDOMNode.children[0].className, 'lucid-DropMenu-label'));
});
});
describe('NullOption', function () {
var wrapper;
afterEach(function () {
if (wrapper) {
wrapper.unmount();
}
});
it('should render NullOption first with a divider immediately following', function () {
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true
}, /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(NullOption, null, "unselect"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var flyOutDOMNode = document.querySelector('.lucid-DropMenu.lucid-ContextMenu-FlyOut .lucid-DropMenu-option-container');
assert.equal(flyOutDOMNode.children.length, 5);
assert.equal(flyOutDOMNode.children[0].innerHTML, 'unselect');
assert.equal(flyOutDOMNode.children[1].className, 'lucid-DropMenu-OptionGroup-divider');
assert.equal(flyOutDOMNode.children[2].innerHTML, 'option a');
assert.equal(flyOutDOMNode.children[3].innerHTML, 'option b');
assert.equal(flyOutDOMNode.children[4].innerHTML, 'option c');
assert(_includes(flyOutDOMNode.children[0].className, 'lucid-DropMenu-Option'));
assert(_includes(flyOutDOMNode.children[0].className, 'lucid-DropMenu-Option-is-null'));
assert(_includes(flyOutDOMNode.children[2].className, 'lucid-DropMenu-Option'));
assert(_includes(flyOutDOMNode.children[3].className, 'lucid-DropMenu-Option'));
assert(_includes(flyOutDOMNode.children[4].className, 'lucid-DropMenu-Option'));
});
});
describe('Header', function () {
var wrapper;
afterEach(function () {
if (wrapper) {
wrapper.unmount();
}
});
it('should render Header first if it is provided, followed by the option-container', function () {
wrapper = mount( /*#__PURE__*/React.createElement(DropMenu, {
isExpanded: true
}, /*#__PURE__*/React.createElement(Header, null, "HeyDer"), /*#__PURE__*/React.createElement(Control, null, "control"), /*#__PURE__*/React.createElement(NullOption, null, "unselect"), /*#__PURE__*/React.createElement(Option, null, "option a"), /*#__PURE__*/React.createElement(Option, null, "option b"), /*#__PURE__*/React.createElement(Option, null, "option c")));
var flyOutDOMNode = document.querySelector('.lucid-DropMenu.lucid-ContextMenu-FlyOut');
assert.equal(flyOutDOMNode.children.length, 2);
assert.equal(flyOutDOMNode.children[0].innerHTML, 'HeyDer');
assert.equal(flyOutDOMNode.children[1].className, 'lucid-DropMenu-option-container');
});
});
});
});