lucid-ui
Version:
A UI component library from AppNexus.
137 lines • 4.78 kB
JavaScript
import React from 'react';
import { mount, shallow } from 'enzyme';
import { common } from '../../util/generic-tests';
import SidePanel from './SidePanel';
import Overlay from '../Overlay/Overlay';
import DragCaptureZone from '../DragCaptureZone/DragCaptureZone';
describe('SidePanel', function () {
common(SidePanel);
describe('Events', function () {
describe('onCollapse', function () {
it('should be called when Overlay background is clicked', function () {
var onCollapse = jest.fn();
var wrapper = shallow( /*#__PURE__*/React.createElement(SidePanel, {
onCollapse: onCollapse
}));
var overlayWrapper = wrapper.find(Overlay);
var mockEvent = new Event('click');
overlayWrapper.prop('onBackgroundClick')({
event: mockEvent,
props: overlayWrapper.props()
});
expect(onCollapse).toHaveBeenCalled();
});
it('should be called when Escape key is pressed', function () {
var onCollapse = jest.fn();
var wrapper = shallow( /*#__PURE__*/React.createElement(SidePanel, {
onCollapse: onCollapse
}));
var overlayWrapper = wrapper.find(Overlay);
var mockEvent = new Event('keypress');
overlayWrapper.prop('onEscape')({
event: mockEvent,
props: overlayWrapper.props()
});
expect(onCollapse).toHaveBeenCalled();
});
it('should be called when the close icon is clicked', function () {
var onCollapse = jest.fn();
var wrapper = shallow( /*#__PURE__*/React.createElement(SidePanel, {
isExpanded: true,
onCollapse: onCollapse,
Header: "Foo bar"
}));
var crossIconWrapper = wrapper.find('.lucid-SidePanel-header-closer-button');
crossIconWrapper.simulate('click', {
event: 'abc'
});
expect(onCollapse).toHaveBeenCalled();
});
});
describe('onResize', function () {
it('should be called when the resizer stops being dragged', function () {
var onResize = jest.fn();
var wrapper = shallow( /*#__PURE__*/React.createElement(SidePanel, {
onResize: onResize
}));
var dragCaptureZoneWrapper = wrapper.find(DragCaptureZone);
var mockEvent = new Event('mouseup');
dragCaptureZoneWrapper.prop('onDragEnd')({
dx: 100,
dy: 0,
pageX: 100,
pageY: 0
}, {
event: mockEvent,
props: dragCaptureZoneWrapper.props()
});
expect(onResize).toHaveBeenCalled();
});
});
});
describe('preventBodyScroll', function () {
it('should hide the body overflow to prevent scrolling', function () {
mount( /*#__PURE__*/React.createElement(SidePanel, {
isExpanded: true,
preventBodyScroll: true
}));
expect(document.body.style.overflow).toEqual('hidden');
});
it('should hide the body overflow to prevent scrolling', function () {
var wrapper = mount( /*#__PURE__*/React.createElement(SidePanel, {
isExpanded: true,
preventBodyScroll: true
}));
wrapper.unmount();
expect(document.body.style.overflow).toEqual('');
});
});
describe('position', function () {
it('should match snapshot', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SidePanel, {
position: "left"
}));
expect(wrapper).toMatchSnapshot();
});
});
describe('isResizeDisabled', function () {
it('should match snapshot', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SidePanel, {
isResizeDisabled: true
}));
expect(wrapper).toMatchSnapshot();
});
});
describe('isAnimated', function () {
it('should match snapshot', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SidePanel, {
isAnimated: false
}));
expect(wrapper).toMatchSnapshot();
});
});
describe('isExpanded', function () {
it('should match snapshot', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SidePanel, {
isExpanded: false
}));
expect(wrapper).toMatchSnapshot();
});
});
describe('width', function () {
it('should match snapshot', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SidePanel, {
width: 200
}));
expect(wrapper).toMatchSnapshot();
});
});
describe('Header', function () {
it('should match snapshot', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(SidePanel, {
Header: "This is a header"
}));
expect(wrapper).toMatchSnapshot();
});
});
});