lucid-ui
Version:
A UI component library from AppNexus.
156 lines • 5.48 kB
JavaScript
import React from 'react';
import { mount, shallow } from 'enzyme';
import { common } from '../../util/generic-tests';
import sinon from 'sinon';
import assert from 'assert';
import { CSSTransition } from 'react-transition-group';
import Overlay from './Overlay';
describe('Overlay', function () {
common(Overlay, {
getDefaultProps: function getDefaultProps() {
return {
isShown: true
};
},
selectRoot: function selectRoot(wrapper) {
return wrapper.find('.lucid-Overlay');
}
});
it('should render body content', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Overlay, {
isShown: true
}, "Flux Capacitor"));
assert(wrapper.contains('Flux Capacitor'));
});
describe('when isAnimated is false', function () {
describe('and when isShown is true', function () {
it('should render CSSTransition with in prop as false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Overlay, {
isShown: false,
isAnimated: true
}, "Flux Capacitor"));
assert.equal(wrapper.find(CSSTransition).props().in, false);
});
});
describe('and when isShown is false', function () {
it('should render CSSTransition with in prop as false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Overlay, {
isShown: true,
isAnimated: true
}, "Flux Capacitor"));
assert.equal(wrapper.find(CSSTransition).props().in, true);
});
});
});
describe('when isAnimated is true', function () {
it('should not render when isShown is false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Overlay, {
isShown: false,
isAnimated: false
}, "Flux Capacitor"));
assert(!wrapper.contains('Flux Capacitor'));
});
});
it('should have the correct class when isModal is false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Overlay, {
isShown: true,
isModal: false
}, "Nerp"));
assert.equal(wrapper.find('.lucid-Overlay-is-not-modal').length, 1);
});
it('should render with isAnimated=false', function () {
var wrapper = shallow( /*#__PURE__*/React.createElement(Overlay, {
isAnimated: false
}, "Nerp"));
expect(wrapper).toMatchSnapshot();
});
});
describe('Overlay', function () {
var testDOMNode;
beforeEach(function () {
testDOMNode = document.createElement('div');
document.body.appendChild(testDOMNode);
});
afterEach(function () {
testDOMNode.parentNode.removeChild(testDOMNode);
});
it('should fire onBackgroundClick', function () {
var onBackgroundClick = sinon.spy();
var wrapper = mount( /*#__PURE__*/React.createElement(Overlay, {
isShown: true,
isModal: false,
onBackgroundClick: onBackgroundClick,
portalId: 'brolo'
}), {
attachTo: testDOMNode
});
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', //event type : click, mousedown, mouseup, mouseover, mousemove, mouseout.
true, //canBubble
false, //cancelable
window, //event's AbstractView : should be window
1, // detail : Event's mouse click count
50, // screenX
50, // screenY
50, // clientX
50, // clientY
false, // ctrlKey
false, // altKey
false, // shiftKey
false, // metaKey
0, // button : 0 = click, 1 = middle button, 2 = right button
null // relatedTarget : Only used with some event types (e.g. mouseover and mouseout). In other cases, pass null.
);
document.querySelector('#brolo .lucid-Overlay').dispatchEvent(event);
assert(onBackgroundClick.called);
wrapper.unmount();
});
it('should not fire onBackgroundClick when content is clicked', function () {
var onBackgroundClick = sinon.spy();
var wrapper = mount( /*#__PURE__*/React.createElement(Overlay, {
isShown: true,
isModal: false,
onBackgroundClick: onBackgroundClick,
portalId: 'regiewat'
}, /*#__PURE__*/React.createElement("div", {
id: "foo"
}, "Nope")), {
attachTo: testDOMNode
});
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', //event type : click, mousedown, mouseup, mouseover, mousemove, mouseout.
true, //canBubble
false, //cancelable
window, //event's AbstractView : should be window
1, // detail : Event's mouse click count
50, // screenX
50, // screenY
50, // clientX
50, // clientY
false, // ctrlKey
false, // altKey
false, // shiftKey
false, // metaKey
0, // button : 0 = click, 1 = middle button, 2 = right button
null // relatedTarget : Only used with some event types (e.g. mouseover and mouseout). In other cases, pass null.
);
document.querySelector('#regiewat #foo').dispatchEvent(event);
assert(onBackgroundClick.notCalled);
wrapper.unmount();
});
it('should fire the onEscape handler when escape is typed', function () {
var onEscape = sinon.spy();
var wrapper = mount( /*#__PURE__*/React.createElement(Overlay, {
isShown: true,
onEscape: onEscape
}), {
attachTo: testDOMNode
});
var event = document.createEvent('Event');
event.initEvent('keydown', true, true);
event.keyCode = 27;
document.dispatchEvent(event);
assert(onEscape.called);
wrapper.unmount();
});
});