lucid-ui
Version:
A UI component library from AppNexus.
114 lines • 5.35 kB
JavaScript
import _has from "lodash/has";
import _noop from "lodash/noop";
import assert from 'assert';
import React from 'react';
import sinon from 'sinon';
import { mount, shallow } from 'enzyme';
import { common, controls } from '../../util/generic-tests';
import { ExpanderPanelDumb as ExpanderPanel } from './ExpanderPanel';
import ChevronIcon from '../Icon/ChevronIcon/ChevronIcon';
describe('ExpanderPanel', function () {
common(ExpanderPanel);
controls(ExpanderPanel, {
callbackName: 'onToggle',
controlSelector: '.lucid-ExpanderPanel-header',
eventType: 'click'
});
describe('props', function () {
describe('isExpanded', function () {
it('sets the value of the `direction` prop on its `ChevronIcon` instance to "up" when `true`.', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ExpanderPanel, {
isExpanded: true
}));
var direction = wrapper.find(ChevronIcon).prop('direction');
assert.equal(direction, 'up', "direction was wrong, actual \"".concat(direction, "\", expected: \"up\""));
});
it('sets the value of the `direction` prop on its `ChevronIcon` instance to "down" when `false`.', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ExpanderPanel, {
isExpanded: false
}));
var direction = wrapper.find(ChevronIcon).prop('direction');
assert.equal(direction, 'down', "direction was wrong, actual \"".concat(direction, "\", expected: \"up\""));
});
it('adds the "lucid-ExpanderPanel-is-collapsed" class to the root element when `false`.', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ExpanderPanel, {
isExpanded: false
}));
assert.equal(wrapper.find('.lucid-ExpanderPanel-is-collapsed').length, 1, 'could not find element with ".lucid-ExpanderPanel-is-collapsed" class');
});
it('adds the "lucid-ExpanderPanel-content-is-expanded" class to its content container element when `true`.', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ExpanderPanel, {
isExpanded: true
}));
assert.equal(wrapper.find('.lucid-ExpanderPanel-content-is-expanded').length, 1, 'could not find element with ".lucid-ExpanderPanel-content-is-expanded" class');
});
});
describe('Header', function () {
it('renders the value in the header in a `span` element', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ExpanderPanel, {
Header: "yolo"
}));
var headerText = wrapper.find('.lucid-ExpanderPanel-header').children().at(1).text();
assert.equal(headerText, 'yolo', "Header text was wrong, actual: \"".concat(headerText, "\", expected: \"yolo\""));
});
});
describe('pass throughs', function () {
it('passes through all props not defined in `propTypes` to the root element', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(ExpanderPanel, {
className: "wut",
isExpanded: true,
onToggle: _noop,
style: {
marginRight: 10
},
foo: 1,
bar: 2
}));
var rootProps = wrapper.find('.lucid-ExpanderPanel').props();
assert(_has(rootProps, 'foo'), 'props missing "foo" prop');
assert(_has(rootProps, 'bar'), 'props missing "bar" prop');
});
});
});
});
describe('ExpanderPanel', function () {
var wrapper;
afterEach(function () {
if (wrapper) {
wrapper.unmount();
}
});
describe('user clicks on the header', function () {
it('calls the function passed in as the `onToggle` prop', function () {
var onToggle = sinon.spy();
wrapper = mount( /*#__PURE__*/React.createElement(ExpanderPanel, {
onToggle: onToggle
}));
wrapper.find('.lucid-ExpanderPanel-header').first().simulate('click');
wrapper.find('.lucid-ExpanderPanel-icon').first().simulate('click');
assert.equal(onToggle.callCount, 2, "onToggle called the wrong number of times, actual: ".concat(onToggle.callCount, ", expected: 2"));
});
it('should call `onToggle` correctly when not `isExpanded`', function () {
var onToggle = sinon.spy();
wrapper = mount( /*#__PURE__*/React.createElement(ExpanderPanel, {
isExpanded: false,
onToggle: onToggle
}));
wrapper.find('.lucid-ExpanderPanel-header').first().simulate('click');
wrapper.find('.lucid-ExpanderPanel-icon').first().simulate('click');
assert.equal(onToggle.args[0][0], true, 'onToggle not called with `true`');
assert.equal(onToggle.args[1][0], true, 'onToggle not called with `true`');
});
it('should call `onToggle` correctly when `isExpanded`', function () {
var onToggle = sinon.spy();
wrapper = mount( /*#__PURE__*/React.createElement(ExpanderPanel, {
isExpanded: true,
onToggle: onToggle
}));
wrapper.find('.lucid-ExpanderPanel-header').first().simulate('click');
wrapper.find('.lucid-ExpanderPanel-icon').first().simulate('click');
assert.equal(onToggle.args[0][0], false, 'onToggle not called with `false`');
assert.equal(onToggle.args[1][0], false, 'onToggle not called with `false`');
});
});
});