lucid-ui
Version:
A UI component library from AppNexus.
139 lines (135 loc) • 6.64 kB
JavaScript
import _forEach from "lodash/forEach";
import _defer from "lodash/defer";
import _isEmpty from "lodash/isEmpty";
import _first from "lodash/first";
import React from 'react';
import assert from 'assert';
import sinon from 'sinon';
import { common } from '../../util/generic-tests';
import { mount } from 'enzyme';
import ContextMenu from './ContextMenu';
describe('ContextMenu', function () {
common(ContextMenu, {
exemptFunctionProps: ['getAlignmentOffset'],
getDefaultProps: function getDefaultProps() {
return {
children: [/*#__PURE__*/React.createElement(ContextMenu.Target, {
key: "1"
}, "Test"), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, {
key: "2"
}, "Menu")]
};
}
});
describe('props', function () {
var wrapper;
afterEach(function () {
if (wrapper) {
wrapper.unmount();
}
});
describe('isExpanded', function () {
it('should not render the flyout when false', function () {
wrapper = mount( /*#__PURE__*/React.createElement(ContextMenu, {
portalId: "ContextMenu-test123",
isExpanded: false
}, /*#__PURE__*/React.createElement(ContextMenu.Target, null, "File"), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, null, "Open")));
assert.equal(document.getElementById('ContextMenu-test123'), null);
});
it('should render the flyout when true', function () {
wrapper = mount( /*#__PURE__*/React.createElement(ContextMenu, {
portalId: "ContextMenu-test123",
isExpanded: true
}, /*#__PURE__*/React.createElement(ContextMenu.Target, null, "File"), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, null, "Open")));
assert.equal(document.getElementById('ContextMenu-test123').textContent, 'Open');
});
it('should render the flyout with opacity 0 on initial render', function () {
wrapper = mount( /*#__PURE__*/React.createElement(ContextMenu, {
portalId: "ContextMenu-test456",
isExpanded: true
}, /*#__PURE__*/React.createElement(ContextMenu.Target, null, "File"), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, null, "Open")));
var flyout = _first(document.getElementById('ContextMenu-test456').children);
assert(_isEmpty(flyout.style.opacity));
});
it('should render the flyout with opacity 1 on subsequent render', function (done) {
wrapper = mount( /*#__PURE__*/React.createElement(ContextMenu, {
portalId: "ContextMenu-test456",
isExpanded: true
}, /*#__PURE__*/React.createElement(ContextMenu.Target, null, "File"), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, null, "Open")));
var flyout = _first(document.getElementById('ContextMenu-test456').children);
_defer(function () {
assert.equal(flyout.style.opacity, 1);
done();
});
});
});
describe('direction', function () {
_forEach(['up', 'down', 'left', 'right'], function (direction) {
it("should apply the 'lucid-ContextMenu-FlyOut-".concat(direction, "' className when '").concat(direction, "'"), function () {
wrapper = mount( /*#__PURE__*/React.createElement(ContextMenu, {
portalId: "ContextMenu-test123",
isExpanded: true,
direction: direction
}, /*#__PURE__*/React.createElement(ContextMenu.Target, null, "File"), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, null, "Open")));
var flyOutPortalDomNode = document.getElementById('ContextMenu-test123');
assert(flyOutPortalDomNode.querySelector(".lucid-ContextMenu-FlyOut-".concat(direction)));
});
});
});
describe('portalId', function () {
it('should render the portal with the given id when expanded', function () {
wrapper = mount( /*#__PURE__*/React.createElement(ContextMenu, {
portalId: "ContextMenu-test123",
isExpanded: true
}, /*#__PURE__*/React.createElement(ContextMenu.Target, null, "File"), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, null, "Open")));
assert(document.getElementById('ContextMenu-test123'));
});
it('should render the portal with a generated id when expanded', function () {
wrapper = mount( /*#__PURE__*/React.createElement(ContextMenu, {
isExpanded: true
}, /*#__PURE__*/React.createElement(ContextMenu.Target, null, "File"), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, null, "Open")));
var portalDomNode = document.body.querySelector('.lucid-Portal');
assert(portalDomNode.parentNode.getAttribute('id'));
});
});
describe('onClickOut', function () {
var onClickOut;
var testSection;
beforeEach(function () {
onClickOut = sinon.spy();
testSection = document.createElement('section');
document.body.appendChild(testSection);
});
afterEach(function () {
testSection.parentNode.removeChild(testSection);
});
it('should not be called when click happens within component', function () {
wrapper = mount( /*#__PURE__*/React.createElement(ContextMenu, {
isExpanded: true,
onClickOut: onClickOut
}, /*#__PURE__*/React.createElement(ContextMenu.Target, null, "File"), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, null, "Open")), {
attachTo: testSection
});
testSection.querySelector('.lucid-ContextMenu').click();
document.body.querySelector('.lucid-ContextMenu-FlyOut').click();
assert(onClickOut.notCalled);
});
it('should not be called when not expanded and click happens outside of the component', function () {
wrapper = mount( /*#__PURE__*/React.createElement(ContextMenu, {
isExpanded: false,
onClickOut: onClickOut
}, /*#__PURE__*/React.createElement(ContextMenu.Target, null, "File"), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, null, "Open")));
document.body.click();
assert(onClickOut.notCalled);
});
it('should be called when expanded and click happens outside of the component', function () {
wrapper = mount( /*#__PURE__*/React.createElement(ContextMenu, {
isExpanded: true,
onClickOut: onClickOut
}, /*#__PURE__*/React.createElement(ContextMenu.Target, null, "File"), /*#__PURE__*/React.createElement(ContextMenu.FlyOut, null, "Open")));
document.body.click();
assert(onClickOut.called);
});
});
});
});