accounts-frontend/tests/components/ui/popup/PopupStack.test.jsx

168 lines
4.6 KiB
React
Raw Normal View History

import React from 'react';
2016-07-26 10:10:45 +05:30
import { shallow, mount } from 'enzyme';
import { PopupStack } from 'components/ui/popup/PopupStack';
2016-07-26 10:10:45 +05:30
import styles from 'components/ui/popup/popup.scss';
2016-07-26 10:10:45 +05:30
function DummyPopup() {return null;}
describe('<PopupStack />', () => {
it('renders all popup components', () => {
const props = {
destroy: () => {},
popups: [
{
2016-07-26 10:10:45 +05:30
Popup: DummyPopup
},
{
2016-07-26 10:10:45 +05:30
Popup: DummyPopup
}
]
};
const component = shallow(<PopupStack {...props} />);
expect(component.find(DummyPopup)).to.have.length(2);
});
2016-07-26 10:10:45 +05:30
it('should pass onClose as props', () => {
const expectedProps = {
foo: 'bar'
};
const props = {
destroy: () => {},
popups: [
{
2016-07-26 10:10:45 +05:30
Popup: (props = {}) => {
expect(props.onClose).to.be.a('function');
return <DummyPopup {...expectedProps} />;
}
}
]
};
2016-07-26 10:10:45 +05:30
const component = mount(<PopupStack {...props} />);
2016-07-26 10:10:45 +05:30
const popup = component.find(DummyPopup);
expect(popup).to.have.length(1);
expect(popup.props()).to.deep.equal(expectedProps);
});
2016-07-26 10:10:45 +05:30
it('should hide popup, when onClose called', () => {
const props = {
popups: [
{
Popup: DummyPopup
},
{
Popup: DummyPopup
}
],
destroy: sinon.stub()
};
2016-07-26 10:10:45 +05:30
const component = shallow(<PopupStack {...props} />);
component.find(DummyPopup).last().prop('onClose')();
2016-07-26 10:10:45 +05:30
sinon.assert.calledOnce(props.destroy);
sinon.assert.calledWith(props.destroy, sinon.match.same(props.popups[1]));
});
it('should hide popup, when overlay clicked', () => {
const preventDefault = sinon.stub();
const props = {
2016-07-26 10:10:45 +05:30
destroy: sinon.stub(),
popups: [
{
2016-07-26 10:10:45 +05:30
Popup: DummyPopup
}
]
};
const component = shallow(<PopupStack {...props} />);
2016-07-26 10:10:45 +05:30
const overlay = component.find(`.${styles.overlay}`);
overlay.simulate('click', {target: 1, currentTarget: 1, preventDefault});
sinon.assert.calledOnce(props.destroy);
sinon.assert.calledOnce(preventDefault);
});
2016-07-26 10:10:45 +05:30
it('should hide popup on overlay click if disableOverlayClose', () => {
const props = {
2016-07-26 10:10:45 +05:30
destroy: sinon.stub(),
popups: [
{
2016-07-26 10:10:45 +05:30
Popup: DummyPopup,
disableOverlayClose: true
}
2016-07-26 10:10:45 +05:30
]
};
const component = shallow(<PopupStack {...props} />);
2016-07-26 10:10:45 +05:30
const overlay = component.find(`.${styles.overlay}`);
overlay.simulate('click', {target: 1, currentTarget: 1, preventDefault() {}});
2016-07-26 10:10:45 +05:30
sinon.assert.notCalled(props.destroy);
});
2016-07-26 10:50:37 +05:30
it('should hide popup, when esc pressed', () => {
const props = {
destroy: sinon.stub(),
popups: [
{
Popup: DummyPopup
}
]
};
mount(<PopupStack {...props} />);
const event = new Event('keyup');
event.which = 27;
document.dispatchEvent(event);
sinon.assert.calledOnce(props.destroy);
});
it('should hide first popup in stack if esc pressed', () => {
2016-07-26 10:50:37 +05:30
const props = {
destroy: sinon.stub(),
popups: [
{
Popup() {return null;}
},
{
Popup: DummyPopup
}
]
};
mount(<PopupStack {...props} />);
const event = new Event('keyup');
event.which = 27;
document.dispatchEvent(event);
sinon.assert.calledOnce(props.destroy);
sinon.assert.calledWithExactly(props.destroy, props.popups[1]);
});
it('should NOT hide popup on esc pressed if disableOverlayClose', () => {
const props = {
destroy: sinon.stub(),
popups: [
{
Popup: DummyPopup,
disableOverlayClose: true
}
]
};
mount(<PopupStack {...props} />);
const event = new Event('keyup');
event.which = 27;
document.dispatchEvent(event);
sinon.assert.notCalled(props.destroy);
});
});