-
-
Notifications
You must be signed in to change notification settings - Fork 2k
/
renderProp.jsx
123 lines (97 loc) · 3.89 KB
/
renderProp.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import React from 'react';
import { expect } from 'chai';
import wrap from 'mocha-wrap';
import sinon from 'sinon-sandbox';
import getAdapter from 'enzyme/build/getAdapter';
import {
describeIf,
} from '../../_helpers';
import { is } from '../../_helpers/version';
export default function describeRenderProp({
Wrap,
WrapRendered,
}) {
wrap()
.withConsoleThrows()
.describe('.renderProp()', () => {
class Foo extends React.Component {
render() {
return <div className="in-foo" />;
}
}
class Bar extends React.Component {
render() {
const { render: r } = this.props;
return <div className="in-bar">{r()}</div>;
}
}
class RendersBar extends React.Component {
render() {
return <Bar {...this.props} />;
}
}
it('returns a wrapper around the node returned from the render prop', () => {
const wrapperA = Wrap(<div><Bar render={() => <div><Foo /></div>} /></div>);
const renderPropWrapperA = wrapperA.find(Bar).renderProp('render')();
expect(renderPropWrapperA.find(Foo)).to.have.lengthOf(1);
const wrapperB = Wrap(<div><Bar render={() => <Foo />} /></div>);
const renderPropWrapperB = wrapperB.find(Bar).renderProp('render')();
expect(renderPropWrapperB.find(Foo)).to.have.lengthOf(1);
const stub = sinon.stub().returns(<div />);
const wrapperC = Wrap(<div><Bar render={stub} /></div>);
stub.resetHistory();
wrapperC.find(Bar).renderProp('render')('one', 'two');
expect(stub.args).to.deep.equal([['one', 'two']]);
});
it('throws on host elements', () => {
class Div extends React.Component {
render() {
const { children } = this.props;
return <div>{children}</div>;
}
}
const wrapper = WrapRendered(<Div />);
expect(wrapper.is('div')).to.equal(true);
expect(() => wrapper.renderProp('foo')).to.throw();
});
wrap()
.withOverride(() => getAdapter(), 'wrap', () => undefined)
.it('throws with a react adapter that lacks a `.wrap`', () => {
const wrapper = Wrap(<div><Bar render={() => <div><Foo /></div>} /></div>);
expect(() => wrapper.find(Bar).renderProp('render')).to.throw(RangeError);
});
describeIf(is('>= 16'), 'allows non-nodes', () => {
function MyComponent({ val }) {
return <ComponentWithRenderProp val={val} r={x => x} />;
}
function ComponentWithRenderProp({ val, r }) {
return r(val);
}
it('works with strings', () => {
const wrapper = Wrap(<MyComponent val="foo" />);
wrapper.find(ComponentWithRenderProp).renderProp('r')('foo');
wrapper.find(ComponentWithRenderProp).renderProp('r')('');
});
it('works with numbers', () => {
const wrapper = Wrap(<MyComponent val={42} />);
wrapper.find(ComponentWithRenderProp).renderProp('r')(42);
wrapper.find(ComponentWithRenderProp).renderProp('r')(0);
wrapper.find(ComponentWithRenderProp).renderProp('r')(NaN);
});
it('works with arrays', () => {
const wrapper = Wrap(<MyComponent val={[]} />);
wrapper.find(ComponentWithRenderProp).renderProp('r')([]);
wrapper.find(ComponentWithRenderProp).renderProp('r')(['a']);
wrapper.find(ComponentWithRenderProp).renderProp('r')([Infinity]);
});
it('works with false', () => {
const wrapper = Wrap(<MyComponent val={false} />);
wrapper.find(ComponentWithRenderProp).renderProp('r')(false);
});
it('throws with true', () => {
const wrapper = Wrap(<MyComponent val={false} />);
expect(() => wrapper.find(ComponentWithRenderProp).renderProp('r')(true).Wrap()).to.throw();
});
});
});
}