-
-
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
Added context support #62
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,55 @@ | ||
# `.setContext(context) => Self` | ||
|
||
A method that sets the context of the root component, and re-renders. Useful for when you are | ||
wanting to test how the component behaves over time with changing contexts. | ||
|
||
NOTE: can only be called on a wrapper instance that is also the root instance. | ||
|
||
|
||
#### Arguments | ||
|
||
1. `context` (`Object`): An object containing new props to merge in with the current state | ||
|
||
|
||
|
||
#### Returns | ||
|
||
`ReactWrapper`: Returns itself. | ||
|
||
|
||
|
||
#### Example | ||
|
||
```jsx | ||
const SimpleComponent = React.createClass({ | ||
contextTypes: { | ||
name: React.PropTypes.string, | ||
}, | ||
render() { | ||
return <div>{this.context.name}</div>; | ||
}, | ||
}); | ||
``` | ||
```jsx | ||
const context = { name: 'foo' }; | ||
const wrapper = mount(<SimpleComponent />, { context }); | ||
expect(wrapper.text()).to.equal('foo'); | ||
wrapper.setContext({ name: 'bar' }); | ||
expect(wrapper.text()).to.equal('bar'); | ||
wrapper.setContext({ name: 'baz' }); | ||
expect(wrapper.text()).to.equal('baz'); | ||
``` | ||
|
||
#### Common Gotchas | ||
|
||
- `.setContext()` can only be used on a wrapper that was initially created with a call to `mount()` | ||
that includes a `context` specified in the options argument. | ||
- The root component you are rendering must have a `contextTypes` static property. | ||
|
||
|
||
#### Related Methods | ||
|
||
- [`.setState(state) => Self`](setState.md) | ||
- [`.setProps(props) => Self`](setProps.md) | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
# `.setContext(context) => Self` | ||
|
||
A method that sets the context of the root component, and re-renders. Useful for when you are | ||
wanting to test how the component behaves over time with changing contexts. | ||
|
||
NOTE: can only be called on a wrapper instance that is also the root instance. | ||
|
||
|
||
#### Arguments | ||
|
||
1. `context` (`Object`): An object containing new props to merge in with the current state | ||
|
||
|
||
|
||
#### Returns | ||
|
||
`ShallowWrapper`: Returns itself. | ||
|
||
|
||
|
||
#### Example | ||
|
||
```jsx | ||
const SimpleComponent = React.createClass({ | ||
contextTypes: { | ||
name: React.PropTypes.string, | ||
}, | ||
render() { | ||
return <div>{this.context.name}</div>; | ||
}, | ||
}); | ||
``` | ||
```jsx | ||
const context = { name: 'foo' }; | ||
const wrapper = shallow(<SimpleComponent />, { context }); | ||
expect(wrapper.text()).to.equal('foo'); | ||
wrapper.setContext({ name: 'bar' }); | ||
expect(wrapper.text()).to.equal('bar'); | ||
wrapper.setContext({ name: 'baz' }); | ||
expect(wrapper.text()).to.equal('baz'); | ||
``` | ||
|
||
#### Common Gotchas | ||
|
||
- `.setContext()` can only be used on a wrapper that was initially created with a call to `shallow()` | ||
that includes a `context` specified in the options argument. | ||
- The root component you are rendering must have a `contextTypes` static property. | ||
|
||
|
||
#### Related Methods | ||
|
||
- [`.setState(state) => Self`](setState.md) | ||
- [`.setProps(props) => Self`](setProps.md) | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
import React from 'react'; | ||
import { flatten, unique, compact } from 'underscore'; | ||
import ReactWrapperComponent from './ReactWrapperComponent'; | ||
import createWrapperComponent from './ReactWrapperComponent'; | ||
import { | ||
instHasClassName, | ||
childrenOfInst, | ||
|
@@ -45,7 +45,7 @@ function filterWhereUnwrapped(wrapper, predicate) { | |
*/ | ||
export default class ReactWrapper { | ||
|
||
constructor(nodes, root) { | ||
constructor(nodes, root, options = {}) { | ||
if (!global.window && !global.document) { | ||
throw new Error( | ||
`It looks like you called \`mount()\` without a jsdom document being loaded. ` + | ||
|
@@ -54,10 +54,12 @@ export default class ReactWrapper { | |
} | ||
|
||
if (!root) { | ||
const ReactWrapperComponent = createWrapperComponent(nodes, options); | ||
this.component = renderIntoDocument( | ||
<ReactWrapperComponent | ||
Component={nodes.type} | ||
props={nodes.props} | ||
context={options.context} | ||
/> | ||
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. not due to this diff, but the airbnb styleguide shows this closing wrapper to be back 2 spaces. https://github.com/airbnb/javascript/tree/master/react#alignment 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. tru dat |
||
); | ||
this.root = this; | ||
|
@@ -76,6 +78,7 @@ export default class ReactWrapper { | |
} | ||
this.length = this.nodes.length; | ||
} | ||
this.options = options; | ||
} | ||
|
||
/** | ||
|
@@ -147,7 +150,7 @@ export default class ReactWrapper { | |
if (this.root !== this) { | ||
throw new Error('ReactWrapper::setProps() can only be called on the root'); | ||
} | ||
this.component.setProps(props); | ||
this.component.setChildProps(props); | ||
return this; | ||
} | ||
|
||
|
@@ -171,6 +174,29 @@ export default class ReactWrapper { | |
return this; | ||
} | ||
|
||
/** | ||
* A method that sets the context of the root component, and re-renders. Useful for when you are | ||
* wanting to test how the component behaves over time with changing contexts. | ||
* | ||
* NOTE: can only be called on a wrapper instance that is also the root instance. | ||
* | ||
* @param {Object} context object | ||
* @returns {ReactWrapper} | ||
*/ | ||
setContext(context) { | ||
if (this.root !== this) { | ||
throw new Error('ReactWrapper::setContext() can only be called on the root'); | ||
} | ||
if (!this.options.context) { | ||
throw new Error( | ||
'ShallowWrapper::setContext() can only be called on a wrapper that was originally passed ' + | ||
'a context option' | ||
); | ||
} | ||
this.component.setChildContext(context); | ||
return this; | ||
} | ||
|
||
/** | ||
* Whether or not a given react element exists in the mount render tree. | ||
* | ||
|
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.
Is this guaranteed, ie, will it throw an exception? I don't see any tests that cover this case.
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.
good call. will add some tests.