lucid-ui
Version:
A UI component library from AppNexus.
238 lines • 14.5 kB
JavaScript
import React from 'react';
import { shallow } from 'enzyme';
import assert from 'assert';
import sinon from 'sinon';
import { common } from '../../util/generic-tests';
import { SubmarineDumb as Submarine } from './Submarine';
import SplitHorizontal from '../SplitHorizontal/SplitHorizontal';
describe('Submarine', function () {
common(Submarine);
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(Submarine, null));
assert.equal(1, wrapper.find(SplitHorizontal).length, 'must render a SplitHorizontal');
assert.equal(wrapper.find('.lucid-Submarine').length, 1);
assert.equal(wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar').length, 1);
assert.equal(wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar > .lucid-Submarine-Bar-overlay').length, 1);
assert.equal(wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar > .lucid-Submarine-Bar-header').length, 1);
assert.equal(wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar > .lucid-Submarine-Bar-header > .lucid-Submarine-Bar-Title').length, 1);
assert.equal(wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar > .lucid-Submarine-Bar-header > .lucid-Submarine-expander').length, 1);
assert.equal(wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar > .lucid-Submarine-Bar-content').length, 1);
assert.equal(wrapper.find('.lucid-Submarine > .lucid-Submarine-Divider').length, 1);
assert.equal(wrapper.find('.lucid-Submarine > .lucid-Submarine-Divider > .lucid-Submarine-Divider-gripper').length, 1);
assert.equal(wrapper.find('.lucid-Submarine > .lucid-Submarine-Primary').length, 1);
});
});
describe('props', function () {
describe('height', function () {
it('should pass height to underlying SplitHorizontal pane for the sidebar', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, {
height: 123
}));
var barWrapper = wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar');
assert.equal(123, barWrapper.prop('height'), 'must pass height to the bar pane');
});
it('should default to 250', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, null));
var barWrapper = wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar');
assert.equal(250, barWrapper.prop('height'), 'must pass height to the bar pane');
});
});
describe('isExpanded', function () {
it('should pass isExpanded to the underlying SplitHorizontal (true)', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, {
isExpanded: true
}));
var splitHorizontal = wrapper.find(SplitHorizontal);
assert(splitHorizontal.prop('isExpanded'), 'must pass isExpanded to the underlying SplitHorizontal');
assert(splitHorizontal.shallow().hasClass('lucid-SplitHorizontal-is-expanded'), 'must have the lucid-SplitHorizontal-is-expanded className');
});
it('should pass isExpanded to the underlying SplitHorizontal (false)', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, {
isExpanded: false
}));
var splitHorizontal = wrapper.find(SplitHorizontal);
assert(!splitHorizontal.prop('isExpanded'), 'must pass isExpanded to the underlying SplitHorizontal');
assert(!splitHorizontal.hasClass('lucid-SplitHorizontal-is-expanded'), 'must not have the lucid-SplitHorizontal-is-expanded className');
});
it('should default to true', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, null));
var splitHorizontal = wrapper.find(SplitHorizontal);
assert(splitHorizontal.prop('isExpanded'), 'must pass isExpanded to the underlying SplitHorizontal');
assert(splitHorizontal.shallow().hasClass('lucid-SplitHorizontal-is-expanded'), 'must have the lucid-SplitHorizontal-is-expanded className');
});
});
describe('isAnimated', function () {
it('should pass isAnimated to the underlying SplitHorizontal (true)', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, {
isAnimated: true
}));
var splitHorizontal = wrapper.find(SplitHorizontal);
assert(splitHorizontal.prop('isAnimated'), 'must pass isAnimated to the underlying SplitHorizontal');
});
it('should pass isAnimated to the underlying SplitHorizontal (false)', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, {
isAnimated: false
}));
var splitHorizontal = wrapper.find(SplitHorizontal);
assert(!splitHorizontal.prop('isAnimated'), 'must pass isAnimated to the underlying SplitHorizontal');
});
it('should default to true', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, null));
var splitHorizontal = wrapper.find(SplitHorizontal);
assert(splitHorizontal.prop('isAnimated'), 'must pass isAnimated to the underlying SplitHorizontal');
});
});
describe('position', function () {
it('should render the Bar in the TopPane and the primary content in the BottomPane when set to `top`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, {
position: "top"
}));
var splitHorizontalTopPane = wrapper.find(SplitHorizontal.TopPane);
var splitHorizontalBottomPane = wrapper.find(SplitHorizontal.BottomPane);
assert(!splitHorizontalTopPane.prop('isPrimary'), 'must not be primary');
assert(splitHorizontalTopPane.hasClass('lucid-Submarine-Bar'), 'must have the className lucid-Submarine-Bar');
assert(splitHorizontalBottomPane.prop('isPrimary'), 'must be primary');
assert(splitHorizontalBottomPane.hasClass('lucid-Submarine-Primary'), 'must have the className lucid-Submarine-Primary');
});
it('should render the Primary content in the TopPane and the Bar in the BottomPane when set to `bottom`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, {
position: "bottom"
}));
var splitHorizontalTopPane = wrapper.find(SplitHorizontal.TopPane);
var splitHorizontalBottomPane = wrapper.find(SplitHorizontal.BottomPane);
assert(splitHorizontalTopPane.prop('isPrimary'), 'must not be primary');
assert(splitHorizontalTopPane.hasClass('lucid-Submarine-Primary'), 'must have the className lucid-Submarine-Primary');
assert(!splitHorizontalBottomPane.prop('isPrimary'), 'must be primary');
assert(splitHorizontalBottomPane.hasClass('lucid-Submarine-Bar'), 'must have the className lucid-Submarine-Bar');
});
it('should default to `bottom`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, null));
var splitHorizontalTopPane = wrapper.find(SplitHorizontal.TopPane);
var splitHorizontalBottomPane = wrapper.find(SplitHorizontal.BottomPane);
assert(splitHorizontalTopPane.prop('isPrimary'), 'must be primary');
assert(splitHorizontalTopPane.hasClass('lucid-Submarine-Primary'), 'must have the className lucid-Submarine-Primary');
assert(!splitHorizontalBottomPane.prop('isPrimary'), 'must not be primary');
assert(splitHorizontalBottomPane.hasClass('lucid-Submarine-Bar'), 'must have the className lucid-Submarine-Bar');
});
});
describe('isResizeDisabled', function () {
it('should set the className lucid-Submarine-is-resize-disabled (true)', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, {
isResizeDisabled: true
}));
assert(wrapper.hasClass('lucid-Submarine-is-resize-disabled'), 'must have className lucid-Submarine-is-resize-disabled');
});
it('should not set the className lucid-Submarine-is-resize-disabled (false)', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, {
isResizeDisabled: false
}));
assert(!wrapper.hasClass('lucid-Submarine-is-resize-disabled'), 'must not have className lucid-Submarine-is-resize-disabled');
});
it('should default to false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, null));
assert(!wrapper.hasClass('lucid-Submarine-is-resize-disabled'), 'must not have className lucid-Submarine-is-resize-disabled');
});
});
describe('Title', function () {
it('should render the prop value in the title', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, {
Title: "Help Docs"
}));
var titleWrapper = wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar > .lucid-Submarine-Bar-header .lucid-Submarine-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 SplitHorizontal', function () {
var onResizing = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, {
onResizing: onResizing
}));
var splitHorizontal = wrapper.find(SplitHorizontal);
var splitHorizontalOnResizing = splitHorizontal.prop('onResizing');
var lastArg = {
event: {},
props: wrapper.props()
};
splitHorizontalOnResizing(123, lastArg);
assert(onResizing.called, 'must be called');
assert.equal(123, onResizing.lastCall.args[0], 'must pass the new height 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 SplitHorizontal', function () {
var onResize = sinon.spy();
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, {
onResize: onResize
}));
var splitHorizontal = wrapper.find(SplitHorizontal);
var splitHorizontalOnResize = splitHorizontal.prop('onResize');
var lastArg = {
event: {},
props: wrapper.props()
};
splitHorizontalOnResize(123, lastArg);
assert(onResize.called, 'must be called');
assert.equal(123, onResize.lastCall.args[0], 'must pass the new height 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(Submarine, {
isExpanded: false,
onToggle: onToggle
}));
var expanderWrapper = wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar > .lucid-Submarine-Bar-header > .lucid-Submarine-expander');
var expanderWrapperOnClick = expanderWrapper.prop('onClick');
var lastArg = {
event: {},
props: wrapper.props()
};
expanderWrapperOnClick({
event: 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(Submarine, null, /*#__PURE__*/React.createElement(Submarine.Bar, null, "Next level locavore squid")));
var contentWrapper = wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar > .lucid-Submarine-Bar-content');
assert.equal('Next level locavore squid', contentWrapper.text(), 'must render content in the side bar');
});
it('should render title from the given prop value for `Title`', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, null, /*#__PURE__*/React.createElement(Submarine.Bar, {
Title: "Authentic pork belly"
})));
var titleWrapper = wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar > .lucid-Submarine-Bar-header > .lucid-Submarine-Bar-Title');
assert.equal('Authentic pork belly', titleWrapper.text(), 'must render title from prop value');
});
it('should render title from the `<Submarine.Title>` composed with children', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Submarine, null, /*#__PURE__*/React.createElement(Submarine.Bar, null, /*#__PURE__*/React.createElement(Submarine.Title, null, "Shabby Chic Dreamcatcher"))));
var titleWrapper = wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar > .lucid-Submarine-Bar-header > .lucid-Submarine-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(Submarine, null, /*#__PURE__*/React.createElement(Submarine.Primary, null, "You probably havent heard of them")));
var primaryWrapper = wrapper.find('.lucid-Submarine > .lucid-Submarine-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(Submarine, null, /*#__PURE__*/React.createElement(Submarine.Title, null, "Roof Party Green Juice Mustache")));
var titleWrapper = wrapper.find('.lucid-Submarine > .lucid-Submarine-Bar > .lucid-Submarine-Bar-header > .lucid-Submarine-Bar-Title');
assert.equal('Roof Party Green Juice Mustache', titleWrapper.text(), 'must render title from composed children');
});
});
});
});