lucid-ui
Version:
A UI component library from AppNexus.
162 lines • 7.33 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 { ExpanderDumb as Expander } from './Expander';
import ChevronIcon from '../Icon/ChevronIcon/ChevronIcon';
describe('Expander', function () {
common(Expander);
controls(Expander, {
callbackName: 'onToggle',
controlSelector: '.lucid-Expander-header-toggle',
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 () {
assert.equal(shallow( /*#__PURE__*/React.createElement(Expander, {
isExpanded: true
})).find(ChevronIcon).prop('direction'), 'up');
});
it('sets the value of the `direction` prop on its `ChevronIcon` instance to "down" when `false`.', function () {
assert.equal(shallow( /*#__PURE__*/React.createElement(Expander, {
isExpanded: false
})).find(ChevronIcon).prop('direction'), 'down');
});
it('adds the "lucid-Expander-is-expanded" class to the root element when `true`.', function () {
assert.equal(shallow( /*#__PURE__*/React.createElement(Expander, {
isExpanded: true
})).find('.lucid-Expander-is-expanded').length, 1);
});
it('adds the "lucid-Expander-content-is-expanded" class to its content container element when `true`.', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Expander, {
isExpanded: true
}));
assert.equal(wrapper.find('.lucid-Expander-is-expanded').length, 1);
});
it('defaults to `false`.', function () {
assert.equal(mount( /*#__PURE__*/React.createElement(Expander, null)).prop('isExpanded'), false);
});
});
describe('onToggle', function () {
it('defaults to the Lodash `noop` method.', function () {
assert.equal(mount( /*#__PURE__*/React.createElement(Expander, null)).prop('onToggle'), _noop);
});
});
describe('kind', function () {
it('defaults "simple".', function () {
assert.equal(mount( /*#__PURE__*/React.createElement(Expander, null)).prop('kind'), 'simple');
});
it('accepts "highlighted".', function () {
assert.equal(mount( /*#__PURE__*/React.createElement(Expander, {
kind: "highlighted"
})).prop('kind'), 'highlighted');
});
it('`kind=highlighted` adds the "lucid-Expander-kind-highlighted" class.', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Expander, {
isExpanded: true,
kind: "highlighted"
}));
assert.equal(wrapper.find('.lucid-Expander-kind-highlighted').length, 1);
});
});
describe('Label (as a prop)', function () {
it('renders the value in the header in `lucid-Expander-text` class neighboring `ChevronIcon` instance.', function () {
assert.equal(shallow( /*#__PURE__*/React.createElement(Expander, {
Label: "foo"
})).find('.lucid-Expander-text').prop('children'), 'foo');
});
});
describe('Label (as a child)', function () {
it('renders the value in the header in `lucid-Expander-text` class neighboring `ChevronIcon` instance.', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Expander, null, /*#__PURE__*/React.createElement(Expander.Label, null, "foo")));
assert.equal(wrapper.find('.lucid-Expander-text').prop('children'), 'foo');
});
});
describe('AdditionalLabelContent (as a prop)', function () {
it('renders the value in `lucid-Expander-additional-content` class', function () {
var additionalContent = /*#__PURE__*/React.createElement("div", null, "Hello");
var wrapper = shallow( /*#__PURE__*/React.createElement(Expander, null, /*#__PURE__*/React.createElement(Expander.AdditionalLabelContent, null, additionalContent)));
assert.equal(wrapper.find('.lucid-Expander-additional-content').prop('children'), additionalContent);
});
});
describe('AdditionalLabelContent (as a child)', function () {
it('renders the value in `lucid-Expander-additional-content` class', function () {
var additionalContent = /*#__PURE__*/React.createElement("div", null, "Hello");
var wrapper = shallow( /*#__PURE__*/React.createElement(Expander, {
AdditionalLabelContent: additionalContent
}));
assert.equal(wrapper.find('.lucid-Expander-additional-content').prop('children'), additionalContent);
});
});
describe('pass throughs', function () {
it('passes through all props not defined in `propTypes` to the root element.', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Expander, {
className: "wut",
isExpanded: true,
onToggle: _noop,
style: {
marginRight: 10
},
foo: 1,
bar: 2
}));
var rootProps = wrapper.find('.lucid-Expander').props();
assert(_has(rootProps, 'foo'));
assert(_has(rootProps, 'bar'));
});
});
});
});
describe('Expander', 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(Expander, {
onToggle: onToggle,
Label: "foo"
}));
wrapper.find('.lucid-Expander-header-toggle').first().simulate('click');
wrapper.find('.lucid-Expander-icon').first().simulate('click');
wrapper.find('.lucid-Expander-text').first().simulate('click');
assert.equal(onToggle.callCount, 3);
});
it('should call `onToggle` correctly when not `isExpanded`', function () {
var onToggle = sinon.spy();
wrapper = mount( /*#__PURE__*/React.createElement(Expander, {
isExpanded: false,
onToggle: onToggle,
Label: "foo"
}));
wrapper.find('.lucid-Expander-header-toggle').first().simulate('click');
wrapper.find('.lucid-Expander-icon').first().simulate('click');
wrapper.find('.lucid-Expander-text').first().simulate('click');
assert.equal(onToggle.args[0][0], true);
assert.equal(onToggle.args[1][0], true);
assert.equal(onToggle.args[2][0], true);
});
it('should call `onToggle` correctly when `isExpanded`', function () {
var onToggle = sinon.spy();
wrapper = mount( /*#__PURE__*/React.createElement(Expander, {
isExpanded: true,
onToggle: onToggle,
Label: "foo"
}));
wrapper.find('.lucid-Expander-header-toggle').first().simulate('click');
wrapper.find('.lucid-Expander-icon').first().simulate('click');
wrapper.find('.lucid-Expander-text').first().simulate('click');
assert.equal(onToggle.args[0][0], false);
assert.equal(onToggle.args[1][0], false);
assert.equal(onToggle.args[2][0], false);
});
});
});