2
2
import React from 'react' ;
3
3
import { mount } from 'enzyme' ;
4
4
import Form , { FormInstance } from '../src' ;
5
- import InfoField from './common/InfoField' ;
5
+ import InfoField , { Input } from './common/InfoField' ;
6
6
import timeout from './common/timeout' ;
7
7
8
8
describe ( 'Form.Preserve' , ( ) => {
@@ -99,7 +99,7 @@ describe('Form.Preserve', () => {
99
99
expect ( onFinish ) . toHaveBeenCalledWith ( { test : 'light' } ) ;
100
100
} ) ;
101
101
102
- it ( 'form perishable but field !perishable ' , async ( ) => {
102
+ it ( 'form preserve but field !preserve ' , async ( ) => {
103
103
const onFinish = jest . fn ( ) ;
104
104
const wrapper = mount (
105
105
< Demo removeField = { false } onFinish = { onFinish } formPreserve = { false } fieldPreserve /> ,
@@ -117,67 +117,173 @@ describe('Form.Preserve', () => {
117
117
await matchTest ( false , { keep : 233 , remove : 666 } ) ;
118
118
} ) ;
119
119
120
- it ( 'form perishable should not crash Form.List' , async ( ) => {
121
- let form : FormInstance ;
120
+ describe ( 'Form.List' , ( ) => {
121
+ it ( 'form preserve should not crash' , async ( ) => {
122
+ let form : FormInstance ;
122
123
123
- const wrapper = mount (
124
- < Form
125
- initialValues = { { list : [ 'light' , 'bamboo' , 'little' ] } }
126
- preserve = { false }
127
- ref = { instance => {
128
- form = instance ;
129
- } }
130
- >
131
- < Form . List name = "list" >
132
- { ( fields , { remove } ) => {
133
- return (
134
- < div >
124
+ const wrapper = mount (
125
+ < Form
126
+ initialValues = { { list : [ 'light' , 'bamboo' , 'little' ] } }
127
+ preserve = { false }
128
+ ref = { instance => {
129
+ form = instance ;
130
+ } }
131
+ >
132
+ < Form . List name = "list" >
133
+ { ( fields , { remove } ) => {
134
+ return (
135
+ < div >
136
+ { fields . map ( field => (
137
+ < Form . Field { ...field } >
138
+ < input />
139
+ </ Form . Field >
140
+ ) ) }
141
+ < button
142
+ type = "button"
143
+ onClick = { ( ) => {
144
+ remove ( 0 ) ;
145
+ } }
146
+ />
147
+ </ div >
148
+ ) ;
149
+ } }
150
+ </ Form . List >
151
+ </ Form > ,
152
+ ) ;
153
+
154
+ wrapper . find ( 'button' ) . simulate ( 'click' ) ;
155
+ wrapper . update ( ) ;
156
+
157
+ expect ( form . getFieldsValue ( ) ) . toEqual ( { list : [ 'bamboo' , 'little' ] } ) ;
158
+ } ) ;
159
+
160
+ it ( 'warning when Form.List use preserve' , ( ) => {
161
+ const errorSpy = jest . spyOn ( console , 'error' ) . mockImplementation ( ( ) => { } ) ;
162
+ let form : FormInstance ;
163
+
164
+ const wrapper = mount (
165
+ < Form
166
+ ref = { instance => {
167
+ form = instance ;
168
+ } }
169
+ initialValues = { { list : [ 'bamboo' ] } }
170
+ >
171
+ < Form . List name = "list" >
172
+ { ( fields , { remove } ) => (
173
+ < >
135
174
{ fields . map ( field => (
136
- < Form . Field { ...field } >
175
+ < Form . Field { ...field } preserve = { false } >
137
176
< input />
138
177
</ Form . Field >
139
178
) ) }
140
179
< button
141
- type = "button"
142
180
onClick = { ( ) => {
143
181
remove ( 0 ) ;
144
182
} }
145
- />
146
- </ div >
147
- ) ;
183
+ >
184
+ Remove
185
+ </ button >
186
+ </ >
187
+ ) }
188
+ </ Form . List >
189
+ </ Form > ,
190
+ ) ;
191
+
192
+ expect ( errorSpy ) . toHaveBeenCalledWith (
193
+ 'Warning: `preserve` should not apply on Form.List fields.' ,
194
+ ) ;
195
+
196
+ errorSpy . mockRestore ( ) ;
197
+
198
+ // Remove should not work
199
+ wrapper . find ( 'button' ) . simulate ( 'click' ) ;
200
+ expect ( form . getFieldsValue ( ) ) . toEqual ( { list : [ ] } ) ;
201
+ } ) ;
202
+
203
+ it ( 'multiple level field can use preserve' , async ( ) => {
204
+ let form : FormInstance ;
205
+
206
+ const wrapper = mount (
207
+ < Form
208
+ initialValues = { { list : [ { type : 'light' } ] } }
209
+ preserve = { false }
210
+ ref = { instance => {
211
+ form = instance ;
148
212
} }
149
- </ Form . List >
150
- </ Form > ,
151
- ) ;
213
+ >
214
+ < Form . List name = "list" >
215
+ { ( fields , { remove } ) => {
216
+ return (
217
+ < >
218
+ { fields . map ( field => (
219
+ < div key = { field . key } >
220
+ < Form . Field { ...field } name = { [ field . name , 'type' ] } >
221
+ < Input />
222
+ </ Form . Field >
223
+ < Form . Field shouldUpdate >
224
+ { ( _ , __ , { getFieldValue } ) =>
225
+ getFieldValue ( [ 'list' , field . name , 'type' ] ) === 'light' ? (
226
+ < Form . Field
227
+ { ...field }
228
+ key = "light"
229
+ preserve = { false }
230
+ name = { [ field . name , 'light' ] }
231
+ >
232
+ < Input />
233
+ </ Form . Field >
234
+ ) : (
235
+ < Form . Field
236
+ { ...field }
237
+ key = "bamboo"
238
+ preserve = { false }
239
+ name = { [ field . name , 'bamboo' ] }
240
+ >
241
+ < Input />
242
+ </ Form . Field >
243
+ )
244
+ }
245
+ </ Form . Field >
246
+ </ div >
247
+ ) ) }
248
+ < button
249
+ onClick = { ( ) => {
250
+ remove ( 0 ) ;
251
+ } }
252
+ >
253
+ Remove
254
+ </ button >
255
+ </ >
256
+ ) ;
257
+ } }
258
+ </ Form . List >
259
+ </ Form > ,
260
+ ) ;
152
261
153
- wrapper . find ( 'button' ) . simulate ( 'click' ) ;
154
- wrapper . update ( ) ;
262
+ // Change light value
263
+ wrapper
264
+ . find ( 'input' )
265
+ . last ( )
266
+ . simulate ( 'change' , { target : { value : '1128' } } ) ;
155
267
156
- expect ( form . getFieldsValue ( ) ) . toEqual ( { list : [ 'bamboo' , 'little' ] } ) ;
157
- } ) ;
268
+ // Change type
269
+ wrapper
270
+ . find ( 'input' )
271
+ . first ( )
272
+ . simulate ( 'change' , { target : { value : 'bamboo' } } ) ;
158
273
159
- it ( 'warning when Form.List use preserve' , ( ) => {
160
- const errorSpy = jest . spyOn ( console , 'error' ) . mockImplementation ( ( ) => { } ) ;
161
-
162
- mount (
163
- < Form initialValues = { { list : [ 'bamboo' ] } } >
164
- < Form . List name = "list" >
165
- { fields =>
166
- fields . map ( field => (
167
- < Form . Field { ...field } preserve = { false } >
168
- < input />
169
- </ Form . Field >
170
- ) )
171
- }
172
- </ Form . List >
173
- </ Form > ,
174
- ) ;
274
+ // Change bamboo value
275
+ wrapper
276
+ . find ( 'input' )
277
+ . last ( )
278
+ . simulate ( 'change' , { target : { value : '903' } } ) ;
175
279
176
- expect ( errorSpy ) . toHaveBeenCalledWith (
177
- 'Warning: `preserve` should not apply on Form.List fields.' ,
178
- ) ;
280
+ expect ( form . getFieldsValue ( ) ) . toEqual ( { list : [ { type : 'bamboo' , bamboo : '903' } ] } ) ;
179
281
180
- errorSpy . mockRestore ( ) ;
282
+ // ============== Remove Test ==============
283
+ // Remove field
284
+ wrapper . find ( 'button' ) . simulate ( 'click' ) ;
285
+ expect ( form . getFieldsValue ( ) ) . toEqual ( { list : [ ] } ) ;
286
+ } ) ;
181
287
} ) ;
182
288
183
289
it ( 'nest render props should not clean full store' , ( ) => {
0 commit comments