-
-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add renderProp to ShallowWrapper #1863
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. | ||
dferber90 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
#### 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]); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same here, this should also be |
||
|
||
expect(wrapper.equals(<h1>The mouse position is 10, 20</h1>)).to.equal(true); | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Is this a debugging-leftover? This should go away as far as I can tell. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. whoops, yes, that's my bad. |
||
return <Wrapper>{element}</Wrapper>; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is under "multiple arguments", so the code should be
.renderProp('render', 10, 20)