lucid-ui
Version:
A UI component library from AppNexus.
212 lines (209 loc) • 10.9 kB
JavaScript
import _delay from "lodash/delay";
import _includes from "lodash/includes";
import React from 'react';
import assert from 'assert';
import sinon from 'sinon';
import { mount, shallow } from 'enzyme';
import { common } from '../../util/generic-tests';
import { ToolTipDumb as ToolTip } from './ToolTip';
import ContextMenu from '../ContextMenu/ContextMenu';
import CloseIcon from '../Icon/CloseIcon/CloseIcon';
import { MOSTLY_STABLE_DELAY } from '../../../tests/constants';
var Target = ToolTip.Target,
Title = ToolTip.Title,
Body = ToolTip.Body;
describe('ToolTip', function () {
common(ToolTip);
describe('render', function () {
it('should render a ContextMenu', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, null, /*#__PURE__*/React.createElement(Target, null, "ToolTip Target"), /*#__PURE__*/React.createElement(Title, null, "Title"), /*#__PURE__*/React.createElement(Body, null, "Body")));
assert.equal(wrapper.find(ContextMenu).length, 1);
});
});
describe('props', function () {
describe('children', function () {
it('should not render any direct child elements which are not ToolTip-specific', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, null, /*#__PURE__*/React.createElement("button", null, "button"), /*#__PURE__*/React.createElement(Target, null, "ToolTip Target"), /*#__PURE__*/React.createElement(Title, null, "Title"), /*#__PURE__*/React.createElement(Body, null, "Body"), /*#__PURE__*/React.createElement("h1", null, "header")));
assert.equal(wrapper.find('button').length, 0, 'must not render button');
assert.equal(wrapper.find('h1').length, 0, 'must not render h1');
});
});
describe('className', function () {
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(ToolTip, {
isExpanded: true,
className: "MyToolTip"
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
var flyOutClassName = document.querySelector('.lucid-ToolTip-FlyOut.lucid-ContextMenu-FlyOut').className;
assert(_includes(flyOutClassName, 'MyToolTip'), 'must include `MyToolTip`');
});
});
});
describe('isCloseable', function () {
describe('true', function () {
it('should render a `CloseIcon`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
isExpanded: true,
isCloseable: true
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
assert.equal(wrapper.find(CloseIcon).length, 1, 'must include a CloseIcon');
});
});
describe('false', function () {
it('should not render a `CloseIcon`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
isExpanded: true
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
assert.equal(wrapper.find(CloseIcon).length, 0, 'must not include a CloseIcon');
});
});
});
describe('flyOutStyle', function () {
it('should pass flyOutStyle to the underlying ContextMenu FlyOut with a default maxWidth', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
isExpanded: true,
flyOutStyle: {
flex: 2
}
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
var flyOutStyle = wrapper.find(ContextMenu.FlyOut).prop('style');
assert.deepEqual(flyOutStyle, {
flex: 2,
maxWidth: 200
}, 'must have flex:2 and maxWidth: 200');
});
});
describe('flyOutMaxWidth', function () {
it('should pass maxWidth to the underlying ContextMenu FlyOut style', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
isExpanded: true,
flyOutMaxWidth: 100,
flyOutStyle: {
flex: 2,
maxWidth: 200
}
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
var flyOutStyle = wrapper.find(ContextMenu.FlyOut).prop('style');
assert.deepEqual(flyOutStyle, {
flex: 2,
maxWidth: 100
}, 'must have flex:2 and maxWidth: 400');
});
});
describe('direction', function () {
it('should pass direction to the underlying ContextMenu', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
isExpanded: true,
direction: "right"
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
assert.equal(wrapper.find(ContextMenu).prop('direction'), 'right', 'must be "right"');
});
});
describe('alignment', function () {
it('should pass alignment center to the underlying ContextMenu', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
isExpanded: true,
alignment: "start"
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
assert.equal(wrapper.find(ContextMenu).prop('alignment'), 'center', 'must be "center"');
});
describe('center', function () {
it('should pass getAlignmentOffset with correct closed over values', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
isExpanded: true,
alignment: "center"
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
var getAlignmentOffset = wrapper.find(ContextMenu).prop('getAlignmentOffset');
assert.equal(getAlignmentOffset(400), 0, 'must be 0');
});
});
describe('start', function () {
it('should pass getAlignmentOffset with correct closed over values', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
isExpanded: true,
alignment: "start"
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
var getAlignmentOffset = wrapper.find(ContextMenu).prop('getAlignmentOffset');
assert.equal(getAlignmentOffset(400), 177.5, 'must be 177.5');
});
});
describe('end', function () {
it('should pass getAlignmentOffset with correct closed over values', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
isExpanded: true,
alignment: "end"
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
var getAlignmentOffset = wrapper.find(ContextMenu).prop('getAlignmentOffset');
assert.equal(getAlignmentOffset(400), -177.5, 'must be -177.5');
});
});
});
describe('isExpanded', function () {
it('should pass isExpanded=true to the underlying ContextMenu component thru props', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
isExpanded: true
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
assert(wrapper.find(ContextMenu).prop('isExpanded'), 'isExpanded must be true');
});
it('should be false by default', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, null, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
assert(!wrapper.find(ContextMenu).prop('isExpanded'), 'isExpanded must be false');
});
});
describe('onMouseOver', function () {
it('should call onMouseOver on target mouseover', function () {
var spy = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
onMouseOver: spy
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
wrapper.find(ContextMenu).shallow().find('span').simulate('mouseOver');
assert(spy.calledOnce, 'onMouseOver must be called once');
});
});
describe('onMouseOut', function () {
it('should call onMouseOut when cursor leaves target', function (done) {
var spy = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
onMouseOut: spy
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
var root = wrapper.find('ContextMenu').shallow().find('span');
root.simulate('mouseOver');
root.simulate('mouseOut'); // wait for timeout
_delay(function () {
assert(spy.calledOnce, 'onMouseOut must be called once');
done();
}, MOSTLY_STABLE_DELAY * 2);
});
it('should not call onMouseOut if cursor enters FlyOut', function (done) {
var spy = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
isExpanded: true,
onMouseOut: spy
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
var root = wrapper.find(ContextMenu).shallow().find('span');
root.simulate('mouseOver'); // simulate click hover over FlyOut Portal
wrapper.find(ContextMenu.FlyOut).prop('onMouseOver')();
root.simulate('mouseOut'); // wait for timeout
_delay(function () {
assert(!spy.called, 'onMouseOut must not be called');
done();
}, MOSTLY_STABLE_DELAY * 2);
});
});
describe('portalId', function () {
it('should pass portalId to underlying ContextMenu', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ToolTip, {
portalId: "foo-portal-id"
}, /*#__PURE__*/React.createElement(Target, null, "Target"), /*#__PURE__*/React.createElement(Body, null, "Body")));
assert.equal(wrapper.find(ContextMenu).prop('portalId'), 'foo-portal-id', 'must equal "foo-portal-id"');
});
});
});
});