Merge pull request #1863 from dferber90/master

[New] `mount`/`shallow`: Add renderProp

 - [enzyme-adapter-react-*] [New] add `.wrap` method

docs/api/ReactWrapper/renderProp.md

@@ -0,0 +1,85 @@
+# `.renderProp(propName, ...args) => ReactWrapper`
+
+Calls the current wrapper's property with name `propName` and the `args` provided.
+Returns the result in a new wrapper.
+
+NOTE: can only be called on wrapper of a single non-DOM component element node.
+
+#### Arguments
+
+1.  `propName` (`String`):
+1.  `...args` (`Array<Any>`):
+
+This essentially calls `wrapper.prop(propName)(...args)`.
+
+#### Returns
+
+`ReactWrapper`: A new wrapper that wraps the node returned from the render prop.
+
+#### Examples
+
+##### Test Setup
+
+```jsx
+class Mouse extends React.Component {
+  constructor() {
+    super();
+    this.state = { x: 0, y: 0 };
+  }
+
+  render() {
+    const { render } = this.props;
+    return (
+      <div
+        style={{ height: '100%' }}
+        onMouseMove={(event) => {
+          this.setState({
+            x: event.clientX,
+            y: event.clientY,
+          });
+        }}
+      >
+        {render(this.state)}
+      </div>
+    );
+  }
+}
+
+Mouse.propTypes = {
+  render: PropTypes.func.isRequired,
+};
+```
+
+```jsx
+const App = () => (
+  <div style={{ height: '100%' }}>
+    <Mouse
+      render={(x = 0, y = 0) => (
+        <h1>
+          The mouse position is ({x}, {y})
+        </h1>
+      )}
+    />
+  </div>
+);
+```
+
+##### Testing with no arguments
+
+```jsx
+const wrapper = mount(<App />)
+  .find(Mouse)
+  .renderProp('render');
+
+expect(wrapper.equals(<h1>The mouse position is 0, 0</h1>)).to.equal(true);
+```
+
+##### Testing with multiple arguments
+
+```jsx
+const wrapper = mount(<App />)
+  .find(Mouse)
+  .renderProp('render', [10, 20]);
+
+expect(wrapper.equals(<h1>The mouse position is 10, 20</h1>)).to.equal(true);
+```

docs/api/ShallowWrapper/renderProp.md

@@ -0,0 +1,85 @@
+# `.renderProp(propName, ...args) => ShallowWrapper`
+
+Calls the current wrapper's property with name `propName` and the `args` provided.
+Returns the result in a new wrapper.
+
+NOTE: can only be called on wrapper of a single non-DOM component element node.
+
+#### Arguments
+
+1.  `propName` (`String`):
+1.  `...args` (`Array<Any>`):
+
+This essentially calls `wrapper.prop(propName)(...args)`.
+
+#### Returns
+
+`ShallowWrapper`: A new wrapper that wraps the node returned from the render prop.
+
+#### Examples
+
+##### Test Setup
+
+```jsx
+class Mouse extends React.Component {
+  constructor() {
+    super();
+    this.state = { x: 0, y: 0 };
+  }
+
+  render() {
+    const { render } = this.props;
+    return (
+      <div
+        style={{ height: '100%' }}
+        onMouseMove={(event) => {
+          this.setState({
+            x: event.clientX,
+            y: event.clientY,
+          });
+        }}
+      >
+        {render(this.state)}
+      </div>
+    );
+  }
+}
+
+Mouse.propTypes = {
+  render: PropTypes.func.isRequired,
+};
+```
+
+```jsx
+const App = () => (
+  <div style={{ height: '100%' }}>
+    <Mouse
+      render={(x = 0, y = 0) => (
+        <h1>
+          The mouse position is ({x}, {y})
+        </h1>
+      )}
+    />
+  </div>
+);
+```
+
+##### Testing with no arguments
+
+```jsx
+const wrapper = shallow(<App />)
+  .find(Mouse)
+  .renderProp('render');
+
+expect(wrapper.equals(<h1>The mouse position is 0, 0</h1>)).to.equal(true);
+```
+
+##### Testing with multiple arguments
+
+```jsx
+const wrapper = shallow(<App />)
+  .find(Mouse)
+  .renderProp('render', [10, 20]);
+
+expect(wrapper.equals(<h1>The mouse position is 10, 20</h1>)).to.equal(true);
+```

docs/api/mount.md

@@ -120,6 +120,9 @@ Get a wrapper with the first ancestor of the current node to match the provided
 #### [`.render() => CheerioWrapper`](ReactWrapper/render.md)
 Returns a CheerioWrapper of the current node's subtree.
 
+#### [`.renderProp(key) => ReactWrapper`](ReactWrapper/renderProp.md)
+Returns a wrapper of the node rendered by the provided render prop.
+
 #### [`.text() => String`](ReactWrapper/text.md)
 Returns a string representation of the text nodes in the current render tree.
 

docs/api/shallow.md

@@ -130,6 +130,9 @@ Shallow renders the current node and returns a shallow wrapper around it.
 #### [`.render() => CheerioWrapper`](ShallowWrapper/render.md)
 Returns a CheerioWrapper of the current node's subtree.
 
+#### [`.renderProp(key) => ShallowWrapper`](ShallowWrapper/renderProp.md)
+Returns a wrapper of the node rendered by the provided render prop.
+
 #### [`.unmount() => ShallowWrapper`](ShallowWrapper/unmount.md)
 A method that un-mounts the component.
 

packages/enzyme-adapter-react-13/src/ReactThirteenAdapter.js

@@ -14,6 +14,7 @@ import {
   createMountWrapper,
   propsWithKeysAndRef,
   ensureKeyOrUndefined,
+  wrap,
 } from 'enzyme-adapter-utils';
 import mapNativeEventNames from './ReactThirteenMapNativeEventNames';
 import elementToTree from './ReactThirteenElementToTree';
@@ -242,6 +243,10 @@ class ReactThirteenAdapter extends EnzymeAdapter {
     }
   }
 
+  wrap(element) {
+    return wrap(element);
+  }
+
   // converts an RSTNode to the corresponding JSX Pragma Element. This will be needed
   // in order to implement the `Wrapper.mount()` and `Wrapper.shallow()` methods, but should
   // be pretty straightforward for people to implement.

packages/enzyme-adapter-react-14/src/ReactFourteenAdapter.js

@@ -18,6 +18,7 @@ import {
   createMountWrapper,
   propsWithKeysAndRef,
   ensureKeyOrUndefined,
+  wrap,
 } from 'enzyme-adapter-utils';
 
 function typeToNodeType(type) {
@@ -214,6 +215,10 @@ class ReactFourteenAdapter extends EnzymeAdapter {
     }
   }
 
+  wrap(element) {
+    return wrap(element);
+  }
+
   // converts an RSTNode to the corresponding JSX Pragma Element. This will be needed
   // in order to implement the `Wrapper.mount()` and `Wrapper.shallow()` methods, but should
   // be pretty straightforward for people to implement.

packages/enzyme-adapter-react-15.4/src/ReactFifteenFourAdapter.js

@@ -18,6 +18,7 @@ import {
   createMountWrapper,
   propsWithKeysAndRef,
   ensureKeyOrUndefined,
+  wrap,
 } from 'enzyme-adapter-utils';
 import ifReact from 'enzyme-adapter-react-helper/build/ifReact';
 
@@ -249,6 +250,10 @@ class ReactFifteenFourAdapter extends EnzymeAdapter {
     }
   }
 
+  wrap(element) {
+    return wrap(element);
+  }
+
   // converts an RSTNode to the corresponding JSX Pragma Element. This will be needed
   // in order to implement the `Wrapper.mount()` and `Wrapper.shallow()` methods, but should
   // be pretty straightforward for people to implement.

packages/enzyme-adapter-react-15/src/ReactFifteenAdapter.js

@@ -20,6 +20,7 @@ import {
   createMountWrapper,
   propsWithKeysAndRef,
   ensureKeyOrUndefined,
+  wrap,
 } from 'enzyme-adapter-utils';
 
 function compositeTypeToNodeType(type) {
@@ -249,6 +250,10 @@ class ReactFifteenAdapter extends EnzymeAdapter {
     }
   }
 
+  wrap(element) {
+    return wrap(element);
+  }
+
   // converts an RSTNode to the corresponding JSX Pragma Element. This will be needed
   // in order to implement the `Wrapper.mount()` and `Wrapper.shallow()` methods, but should
   // be pretty straightforward for people to implement.

packages/enzyme-adapter-react-16.1/src/ReactSixteenOneAdapter.js

@@ -28,6 +28,7 @@ import {
   propsWithKeysAndRef,
   ensureKeyOrUndefined,
   simulateError,
+  wrap,
 } from 'enzyme-adapter-utils';
 import { findCurrentFiberUsingSlowPath } from 'react-reconciler/reflection';
 
@@ -440,6 +441,10 @@ class ReactSixteenOneAdapter extends EnzymeAdapter {
     }
   }
 
+  wrap(element) {
+    return wrap(element);
+  }
+
   // converts an RSTNode to the corresponding JSX Pragma Element. This will be needed
   // in order to implement the `Wrapper.mount()` and `Wrapper.shallow()` methods, but should
   // be pretty straightforward for people to implement.

packages/enzyme-adapter-react-16.2/src/ReactSixteenTwoAdapter.js

@@ -29,6 +29,7 @@ import {
   propsWithKeysAndRef,
   ensureKeyOrUndefined,
   simulateError,
+  wrap,
 } from 'enzyme-adapter-utils';
 import { findCurrentFiberUsingSlowPath } from 'react-reconciler/reflection';
 
@@ -442,6 +443,10 @@ class ReactSixteenTwoAdapter extends EnzymeAdapter {
     }
   }
 
+  wrap(element) {
+    return wrap(element);
+  }
+
   // converts an RSTNode to the corresponding JSX Pragma Element. This will be needed
   // in order to implement the `Wrapper.mount()` and `Wrapper.shallow()` methods, but should
   // be pretty straightforward for people to implement.

packages/enzyme-adapter-react-16.3/src/ReactSixteenThreeAdapter.js

@@ -36,6 +36,7 @@ import {
   propsWithKeysAndRef,
   ensureKeyOrUndefined,
   simulateError,
+  wrap,
 } from 'enzyme-adapter-utils';
 import { findCurrentFiberUsingSlowPath } from 'react-reconciler/reflection';
 
@@ -422,6 +423,10 @@ class ReactSixteenThreeAdapter extends EnzymeAdapter {
     }
   }
 
+  wrap(element) {
+    return wrap(element);
+  }
+
   // converts an RSTNode to the corresponding JSX Pragma Element. This will be needed
   // in order to implement the `Wrapper.mount()` and `Wrapper.shallow()` methods, but should
   // be pretty straightforward for people to implement.

packages/enzyme-adapter-react-16/src/ReactSixteenAdapter.js

@@ -38,6 +38,7 @@ import {
   propsWithKeysAndRef,
   ensureKeyOrUndefined,
   simulateError,
+  wrap,
 } from 'enzyme-adapter-utils';
 import findCurrentFiberUsingSlowPath from './findCurrentFiberUsingSlowPath';
 import detectFiberTags from './detectFiberTags';
@@ -468,6 +469,10 @@ class ReactSixteenAdapter extends EnzymeAdapter {
     }
   }
 
+  wrap(element) {
+    return wrap(element);
+  }
+
   // converts an RSTNode to the corresponding JSX Pragma Element. This will be needed
   // in order to implement the `Wrapper.mount()` and `Wrapper.shallow()` methods, but should
   // be pretty straightforward for people to implement.

packages/enzyme-adapter-utils/package.json

@@ -36,7 +36,8 @@
   "dependencies": {
     "function.prototype.name": "^1.1.0",
     "object.assign": "^4.1.0",
-    "prop-types": "^15.6.2"
+    "prop-types": "^15.6.2",
+    "semver": "^5.6.0"
   },
   "peerDependencies": {
     "react": "0.13.x || 0.14.x || ^15.0.0-0 || ^16.0.0-0"

packages/enzyme-adapter-utils/src/Utils.js

@@ -1,8 +1,9 @@
 import functionName from 'function.prototype.name';
 import createMountWrapper from './createMountWrapper';
 import createRenderWrapper from './createRenderWrapper';
+import wrap from './wrapWithSimpleWrapper';
 
-export { createMountWrapper, createRenderWrapper };
+export { createMountWrapper, createRenderWrapper, wrap };
 
 export function mapNativeEventNames(event, {
   animation = false, // should be true for React 15+

packages/enzyme-adapter-utils/src/wrapWithSimpleWrapper.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { intersects } from 'semver';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  children: PropTypes.element.isRequired,
+};
+
+const Wrapper = (intersects('>= 0.14', React.version)
+  // eslint-disable-next-line prefer-arrow-callback
+  ? () => Object.assign(function SimpleSFCWrapper({ children }) {
+    return children;
+  }, { propTypes })
+  : () => {
+    class SimpleClassWrapper extends React.Component {
+      render() {
+        const { children } = this.props;
+        return children;
+      }
+    }
+    SimpleClassWrapper.propTypes = propTypes;
+    return SimpleClassWrapper;
+  }
+)();
+
+export default function wrap(element) {
+  console.log(React.version, Wrapper);
+  return <Wrapper>{element}</Wrapper>;
+}