Initial commit.

tests/Popup.spec.js

@@ -0,0 +1,191 @@
+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);
+  });
+
+  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 layout 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 not call onLayout when invisible', () => {
+    const component = shallow(
+      <Popup visible={false} onLayout={onLayout}>
+        <span>HERE POPUP CONTENT BE</span>
+      </Popup>
+    );
+
+    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(
+      <Popup visible={true}>
+        <span>HERE POPUP CONTENT BE</span>
+      </Popup>
+    );
+
+    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(<Wrapper />, {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(
+      <Popup visible={true} onLayout={onLayout}>
+        <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'});
+  });
+
+  it('should set the inner layour height and width if onLayout specified them', () => {
+    onLayout = onLayout.and.returnValue([20, 20, 100, 100]);
+
+    const component = shallow(
+      <Popup visible={true} onLayout={onLayout}>
+        <span>HERE POPUP CONTENT BE</span>
+      </Popup>
+    );
+
+    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(
+      <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);
+  });
+});

tests/__entry__.js

@@ -0,0 +1,4 @@
+require('tests/__setup__/enzyme.setup.js');
+
+const testsContext = require.context('.', true, /\.spec\.js$/);
+testsContext.keys().forEach(testsContext);

tests/__setup__/enzyme.setup.js

@@ -0,0 +1,7 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({
+  adapter: new Adapter(),
+  disableLifecycleMethods: true,
+});