Skip to content

Commit c26c6bc

Browse files
Added context support
1 parent 2db7c67 commit c26c6bc

File tree

16 files changed

+401
-48
lines changed

16 files changed

+401
-48
lines changed

docs/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
* [simulate(event[, data])](/docs/api/ShallowWrapper/simulate.md)
3434
* [setState(nextState)](/docs/api/ShallowWrapper/setState.md)
3535
* [setProps(nextProps)](/docs/api/ShallowWrapper/setProps.md)
36+
* [setContext(context)](/docs/api/ShallowWrapper/setContext.md)
3637
* [instance()](/docs/api/ShallowWrapper/instance.md)
3738
* [update()](/docs/api/ShallowWrapper/update.md)
3839
* [debug()](/docs/api/ShallowWrapper/debug.md)
@@ -69,6 +70,7 @@
6970
* [simulate(event[, data])](/docs/api/ReactWrapper/simulate.md)
7071
* [setState(nextState)](/docs/api/ReactWrapper/setState.md)
7172
* [setProps(nextProps)](/docs/api/ReactWrapper/setProps.md)
73+
* [setContext(context)](/docs/api/ReactWrapper/setContext.md)
7274
* [instance()](/docs/api/ReactWrapper/instance.md)
7375
* [update()](/docs/api/ReactWrapper/update.md)
7476
* [type()](/docs/api/ReactWrapper/type.md)
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# `.setContext(context) => Self`
2+
3+
A method that sets the context of the root component, and re-renders. Useful for when you are
4+
wanting to test how the component behaves over time with changing contexts.
5+
6+
NOTE: can only be called on a wrapper instance that is also the root instance.
7+
8+
9+
#### Arguments
10+
11+
1. `context` (`Object`): An object containing new props to merge in with the current state
12+
13+
14+
15+
#### Returns
16+
17+
`ReactWrapper`: Returns itself.
18+
19+
20+
21+
#### Example
22+
23+
```jsx
24+
const SimpleComponent = React.createClass({
25+
contextTypes: {
26+
name: React.PropTypes.string,
27+
},
28+
render() {
29+
return <div>{this.context.name}</div>;
30+
},
31+
});
32+
```
33+
```jsx
34+
const context = { name: 'foo' };
35+
const wrapper = mount(<SimpleComponent />, { context });
36+
expect(wrapper.text()).to.equal('foo');
37+
wrapper.setContext({ name: 'bar' });
38+
expect(wrapper.text()).to.equal('bar');
39+
wrapper.setContext({ name: 'baz' });
40+
expect(wrapper.text()).to.equal('baz');
41+
```
42+
43+
#### Common Gotchas
44+
45+
- `.setContext()` can only be used on a wrapper that was initially created with a call to `mount()`
46+
that includes a `context` specified in the options argument.
47+
- The root component you are rendering must have a `contextTypes` static property.
48+
49+
50+
#### Related Methods
51+
52+
- [`.setState(state) => Self`](setState.md)
53+
- [`.setProps(props) => Self`](setProps.md)
54+
55+

docs/api/ReactWrapper/setProps.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,5 +59,6 @@ expect(spy.calledOnce).to.be.true;
5959
#### Related Methods
6060

6161
- [`.setState(state) => Self`](setState.md)
62+
- [`.setContext(context) => Self`](setContext.md)
6263

6364

docs/api/ReactWrapper/setState.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,6 @@ expect(wrapper.find('.bar')).to.have.length(1);
5353
#### Related Methods
5454

5555
- [`.setProps(props) => Self`](setProps.md)
56+
- [`.setContext(context) => Self`](setContext.md)
5657

5758

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# `.setContext(context) => Self`
2+
3+
A method that sets the context of the root component, and re-renders. Useful for when you are
4+
wanting to test how the component behaves over time with changing contexts.
5+
6+
NOTE: can only be called on a wrapper instance that is also the root instance.
7+
8+
9+
#### Arguments
10+
11+
1. `context` (`Object`): An object containing new props to merge in with the current state
12+
13+
14+
15+
#### Returns
16+
17+
`ShallowWrapper`: Returns itself.
18+
19+
20+
21+
#### Example
22+
23+
```jsx
24+
const SimpleComponent = React.createClass({
25+
contextTypes: {
26+
name: React.PropTypes.string,
27+
},
28+
render() {
29+
return <div>{this.context.name}</div>;
30+
},
31+
});
32+
```
33+
```jsx
34+
const context = { name: 'foo' };
35+
const wrapper = shallow(<SimpleComponent />, { context });
36+
expect(wrapper.text()).to.equal('foo');
37+
wrapper.setContext({ name: 'bar' });
38+
expect(wrapper.text()).to.equal('bar');
39+
wrapper.setContext({ name: 'baz' });
40+
expect(wrapper.text()).to.equal('baz');
41+
```
42+
43+
#### Common Gotchas
44+
45+
- `.setContext()` can only be used on a wrapper that was initially created with a call to `shallow()`
46+
that includes a `context` specified in the options argument.
47+
- The root component you are rendering must have a `contextTypes` static property.
48+
49+
50+
#### Related Methods
51+
52+
- [`.setState(state) => Self`](setState.md)
53+
- [`.setProps(props) => Self`](setProps.md)
54+
55+

docs/api/ShallowWrapper/setProps.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,5 +59,6 @@ expect(spy.calledOnce).to.be.true;
5959
#### Related Methods
6060

6161
- [`.setState(state) => Self`](setState.md)
62+
- [`.setContext(context) => Self`](setContext.md)
6263

6364

docs/api/ShallowWrapper/setState.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,6 @@ expect(wrapper.find('.bar')).to.have.length(1);
5353
#### Related Methods
5454

5555
- [`.setProps(props) => Self`](setProps.md)
56+
- [`.setContext(context) => Self`](setContext.md)
5657

5758

docs/api/mount.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,18 @@ describe('<Foo />', () => {
3737
});
3838
```
3939

40+
## `mount(node[, options]) => ReactWrapper`
41+
42+
#### Arguments
43+
44+
1. `node` (`ReactElement`): The node to render
45+
2. `options` (`Object` [optional]):
46+
- `options.context`: (`Object` [optional]): Context to be passed into the component
47+
48+
#### Returns
49+
50+
`ReactWrapper`: The wrapper instance around the rendered output.
51+
4052

4153
## ReactWrapper API
4254

@@ -109,6 +121,9 @@ Manually sets state of the root component.
109121
#### [`.setProps(nextProps) => ReactWrapper`](ReactWrapper/setProps.md)
110122
Manually sets props of the root component.
111123

124+
#### [`.setContext(context) => ReactWrapper`](ReactWrapper/setContext.md)
125+
Manually sets context of the root component.
126+
112127
#### [`.instance() => ReactComponent`](ReactWrapper/instance.md)
113128
Returns the instance of the root component.
114129

docs/api/shallow.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,18 @@ describe('<MyComponent />', () => {
4040

4141
```
4242

43+
## `shallow(node[, options]) => ReactWrapper`
44+
45+
#### Arguments
46+
47+
1. `node` (`ReactElement`): The node to render
48+
2. `options` (`Object` [optional]):
49+
- `options.context`: (`Object` [optional]): Context to be passed into the component
50+
51+
#### Returns
52+
53+
`ShallowWrapper`: The wrapper instance around the rendered output.
54+
4355

4456
## ShallowWrapper API
4557

@@ -121,6 +133,9 @@ Manually sets state of the root component.
121133
#### [`.setProps(nextProps) => ShallowWrapper`](ShallowWrapper/setProps.md)
122134
Manually sets props of the root component.
123135

136+
#### [`.setContext(context) => ShallowWrapper`](ShallowWrapper/setContext.md)
137+
Manually sets context of the root component.
138+
124139
#### [`.instance() => ReactComponent`](ShallowWrapper/instance.md)
125140
Returns the instance of the root component.
126141

src/ReactWrapper.js

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { flatten, unique, compact } from 'underscore';
3-
import ReactWrapperComponent from './ReactWrapperComponent';
3+
import createWrapperComponent from './ReactWrapperComponent';
44
import {
55
instHasClassName,
66
childrenOfInst,
@@ -45,7 +45,7 @@ function filterWhereUnwrapped(wrapper, predicate) {
4545
*/
4646
export default class ReactWrapper {
4747

48-
constructor(nodes, root) {
48+
constructor(nodes, root, options = {}) {
4949
if (!global.window && !global.document) {
5050
throw new Error(
5151
`It looks like you called \`mount()\` without a jsdom document being loaded. ` +
@@ -54,10 +54,12 @@ export default class ReactWrapper {
5454
}
5555

5656
if (!root) {
57+
const ReactWrapperComponent = createWrapperComponent(nodes, options);
5758
this.component = renderIntoDocument(
5859
<ReactWrapperComponent
5960
Component={nodes.type}
6061
props={nodes.props}
62+
context={options.context}
6163
/>
6264
);
6365
this.root = this;
@@ -76,6 +78,7 @@ export default class ReactWrapper {
7678
}
7779
this.length = this.nodes.length;
7880
}
81+
this.options = options;
7982
}
8083

8184
/**
@@ -147,7 +150,7 @@ export default class ReactWrapper {
147150
if (this.root !== this) {
148151
throw new Error('ReactWrapper::setProps() can only be called on the root');
149152
}
150-
this.component.setProps(props);
153+
this.component.setChildProps(props);
151154
return this;
152155
}
153156

@@ -171,6 +174,29 @@ export default class ReactWrapper {
171174
return this;
172175
}
173176

177+
/**
178+
* A method that sets the context of the root component, and re-renders. Useful for when you are
179+
* wanting to test how the component behaves over time with changing contexts.
180+
*
181+
* NOTE: can only be called on a wrapper instance that is also the root instance.
182+
*
183+
* @param {Object} context object
184+
* @returns {ReactWrapper}
185+
*/
186+
setContext(context) {
187+
if (this.root !== this) {
188+
throw new Error('ReactWrapper::setContext() can only be called on the root');
189+
}
190+
if (!this.options.context) {
191+
throw new Error(
192+
'ShallowWrapper::setContext() can only be called on a wrapper that was originally passed ' +
193+
'a context option'
194+
);
195+
}
196+
this.component.setChildContext(context);
197+
return this;
198+
}
199+
174200
/**
175201
* Whether or not a given react element exists in the mount render tree.
176202
*

0 commit comments

Comments
 (0)