lucid-ui
Version:
A UI component library from AppNexus.
221 lines (218 loc) • 9.09 kB
JavaScript
import _get from "lodash/get";
import React from 'react'; //import { shallow, mount } from 'enzyme';
import { shallow } from 'enzyme';
import assert from 'assert';
import { common } from '../../util/generic-tests';
import Collapsible from './Collapsible';
import { Motion } from 'react-motion'; //import { MOSTLY_STABLE_DELAY } from '../../../tests/constants';
describe('Collapsible', function () {
common(Collapsible, {
selectRoot: function selectRoot(wrapper) {
return wrapper.find(Motion).shallow();
}
});
describe('render', function () {
it('should render a root element wrapping a content element', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Collapsible, null));
var motionWrapper = wrapper.find(Motion).shallow();
assert.equal(motionWrapper.find('.lucid-Collapsible').length, 1, 'must render root element');
assert.equal(motionWrapper.find('.lucid-Collapsible > .lucid-Collapsible-content').length, 1, 'must render a content element');
assert.equal(motionWrapper.find('.lucid-Collapsible > .lucid-Collapsible-content').children().length, 0, 'must not render children');
});
});
describe('props', function () {
/*
* In order to test `isExpanded` it is simplest to render one instance of
* the component and alternate values for `isExpanded`. This is because the
* max height can be captured in the initial render and be used in later
* assertions between transitions.
* */
describe('isExpanded', function () {
/*
let wrapper: any;
let testDomElement;
// only needed for the skipped tests:
beforeEach(() => {
testDomElement = document.createElement('div');
document.body.appendChild(testDomElement);
});
afterEach(() => {
if (wrapper) {
wrapper.unmount();
}
wrapper = null;
testDomElement.parentNode.removeChild(testDomElement);
});
*/
it('should default to true', function () {
assert.equal(true, _get(Collapsible.defaultProps, 'isExpanded'));
});
/*
it.skip('should transition the container height when the prop alternates between boolean values [mostly stable]', (done) => {
wrapper = mount(
<Collapsible isExpanded={true} isAnimated={false}>
-- Content to test height changes. --
</Collapsible>
, { attachTo: testDomElement });
let startingHeight;
_.delay(() => {
startingHeight = testDomElement.getBoundingClientRect().height;
assert(startingHeight > 0);
wrapper.setProps({
...wrapper.props(),
isExpanded: false,
});
_.delay(() => {
const currentHeight = testDomElement.getBoundingClientRect().height;
assert.equal(0, currentHeight);
wrapper.setProps({
...wrapper.props(),
isExpanded: true,
});
_.delay(() => {
const currentHeight = testDomElement.getBoundingClientRect().height;
assert.equal(currentHeight, startingHeight);
done();
}, MOSTLY_STABLE_DELAY);
}, MOSTLY_STABLE_DELAY);
}, MOSTLY_STABLE_DELAY);
});
*/
});
/*
* `isAnimated` is implmented in a special way: There's an property on the
* component instance (`this`) with the same name which controls which
* value is send to Motion. It's important to attach this to the component
* rather than only use the prop so that the initial render is never
* animated. After some time is given for the initial render the value of
* the instance property will match the value given in the props for
* `isAnimated` so that subsequent re-renders can be animated if desired.
* */
describe('isAnimated', function () {
/*
let wrapper: any;
let testDomElement;
/* only needed for the skipped tests:
beforeEach(() => {
testDomElement = document.createElement('div');
document.body.appendChild(testDomElement);
});
afterEach(() => {
if (wrapper) {
wrapper.unmount();
}
wrapper = null;
testDomElement.parentNode.removeChild(testDomElement);
});
*/
it('should default to true', function () {
assert.equal(true, _get(Collapsible.defaultProps, 'isAnimated'));
});
/*
it.skip('should set value of instance property `isAnimated` after initial render [mostly stable]', (done) => {
wrapper = mount(
<Collapsible isExpanded={true} isAnimated={true}>
-- Content to test height changes. --
</Collapsible>
, { attachTo: testDomElement });
assert.equal(false, wrapper.instance().isAnimated, 'must always be false initially');
_.delay(() => {
assert.equal(true, wrapper.instance().isAnimated, 'must be true to match prop value');
done();
}, MOSTLY_STABLE_DELAY);
});
it.skip('should set value of instance property `isAnimated` after initial render [mostly stable]', (done) => {
wrapper = mount(
<Collapsible isExpanded={true} isAnimated={false}>
-- Content to test height changes. --
</Collapsible>
, { attachTo: testDomElement });
assert.equal(false, wrapper.instance().isAnimated, 'must always be false initially');
_.delay(() => {
assert.equal(false, wrapper.instance().isAnimated, 'must be false to match prop value');
done();
}, MOSTLY_STABLE_DELAY);
});
*/
});
describe('isMountControlled', function () {
/*
let wrapper: any;
let testDomElement;
// only needed for the skipped tests:
beforeEach(() => {
testDomElement = document.createElement('div');
document.body.appendChild(testDomElement);
});
afterEach(() => {
if (wrapper) {
wrapper.unmount();
}
wrapper = null;
testDomElement.parentNode.removeChild(testDomElement);
});
*/
it('should default to true', function () {
assert.equal(true, _get(Collapsible.defaultProps, 'isMountControlled'));
});
/*
it.skip('should not render children after initial render when true and collapsed [mostly stable]', (done) => {
wrapper = mount(
<Collapsible isMountControlled={true} isExpanded={false} isAnimated={false}>
<div className='test-mounted-content'>I will be unmounted on collapse</div>
</Collapsible>
, { attachTo: testDomElement });
_.delay(() => {
assert.equal(0, wrapper.find('.test-mounted-content').length, 'must not render content when collapsed');
done();
}, MOSTLY_STABLE_DELAY);
});
it.skip('should render children after initial render when true and expanded [mostly stable]', (done) => {
wrapper = mount(
<Collapsible isMountControlled={true} isExpanded={true} isAnimated={false}>
<div className='test-mounted-content'>I will be unmounted on collapse</div>
</Collapsible>
, { attachTo: testDomElement });
_.delay(() => {
assert.equal(1, wrapper.find('.test-mounted-content').length, 'must render content when expanded');
done();
}, MOSTLY_STABLE_DELAY);
});
it.skip('should render children after initial render when false and collapsed [mostly stable]', (done) => {
wrapper = mount(
<Collapsible isMountControlled={false} isExpanded={false} isAnimated={false}>
<div className='test-mounted-content'>I will be unmounted on collapse</div>
</Collapsible>
, { attachTo: testDomElement });
_.delay(() => {
assert.equal(1, wrapper.find('.test-mounted-content').length, 'must render hidden content when collapsed');
done();
}, MOSTLY_STABLE_DELAY);
});
it.skip('should render children after initial render when false and expanded [mostly stable]', (done) => {
wrapper = mount(
<Collapsible isMountControlled={true} isExpanded={true} isAnimated={false}>
<div className='test-mounted-content'>I will be unmounted on collapse</div>
</Collapsible>
, { attachTo: testDomElement });
_.delay(() => {
assert.equal(1, wrapper.find('.test-mounted-content').length, 'must render content when expanded');
done();
}, MOSTLY_STABLE_DELAY);
});
*/
});
describe('rootType', function () {
it('should default to `div`', function () {
assert.equal('div', _get(Collapsible.defaultProps, 'rootType'));
});
it('should render a root container of the passed in type', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Collapsible, {
rootType: "section"
}));
var motionWrapper = wrapper.find(Motion).shallow();
assert.equal(motionWrapper.find('section.lucid-Collapsible').length, 1, 'must render root element of the specified type');
});
});
});
});