|
@@ -48,144 +48,208 @@ describe('Popup', () => {
|
|
|
document.body.removeChild(mountNode);
|
|
|
});
|
|
|
|
|
|
- it('should render with a custom class', () => {
|
|
|
- const component = shallow(
|
|
|
- <Popup className='spam' visible={false}>
|
|
|
- <span>HERE POPUP CONTENT BE</span>
|
|
|
- </Popup>
|
|
|
- );
|
|
|
+ describe('componentDidUpdate', () => {
|
|
|
+ it('should not layout if visibility did not change', () => {
|
|
|
+ const component = shallow(
|
|
|
+ <Popup className='spam' visible={false}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
+ spyOn(component.instance(), 'layout');
|
|
|
|
|
|
- const popup = component.find('.bthlabs-react-custom-popup');
|
|
|
- expect(popup.hasClass('spam')).toBe(true);
|
|
|
- });
|
|
|
+ component.instance().componentDidUpdate({visible: false});
|
|
|
+ expect(component.instance().layout).not.toHaveBeenCalled();
|
|
|
+ });
|
|
|
|
|
|
- it('should render as invisible', () => {
|
|
|
- const component = shallow(
|
|
|
- <Popup className='spam' visible={false}>
|
|
|
- <span>HERE POPUP CONTENT BE</span>
|
|
|
- </Popup>
|
|
|
- );
|
|
|
+ it('should not layout if it became hidden', () => {
|
|
|
+ const component = shallow(
|
|
|
+ <Popup className='spam' visible={false}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
+ spyOn(component.instance(), 'layout');
|
|
|
|
|
|
- const popup = component.find('.bthlabs-react-custom-popup');
|
|
|
- expect(popup.hasClass('bthlabs-rcp-visible')).toBe(false);
|
|
|
- });
|
|
|
+ component.instance().componentDidUpdate({visible: true});
|
|
|
+ expect(component.instance().layout).not.toHaveBeenCalled();
|
|
|
+ });
|
|
|
|
|
|
- it('should render as visible', () => {
|
|
|
- const component = shallow(
|
|
|
- <Popup className='spam' visible={true}>
|
|
|
- <span>HERE POPUP CONTENT BE</span>
|
|
|
- </Popup>
|
|
|
- );
|
|
|
+ it('should not layout if it became visible', () => {
|
|
|
+ const component = shallow(
|
|
|
+ <Popup className='spam' visible={true}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
+ spyOn(component.instance(), 'layout');
|
|
|
|
|
|
- const popup = component.find('.bthlabs-react-custom-popup');
|
|
|
- expect(popup.hasClass('bthlabs-rcp-visible')).toBe(true);
|
|
|
+ component.instance().componentDidUpdate({visible: false});
|
|
|
+ expect(component.instance().layout).toHaveBeenCalled();
|
|
|
+ });
|
|
|
});
|
|
|
|
|
|
- it('should allow hiding the overlay', () => {
|
|
|
- const component = shallow(
|
|
|
- <Popup hideOverlay={true} visible={false}>
|
|
|
- <span>HERE POPUP CONTENT BE</span>
|
|
|
- </Popup>
|
|
|
- );
|
|
|
+ describe('layout', () => {
|
|
|
+ it('should apply default layout if rendering without anchor', () => {
|
|
|
+ const component = shallow(
|
|
|
+ <Popup visible={true}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
+ component.instance().layout();
|
|
|
|
|
|
- const overlay = component.find('.bthlabs-rcp-overlay');
|
|
|
- expect(overlay.exists()).toBe(false);
|
|
|
- });
|
|
|
+ expect(component.state('layout')).toEqual([0, 0]);
|
|
|
+ });
|
|
|
|
|
|
- it('should configure and render the overlay', () => {
|
|
|
- const component = shallow(
|
|
|
- <Popup visible={false} onOverlayClick={onOverlayClick}>
|
|
|
- <span>HERE POPUP CONTENT BE</span>
|
|
|
- </Popup>
|
|
|
- );
|
|
|
+ it('should not call onLayout when invisible', () => {
|
|
|
+ const component = shallow(
|
|
|
+ <Popup visible={false} onLayout={onLayout}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
+ component.instance().layout();
|
|
|
|
|
|
- const overlay = component.find('.bthlabs-rcp-overlay');
|
|
|
- expect(overlay.exists()).toBe(true);
|
|
|
- expect(overlay.prop('onClick')).toBe(onOverlayClick);
|
|
|
- });
|
|
|
+ expect(onLayout).not.toHaveBeenCalled();
|
|
|
+ });
|
|
|
|
|
|
- it('should not layout the inner layer when invisible', () => {
|
|
|
- const component = shallow(
|
|
|
- <Popup visible={false}>
|
|
|
- <span>HERE POPUP CONTENT BE</span>
|
|
|
- </Popup>
|
|
|
- );
|
|
|
+ it('should layout according to the anchor', () => {
|
|
|
+ const component = mount(<Wrapper />, {attachTo: mountNode});
|
|
|
+ component.setState({popupVisible: true});
|
|
|
|
|
|
- const inner = component.find('.bthlabs-rcp-inner');
|
|
|
- expect(inner.prop('style')).toEqual({});
|
|
|
- });
|
|
|
+ const popup = component.find(Popup);
|
|
|
+ expect(popup.instance().state.layout).not.toEqual([0, 0]);
|
|
|
|
|
|
- it('should not call onLayout when invisible', () => {
|
|
|
- const component = shallow(
|
|
|
- <Popup visible={false} onLayout={onLayout}>
|
|
|
- <span>HERE POPUP CONTENT BE</span>
|
|
|
- </Popup>
|
|
|
- );
|
|
|
+ component.unmount();
|
|
|
+ });
|
|
|
|
|
|
- const inner = component.find('.bthlabs-rcp-inner');
|
|
|
- expect(onLayout).not.toHaveBeenCalled();
|
|
|
- });
|
|
|
+ it('should call onLayout to allow for customization of the inner layer layout', () => {
|
|
|
+ onLayout = onLayout.and.returnValue([20, 20]);
|
|
|
|
|
|
- it('should apply default layout to the inner layer if rendering without anchor', () => {
|
|
|
- const component = shallow(
|
|
|
- <Popup visible={true}>
|
|
|
- <span>HERE POPUP CONTENT BE</span>
|
|
|
- </Popup>
|
|
|
- );
|
|
|
+ const component = shallow(
|
|
|
+ <Popup visible={true} onLayout={onLayout}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
+ component.instance().layout();
|
|
|
|
|
|
- const inner = component.find('.bthlabs-rcp-inner');
|
|
|
- expect(inner.prop('style')).toEqual({left: '0px', top: '0px'});
|
|
|
- });
|
|
|
+ expect(onLayout).toHaveBeenCalledWith([0, 0]);
|
|
|
+ expect(component.state('layout')).toEqual([20, 20]);
|
|
|
+ });
|
|
|
|
|
|
- it('should layout the inner layer according to the anchor', () => {
|
|
|
- const component = mount(<Wrapper />, {attachTo: mountNode});
|
|
|
- component.setState({popupVisible: true});
|
|
|
+ it('should allow the onLayout callback to specify height and width', () => {
|
|
|
+ onLayout = onLayout.and.returnValue([20, 20, 100, 100]);
|
|
|
|
|
|
- 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');
|
|
|
+ const component = shallow(
|
|
|
+ <Popup visible={true} onLayout={onLayout}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
+ component.instance().layout();
|
|
|
|
|
|
- component.unmount();
|
|
|
+ expect(component.state('layout')).toEqual([20, 20, 100, 100]);
|
|
|
+ });
|
|
|
});
|
|
|
|
|
|
- it('should call onLayout to allow for customization of the inner layer layout', () => {
|
|
|
- onLayout = onLayout.and.returnValue([20, 20]);
|
|
|
+ describe('render', () => {
|
|
|
+ it('should render with a custom class', () => {
|
|
|
+ const component = shallow(
|
|
|
+ <Popup className='spam' visible={false}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
+
|
|
|
+ const popup = component.find('.bthlabs-react-custom-popup');
|
|
|
+ expect(popup.hasClass('spam')).toBe(true);
|
|
|
+ });
|
|
|
|
|
|
- const component = shallow(
|
|
|
- <Popup visible={true} onLayout={onLayout}>
|
|
|
- <span>HERE POPUP CONTENT BE</span>
|
|
|
- </Popup>
|
|
|
- );
|
|
|
+ it('should render as invisible', () => {
|
|
|
+ const component = shallow(
|
|
|
+ <Popup className='spam' visible={false}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
|
|
|
- const inner = component.find('.bthlabs-rcp-inner');
|
|
|
- expect(onLayout).toHaveBeenCalledWith([0, 0]);
|
|
|
- expect(inner.prop('style')).toEqual({left: '20px', top: '20px'});
|
|
|
- });
|
|
|
+ const popup = component.find('.bthlabs-react-custom-popup');
|
|
|
+ expect(popup.hasClass('bthlabs-rcp-visible')).toBe(false);
|
|
|
+ });
|
|
|
|
|
|
- it('should set the inner layour height and width if onLayout specified them', () => {
|
|
|
- onLayout = onLayout.and.returnValue([20, 20, 100, 100]);
|
|
|
+ it('should render as visible', () => {
|
|
|
+ const component = shallow(
|
|
|
+ <Popup className='spam' visible={true}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
|
|
|
- const component = shallow(
|
|
|
- <Popup visible={true} onLayout={onLayout}>
|
|
|
- <span>HERE POPUP CONTENT BE</span>
|
|
|
- </Popup>
|
|
|
- );
|
|
|
+ const popup = component.find('.bthlabs-react-custom-popup');
|
|
|
+ expect(popup.hasClass('bthlabs-rcp-visible')).toBe(true);
|
|
|
+ });
|
|
|
|
|
|
- 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 allow hiding the overlay', () => {
|
|
|
+ const component = shallow(
|
|
|
+ <Popup hideOverlay={true} visible={false}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
|
|
|
- it('should render the children in the inner layer', () => {
|
|
|
- const component = shallow(
|
|
|
- <Popup visible={false}>
|
|
|
- <span>HERE POPUP CONTENT BE</span>
|
|
|
- </Popup>
|
|
|
- );
|
|
|
+ const overlay = component.find('.bthlabs-rcp-overlay');
|
|
|
+ expect(overlay.exists()).toBe(false);
|
|
|
+ });
|
|
|
+
|
|
|
+ it('should configure and render the overlay', () => {
|
|
|
+ const component = shallow(
|
|
|
+ <Popup visible={false} onOverlayClick={onOverlayClick}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
+
|
|
|
+ const overlay = component.find('.bthlabs-rcp-overlay');
|
|
|
+ expect(overlay.exists()).toBe(true);
|
|
|
+ expect(overlay.prop('onClick')).toBe(onOverlayClick);
|
|
|
+ });
|
|
|
+
|
|
|
+ it('should not apply layout style on the inner layer when invisible', () => {
|
|
|
+ const component = shallow(
|
|
|
+ <Popup visible={false}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
+
|
|
|
+ const inner = component.find('.bthlabs-rcp-inner');
|
|
|
+ expect(inner.prop('style')).toEqual({});
|
|
|
+ });
|
|
|
+
|
|
|
+ it('should apply layout style on the inner layer when visible', () => {
|
|
|
+ const component = shallow(
|
|
|
+ <Popup visible={true}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
+ component.setState({layout: [20, 20]});
|
|
|
+
|
|
|
+ const inner = component.find('.bthlabs-rcp-inner');
|
|
|
+ expect(inner.prop('style').left).toEqual('20px');
|
|
|
+ expect(inner.prop('style').top).toEqual('20px');
|
|
|
+ });
|
|
|
+
|
|
|
+ it('should set the inner layer height and width if onLayout specified them', () => {
|
|
|
+ const component = shallow(
|
|
|
+ <Popup visible={true} onLayout={onLayout}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
+ component.setState({layout: [20, 20, 100, 100]});
|
|
|
+
|
|
|
+ const inner = component.find('.bthlabs-rcp-inner');
|
|
|
+ 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(
|
|
|
+ <Popup visible={false}>
|
|
|
+ <span>HERE POPUP CONTENT BE</span>
|
|
|
+ </Popup>
|
|
|
+ );
|
|
|
|
|
|
- const inner = component.find('.bthlabs-rcp-inner');
|
|
|
- expect(inner.contains(<span>HERE POPUP CONTENT BE</span>)).toBe(true);
|
|
|
+ const inner = component.find('.bthlabs-rcp-inner');
|
|
|
+ expect(inner.contains(<span>HERE POPUP CONTENT BE</span>)).toBe(true);
|
|
|
+ });
|
|
|
});
|
|
|
});
|