import {mount, shallow} from 'enzyme';
import React from 'react';
import {Popup} from 'src/Popup';
class Wrapper extends React.Component {
constructor (props) {
super(props);
this.anchorRef = React.createRef();
this.state = {
popupVisible: false
};
}
render () {
const buttonStyle = {
left: '10px',
position: 'relative',
top: '10px'
};
return (
HERE POPUP CONTENT BE
);
}
}
describe('Popup', () => {
let mountNode = null;
let onLayout = null;
let onOverlayClick = null;
beforeEach(() => {
onLayout = jasmine.createSpy('fakeOnLayout');
onOverlayClick = jasmine.createSpy('fakeOnOverlayClick');
mountNode = document.createElement('div');
document.body.appendChild(mountNode);
});
afterEach(() => {
document.body.removeChild(mountNode);
});
it('should render with a custom class', () => {
const component = shallow(
HERE POPUP CONTENT BE
);
const popup = component.find('.bthlabs-react-custom-popup');
expect(popup.hasClass('spam')).toBe(true);
});
it('should render as invisible', () => {
const component = shallow(
HERE POPUP CONTENT BE
);
const popup = component.find('.bthlabs-react-custom-popup');
expect(popup.hasClass('bthlabs-rcp-visible')).toBe(false);
});
it('should render as visible', () => {
const component = shallow(
HERE POPUP CONTENT BE
);
const popup = component.find('.bthlabs-react-custom-popup');
expect(popup.hasClass('bthlabs-rcp-visible')).toBe(true);
});
it('should allow hiding the overlay', () => {
const component = shallow(
HERE POPUP CONTENT BE
);
const overlay = component.find('.bthlabs-rcp-overlay');
expect(overlay.exists()).toBe(false);
});
it('should configure and render the overlay', () => {
const component = shallow(
HERE POPUP CONTENT BE
);
const overlay = component.find('.bthlabs-rcp-overlay');
expect(overlay.exists()).toBe(true);
expect(overlay.prop('onClick')).toBe(onOverlayClick);
});
it('should not layout the inner layer when invisible', () => {
const component = shallow(
HERE POPUP CONTENT BE
);
const inner = component.find('.bthlabs-rcp-inner');
expect(inner.prop('style')).toEqual({});
});
it('should not call onLayout when invisible', () => {
const component = shallow(
HERE POPUP CONTENT BE
);
const inner = component.find('.bthlabs-rcp-inner');
expect(onLayout).not.toHaveBeenCalled();
});
it('should apply default layout to the inner layer if rendering without anchor', () => {
const component = shallow(
HERE POPUP CONTENT BE
);
const inner = component.find('.bthlabs-rcp-inner');
expect(inner.prop('style')).toEqual({left: '0px', top: '0px'});
});
it('should layout the inner layer according to the anchor', () => {
const component = mount(, {attachTo: mountNode});
component.setState({popupVisible: true});
const popup = component.find(Popup);
const inner = popup.find('.bthlabs-rcp-inner');
expect(inner.prop('style').left).not.toEqual('0px');
expect(inner.prop('style').top).not.toEqual('0px');
component.unmount();
});
it('should call onLayout to allow for customization of the inner layer layout', () => {
onLayout = onLayout.and.returnValue([20, 20]);
const component = shallow(
HERE POPUP CONTENT BE
);
const inner = component.find('.bthlabs-rcp-inner');
expect(onLayout).toHaveBeenCalledWith([0, 0]);
expect(inner.prop('style')).toEqual({left: '20px', top: '20px'});
});
it('should set the inner layour height and width if onLayout specified them', () => {
onLayout = onLayout.and.returnValue([20, 20, 100, 100]);
const component = shallow(
HERE POPUP CONTENT BE
);
const inner = component.find('.bthlabs-rcp-inner');
expect(onLayout).toHaveBeenCalledWith([0, 0]);
expect(inner.prop('style').height).toEqual('100px');
expect(inner.prop('style').width).toEqual('100px');
});
it('should render the children in the inner layer', () => {
const component = shallow(
HERE POPUP CONTENT BE
);
const inner = component.find('.bthlabs-rcp-inner');
expect(inner.contains(HERE POPUP CONTENT BE)).toBe(true);
});
});