lucid-ui
Version:
A UI component library from AppNexus.
331 lines (307 loc) • 15.1 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 SplitHorizontal from './SplitHorizontal';
import DragCaptureZone from '../DragCaptureZone/DragCaptureZone';
import { Motion } from 'react-motion';
import { MOSTLY_STABLE_DELAY } from '../../../tests/constants';
describe('SplitHorizontal', function () {
common(SplitHorizontal);
describe('render', function () {
it('should render an inner element with the top, bottom, and divider elements as children', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitHorizontal, null));
var motionWrapper = wrapper.find(Motion).shallow();
assert.equal(wrapper.find('.lucid-SplitHorizontal').length, 1);
assert.equal(motionWrapper.find('.lucid-SplitHorizontal-inner').length, 1);
assert.equal(motionWrapper.find('.lucid-SplitHorizontal-inner > .lucid-SplitHorizontal-TopPane').length, 1);
assert.equal(motionWrapper.find('.lucid-SplitHorizontal-inner > .lucid-SplitHorizontal-Divider').length, 1);
assert.equal(motionWrapper.find('.lucid-SplitHorizontal-inner > .lucid-SplitHorizontal-BottomPane').length, 1);
});
it('should render expanded & collapsed', function () {
var wrapper = mount( /*#__PURE__*/React.createElement(SplitHorizontal, {
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(SplitHorizontal, null));
assert(wrapper.hasClass('lucid-SplitHorizontal-is-expanded'));
});
it('should apply the &-is-expanded css class when true', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitHorizontal, {
isExpanded: true
}));
assert(wrapper.hasClass('lucid-SplitHorizontal-is-expanded'));
});
it.skip('should not apply the &-is-expanded css class when false [mostly stable]', function (done) {
mountWrapper = mount( /*#__PURE__*/React.createElement(SplitHorizontal, {
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(SplitHorizontal, null));
_delay(function () {
assert.equal(wrapper.find('.lucid-SplitHorizontal.lucid-SplitHorizontal-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(SplitHorizontal, {
isAnimated: true
}));
_delay(function () {
assert(wrapper.render().hasClass('lucid-SplitHorizontal-is-animated'));
done();
}, MOSTLY_STABLE_DELAY);
});
it('should not apply the &-is-animated class when false [mostly stable]', function (done) {
wrapper = mount( /*#__PURE__*/React.createElement(SplitHorizontal, {
isAnimated: false
}));
_delay(function () {
assert.equal(wrapper.find('.lucid-SplitHorizontal.lucid-SplitHorizontal-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 height - 64px when the bottom pane is primary [mostly stable]', function (done) {
wrapper = mount( /*#__PURE__*/React.createElement(SplitHorizontal, {
isExpanded: false,
collapseShift: 64
}, /*#__PURE__*/React.createElement(SplitHorizontal.TopPane, null), /*#__PURE__*/React.createElement(SplitHorizontal.BottomPane, {
isPrimary: true
})), {
attachTo: mountTestDiv
});
_delay(function () {
var secondaryPaneDiv = mountTestDiv.querySelector('.lucid-SplitHorizontal-is-secondary');
var height = secondaryPaneDiv.getBoundingClientRect().height;
wrapper.update();
var slideAmount = wrapper.find(Motion).prop('style').slideAmount;
expect(slideAmount).toEqual(height - 64);
done();
}, MOSTLY_STABLE_DELAY);
});
it('should translated by height - 64px when the top pane is primary [mostly stable]', function (done) {
wrapper = mount( /*#__PURE__*/React.createElement(SplitHorizontal, {
isExpanded: false,
collapseShift: 64
}, /*#__PURE__*/React.createElement(SplitHorizontal.TopPane, {
isPrimary: true
}), /*#__PURE__*/React.createElement(SplitHorizontal.BottomPane, null)), {
attachTo: mountTestDiv
});
_delay(function () {
var secondaryPaneDiv = mountTestDiv.querySelector('.lucid-SplitHorizontal-is-secondary');
var height = secondaryPaneDiv.getBoundingClientRect().height;
wrapper.update();
var slideAmount = wrapper.find(Motion).prop('style').slideAmount;
expect(slideAmount).toEqual(height - 64);
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 onResizing = jest.fn();
wrapper = mount( /*#__PURE__*/React.createElement(SplitHorizontal, {
isExpanded: true,
onResizing: onResizing
}), {
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({
dY: 122
}, lastArg);
onDragEnd({
dY: 123
}, 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(122);
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.unmount();
}
if (mountTestDiv) {
mountTestDiv.parentNode.removeChild(mountTestDiv);
}
});
it('should be called when the DragCaptureZone calls the onDragEnd event handler', function () {
var onResize = jest.fn();
wrapper = mount( /*#__PURE__*/React.createElement(SplitHorizontal, {
isExpanded: true,
onResize: onResize
}), {
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({
dY: 122
}, lastArg);
onDragEnd({
dY: 123
}, 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(123);
expect(props).toEqual(wrapper.props());
expect(event).toEqual(lastArg.event);
});
});
});
describe('child components', function () {
describe('TopPane', function () {
it('should render children passed in', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitHorizontal, null, /*#__PURE__*/React.createElement(SplitHorizontal.TopPane, null, "Search Filters")));
var motionWrapper = wrapper.find(Motion).shallow();
var TopPane = motionWrapper.find('.lucid-SplitHorizontal-inner > .lucid-SplitHorizontal-TopPane');
assert.equal('Search Filters', TopPane.text(), 'must render children passed in');
});
it('should set the bottom pane as secondary when the top pane is set to primary', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitHorizontal, null, /*#__PURE__*/React.createElement(SplitHorizontal.TopPane, {
isPrimary: true
}, "Search Filters")));
var motionWrapper = wrapper.find(Motion).shallow();
var BottomPane = motionWrapper.find('.lucid-SplitHorizontal-inner > .lucid-SplitHorizontal-BottomPane');
assert(BottomPane.hasClass('lucid-SplitHorizontal-is-secondary'), 'must have the secondary className');
});
it('should pass thru the with to flexBasis', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitHorizontal, null, /*#__PURE__*/React.createElement(SplitHorizontal.TopPane, {
height: 123
}, "Search Filters")));
var motionWrapper = wrapper.find(Motion).shallow();
var TopPane = motionWrapper.find('.lucid-SplitHorizontal-inner > .lucid-SplitHorizontal-TopPane');
assert.equal(123, TopPane.prop('style').flexBasis, 'must set the flexBasis to match the given height');
});
});
describe('BottomPane', function () {
it('should render children passed in', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitHorizontal, null, /*#__PURE__*/React.createElement(SplitHorizontal.BottomPane, null, "Search Filters")));
var motionWrapper = wrapper.find(Motion).shallow();
var BottomPane = motionWrapper.find('.lucid-SplitHorizontal-inner > .lucid-SplitHorizontal-BottomPane');
assert.equal('Search Filters', BottomPane.text(), 'must render children passed in');
});
it('should set the top pane as secondary when the bottom pane is set to primary', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitHorizontal, null, /*#__PURE__*/React.createElement(SplitHorizontal.BottomPane, {
isPrimary: true
}, "Search Filters")));
var motionWrapper = wrapper.find(Motion).shallow();
var TopPane = motionWrapper.find('.lucid-SplitHorizontal-inner > .lucid-SplitHorizontal-TopPane');
assert(TopPane.hasClass('lucid-SplitHorizontal-is-secondary'), 'must have the secondary className');
});
it('should pass thru the with to flexBasis', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitHorizontal, null, /*#__PURE__*/React.createElement(SplitHorizontal.BottomPane, {
height: 123
}, "Search Filters")));
var motionWrapper = wrapper.find(Motion).shallow();
var BottomPane = motionWrapper.find('.lucid-SplitHorizontal-inner > .lucid-SplitHorizontal-BottomPane');
assert.equal(123, BottomPane.prop('style').flexBasis, 'must set the flexBasis to match the given height');
});
});
describe('Divider', function () {
it('should render children passed in', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SplitHorizontal, null, /*#__PURE__*/React.createElement(SplitHorizontal.Divider, null, "Resize")));
var motionWrapper = wrapper.find(Motion).shallow();
var dividerWrapper = motionWrapper.find('.lucid-SplitHorizontal-inner > .lucid-SplitHorizontal-Divider');
assert.equal('Resize', dividerWrapper.children().text(), 'must render children passed in');
});
});
});
});