react-resizable 1.10.1 → 1.11.0

package/.eslintrc

@@ -4,7 +4,9 @@
   "plugins": [
     "react"
   ],
-  "extends": "eslint:recommended",
+  "extends": [
+    "eslint:recommended"
+  ],
   "rules": {
     "strict": 0,
     "quotes": [0, "single"],
@@ -20,14 +22,16 @@
     "react/jsx-uses-vars": 1,
     "semi": [1, "always"]
   },
-  env: {
+  "env": {
     "browser": true,
-    "node": true
+    "node": true,
+    "jest": true
   },
   "globals": {
     // For Flow
-    "ReactElement",
-    "ReactClass",
-    "SyntheticEvent"
+    "ReactElement": false,
+    "ReactClass": false,
+    "SyntheticEvent": false,
+    "ClientRect": false
   }
 }

package/.flowconfig

@@ -1,5 +1,5 @@
 [version]
-^0.110.0
+^0.133.0
 
 [ignore]
 .*/node_modules/@babel.*
@@ -10,20 +10,20 @@
 [include]
 
 [libs]
+flow-typed
+
+[lints]
+all=warn
+implicit-inexact-object=error
 
 [options]
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowFixMe.*
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowBug.*
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowIgnore.*
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowNewLine.*
-suppress_comment=\\(.\\|\n\\)*\\s*\\$FlowIssue
 suppress_type=$FlowFixMe
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
 esproposal.decorators=ignore
 esproposal.export_star_as=enable
 experimental.strict_call_arity=true
-module.system.node.resolve_dirname=node_modules
-module.system.node.resolve_dirname=.
+module.system.node.allow_root_relative=true
 module.use_strict=true
 server.max_workers=6
+exact_by_default=true

package/CHANGELOG.md

@@ -1,113 +1,124 @@
 # Changelog
 
+### 1.11.0 (Sep 3, 2020)
+
+- ⚠ Important Notice!
+  - React-Resizable 2.0.0 was published due to a breaking change in `props` handling. This change ended up actually completely breaking certain workflows, for the dubious benefit of making the code slightly simpler to add to. The breaking change has been reverted, 2.0.0 is now deprecated, and we will continue on the 1.x branch. Future breaking changes to `react-resizable` will upgrade the major version to `3`.
+- ➕ Feature: `<ResizableBox>` now takes a `style` prop which will be applied on the wrapping `<div>`. `width` and `height` in this prop are ignored.
+- 🐛 Bugfix: remove unknown Prop `handle` from div children in Resizable `React.cloneElement`. [#124](https://github.com/STRML/react-resizable/issues/124)
+- 🐛 Bugfix: Fix top and left resizing jerkiness. Thanks @conor-kelleher. [#136](https://github.com/STRML/react-resizable/pull/136)
+- ✏ Chore: Improved test suite. Please contribute tests for your use cases if you have the time, I would really appreciate it! Thanks very much, @Danielecina
+- ✏ Chore: Minor internal refactors and additional tests.
+- ✏ Chore: Additional examples.
+
 ### 1.10.1 (Nov 25, 2019)
 
 > Note: 1.10.0 was a mis-publish.
 
-- Feat: Add `transformScale` prop [#115](https://github.com/STRML/react-resizable/pull/115)
-- Bugfix: Resolve `getDerivedStateFromProps` dev warning [#117](https://github.com/STRML/react-resizable/pull/117)
+- ➕ Feature: Add `transformScale` prop [#115](https://github.com/STRML/react-resizable/pull/115)
+- 🐛 Bugfix: Resolve `getDerivedStateFromProps` dev warning [#117](https://github.com/STRML/react-resizable/pull/117)
 
 ### 1.9.0 (Oct 24, 2019)
 
-- Fix resize with north/south handles when `lockAspectRatio=true` [#106](https://github.com/STRML/react-resizable/pull/106)
-- Remove deprecated React 16.9 lifecycle methods (`componentWillReceiveProps`) (https://github.com/STRML/react-resizable/pull/112/commits/541dee69b8e45d91a533855609472b481634edee)
-- Upgrade to babel 7
-- [Remove unused state inside `<Draggable>`](https://github.com/STRML/react-resizable/pull/112/commits/05693f63d6d221ad652f0f28af024cfb46a5f2df). This has not been needed for quite some time, fixes [some bugs](https://github.com/STRML/react-resizable/issues/99) and improves performance.
+- 🐛 Bugfix: Fix resize with north/south handles when `lockAspectRatio=true` [#106](https://github.com/STRML/react-resizable/pull/106)
+- ✏ Chore: Remove deprecated React 16.9 lifecycle methods (`componentWillReceiveProps`) (https://github.com/STRML/react-resizable/pull/112/commits/541dee69b8e45d91a533855609472b481634edee)
+- ✏ Chore: Upgrade to babel 7
+- ✏ Chore: [Remove unused state inside `<Draggable>`](https://github.com/STRML/react-resizable/pull/112/commits/05693f63d6d221ad652f0f28af024cfb46a5f2df). This has not been needed for quite some time, fixes [some bugs](https://github.com/STRML/react-resizable/issues/99) and improves performance.
 
 ### 1.8.0 (May 15, 2019)
 
-- Added support for custom resize handles [#79](https://github.com/STRML/react-resizable/pull/79)
-- Added support for resize handles on all corners [#191](https://github.com/STRML/react-resizable/pull/191)
+- ➕ Feature: Added support for custom resize handles [#79](https://github.com/STRML/react-resizable/pull/79)
+- ➕ Feature: Added support for resize handles on all corners [#191](https://github.com/STRML/react-resizable/pull/191)
 
 ### 1.7.5 (Sep 26, 2017)
 
-- Support for React 16 (no changes required, updated `peerDependencies`)
-- Minor dep updates.
+- ✏ Chore: Support for React 16 (no changes required, updated `peerDependencies`)
+- ✏ Chore: Minor dep updates.
 
 ### 1.7.4 (Sep 5, 2017)
 
-- Minor Flow & dependency updates.
+- ✏ Chore: Minor Flow & dependency updates.
 
 ### 1.7.3 (Aug 31, 2017)
 
-- Fix React deprecation warnings from `import *`
+- 🐛 Bugfix: React deprecation warnings from `import *`
   - https://github.com/facebook/react/issues/10583
 
 ### 1.7.2 (Aug 21, 2017)
 
-- Pkg: Add `react-draggable@3.0.0` to version range.
+- ✏ Chore: Pkg: Add `react-draggable@3.0.0` to version range.
   - This package is compatible with both `@2` and `@3` versions.
 
 ### 1.7.1 (May 23, 2017)
 
-- Bugfix: Some flow types were improperly specified.
+- 🐛 Bugfix: Some flow types were improperly specified.
 
 ### 1.7.0 (May 1, 2017)
 
-- Deprecation: `React.PropTypes` now deprecated in React 15.5, moved to `prop-types` package
-- Internal: Update devDeps, upgrade to webpack 2
-- Internal: Remove babel `stage-1` and `transform-flow-comments`, bring in only selected plugins, makes for leaner dev/build.
+- ⚠ Deprecation: `React.PropTypes` now deprecated in React 15.5, moved to `prop-types` package
+- ✏ Chore: Update devDeps, upgrade to webpack 2
+- ✏ Chore: Remove babel `stage-1` and `transform-flow-comments`, bring in only selected plugins, makes for leaner dev/build.
 
 ### 1.6.0 (Jan 23, 2017)
 
-- Feature: Allow restricting by axis. (#40, thanks @dnissley-al)
+- ➕ Feature: Allow restricting by axis. (#40, thanks @dnissley-al)
 
 ### 1.5.0 (Jan 23, 2017)
 
-- Bugfix: Persist SyntheticEvents when needed (#45, #46)
-- Feature: Add componentWillReceiveProps to `<ResizableBox>` (#44, thanks @JoaoMosmann)
+- 🐛 Bugfix: Persist SyntheticEvents when needed (#45, #46)
+- ➕ Feature: Add componentWillReceiveProps to `<ResizableBox>` (#44, thanks @JoaoMosmann)
 
 ### 1.4.6 (Dec 30, 2016)
 
-- Removed unused ref from `<Resizable>`.
-- Added development lockfile.
+- ✏ Chore: Removed unused ref from `<Resizable>`.
+- ✏ Chore: Added development lockfile.
 
 ### 1.4.5 (Sep 30, 2016)
 
-- Fix bad publish
+- 🐛 Bugfix: Fix bad publish
 
 ### 1.4.4 (Sep 30, 2016)
 
-- Bugfix: Minor flow errors
+- 🐛 Bugfix: Minor flow errors
 
 ### 1.4.3 (Sep 27, 2016)
 
-- Bugfix: Don't pass `onResize` in `<ResizableBox>`.
-- Bugfix: Fix new Flow errors (type parameters no longer optional).
+- 🐛 Bugfix: Don't pass `onResize` in `<ResizableBox>`.
+- 🐛 Bugfix: Fix new Flow errors (type parameters no longer optional).
 
 ### 1.4.2 (July 1, 2016)
 
-- Bugfix: Don't pass unknown props to underlying DOM element. Fixes React 15.2.0 warnings.
+- 🐛 Bugfix: Don't pass unknown props to underlying DOM element. Fixes React 15.2.0 warnings.
 
 ### 1.4.1 (May 23, 2016)
 
-- Bugfix: Resizable handle should have a `key` when injected. Fixes React warnings on custom components.
+- 🐛 Bugfix: Resizable handle should have a `key` when injected. Fixes React warnings on custom components.
 
 ### 1.4.0 (May 20, 2016)
 
-- Update to React-Draggable v2, which changed callback data structure.
+- ✏ Chore: Update to React-Draggable v2, which changed callback data structure.
 
 ### 1.3.4 (May 17, 2016)
 
-- Bugfix: Slack was not being reset on resizeStop. Fixes #34, #36.
-- Added `flow-bin` to devDeps.
+- 🐛 Bugfix: Slack was not being reset on resizeStop. Fixes #34, #36.
+- ✏ Chore: Added `flow-bin` to devDeps.
 
 ### 1.3.3 (Apr 19, 2016)
 
-- Enhancement: Add Flow comments.
+- ➕ Feature: Add Flow comments.
 
 ### 1.3.2 (Apr 8, 2016)
 
-- Bugfix: Prevent `width` and `height` from leaking to the underlying DOM element and being written.
+- 🐛 Bugfix: Prevent `width` and `height` from leaking to the underlying DOM element and being written.
 
 ### 1.3.1 (Apr 8, 2016)
 
-- Allow React v15 in peerdeps.
+- ✏ Chore: Allow React v15 in peerdeps.
 
 ### 1.3.0 (Mar 11, 2016)
 
-- Switch to ES2015 Loose Mode to fix IE9/10 issues.
-- Flow typing fixes.
-- Styling fixes to the demo page.
+- 🐛 Bugfix: Switch to ES2015 Loose Mode to fix IE9/10 issues.
+- 🐛 Bugfix: Flow typing fixes.
+- 🐛 Bugfix: Styling fixes to the demo page.
 
 > Changes before 1.3.0 were not logged. Please see the git commit history.

package/README.md

@@ -6,14 +6,14 @@ A simple widget that can be resized via one or more handles.
 
 You can either use the `<Resizable>` element directly, or use the much simpler `<ResizableBox>` element.
 
-See the example and associated code in [TestLayout](/test/TestLayout.js) and
+See the example and associated code in [TestLayout](/examples/TestLayout.js) and
 [ResizableBox](/lib/ResizableBox.js) for more details.
 
 Make sure you use the associated styles in [/css/styles.css](/css/styles.css), as without them, you will have
 problems with handle placement and visibility.
 
 You can pass options directly to the underlying `DraggableCore` instance by using the prop `draggableOpts`.
-See the [demo](/test/TestLayout.js) for more on this.
+See the [demo](/examples/TestLayout.js) for more on this.
 
 ### Installation
 
@@ -43,7 +43,7 @@ render() {
 
 ### Props
 
-These props apply to both `<Resizable>` and `<ResizableBox>`.
+These props apply to both `<Resizable>` and `<ResizableBox>`. Unknown props that are not in the list below will be passed to the child component.
 
 ```js
 {
@@ -65,3 +65,13 @@ These props apply to both `<Resizable>` and `<ResizableBox>`.
   resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
 };
 ```
+
+The following props can also be used on `<ResizableBox>`:
+
+```js
+{
+  style?: Object
+}
+```
+
+If a `width` or `height` is passed to `<ResizableBox>`'s `style` prop, it will be ignored as it is required for internal function.

package/__tests__/Resizable.test.js

@@ -0,0 +1,245 @@
+// @flow
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {shallow} from 'enzyme';
+import {DraggableCore} from "react-draggable";
+
+import Resizable from '../lib/Resizable';
+
+describe('render Resizable', () => {
+  const props = {
+    axis: 'both',
+    className: 'test-classname',
+    draggableOpts: {},
+    handleSize: [20, 20],
+    height: 50,
+    lockAspectRatio: false,
+    maxConstraints: [Infinity, Infinity],
+    minConstraints: [20, 20],
+    onResize: jest.fn(),
+    onResizeStart: jest.fn(),
+    onResizeStop: jest.fn(),
+    resizeHandles: ['se', 'e'],
+    transformScale: 1,
+    width: 50,
+  };
+  const userChildren = <span className={'children'} />;
+  const resizableBoxChildren =  <div style={{width: '50px', height: '50px'}}>{userChildren}</div>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('snapshot default props', () => {
+    const tree = renderer.create(<Resizable {...props}>{resizableBoxChildren}</Resizable>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('with correct props', () => {
+    const element = shallow(<Resizable {...props}>{resizableBoxChildren}</Resizable>);
+    expect(element.find('.test-classname').find('.children'));
+    expect(element.find(DraggableCore)).toHaveLength(2);
+    const cursorSe = element.find('.react-resizable-handle-se');
+    const cursorE = element.find('.react-resizable-handle-e');
+    expect(cursorSe).toHaveLength(1);
+    expect(cursorE).toHaveLength(1);
+  });
+
+  describe('and pass handle props', () => {
+    test('as component', () => {
+      const customProps = {
+        ...props,
+        resizeHandles: ['se'],
+        handle: <span className={'custom-component'} />
+      };
+      const element = shallow(<Resizable {...customProps}>{resizableBoxChildren}</Resizable>);
+      expect(element.find('.react-resizable-handle-se')).toHaveLength(0);
+      expect(element.find('.custom-component')).toHaveLength(1);
+    });
+    test('as function', () => {
+      const customProps = {
+        ...props,
+        resizeHandles: ['se'],
+        handle: (h) => <span className={`custom-component-${h}`} />
+      };
+      const element = shallow(<Resizable {...customProps}>{resizableBoxChildren}</Resizable>);
+      expect(element.find('.custom-component-se')).toHaveLength(1);
+    });
+  });
+
+  describe('<Resizable> props filtering', () => {
+    const allProps = {
+      ...props,
+      draggableOpts: {},
+      handle: <div />,
+    };
+
+    // Ensure everything in propTypes is represented here. Otherwise the next two tests are not valid
+    test('all intended props are in our allProps object', () => {
+      expect(['children', ...Object.keys(allProps)].sort()).toEqual(Object.keys(Resizable.propTypes).sort());
+    });
+
+    test('none of these props leak down to the child', () => {
+      const element = shallow(<Resizable {...allProps}><div className="foo" /></Resizable>);
+      expect(Object.keys(element.find('.foo').props())).toEqual(['className', 'children']);
+    });
+
+    test('className is constructed properly', () => {
+      const element = shallow(<Resizable {...allProps}><div className="foo" /></Resizable>);
+      expect(element.find('.foo').props().className).toEqual(`foo ${allProps.className} react-resizable`);
+    });
+  });
+
+  describe('onResize callback with modified position', () => {
+    const customProps = {
+      ...props,
+      resizeHandles: ['nw', 'sw' ,'ne', 'se', 'n', 's', 'w', 'e'],
+    };
+    const mockClientRect = {
+      left: 0,
+      top: 0,
+    };
+    const node = document.createElement('div');
+    // $FlowIgnore need to override to have control over dummy dom element
+    node.getBoundingClientRect = () => ({ ...mockClientRect });
+    const mockEvent = { };
+    const element = shallow(<Resizable {...customProps}>{resizableBoxChildren}</Resizable>);
+    const nwHandle = element.find('DraggableCore').first();
+
+    test('Gradual resizing without movement between does not modify callback', () => {
+      expect(props.onResize).not.toHaveBeenCalled();
+      nwHandle.prop('onDrag')(mockEvent, { node, deltaX: 5, deltaY: 10 });
+      expect(props.onResize).lastCalledWith(
+        mockEvent,
+        expect.objectContaining({
+          size: {
+            height: 40,
+            width: 45,
+          },
+        })
+      );
+    });
+
+    test('Movement between callbacks modifies response values', () => {
+      expect(props.onResize).not.toHaveBeenCalled();
+
+      mockClientRect.top = -10; // Object moves between callbacks
+      nwHandle.prop('onDrag')(mockEvent, { node, deltaX: 5, deltaY: 10 });
+      expect(props.onResize).lastCalledWith(
+        mockEvent,
+        expect.objectContaining({
+          size: {
+            height: 50, // No height change since deltaY is caused by clientRect moving vertically
+            width: 45,
+          },
+        })
+      );
+
+      mockClientRect.left = 20; // Object moves between callbacks
+      nwHandle.prop('onDrag')(mockEvent, { node, deltaX: 5, deltaY: 10 });
+      expect(props.onResize).lastCalledWith(
+        mockEvent,
+        expect.objectContaining({
+          size: {
+            height: 40, // Height decreased as deltaY increases - no further top position change since last
+            width: 25, // Width decreased 25 - 5 from deltaX and 20 from changing position
+          },
+        })
+      );
+
+      props.onResize.mockClear();
+      mockClientRect.left -= 10; // Object moves between callbacks
+      mockClientRect.top -= 10; // Object moves between callbacks
+      nwHandle.prop('onDrag')(mockEvent, { node, deltaX: 10, deltaY: 10 });
+      expect(props.onResize).not.toHaveBeenCalled();
+
+      mockClientRect.left -= 10; // Object moves between callbacks
+      mockClientRect.top -= 10; // Object moves between callbacks
+      const swHandle = element.find('DraggableCore').at(1);
+      swHandle.prop('onDrag')(mockEvent, { node, deltaX: 10, deltaY: 10 });
+      expect(props.onResize).lastCalledWith(
+        mockEvent,
+        expect.objectContaining({
+          size: {
+            height: 60, // Changed since resizing from bottom doesn't cause position change
+            width: 50, // No change - movement has caused entire delta
+          },
+        })
+      );
+
+      mockClientRect.left -= 10; // Object moves between callbacks
+      mockClientRect.top -= 10; // Object moves between callbacks
+      const neHandle = element.find('DraggableCore').at(2);
+      neHandle.prop('onDrag')(mockEvent, { node, deltaX: 10, deltaY: 10 });
+      expect(props.onResize).lastCalledWith(
+        mockEvent,
+        expect.objectContaining({
+          size: {
+            height: 50, // No change - movement has caused entire delta
+            width: 60, // Changed since resizing from right doesn't cause position change
+          },
+        })
+      );
+
+      mockClientRect.left -= 10; // Object moves between callbacks
+      mockClientRect.top -= 10; // Object moves between callbacks
+      const seHandle = element.find('DraggableCore').at(3);
+      seHandle.prop('onDrag')(mockEvent, { node, deltaX: 10, deltaY: 10 });
+      expect(props.onResize).lastCalledWith(
+        mockEvent,
+        expect.objectContaining({
+          size: {
+            height: 60, // Changed since resizing from right doesn't cause position change
+            width: 60, // Changed since resizing from right doesn't cause position change
+          },
+        })
+      );
+    });
+
+    test('use of < 1 transformScale', () => {
+      const element = shallow(<Resizable {...customProps} transformScale={0.5}>{resizableBoxChildren}</Resizable>);
+      const nwHandle = element.find('DraggableCore').first();
+      expect(props.onResize).not.toHaveBeenCalled();
+      nwHandle.prop('onDrag')(mockEvent, { node, deltaX: 5, deltaY: 10 });
+      expect(props.onResize).lastCalledWith(
+        mockEvent,
+        expect.objectContaining({
+          size: {
+            // Should be doubled
+            height: 30,
+            width: 40,
+          },
+        })
+      );
+
+      mockClientRect.left = 20; // Object moves between callbacks
+      nwHandle.prop('onDrag')(mockEvent, { node, deltaX: 5, deltaY: 10 });
+      expect(props.onResize).lastCalledWith(
+        mockEvent,
+        expect.objectContaining({
+          size: {
+            height: 30, // Height decreased as deltaY increases - no further top position change since last
+            width: 20, // Width decreased 10 from deltaX and 20 from changing position
+          },
+        })
+      );
+    });
+
+    test('use of > 1 transformScale', () => {
+      const element = shallow(<Resizable {...customProps} transformScale={2}>{resizableBoxChildren}</Resizable>);
+      const nwHandle = element.find('DraggableCore').first();
+      expect(props.onResize).not.toHaveBeenCalled();
+      nwHandle.prop('onDrag')(mockEvent, { node, deltaX: 5, deltaY: 10 });
+      expect(props.onResize).lastCalledWith(
+        mockEvent,
+        expect.objectContaining({
+          size: {
+            // Should be halved
+            height: 45,
+            width: 47.5,
+          },
+        })
+      );
+    });
+  });
+});

package/__tests__/ResizableBox.test.js

@@ -0,0 +1,99 @@
+// @flow
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {shallow} from 'enzyme';
+
+import ResizableBox from '../lib/ResizableBox';
+import Resizable from "../lib/Resizable";
+
+describe('render ResizableBox', () => {
+  const props = {
+    axis: 'x',
+    draggableOpts: {},
+    handle: jest.fn(resizeHandle => <span className={`test-class-${resizeHandle}`} />),
+    handleSize: [20, 20],
+    height: 50,
+    lockAspectRatio: false,
+    maxConstraints: [30, 30],
+    minConstraints: [10, 10],
+    onResize: jest.fn(),
+    onResizeStart: jest.fn(),
+    onResizeStop: jest.fn(),
+    resizeHandles: ['w'],
+    transformScale: 1,
+    width: 50,
+  };
+  const children = <span className="children" />;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('snapshot default props', () => {
+    const tree = renderer.create(<ResizableBox {...props}>{children}</ResizableBox>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  test('with correct props', () => {
+    const element = shallow(<ResizableBox {...props}>{children}</ResizableBox>);
+    expect(element.state()).toEqual({
+      height: 50,
+      propsHeight: 50,
+      propsWidth: 50,
+      width: 50,
+    });
+    const resizable = element.find(Resizable);
+    const fakeEvent = {persist: jest.fn()};
+    const data = {node: children, size: {width: 30, height: 30}, handle: 'w'};
+    resizable.simulate('resize', fakeEvent, data);
+    expect(element.state()).toEqual({
+      height: 30,
+      propsHeight: 50,
+      propsWidth: 50,
+      width: 30,
+    });
+    expect(element.find('.children')).toHaveLength(1);
+    expect(fakeEvent.persist).toHaveBeenCalledTimes(1);
+    expect(props.onResize).toHaveBeenCalledWith(fakeEvent, data);
+
+    resizable.simulate('resizeStart', fakeEvent, data);
+    expect(props.onResizeStart).toHaveBeenCalledWith(fakeEvent, data);
+
+    resizable.simulate('resizeStop', fakeEvent, data);
+    expect(props.onResizeStop).toHaveBeenCalledWith(fakeEvent, data);
+  });
+
+  describe('<Resizable> props filtering', () => {
+    // Ensure everything in propTypes is represented here. Otherwise the next two tests are not valid
+    test('all intended props are in our props object', () => {
+      expect(['children', 'className', ...Object.keys(props)].sort()).toEqual(Object.keys(Resizable.propTypes).sort());
+    });
+
+    test('none of these props leak down to the child', () => {
+      const element = shallow(<ResizableBox {...props} />);
+      expect(Object.keys(element.find('div').props())).toEqual(['style']);
+    });
+
+    test('className is constructed properly', () => {
+      const element = shallow(<ResizableBox {...props} className='foo' />);
+      expect(element.find('div').props().className).toEqual(`foo`);
+    });
+  });
+
+  test('style prop', () => {
+    const element = shallow(<ResizableBox {...props} style={{backgroundColor: 'red'}}>{children}</ResizableBox>);
+    expect(element.find('div').at(0).prop('style')).toEqual({
+      width: '50px',
+      height: '50px',
+      backgroundColor: 'red'
+    });
+  });
+
+  test('style prop width and height ignored', () => {
+    const element = shallow(<ResizableBox {...props} style={{width: 10, height: 10}}>{children}</ResizableBox>);
+    expect(element.find('div').at(0).prop('style')).toEqual({
+      width: '50px',
+      height: '50px',
+    });
+  });
+});

package/__tests__/__snapshots__/Resizable.test.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render Resizable snapshot default props 1`] = `
+<div
+  className="test-classname react-resizable"
+  style={
+    Object {
+      "height": "50px",
+      "width": "50px",
+    }
+  }
+>
+  <span
+    className="children"
+  />
+  <span
+    className="react-resizable-handle react-resizable-handle-se"
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+  />
+  <span
+    className="react-resizable-handle react-resizable-handle-e"
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+  />
+</div>
+`;

package/__tests__/__snapshots__/ResizableBox.test.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`render ResizableBox snapshot default props 1`] = `
+<div
+  className="react-resizable"
+  style={
+    Object {
+      "height": "50px",
+      "width": "50px",
+    }
+  }
+>
+  <span
+    className="children"
+  />
+  <span
+    className="test-class-w"
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+  />
+</div>
+`;