Skip to content

Commit 34a6a58

Browse files
erikraserikras
authored
Fixed warning with server-side rendering (#188)
1 parent 4ca9370 commit 34a6a58

File tree

4 files changed

+183
-143
lines changed

4 files changed

+183
-143
lines changed

‎src/Field.test.js‎

Lines changed: 84 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@ const onSubmitMock = values => {}
77

88
describe('Field', () => {
99
it('should warn if not used inside a form', () => {
10+
const spy = jest.spyOn(global.console, 'error').mockImplementation(() => {})
1011
TestUtils.renderIntoDocument(<Field name="foo" component="input" />)
12+
expect(spy).toHaveBeenCalled()
13+
expect(spy).toHaveBeenCalledTimes(1)
14+
expect(spy).toHaveBeenCalledWith(
15+
'Warning: Field must be used inside of a ReactFinalForm component'
16+
)
17+
spy.mockRestore()
1118
})
1219

1320
it('should resubscribe if name changes', () => {
@@ -39,14 +46,14 @@ describe('Field', () => {
3946
expect(renderInput).not.toHaveBeenCalled()
4047
const dom = TestUtils.renderIntoDocument(<Container />)
4148
expect(renderInput).toHaveBeenCalled()
42-
expect(renderInput).toHaveBeenCalledTimes(2)
43-
expect(renderInput.mock.calls[1][0].input.value).toBe('Odie')
49+
expect(renderInput).toHaveBeenCalledTimes(1)
50+
expect(renderInput.mock.calls[0][0].input.value).toBe('Odie')
4451

4552
const button = TestUtils.findRenderedDOMComponentWithTag(dom, 'button')
4653
TestUtils.Simulate.click(button)
4754

48-
expect(renderInput).toHaveBeenCalledTimes(4)
49-
expect(renderInput.mock.calls[3][0].input.value).toBe('Garfield')
55+
expect(renderInput).toHaveBeenCalledTimes(3)
56+
expect(renderInput.mock.calls[2][0].input.value).toBe('Garfield')
5057
})
5158

5259
it('should not resubscribe if name changes when not inside a <Form> (duh)', () => {
@@ -69,6 +76,7 @@ describe('Field', () => {
6976
)
7077
}
7178
}
79+
const spy = jest.spyOn(global.console, 'error').mockImplementation(() => {})
7280
expect(renderInput).not.toHaveBeenCalled()
7381
const dom = TestUtils.renderIntoDocument(<Container />)
7482
expect(renderInput).toHaveBeenCalled()
@@ -80,6 +88,12 @@ describe('Field', () => {
8088

8189
expect(renderInput).toHaveBeenCalledTimes(2)
8290
expect(renderInput.mock.calls[1][0].input.value).toBe('')
91+
expect(spy).toHaveBeenCalled()
92+
expect(spy).toHaveBeenCalledTimes(1)
93+
expect(spy).toHaveBeenCalledWith(
94+
'Warning: Field must be used inside of a ReactFinalForm component'
95+
)
96+
spy.mockRestore()
8397
})
8498

8599
it('should render via children render function', () => {
@@ -94,10 +108,9 @@ describe('Field', () => {
94108
<Form onSubmit={onSubmitMock} render={render} />
95109
)
96110
expect(render).toHaveBeenCalled()
97-
// called twice due to field registration adding touched and visited values
98-
expect(render).toHaveBeenCalledTimes(2)
111+
expect(render).toHaveBeenCalledTimes(1)
99112
expect(renderInput).toHaveBeenCalled()
100-
expect(renderInput).toHaveBeenCalledTimes(2)
113+
expect(renderInput).toHaveBeenCalledTimes(1)
101114
})
102115

103116
it('should unsubscribe on unmount', () => {
@@ -141,29 +154,28 @@ describe('Field', () => {
141154
)
142155

143156
expect(render).toHaveBeenCalled()
144-
// called twice due to field registration adding touched and visited values
145-
expect(render).toHaveBeenCalledTimes(2)
146-
expect(render.mock.calls[1][0].active).toBeUndefined()
147-
expect(render.mock.calls[1][0].values.foo).toBeUndefined()
157+
expect(render).toHaveBeenCalledTimes(1)
158+
expect(render.mock.calls[0][0].active).toBeUndefined()
159+
expect(render.mock.calls[0][0].values.foo).toBeUndefined()
148160

149161
const input = TestUtils.findRenderedDOMComponentWithTag(dom, 'input')
150162
TestUtils.Simulate.focus(input)
151163

152-
expect(render).toHaveBeenCalledTimes(3)
153-
expect(render.mock.calls[2][0].active).toBe('foo')
154-
expect(render.mock.calls[2][0].values.foo).toBeUndefined()
164+
expect(render).toHaveBeenCalledTimes(2)
165+
expect(render.mock.calls[1][0].active).toBe('foo')
166+
expect(render.mock.calls[1][0].values.foo).toBeUndefined()
155167

156168
TestUtils.Simulate.change(input, { target: { value: 'bar' } })
157169

158-
expect(render).toHaveBeenCalledTimes(4)
159-
expect(render.mock.calls[3][0].active).toBe('foo')
160-
expect(render.mock.calls[3][0].values.foo).toBe('bar')
170+
expect(render).toHaveBeenCalledTimes(3)
171+
expect(render.mock.calls[2][0].active).toBe('foo')
172+
expect(render.mock.calls[2][0].values.foo).toBe('bar')
161173

162174
TestUtils.Simulate.blur(input)
163175

164-
expect(render).toHaveBeenCalledTimes(5)
165-
expect(render.mock.calls[4][0].active).toBeUndefined()
166-
expect(render.mock.calls[4][0].values.foo).toBe('bar')
176+
expect(render).toHaveBeenCalledTimes(4)
177+
expect(render.mock.calls[3][0].active).toBeUndefined()
178+
expect(render.mock.calls[3][0].values.foo).toBe('bar')
167179
})
168180

169181
it("should convert '' to undefined on change", () => {
@@ -179,21 +191,20 @@ describe('Field', () => {
179191
)
180192

181193
expect(render).toHaveBeenCalled()
182-
// called twice due to field registration adding touched and visited values
183-
expect(render).toHaveBeenCalledTimes(2)
184-
expect(render.mock.calls[1][0].values.foo).toBeUndefined()
194+
expect(render).toHaveBeenCalledTimes(1)
195+
expect(render.mock.calls[0][0].values.foo).toBeUndefined()
185196

186197
const input = TestUtils.findRenderedDOMComponentWithTag(dom, 'input')
187198

188199
TestUtils.Simulate.change(input, { target: { value: 'bar' } })
189200

190-
expect(render).toHaveBeenCalledTimes(3)
191-
expect(render.mock.calls[2][0].values.foo).toBe('bar')
201+
expect(render).toHaveBeenCalledTimes(2)
202+
expect(render.mock.calls[1][0].values.foo).toBe('bar')
192203

193204
TestUtils.Simulate.change(input, { target: { value: '' } })
194205

195-
expect(render).toHaveBeenCalledTimes(4)
196-
expect(render.mock.calls[3][0].values.foo).toBeUndefined()
206+
expect(render).toHaveBeenCalledTimes(3)
207+
expect(render.mock.calls[2][0].values.foo).toBeUndefined()
197208
})
198209

199210
it('should accept a null parse prop to preserve empty strings', () => {
@@ -209,21 +220,20 @@ describe('Field', () => {
209220
)
210221

211222
expect(render).toHaveBeenCalled()
212-
// called twice due to field registration adding touched and visited values
213-
expect(render).toHaveBeenCalledTimes(2)
214-
expect(render.mock.calls[1][0].values.foo).toBeUndefined()
223+
expect(render).toHaveBeenCalledTimes(1)
224+
expect(render.mock.calls[0][0].values.foo).toBeUndefined()
215225

216226
const input = TestUtils.findRenderedDOMComponentWithTag(dom, 'input')
217227

218228
TestUtils.Simulate.change(input, { target: { value: '' } })
219229

220-
expect(render).toHaveBeenCalledTimes(3)
221-
expect(render.mock.calls[2][0].values.foo).toBe('')
230+
expect(render).toHaveBeenCalledTimes(2)
231+
expect(render.mock.calls[1][0].values.foo).toBe('')
222232

223233
TestUtils.Simulate.change(input, { target: { value: 'abc' } })
224234

225-
expect(render).toHaveBeenCalledTimes(4)
226-
expect(render.mock.calls[3][0].values.foo).toBe('abc')
235+
expect(render).toHaveBeenCalledTimes(3)
236+
expect(render.mock.calls[2][0].values.foo).toBe('abc')
227237
})
228238

229239
it('should accept a format function prop', () => {
@@ -240,25 +250,24 @@ describe('Field', () => {
240250
)
241251

242252
expect(render).toHaveBeenCalled()
243-
// called twice due to field registration adding touched and visited values
244-
expect(render).toHaveBeenCalledTimes(2)
245-
expect(render.mock.calls[1][0].values.foo).toBeUndefined()
253+
expect(render).toHaveBeenCalledTimes(1)
254+
expect(render.mock.calls[0][0].values.foo).toBeUndefined()
246255

247256
expect(format).toHaveBeenCalled()
248-
expect(format).toHaveBeenCalledTimes(2)
257+
expect(format).toHaveBeenCalledTimes(1)
249258
expect(format.mock.calls[0]).toEqual([undefined, 'foo'])
250259

251260
expect(renderInput).toHaveBeenCalled()
252-
expect(renderInput).toHaveBeenCalledTimes(2)
261+
expect(renderInput).toHaveBeenCalledTimes(1)
253262
expect(renderInput.mock.calls[0][0].input.value).toBe('format.undefined')
254263

255264
renderInput.mock.calls[0][0].input.onChange('bar')
256265

257-
expect(format).toHaveBeenCalledTimes(4)
258-
expect(format.mock.calls[3]).toEqual(['bar', 'foo'])
266+
expect(format).toHaveBeenCalledTimes(3)
267+
expect(format.mock.calls[2]).toEqual(['bar', 'foo'])
259268

260-
expect(renderInput).toHaveBeenCalledTimes(4)
261-
expect(renderInput.mock.calls[3][0].input.value).toBe('format.bar')
269+
expect(renderInput).toHaveBeenCalledTimes(3)
270+
expect(renderInput.mock.calls[2][0].input.value).toBe('format.bar')
262271
})
263272

264273
it('should accept a null format prop to preserve undefined values', () => {
@@ -276,18 +285,17 @@ describe('Field', () => {
276285
)
277286

278287
expect(render).toHaveBeenCalled()
279-
// called twice due to field registration adding touched and visited values
280-
expect(render).toHaveBeenCalledTimes(2)
281-
expect(render.mock.calls[1][0].values.foo).toBeUndefined()
288+
expect(render).toHaveBeenCalledTimes(1)
289+
expect(render.mock.calls[0][0].values.foo).toBeUndefined()
282290

283291
expect(renderInput).toHaveBeenCalled()
284-
expect(renderInput).toHaveBeenCalledTimes(2)
285-
expect(renderInput.mock.calls[1][0].input.value).toBeUndefined()
292+
expect(renderInput).toHaveBeenCalledTimes(1)
293+
expect(renderInput.mock.calls[0][0].input.value).toBeUndefined()
286294

287295
renderInput.mock.calls[0][0].input.onChange('bar')
288296

289-
expect(renderInput).toHaveBeenCalledTimes(4)
290-
expect(renderInput.mock.calls[3][0].input.value).toBe('bar')
297+
expect(renderInput).toHaveBeenCalledTimes(3)
298+
expect(renderInput.mock.calls[2][0].input.value).toBe('bar')
291299
})
292300

293301
it('should provide a value of [] when empty on a select multiple', () => {
@@ -322,18 +330,18 @@ describe('Field', () => {
322330
)
323331

324332
expect(renderInput).toHaveBeenCalled()
325-
expect(renderInput).toHaveBeenCalledTimes(2)
326-
expect(renderInput.mock.calls[1][0].input.value).toBe('')
333+
expect(renderInput).toHaveBeenCalledTimes(1)
334+
expect(renderInput.mock.calls[0][0].input.value).toBe('')
327335

328336
renderInput.mock.calls[0][0].input.onChange('bar')
329337

330-
expect(renderInput).toHaveBeenCalledTimes(4)
331-
expect(renderInput.mock.calls[3][0].input.value).toBe('bar')
338+
expect(renderInput).toHaveBeenCalledTimes(3)
339+
expect(renderInput.mock.calls[2][0].input.value).toBe('bar')
332340

333341
renderInput.mock.calls[1][0].input.onChange(null)
334342

335-
expect(renderInput).toHaveBeenCalledTimes(6)
336-
expect(renderInput.mock.calls[5][0].input.value).toBe('')
343+
expect(renderInput).toHaveBeenCalledTimes(5)
344+
expect(renderInput.mock.calls[4][0].input.value).toBe('')
337345
})
338346

339347
it('should optionally allow null values', () => {
@@ -355,18 +363,18 @@ describe('Field', () => {
355363

356364
expect(render).toHaveBeenCalled()
357365
// called twice due to field registration adding touched and visited values
358-
expect(render).toHaveBeenCalledTimes(2)
359-
expect(render.mock.calls[1][0].values.foo).toBeUndefined()
366+
expect(render).toHaveBeenCalledTimes(1)
367+
expect(render.mock.calls[0][0].values.foo).toBeUndefined()
360368

361369
renderInput.mock.calls[0][0].input.onChange('bar')
362370

363-
expect(render).toHaveBeenCalledTimes(3)
364-
expect(render.mock.calls[2][0].values.foo).toBe('bar')
371+
expect(render).toHaveBeenCalledTimes(2)
372+
expect(render.mock.calls[1][0].values.foo).toBe('bar')
365373

366374
renderInput.mock.calls[0][0].input.onChange(null)
367375

368-
expect(render).toHaveBeenCalledTimes(4)
369-
expect(render.mock.calls[3][0].values.foo).toBe(null)
376+
expect(render).toHaveBeenCalledTimes(3)
377+
expect(render.mock.calls[2][0].values.foo).toBe(null)
370378
})
371379

372380
it('should not let validate prop bleed through', () => {
@@ -404,8 +412,8 @@ describe('Field', () => {
404412

405413
expect(input).toHaveBeenCalled()
406414
// called twice due to field registration adding touched and visited values
407-
expect(input).toHaveBeenCalledTimes(2)
408-
expect(input.mock.calls[1][0].subscription).toBeUndefined()
415+
expect(input).toHaveBeenCalledTimes(1)
416+
expect(input.mock.calls[0][0].subscription).toBeUndefined()
409417
})
410418

411419
it('should allow changing field-level validation function', () => {
@@ -485,9 +493,8 @@ describe('Field', () => {
485493
)
486494

487495
expect(render).toHaveBeenCalled()
488-
// called twice due to field registration adding touched and visited values
489-
expect(render).toHaveBeenCalledTimes(2)
490-
expect(render.mock.calls[1][0].values.foo).toBe(true)
496+
expect(render).toHaveBeenCalledTimes(1)
497+
expect(render.mock.calls[0][0].values.foo).toBe(true)
491498

492499
const input = TestUtils.findRenderedDOMComponentWithTag(dom, 'input')
493500
expect(input.checked).toBe(true)
@@ -510,9 +517,8 @@ describe('Field', () => {
510517
)
511518

512519
expect(render).toHaveBeenCalled()
513-
// called twice due to field registration adding touched and visited values
514-
expect(render).toHaveBeenCalledTimes(2)
515-
expect(render.mock.calls[1][0].values.foo).toEqual(['a', 'b', 'c'])
520+
expect(render).toHaveBeenCalledTimes(1)
521+
expect(render.mock.calls[0][0].values.foo).toEqual(['a', 'b', 'c'])
516522

517523
const inputs = TestUtils.scryRenderedDOMComponentsWithTag(dom, 'input')
518524
expect(inputs[0].checked).toBe(true)
@@ -538,17 +544,16 @@ describe('Field', () => {
538544
)
539545

540546
expect(render).toHaveBeenCalled()
541-
// called twice due to field registration adding touched and visited values
542-
expect(render).toHaveBeenCalledTimes(2)
543-
expect(render.mock.calls[1][0].values.foo).toEqual(['a', 'b', 'c'])
547+
expect(render).toHaveBeenCalledTimes(1)
548+
expect(render.mock.calls[0][0].values.foo).toEqual(['a', 'b', 'c'])
544549

545550
expect(checkboxA).toHaveBeenCalled()
546-
expect(checkboxA).toHaveBeenCalledTimes(2)
547-
expect(checkboxA.mock.calls[1][0].input.checked).toBe(true)
551+
expect(checkboxA).toHaveBeenCalledTimes(1)
552+
expect(checkboxA.mock.calls[0][0].input.checked).toBe(true)
548553

549554
expect(checkboxD).toHaveBeenCalled()
550-
expect(checkboxD).toHaveBeenCalledTimes(2)
551-
expect(checkboxD.mock.calls[1][0].input.checked).toBe(false)
555+
expect(checkboxD).toHaveBeenCalledTimes(1)
556+
expect(checkboxD.mock.calls[0][0].input.checked).toBe(false)
552557
})
553558

554559
it('should render radio buttons with checked prop', () => {
@@ -568,9 +573,8 @@ describe('Field', () => {
568573
)
569574

570575
expect(render).toHaveBeenCalled()
571-
// called twice due to field registration adding touched and visited values
572-
expect(render).toHaveBeenCalledTimes(2)
573-
expect(render.mock.calls[1][0].values.foo).toBe('Bar')
576+
expect(render).toHaveBeenCalledTimes(1)
577+
expect(render.mock.calls[0][0].values.foo).toBe('Bar')
574578

575579
const [barInput, bazInput] = TestUtils.scryRenderedDOMComponentsWithTag(
576580
dom,

0 commit comments

Comments
 (0)