lucid-ui
Version:
A UI component library from AppNexus.
284 lines (281 loc) • 16.5 kB
JavaScript
import _delay from "lodash/delay";
import React from 'react';
import { shallow, mount } from 'enzyme';
import assert from 'assert';
import sinon from 'sinon';
import { common } from '../../util/generic-tests';
import { SidebarDumb as Sidebar } from './Sidebar';
import SplitVertical from '../SplitVertical/SplitVertical';
import { MOSTLY_STABLE_DELAY } from '../../../tests/constants';
describe('Sidebar', function () {
common(Sidebar);
describe('render', function () {
it('should render a Bar with header and content, a Divider with gripper, and a Primary pane', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null));
assert.equal(1, wrapper.find(SplitVertical).length, 'must render a SplitVertical');
assert.equal(wrapper.find('.lucid-Sidebar').length, 1);
assert.equal(wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar').length, 1);
assert.equal(wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-overlay').length, 1);
assert.equal(wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-header').length, 1);
assert.equal(wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-header > .lucid-Sidebar-Bar-Title').length, 1);
assert.equal(wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-header > .lucid-Sidebar-expander').length, 1);
assert.equal(wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-content').length, 1);
assert.equal(wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Divider').length, 1);
assert.equal(wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Divider > .lucid-Sidebar-Divider-gripper').length, 1);
assert.equal(wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Primary').length, 1);
});
});
describe('props', function () {
describe('width', function () {
it('should pass width to underlying SplitVertical pane for the sidebar', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, {
width: 123
}));
var barWrapper = wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar');
assert.equal(123, barWrapper.prop('width'), 'must pass width to the bar pane');
});
it('should default to 250', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null));
var barWrapper = wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar');
assert.equal(250, barWrapper.prop('width'), 'must pass width to the bar pane');
});
});
describe('isExpanded', function () {
var wrapper;
afterEach(function () {
if (wrapper && wrapper.exists()) {
wrapper.unmount();
}
});
it('should pass isExpanded to the underlying SplitVertical (true) [mostly stable]', function (done) {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, {
isExpanded: true
}));
_delay(function () {
var splitVertical = wrapper.find(SplitVertical);
assert(splitVertical.prop('isExpanded'), 'must pass isExpanded to the underlying SplitVertical');
assert(splitVertical.shallow().hasClass('lucid-SplitVertical-is-expanded'), 'must have the lucid-SplitVertical-is-expanded className');
done();
}, MOSTLY_STABLE_DELAY);
});
it('should pass isExpanded to the underlying SplitVertical (false) [mostly stable]', function (done) {
wrapper = mount( /*#__PURE__*/React.createElement(Sidebar, {
isExpanded: false
}));
_delay(function () {
var splitVertical = wrapper.find(SplitVertical);
assert(!splitVertical.prop('isExpanded'), 'must pass isExpanded to the underlying SplitVertical');
assert(!splitVertical.hasClass('lucid-SplitVertical-is-expanded'), 'must not have the lucid-SplitVertical-is-expanded className');
done();
}, MOSTLY_STABLE_DELAY);
});
it('should default to true [mostly stable]', function (done) {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null));
_delay(function () {
var splitVertical = wrapper.find(SplitVertical);
assert(splitVertical.prop('isExpanded'), 'must pass isExpanded to the underlying SplitVertical');
assert(splitVertical.shallow().hasClass('lucid-SplitVertical-is-expanded'), 'must have the lucid-SplitVertical-is-expanded className');
done();
}, MOSTLY_STABLE_DELAY);
});
});
describe('isAnimated', function () {
it('should pass isAnimated to the underlying SplitVertical (true)', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, {
isAnimated: true
}));
var splitVertical = wrapper.find(SplitVertical);
assert(splitVertical.prop('isAnimated'), 'must pass isAnimated to the underlying SplitVertical');
});
it('should pass isAnimated to the underlying SplitVertical (false)', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, {
isAnimated: false
}));
var splitVertical = wrapper.find(SplitVertical);
assert(!splitVertical.prop('isAnimated'), 'must pass isAnimated to the underlying SplitVertical');
});
it('should default to true', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null));
var splitVertical = wrapper.find(SplitVertical);
assert(splitVertical.prop('isAnimated'), 'must pass isAnimated to the underlying SplitVertical');
});
});
describe('position', function () {
it('should render the Bar in the LeftPane and the primary content in the RightPane when set to `left`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, {
position: "left"
}));
var splitVerticalLeftPane = wrapper.find(SplitVertical.LeftPane);
var splitVerticalRightPane = wrapper.find(SplitVertical.RightPane);
assert(!splitVerticalLeftPane.prop('isPrimary'), 'must not be primary');
assert(splitVerticalLeftPane.hasClass('lucid-Sidebar-Bar'), 'must have the className lucid-Sidebar-Bar');
assert(splitVerticalRightPane.prop('isPrimary'), 'must be primary');
assert(splitVerticalRightPane.hasClass('lucid-Sidebar-Primary'), 'must have the className lucid-Sidebar-Primary');
});
it('should render the Primary content in the LeftPane and the Bar in the RightPane when set to `right`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, {
position: "right"
}));
var splitVerticalLeftPane = wrapper.find(SplitVertical.LeftPane);
var splitVerticalRightPane = wrapper.find(SplitVertical.RightPane);
assert(splitVerticalLeftPane.prop('isPrimary'), 'must not be primary');
assert(splitVerticalLeftPane.hasClass('lucid-Sidebar-Primary'), 'must have the className lucid-Sidebar-Primary');
assert(!splitVerticalRightPane.prop('isPrimary'), 'must be primary');
assert(splitVerticalRightPane.hasClass('lucid-Sidebar-Bar'), 'must have the className lucid-Sidebar-Bar');
});
it('should default to `left`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null));
var splitVerticalLeftPane = wrapper.find(SplitVertical.LeftPane);
var splitVerticalRightPane = wrapper.find(SplitVertical.RightPane);
assert(!splitVerticalLeftPane.prop('isPrimary'), 'must not be primary');
assert(splitVerticalLeftPane.hasClass('lucid-Sidebar-Bar'), 'must have the className lucid-Sidebar-Bar');
assert(splitVerticalRightPane.prop('isPrimary'), 'must be primary');
assert(splitVerticalRightPane.hasClass('lucid-Sidebar-Primary'), 'must have the className lucid-Sidebar-Primary');
});
});
describe('isResizeDisabled', function () {
it('should set the className lucid-Sidebar-is-resize-disabled (true)', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, {
isResizeDisabled: true
}));
assert(wrapper.hasClass('lucid-Sidebar-is-resize-disabled'), 'must have className lucid-Sidebar-is-resize-disabled');
});
it('should not set the className lucid-Sidebar-is-resize-disabled (false)', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, {
isResizeDisabled: false
}));
assert(!wrapper.hasClass('lucid-Sidebar-is-resize-disabled'), 'must not have className lucid-Sidebar-is-resize-disabled');
});
it('should default to false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null));
assert(!wrapper.hasClass('lucid-Sidebar-is-resize-disabled'), 'must not have className lucid-Sidebar-is-resize-disabled');
});
});
describe('title', function () {
it('should render the prop value in the title', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, {
title: "Search Filters"
}));
var titleWrapper = wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-header .lucid-Sidebar-Bar-Title');
assert.equal('Search Filters', titleWrapper.text(), 'must render the prop value in the title');
});
it('should default to `Title`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null));
var titleWrapper = wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-header .lucid-Sidebar-Bar-Title');
assert.equal('Title', titleWrapper.text(), 'must render `Title` in the title');
});
});
describe('Title', function () {
it('should render the prop value in the title', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, {
Title: "Help Docs"
}));
var titleWrapper = wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-header .lucid-Sidebar-Bar-Title');
assert.equal('Help Docs', titleWrapper.text(), 'must render the prop value in the title');
});
});
describe('onResizing', function () {
it('should be called when onResizing event handler is called on SplitVertical', function () {
var onResizing = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, {
onResizing: onResizing
}));
var splitVertical = wrapper.find(SplitVertical);
var splitVerticalOnResize = splitVertical.prop('onResizing');
var lastArg = {
event: {},
props: wrapper.props()
};
splitVerticalOnResize(123, lastArg);
assert(onResizing.called, 'must be called');
assert.equal(123, onResizing.lastCall.args[0], 'must pass the new width in the first arg');
assert.equal(lastArg.event, onResizing.lastCall.args[1].event, 'must pass event in the last arg');
});
});
describe('onResize', function () {
it('should be called when onResize event handler is called on SplitVertical', function () {
var onResize = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, {
onResize: onResize
}));
var splitVertical = wrapper.find(SplitVertical);
var splitVerticalOnResize = splitVertical.prop('onResize');
var lastArg = {
event: {},
props: wrapper.props()
};
splitVerticalOnResize(123, lastArg);
assert(onResize.called, 'must be called');
assert.equal(123, onResize.lastCall.args[0], 'must pass the new width in the first arg');
assert.equal(lastArg.event, onResize.lastCall.args[1].event, 'must pass event in the last arg');
});
});
describe('onToggle', function () {
it('should be called when the expander button is clicked', function () {
var onToggle = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, {
isExpanded: false,
onToggle: onToggle
}));
var expanderWrapper = wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-header > .lucid-Sidebar-expander');
var expanderWrapperOnMouseDown = expanderWrapper.prop('onMouseDown');
var lastArg = {
event: {},
props: wrapper.props()
};
expanderWrapperOnMouseDown(lastArg.event);
assert(onToggle.called, 'must be called');
assert.equal(lastArg.event, onToggle.lastCall.args[0].event, 'must pass event in the last arg');
});
});
});
describe('child components', function () {
describe('Bar', function () {
it('should render children passed in', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null, /*#__PURE__*/React.createElement(Sidebar.Bar, null, "Next level locavore squid")));
var contentWrapper = wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-content');
assert.equal('Next level locavore squid', contentWrapper.text(), 'must render content in the side bar');
});
it('should have the correct class on bar content for `hasGutters`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null, /*#__PURE__*/React.createElement(Sidebar.Bar, {
hasGutters: true
}, "Next level locavore squid")));
var contentWrapper = wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-content');
assert(contentWrapper.hasClass('lucid-Sidebar-Bar-content-has-gutters'));
});
it('should render title from the given prop value for `title`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null, /*#__PURE__*/React.createElement(Sidebar.Bar, {
title: "Artisan Jean Shorts"
})));
var titleWrapper = wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-header > .lucid-Sidebar-Bar-Title');
assert.equal('Artisan Jean Shorts', titleWrapper.text(), 'must render title from prop value');
});
it('should render title from the given prop value for `Title`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null, /*#__PURE__*/React.createElement(Sidebar.Bar, {
Title: "Authentic pork belly"
})));
var titleWrapper = wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-header > .lucid-Sidebar-Bar-Title');
assert.equal('Authentic pork belly', titleWrapper.text(), 'must render title from prop value');
});
it('should render title from the `<Sidebar.Title>` composed with children', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null, /*#__PURE__*/React.createElement(Sidebar.Bar, null, /*#__PURE__*/React.createElement(Sidebar.Title, null, "Shabby Chic Dreamcatcher"))));
var titleWrapper = wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-header > .lucid-Sidebar-Bar-Title');
assert.equal('Shabby Chic Dreamcatcher', titleWrapper.text(), 'must render title from composed children');
});
});
describe('Primary', function () {
it('should render children passed in', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null, /*#__PURE__*/React.createElement(Sidebar.Primary, null, "You probably havent heard of them")));
var primaryWrapper = wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Primary');
assert.equal('You probably havent heard of them', primaryWrapper.children().text(), 'must render content in the primary section');
});
});
describe('Title', function () {
it('should render children passed in', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Sidebar, null, /*#__PURE__*/React.createElement(Sidebar.Title, null, "Roof Party Green Juice Mustache")));
var titleWrapper = wrapper.find('.lucid-Sidebar > .lucid-Sidebar-Bar > .lucid-Sidebar-Bar-header > .lucid-Sidebar-Bar-Title');
assert.equal('Roof Party Green Juice Mustache', titleWrapper.text(), 'must render title from composed children');
});
});
});
});