FIX: Invalid proptype warning for handle prop (#133)

* Add test suite && refactor unused props in Resizablejs && ResizableBox

* remove breaking change

* improve snapshot

* changelog

* import draggableprops from library

* abstracted flowTypes & propTypes

* resolve conflict

Co-authored-by: Daniele <daniele.cina@makeitapp.eu>

Author: Danielecina

.eslintrc

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

.gitignore

@@ -1,4 +1,22 @@
-node_modules
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
 dist
-npm-debug.log
-build/
+build
+
+# dependencies
+/node_modules
+package-lock.json
+
+# testing
+/coverage/
+
+# misc
+.DS_Store
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# ide
+.vscode
+.idea
+

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+### Unreleased
+
+- 🐛 Bugfix: remove unknown Prop `handle` from div children in Resizable React.CloneElement [124](https://github.com/STRML/react-resizable/issues/124)
+
 ### 1.10.1 (Nov 25, 2019)
 
 > Note: 1.10.0 was a mis-publish.

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
 

__tests__/Resizable.test.js

@@ -0,0 +1,65 @@
+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',
+    handleSize: [20, 20],
+    height: 50,
+    lockAspectRatio: false,
+    maxConstraints: [Infinity, Infinity],
+    minConstraints: [20, 20],
+    onResize: 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);
+    });
+  });
+});

__tests__/ResizableBox.test.js

@@ -0,0 +1,62 @@
+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',
+    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'],
+    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);
+  });
+});

__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>
+`;

__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>
+`;

examples/1.html

@@ -54,7 +54,7 @@ <h3>React-Resizable Demo</h3>
     gives those components resize handles.
     </p>
     <p><a href="https://github.com/STRML/react-resizable">View project on GitHub</a></p>
-    <p><a href="https://github.com/STRML/react-resizable/blob/master/test/TestLayout.js">View this page's source</a></p>
+    <p><a href="https://github.com/STRML/react-resizable/blob/master/examples/ExampleLayout.js">View this page's source</a></p>
     <div id="content"></div>
   </body>
 </html>

test/TestLayout.js examples/ExampleLayout.jstest/TestLayout.js renamed to examples/ExampleLayout.js

@@ -4,7 +4,7 @@ import ResizableBox from '../lib/ResizableBox';
 import 'style-loader!css-loader!../css/styles.css';
 import 'style-loader!css-loader!./test.css';
 
-export default class TestLayout extends React.Component<{}, {width: number, height: number}> {
+export default class ExampleLayout extends React.Component<{}, {width: number, height: number}> {
   state = {width: 200, height: 200};
 
   onClick = () => {