lucid-ui
Version:
A UI component library from AppNexus.
356 lines (332 loc) • 16.4 kB
JavaScript
import _last from "lodash/last";
import _delay from "lodash/delay";
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, mount } from 'enzyme';
import assert from 'assert';
import { common } from '../../util/generic-tests';
import SplitVertical from './SplitVertical';
import DragCaptureZone from '../DragCaptureZone/DragCaptureZone';
import { Motion } from 'react-motion';
import { MOSTLY_STABLE_DELAY } from '../../../tests/constants';
describe('SplitVertical', function () {
common(SplitVertical);
describe('render', function () {
it('should render an inner element with the left, right, and divider elements as children', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitVertical, null));
var motionWrapper = wrapper.find(Motion).shallow();
assert.equal(wrapper.find('.lucid-SplitVertical').length, 1);
assert.equal(motionWrapper.find('.lucid-SplitVertical-inner').length, 1);
assert.equal(motionWrapper.find('.lucid-SplitVertical-inner > .lucid-SplitVertical-LeftPane').length, 1);
assert.equal(motionWrapper.find('.lucid-SplitVertical-inner > .lucid-SplitVertical-Divider').length, 1);
assert.equal(motionWrapper.find('.lucid-SplitVertical-inner > .lucid-SplitVertical-RightPane').length, 1);
});
it('should render expanded & collapsed', function () {
var wrapper = mount( /*#__PURE__*/React.createElement(SplitVertical, {
isExpanded: true
}));
expect(wrapper).toMatchSnapshot();
expect(wrapper.setProps({
isExpanded: false
}).render()).toMatchSnapshot();
});
});
describe('props', function () {
describe('isExpanded', function () {
var mountWrapper;
afterEach(function () {
if (mountWrapper) {
mountWrapper.unmount();
}
});
it('should default to true', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitVertical, null));
assert(wrapper.hasClass('lucid-SplitVertical-is-expanded'));
});
it('should apply the &-is-expanded css class when true', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitVertical, {
isExpanded: true
}));
assert(wrapper.hasClass('lucid-SplitVertical-is-expanded'));
});
it('should not apply the &-is-expanded css class when false [mostly stable]', function (done) {
mountWrapper = mount( /*#__PURE__*/React.createElement(SplitVertical, {
isExpanded: false
}));
assert(!mountWrapper.hasClass('lucid-SplitHorizontal-is-expanded'));
_delay(done, MOSTLY_STABLE_DELAY);
});
});
describe('isAnimated', function () {
var wrapper;
afterEach(function () {
if (wrapper) {
wrapper.unmount();
}
});
it('should default to false [mostly stable]', function (done) {
wrapper = mount( /*#__PURE__*/React.createElement(SplitVertical, null));
_delay(function () {
assert.equal(wrapper.find('.lucid-SplitVertical.lucid-SplitVertical-is-animated').length, 0);
done();
}, MOSTLY_STABLE_DELAY);
});
it('should apply the &-is-animated class when true, after initial render [mostly stable]', function (done) {
wrapper = mount( /*#__PURE__*/React.createElement(SplitVertical, {
isAnimated: true
}));
_delay(function () {
wrapper.update();
assert.equal(wrapper.find('.lucid-SplitVertical.lucid-SplitVertical-is-animated').length, 1);
done();
}, MOSTLY_STABLE_DELAY);
});
it('should not apply the &-is-animated class when false [mostly stable]', function (done) {
wrapper = mount( /*#__PURE__*/React.createElement(SplitVertical, {
isAnimated: false
}));
_delay(function () {
assert.equal(wrapper.find('.lucid-SplitVertical.lucid-SplitVertical-is-animated').length, 0);
done();
}, MOSTLY_STABLE_DELAY);
});
});
describe('collapseShift', function () {
var wrapper;
var mountTestDiv;
beforeEach(function () {
mountTestDiv = document.createElement('div');
document.body.appendChild(mountTestDiv);
});
afterEach(function () {
if (wrapper) {
wrapper.unmount();
}
if (mountTestDiv) {
mountTestDiv.parentNode.removeChild(mountTestDiv);
}
});
it('should translated by width - 64px when the right pane is primary [mostly stable]', function (done) {
wrapper = mount( /*#__PURE__*/React.createElement(SplitVertical, {
isExpanded: false,
collapseShift: 64
}, /*#__PURE__*/React.createElement(SplitVertical.LeftPane, null), /*#__PURE__*/React.createElement(SplitVertical.RightPane, {
isPrimary: true
})), {
attachTo: mountTestDiv
});
_delay(function () {
var secondaryPaneDiv = mountTestDiv.querySelector('.lucid-SplitVertical-is-secondary');
var width = secondaryPaneDiv.getBoundingClientRect().width;
wrapper.update();
var slideAmount = wrapper.find(Motion).prop('style').slideAmount;
expect(slideAmount).toEqual(width - 64);
done();
}, MOSTLY_STABLE_DELAY);
});
it('should translated by width - 64px when the left pane is primary [mostly stable]', function (done) {
wrapper = mount( /*#__PURE__*/React.createElement(SplitVertical, {
isExpanded: false,
collapseShift: 64
}, /*#__PURE__*/React.createElement(SplitVertical.LeftPane, {
isPrimary: true
}), /*#__PURE__*/React.createElement(SplitVertical.RightPane, null)), {
attachTo: mountTestDiv
});
_delay(function () {
var secondaryPaneDiv = mountTestDiv.querySelector('.lucid-SplitVertical-is-secondary');
var width = secondaryPaneDiv.getBoundingClientRect().width;
wrapper.update();
var slideAmount = wrapper.find(Motion).prop('style').slideAmount;
assert.equal(width - 64, slideAmount, 'must be translated by width - 64px');
done();
}, MOSTLY_STABLE_DELAY);
});
});
describe('onResizing', function () {
var wrapper;
var mountTestDiv;
beforeEach(function () {
mountTestDiv = document.createElement('div');
document.body.appendChild(mountTestDiv);
});
afterEach(function () {
if (wrapper) {
wrapper.unmount();
}
if (mountTestDiv) {
mountTestDiv.parentNode.removeChild(mountTestDiv);
}
});
it('should be called when the DragCaptureZone calls the onDrag event handler', function () {
var width = 100;
var dX = 122;
var onResizing = jest.fn();
wrapper = mount( /*#__PURE__*/React.createElement(SplitVertical, {
isExpanded: true,
onResizing: onResizing
}, /*#__PURE__*/React.createElement(SplitVertical.LeftPane, {
width: width
}, "foo"), /*#__PURE__*/React.createElement(SplitVertical.RightPane, null, "bar")), {
attachTo: mountTestDiv
});
var _wrapper$find$props = wrapper.find(DragCaptureZone).props(),
onDragStart = _wrapper$find$props.onDragStart,
onDrag = _wrapper$find$props.onDrag,
onDragEnd = _wrapper$find$props.onDragEnd;
var lastArg = {
event: {}
};
onDragStart(lastArg);
onDrag({
dX: dX
}, lastArg);
onDragEnd({
dX: dX + 1
}, lastArg);
expect(onResizing).toHaveBeenCalled();
var _last2 = _last(onResizing.mock.calls),
_last3 = _slicedToArray(_last2, 2),
firstArg = _last3[0],
_last3$ = _last3[1],
props = _last3$.props,
event = _last3$.event;
expect(firstArg).toEqual(dX);
expect(props).toEqual(wrapper.props());
expect(event).toEqual(lastArg.event);
});
});
describe('onResize', function () {
var wrapper;
var mountTestDiv;
beforeEach(function () {
mountTestDiv = document.createElement('div');
document.body.appendChild(mountTestDiv);
});
afterEach(function () {
if (wrapper && wrapper.exists()) {
wrapper.unmount();
}
if (mountTestDiv) {
mountTestDiv.parentNode.removeChild(mountTestDiv);
}
});
it('should be called when the DragCaptureZone calls the onDragEnd event handler', function () {
var width = 100;
var dX = 122;
var onResize = jest.fn();
wrapper = mount( /*#__PURE__*/React.createElement(SplitVertical, {
isExpanded: true,
onResize: onResize
}, /*#__PURE__*/React.createElement(SplitVertical.LeftPane, {
width: width
}, "foo"), /*#__PURE__*/React.createElement(SplitVertical.RightPane, null, "bar")), {
attachTo: mountTestDiv
});
var _wrapper$find$props2 = wrapper.find(DragCaptureZone).props(),
onDragStart = _wrapper$find$props2.onDragStart,
onDrag = _wrapper$find$props2.onDrag,
onDragEnd = _wrapper$find$props2.onDragEnd;
var lastArg = {
event: {}
};
onDragStart(lastArg);
onDrag({
dX: dX
}, lastArg);
onDragEnd({
dX: dX + 1
}, lastArg);
expect(onResize).toHaveBeenCalled();
var _last4 = _last(onResize.mock.calls),
_last5 = _slicedToArray(_last4, 2),
firstArg = _last5[0],
_last5$ = _last5[1],
props = _last5$.props,
event = _last5$.event;
expect(firstArg).toEqual(dX + 1);
expect(props).toEqual(wrapper.props());
expect(event).toEqual(lastArg.event);
});
describe('isResizeable', function () {
it('shoult set -is-resizeable class on divider', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitVertical, null));
var dividerDivWrapper = wrapper.find(Motion).shallow().find(DragCaptureZone).shallow({
disableLifecycleMethods: true
}).first();
assert(dividerDivWrapper.hasClass('lucid-SplitVertical-Divider-is-resizeable'));
});
it('should not set -is-resizeable class on divider', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitVertical, {
isResizeable: false
}));
var motionWrapper = wrapper.find(Motion).shallow();
assert(!motionWrapper.find('.lucid-SplitVertical-Divider').hasClass('lucid-SplitVertical-Divider-is-resizeable'));
});
});
});
});
describe('child components', function () {
describe('LeftPane', function () {
it('should render children passed in', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitVertical, null, /*#__PURE__*/React.createElement(SplitVertical.LeftPane, null, "Search Filters")));
var motionWrapper = wrapper.find(Motion).shallow();
var LeftPane = motionWrapper.find('.lucid-SplitVertical-inner > .lucid-SplitVertical-LeftPane');
assert.equal('Search Filters', LeftPane.text(), 'must render children passed in');
});
it('should set the right pane as secondary when the left pane is set to primary', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitVertical, null, /*#__PURE__*/React.createElement(SplitVertical.LeftPane, {
isPrimary: true
}, "Search Filters")));
var motionWrapper = wrapper.find(Motion).shallow();
var RightPane = motionWrapper.find('.lucid-SplitVertical-inner > .lucid-SplitVertical-RightPane');
assert(RightPane.hasClass('lucid-SplitVertical-is-secondary'), 'must have the secondary className');
});
it('should pass thru the with to flexBasis', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitVertical, null, /*#__PURE__*/React.createElement(SplitVertical.LeftPane, {
width: 123
}, "Search Filters")));
var motionWrapper = wrapper.find(Motion).shallow();
var LeftPane = motionWrapper.find('.lucid-SplitVertical-inner > .lucid-SplitVertical-LeftPane');
assert.equal(123, LeftPane.prop('style').flexBasis, 'must set the flexBasis to match the given width');
});
});
describe('RightPane', function () {
it('should render children passed in', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitVertical, null, /*#__PURE__*/React.createElement(SplitVertical.RightPane, null, "Search Filters")));
var motionWrapper = wrapper.find(Motion).shallow();
var RightPane = motionWrapper.find('.lucid-SplitVertical-inner > .lucid-SplitVertical-RightPane');
assert.equal('Search Filters', RightPane.text(), 'must render children passed in');
});
it('should set the left pane as secondary when the right pane is set to primary', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitVertical, null, /*#__PURE__*/React.createElement(SplitVertical.RightPane, {
isPrimary: true
}, "Search Filters")));
var motionWrapper = wrapper.find(Motion).shallow();
var LeftPane = motionWrapper.find('.lucid-SplitVertical-inner > .lucid-SplitVertical-LeftPane');
assert(LeftPane.hasClass('lucid-SplitVertical-is-secondary'), 'must have the secondary className');
});
it('should pass thru the with to flexBasis', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitVertical, null, /*#__PURE__*/React.createElement(SplitVertical.RightPane, {
width: 123
}, "Search Filters")));
var motionWrapper = wrapper.find(Motion).shallow();
var RightPane = motionWrapper.find('.lucid-SplitVertical-inner > .lucid-SplitVertical-RightPane');
assert.equal(123, RightPane.prop('style').flexBasis, 'must set the flexBasis to match the given width');
});
});
describe('Divider', function () {
it('should render children passed in', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitVertical, null, /*#__PURE__*/React.createElement(SplitVertical.Divider, null, "Resize")));
var motionWrapper = wrapper.find(Motion).shallow();
var dividerWrapper = motionWrapper.find('.lucid-SplitVertical-inner > .lucid-SplitVertical-Divider');
assert.equal('Resize', dividerWrapper.children().text(), 'must render children passed in');
});
});
});
});