react-custom-popup/tests/Popup.spec.js

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 (
      <div>
        <button ref={this.anchorRef} style={buttonStyle}>Anchor</button>
        <Popup anchor={this.anchorRef} visible={this.state.popupVisible}>
          <span>HERE POPUP CONTENT BE</span>
        </Popup>
      </div>
    );
  }
}

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);
  });

  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');

      component.instance().componentDidUpdate({visible: false});
      expect(component.instance().layout).not.toHaveBeenCalled();
    });

    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');

      component.instance().componentDidUpdate({visible: true});
      expect(component.instance().layout).not.toHaveBeenCalled();
    });

    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');

      component.instance().componentDidUpdate({visible: false});
      expect(component.instance().layout).toHaveBeenCalled();
    });
  });

  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();

      expect(component.state('layout')).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.instance().layout();

      expect(onLayout).not.toHaveBeenCalled();
    });

    it('should layout according to the anchor', () => {
      const component = mount(<Wrapper />, {attachTo: mountNode});
      component.setState({popupVisible: true});

      const popup = component.find(Popup);
      expect(popup.instance().state.layout).not.toEqual([0, 0]);

      component.unmount();
    });

    it('should call onLayout to allow for customization of the inner layer layout', () => {
      onLayout = onLayout.and.returnValue([20, 20]);

      const component = shallow(
        <Popup visible={true} onLayout={onLayout}>
          <span>HERE POPUP CONTENT BE</span>
        </Popup>
      );
      component.instance().layout();

      expect(onLayout).toHaveBeenCalledWith([0, 0]);
      expect(component.state('layout')).toEqual([20, 20]);
    });

    it('should allow the onLayout callback to specify height and width', () => {
      onLayout = onLayout.and.returnValue([20, 20, 100, 100]);

      const component = shallow(
        <Popup visible={true} onLayout={onLayout}>
          <span>HERE POPUP CONTENT BE</span>
        </Popup>
      );
      component.instance().layout();

      expect(component.state('layout')).toEqual([20, 20, 100, 100]);
    });
  });

  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);
    });

    it('should render as invisible', () => {
      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('bthlabs-rcp-visible')).toBe(false);
    });

    it('should render as visible', () => {
      const component = shallow(
        <Popup className='spam' visible={true}>
          <span>HERE POPUP CONTENT BE</span>
        </Popup>
      );

      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(
        <Popup hideOverlay={true} 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);
    });
  });
});