@tanstack/solid-form 0.23.0 → 0.23.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanstack/solid-form",
|
|
3
|
-
"version": "0.23.
|
|
3
|
+
"version": "0.23.2",
|
|
4
4
|
"description": "Powerful, type-safe forms for Solid.",
|
|
5
5
|
"author": "tannerlinsley",
|
|
6
6
|
"license": "MIT",
|
|
7
|
-
"repository":
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "https://github.com/TanStack/form.git",
|
|
10
|
+
"directory": "packages/solid-form"
|
|
11
|
+
},
|
|
8
12
|
"homepage": "https://tanstack.com/form",
|
|
9
13
|
"funding": {
|
|
10
14
|
"type": "github",
|
|
@@ -17,6 +21,7 @@
|
|
|
17
21
|
],
|
|
18
22
|
"type": "module",
|
|
19
23
|
"types": "dist/index.d.ts",
|
|
24
|
+
"main": "dist/index.js",
|
|
20
25
|
"module": "dist/index.js",
|
|
21
26
|
"exports": {
|
|
22
27
|
".": {
|
|
@@ -37,8 +42,8 @@
|
|
|
37
42
|
"vite-plugin-solid": "^2.10.1"
|
|
38
43
|
},
|
|
39
44
|
"dependencies": {
|
|
40
|
-
"@tanstack/solid-store": "^0.
|
|
41
|
-
"@tanstack/form-core": "0.23.
|
|
45
|
+
"@tanstack/solid-store": "^0.5.0",
|
|
46
|
+
"@tanstack/form-core": "0.23.2"
|
|
42
47
|
},
|
|
43
48
|
"peerDependencies": {
|
|
44
49
|
"solid-js": "^1.6.0"
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { assertType, it } from 'vitest'
|
|
2
|
-
import { createForm } from '../createForm'
|
|
3
|
-
|
|
4
|
-
it('should type state.value properly', () => {
|
|
5
|
-
function Comp() {
|
|
6
|
-
const form = createForm(
|
|
7
|
-
() =>
|
|
8
|
-
({
|
|
9
|
-
defaultValues: {
|
|
10
|
-
firstName: 'test',
|
|
11
|
-
age: 84,
|
|
12
|
-
},
|
|
13
|
-
}) as const,
|
|
14
|
-
)
|
|
15
|
-
|
|
16
|
-
return (
|
|
17
|
-
<>
|
|
18
|
-
<form.Field
|
|
19
|
-
name="firstName"
|
|
20
|
-
children={(field) => {
|
|
21
|
-
assertType<'test'>(field().state.value)
|
|
22
|
-
return null
|
|
23
|
-
}}
|
|
24
|
-
/>
|
|
25
|
-
<form.Field
|
|
26
|
-
name="age"
|
|
27
|
-
children={(field) => {
|
|
28
|
-
assertType<84>(field().state.value)
|
|
29
|
-
return null
|
|
30
|
-
}}
|
|
31
|
-
/>
|
|
32
|
-
</>
|
|
33
|
-
)
|
|
34
|
-
}
|
|
35
|
-
})
|
|
36
|
-
|
|
37
|
-
it('should type onChange properly', () => {
|
|
38
|
-
function Comp() {
|
|
39
|
-
const form = createForm(
|
|
40
|
-
() =>
|
|
41
|
-
({
|
|
42
|
-
defaultValues: {
|
|
43
|
-
firstName: 'test',
|
|
44
|
-
age: 84,
|
|
45
|
-
},
|
|
46
|
-
}) as const,
|
|
47
|
-
)
|
|
48
|
-
|
|
49
|
-
return (
|
|
50
|
-
<>
|
|
51
|
-
<form.Field
|
|
52
|
-
name="firstName"
|
|
53
|
-
validators={{
|
|
54
|
-
onChange: ({ value }) => {
|
|
55
|
-
assertType<'test'>(value)
|
|
56
|
-
return null
|
|
57
|
-
},
|
|
58
|
-
}}
|
|
59
|
-
children={() => null}
|
|
60
|
-
/>
|
|
61
|
-
<form.Field
|
|
62
|
-
name="age"
|
|
63
|
-
validators={{
|
|
64
|
-
onChange: ({ value }) => {
|
|
65
|
-
assertType<84>(value)
|
|
66
|
-
return null
|
|
67
|
-
},
|
|
68
|
-
}}
|
|
69
|
-
children={() => null}
|
|
70
|
-
/>
|
|
71
|
-
</>
|
|
72
|
-
)
|
|
73
|
-
}
|
|
74
|
-
})
|
|
@@ -1,563 +0,0 @@
|
|
|
1
|
-
import { describe, expect, it, vi } from 'vitest'
|
|
2
|
-
import { render, waitFor } from '@solidjs/testing-library'
|
|
3
|
-
import userEvent from '@testing-library/user-event'
|
|
4
|
-
import '@testing-library/jest-dom/vitest'
|
|
5
|
-
import { Index, Show, createEffect } from 'solid-js'
|
|
6
|
-
import { createForm } from '../index'
|
|
7
|
-
import { sleep } from './utils'
|
|
8
|
-
|
|
9
|
-
const user = userEvent.setup()
|
|
10
|
-
|
|
11
|
-
describe('createField', () => {
|
|
12
|
-
it('should allow to set default value', () => {
|
|
13
|
-
type Person = {
|
|
14
|
-
firstName: string
|
|
15
|
-
lastName: string
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
function Comp() {
|
|
19
|
-
const form = createForm<Person>()
|
|
20
|
-
|
|
21
|
-
return (
|
|
22
|
-
<>
|
|
23
|
-
<form.Field
|
|
24
|
-
name="firstName"
|
|
25
|
-
defaultValue="FirstName"
|
|
26
|
-
children={(field) => {
|
|
27
|
-
return (
|
|
28
|
-
<input
|
|
29
|
-
data-testid="fieldinput"
|
|
30
|
-
value={field().state.value}
|
|
31
|
-
onBlur={field().handleBlur}
|
|
32
|
-
onInput={(e) => field().handleChange(e.currentTarget.value)}
|
|
33
|
-
/>
|
|
34
|
-
)
|
|
35
|
-
}}
|
|
36
|
-
/>
|
|
37
|
-
</>
|
|
38
|
-
)
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
const { getByTestId } = render(() => <Comp />)
|
|
42
|
-
const input = getByTestId('fieldinput')
|
|
43
|
-
expect(input).toHaveValue('FirstName')
|
|
44
|
-
})
|
|
45
|
-
|
|
46
|
-
it('should use field default value first', async () => {
|
|
47
|
-
type Person = {
|
|
48
|
-
firstName: string
|
|
49
|
-
lastName: string
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
function Comp() {
|
|
53
|
-
const form = createForm<Person>(() => ({
|
|
54
|
-
defaultValues: {
|
|
55
|
-
firstName: 'FirstName',
|
|
56
|
-
lastName: 'LastName',
|
|
57
|
-
},
|
|
58
|
-
}))
|
|
59
|
-
|
|
60
|
-
return (
|
|
61
|
-
<>
|
|
62
|
-
<form.Field
|
|
63
|
-
name="firstName"
|
|
64
|
-
defaultValue="otherName"
|
|
65
|
-
children={(field) => {
|
|
66
|
-
return (
|
|
67
|
-
<input
|
|
68
|
-
data-testid="fieldinput"
|
|
69
|
-
value={field().state.value}
|
|
70
|
-
onBlur={field().handleBlur}
|
|
71
|
-
onChange={(e) => field().handleChange(e.target.value)}
|
|
72
|
-
/>
|
|
73
|
-
)
|
|
74
|
-
}}
|
|
75
|
-
/>
|
|
76
|
-
</>
|
|
77
|
-
)
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
const { getByTestId } = render(() => <Comp />)
|
|
81
|
-
const input = getByTestId('fieldinput')
|
|
82
|
-
expect(input).toHaveValue('otherName')
|
|
83
|
-
})
|
|
84
|
-
|
|
85
|
-
it('should not validate on change if isTouched is false', async () => {
|
|
86
|
-
type Person = {
|
|
87
|
-
firstName: string
|
|
88
|
-
lastName: string
|
|
89
|
-
}
|
|
90
|
-
const error = 'Please enter a different value'
|
|
91
|
-
|
|
92
|
-
function Comp() {
|
|
93
|
-
const form = createForm<Person>()
|
|
94
|
-
|
|
95
|
-
return (
|
|
96
|
-
<>
|
|
97
|
-
<form.Field
|
|
98
|
-
name="firstName"
|
|
99
|
-
validators={{
|
|
100
|
-
onChange: ({ value }) =>
|
|
101
|
-
value.includes('other') ? error : undefined,
|
|
102
|
-
}}
|
|
103
|
-
children={(field) => (
|
|
104
|
-
<div>
|
|
105
|
-
<input
|
|
106
|
-
data-testid="fieldinput"
|
|
107
|
-
name={field().name}
|
|
108
|
-
value={field().state.value}
|
|
109
|
-
onBlur={field().handleBlur}
|
|
110
|
-
onInput={(e) => field().setValue(e.currentTarget.value)}
|
|
111
|
-
/>
|
|
112
|
-
<p>{field().getMeta().errors}</p>
|
|
113
|
-
</div>
|
|
114
|
-
)}
|
|
115
|
-
/>
|
|
116
|
-
</>
|
|
117
|
-
)
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
const { getByTestId, queryByText } = render(() => <Comp />)
|
|
121
|
-
const input = getByTestId('fieldinput')
|
|
122
|
-
await user.type(input, 'other')
|
|
123
|
-
expect(queryByText(error)).not.toBeInTheDocument()
|
|
124
|
-
})
|
|
125
|
-
|
|
126
|
-
it('should validate on change if isTouched is true', async () => {
|
|
127
|
-
type Person = {
|
|
128
|
-
firstName: string
|
|
129
|
-
lastName: string
|
|
130
|
-
}
|
|
131
|
-
const error = 'Please enter a different value'
|
|
132
|
-
|
|
133
|
-
function Comp() {
|
|
134
|
-
const form = createForm<Person>()
|
|
135
|
-
|
|
136
|
-
return (
|
|
137
|
-
<>
|
|
138
|
-
<form.Field
|
|
139
|
-
name="firstName"
|
|
140
|
-
defaultMeta={{ isTouched: true }}
|
|
141
|
-
validators={{
|
|
142
|
-
onChange: ({ value }) =>
|
|
143
|
-
value.includes('other') ? error : undefined,
|
|
144
|
-
}}
|
|
145
|
-
children={(field) => {
|
|
146
|
-
return (
|
|
147
|
-
<div>
|
|
148
|
-
<input
|
|
149
|
-
data-testid="fieldinput"
|
|
150
|
-
name={field().name}
|
|
151
|
-
value={field().state.value}
|
|
152
|
-
onBlur={field().handleBlur}
|
|
153
|
-
onInput={(e) => field().setValue(e.currentTarget.value)}
|
|
154
|
-
/>
|
|
155
|
-
<p>{field().getMeta().errorMap.onChange}</p>
|
|
156
|
-
</div>
|
|
157
|
-
)
|
|
158
|
-
}}
|
|
159
|
-
/>
|
|
160
|
-
</>
|
|
161
|
-
)
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
const { getByTestId, getByText, queryByText } = render(() => <Comp />)
|
|
165
|
-
const input = getByTestId('fieldinput')
|
|
166
|
-
expect(queryByText(error)).not.toBeInTheDocument()
|
|
167
|
-
await user.type(input, 'other')
|
|
168
|
-
expect(getByText(error)).toBeInTheDocument()
|
|
169
|
-
})
|
|
170
|
-
|
|
171
|
-
it('should validate on change and on blur', async () => {
|
|
172
|
-
type Person = {
|
|
173
|
-
firstName: string
|
|
174
|
-
lastName: string
|
|
175
|
-
}
|
|
176
|
-
const onChangeError = 'Please enter a different value (onChangeError)'
|
|
177
|
-
const onBlurError = 'Please enter a different value (onBlurError)'
|
|
178
|
-
|
|
179
|
-
function Comp() {
|
|
180
|
-
const form = createForm<Person>()
|
|
181
|
-
|
|
182
|
-
return (
|
|
183
|
-
<>
|
|
184
|
-
<form.Field
|
|
185
|
-
name="firstName"
|
|
186
|
-
defaultMeta={{ isTouched: true }}
|
|
187
|
-
validators={{
|
|
188
|
-
onChange: ({ value }) =>
|
|
189
|
-
value.includes('other') ? onChangeError : undefined,
|
|
190
|
-
onBlur: ({ value }) =>
|
|
191
|
-
value.includes('other') ? onBlurError : undefined,
|
|
192
|
-
}}
|
|
193
|
-
children={(field) => (
|
|
194
|
-
<div>
|
|
195
|
-
<input
|
|
196
|
-
data-testid="fieldinput"
|
|
197
|
-
name={field().name}
|
|
198
|
-
value={field().state.value}
|
|
199
|
-
onBlur={field().handleBlur}
|
|
200
|
-
onInput={(e) => field().handleChange(e.currentTarget.value)}
|
|
201
|
-
/>
|
|
202
|
-
<p>{field().getMeta().errorMap.onChange}</p>
|
|
203
|
-
<p>{field().getMeta().errorMap.onBlur}</p>
|
|
204
|
-
</div>
|
|
205
|
-
)}
|
|
206
|
-
/>
|
|
207
|
-
</>
|
|
208
|
-
)
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
const { getByTestId, getByText, queryByText } = render(() => <Comp />)
|
|
212
|
-
const input = getByTestId('fieldinput')
|
|
213
|
-
expect(queryByText(onChangeError)).not.toBeInTheDocument()
|
|
214
|
-
expect(queryByText(onBlurError)).not.toBeInTheDocument()
|
|
215
|
-
await user.type(input, 'other')
|
|
216
|
-
expect(getByText(onChangeError)).toBeInTheDocument()
|
|
217
|
-
await user.click(document.body)
|
|
218
|
-
expect(queryByText(onBlurError)).toBeInTheDocument()
|
|
219
|
-
})
|
|
220
|
-
|
|
221
|
-
it('should validate async on change', async () => {
|
|
222
|
-
type Person = {
|
|
223
|
-
firstName: string
|
|
224
|
-
lastName: string
|
|
225
|
-
}
|
|
226
|
-
const error = 'Please enter a different value'
|
|
227
|
-
|
|
228
|
-
function Comp() {
|
|
229
|
-
const form = createForm<Person>()
|
|
230
|
-
|
|
231
|
-
return (
|
|
232
|
-
<>
|
|
233
|
-
<form.Field
|
|
234
|
-
name="firstName"
|
|
235
|
-
defaultMeta={{ isTouched: true }}
|
|
236
|
-
validators={{
|
|
237
|
-
onChangeAsync: async () => {
|
|
238
|
-
await sleep(10)
|
|
239
|
-
return error
|
|
240
|
-
},
|
|
241
|
-
}}
|
|
242
|
-
children={(field) => (
|
|
243
|
-
<div>
|
|
244
|
-
<input
|
|
245
|
-
data-testid="fieldinput"
|
|
246
|
-
name={field().name}
|
|
247
|
-
value={field().state.value}
|
|
248
|
-
onBlur={field().handleBlur}
|
|
249
|
-
onInput={(e) => field().handleChange(e.currentTarget.value)}
|
|
250
|
-
/>
|
|
251
|
-
<p>{field().getMeta().errorMap.onChange}</p>
|
|
252
|
-
</div>
|
|
253
|
-
)}
|
|
254
|
-
/>
|
|
255
|
-
</>
|
|
256
|
-
)
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
const { getByTestId, getByText, queryByText } = render(() => <Comp />)
|
|
260
|
-
const input = getByTestId('fieldinput')
|
|
261
|
-
expect(queryByText(error)).not.toBeInTheDocument()
|
|
262
|
-
await user.type(input, 'other')
|
|
263
|
-
await waitFor(() => getByText(error))
|
|
264
|
-
expect(getByText(error)).toBeInTheDocument()
|
|
265
|
-
})
|
|
266
|
-
|
|
267
|
-
it('should validate async on change and async on blur', async () => {
|
|
268
|
-
type Person = {
|
|
269
|
-
firstName: string
|
|
270
|
-
lastName: string
|
|
271
|
-
}
|
|
272
|
-
const onChangeError = 'Please enter a different value (onChangeError)'
|
|
273
|
-
const onBlurError = 'Please enter a different value (onBlurError)'
|
|
274
|
-
|
|
275
|
-
function Comp() {
|
|
276
|
-
const form = createForm<Person>()
|
|
277
|
-
|
|
278
|
-
return (
|
|
279
|
-
<>
|
|
280
|
-
<form.Field
|
|
281
|
-
name="firstName"
|
|
282
|
-
defaultMeta={{ isTouched: true }}
|
|
283
|
-
validators={{
|
|
284
|
-
onChangeAsync: async () => {
|
|
285
|
-
await sleep(10)
|
|
286
|
-
return onChangeError
|
|
287
|
-
},
|
|
288
|
-
onBlurAsync: async () => {
|
|
289
|
-
await sleep(10)
|
|
290
|
-
return onBlurError
|
|
291
|
-
},
|
|
292
|
-
}}
|
|
293
|
-
children={(field) => (
|
|
294
|
-
<div>
|
|
295
|
-
<input
|
|
296
|
-
data-testid="fieldinput"
|
|
297
|
-
name={field().name}
|
|
298
|
-
value={field().state.value}
|
|
299
|
-
onBlur={field().handleBlur}
|
|
300
|
-
onInput={(e) => field().handleChange(e.currentTarget.value)}
|
|
301
|
-
/>
|
|
302
|
-
<p>{field().getMeta().errorMap?.onChange}</p>
|
|
303
|
-
<p>{field().getMeta().errorMap?.onBlur}</p>
|
|
304
|
-
</div>
|
|
305
|
-
)}
|
|
306
|
-
/>
|
|
307
|
-
</>
|
|
308
|
-
)
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
const { getByTestId, getByText, queryByText } = render(() => <Comp />)
|
|
312
|
-
const input = getByTestId('fieldinput')
|
|
313
|
-
|
|
314
|
-
expect(queryByText(onChangeError)).not.toBeInTheDocument()
|
|
315
|
-
expect(queryByText(onBlurError)).not.toBeInTheDocument()
|
|
316
|
-
await user.type(input, 'other')
|
|
317
|
-
await waitFor(() => getByText(onChangeError))
|
|
318
|
-
expect(getByText(onChangeError)).toBeInTheDocument()
|
|
319
|
-
await user.click(document.body)
|
|
320
|
-
await waitFor(() => getByText(onBlurError))
|
|
321
|
-
expect(getByText(onBlurError)).toBeInTheDocument()
|
|
322
|
-
})
|
|
323
|
-
|
|
324
|
-
it('should validate async on change with debounce', async () => {
|
|
325
|
-
type Person = {
|
|
326
|
-
firstName: string
|
|
327
|
-
lastName: string
|
|
328
|
-
}
|
|
329
|
-
const mockFn = vi.fn()
|
|
330
|
-
const error = 'Please enter a different value'
|
|
331
|
-
|
|
332
|
-
function Comp() {
|
|
333
|
-
const form = createForm<Person>()
|
|
334
|
-
|
|
335
|
-
return (
|
|
336
|
-
<>
|
|
337
|
-
<form.Field
|
|
338
|
-
name="firstName"
|
|
339
|
-
defaultMeta={{ isTouched: true }}
|
|
340
|
-
validators={{
|
|
341
|
-
onChangeAsyncDebounceMs: 100,
|
|
342
|
-
onChangeAsync: async () => {
|
|
343
|
-
mockFn()
|
|
344
|
-
await sleep(10)
|
|
345
|
-
return error
|
|
346
|
-
},
|
|
347
|
-
}}
|
|
348
|
-
children={(field) => (
|
|
349
|
-
<div>
|
|
350
|
-
<input
|
|
351
|
-
data-testid="fieldinput"
|
|
352
|
-
name={field().name}
|
|
353
|
-
value={field().state.value}
|
|
354
|
-
onBlur={field().handleBlur}
|
|
355
|
-
onInput={(e) => field().handleChange(e.currentTarget.value)}
|
|
356
|
-
/>
|
|
357
|
-
<p>{field().getMeta().errors}</p>
|
|
358
|
-
</div>
|
|
359
|
-
)}
|
|
360
|
-
/>
|
|
361
|
-
</>
|
|
362
|
-
)
|
|
363
|
-
}
|
|
364
|
-
|
|
365
|
-
const { getByTestId, getByText } = render(() => <Comp />)
|
|
366
|
-
const input = getByTestId('fieldinput')
|
|
367
|
-
await user.type(input, 'other')
|
|
368
|
-
// mockFn will have been called 5 times without onChangeAsyncDebounceMs
|
|
369
|
-
expect(mockFn).toHaveBeenCalledTimes(0)
|
|
370
|
-
await waitFor(() => getByText(error))
|
|
371
|
-
expect(getByText(error)).toBeInTheDocument()
|
|
372
|
-
})
|
|
373
|
-
|
|
374
|
-
it('should handle arrays with primitive values', async () => {
|
|
375
|
-
const fn = vi.fn()
|
|
376
|
-
|
|
377
|
-
function Comp() {
|
|
378
|
-
const form = createForm(() => ({
|
|
379
|
-
defaultValues: {
|
|
380
|
-
people: [] as Array<string>,
|
|
381
|
-
},
|
|
382
|
-
onSubmit: ({ value }) => fn(value),
|
|
383
|
-
}))
|
|
384
|
-
return (
|
|
385
|
-
<div>
|
|
386
|
-
<form
|
|
387
|
-
onSubmit={(e) => {
|
|
388
|
-
e.preventDefault()
|
|
389
|
-
e.stopPropagation()
|
|
390
|
-
form.handleSubmit()
|
|
391
|
-
}}
|
|
392
|
-
>
|
|
393
|
-
<form.Field name="people">
|
|
394
|
-
{(field) => (
|
|
395
|
-
<div>
|
|
396
|
-
<Show when={field().state.value.length > 0}>
|
|
397
|
-
{/* Do not change this to For or the test will fail */}
|
|
398
|
-
<Index each={field().state.value}>
|
|
399
|
-
{(_, i) => {
|
|
400
|
-
return (
|
|
401
|
-
<form.Field name={`people[${i}]`}>
|
|
402
|
-
{(subField) => (
|
|
403
|
-
<div>
|
|
404
|
-
<label>
|
|
405
|
-
<div>Name for person {i}</div>
|
|
406
|
-
<input
|
|
407
|
-
value={subField().state.value}
|
|
408
|
-
onInput={(e) => {
|
|
409
|
-
subField().handleChange(
|
|
410
|
-
e.currentTarget.value,
|
|
411
|
-
)
|
|
412
|
-
}}
|
|
413
|
-
/>
|
|
414
|
-
</label>
|
|
415
|
-
<button
|
|
416
|
-
onClick={() => field().removeValue(i)}
|
|
417
|
-
type="button"
|
|
418
|
-
>
|
|
419
|
-
Remove person {i}
|
|
420
|
-
</button>
|
|
421
|
-
</div>
|
|
422
|
-
)}
|
|
423
|
-
</form.Field>
|
|
424
|
-
)
|
|
425
|
-
}}
|
|
426
|
-
</Index>
|
|
427
|
-
</Show>
|
|
428
|
-
|
|
429
|
-
<button onClick={() => field().pushValue('')} type="button">
|
|
430
|
-
Add person
|
|
431
|
-
</button>
|
|
432
|
-
</div>
|
|
433
|
-
)}
|
|
434
|
-
</form.Field>
|
|
435
|
-
<button type="submit">Submit</button>
|
|
436
|
-
</form>
|
|
437
|
-
</div>
|
|
438
|
-
)
|
|
439
|
-
}
|
|
440
|
-
|
|
441
|
-
const { getByText, findByLabelText, queryByText, findByText } = render(
|
|
442
|
-
() => <Comp />,
|
|
443
|
-
)
|
|
444
|
-
|
|
445
|
-
expect(queryByText('Name for person 0')).not.toBeInTheDocument()
|
|
446
|
-
expect(queryByText('Name for person 1')).not.toBeInTheDocument()
|
|
447
|
-
await user.click(getByText('Add person'))
|
|
448
|
-
const input = await findByLabelText('Name for person 0')
|
|
449
|
-
expect(input).toBeInTheDocument()
|
|
450
|
-
await user.type(input, 'John')
|
|
451
|
-
|
|
452
|
-
await user.click(getByText('Add person'))
|
|
453
|
-
const input2 = await findByLabelText('Name for person 1')
|
|
454
|
-
expect(input).toBeInTheDocument()
|
|
455
|
-
await user.type(input2, 'Jack')
|
|
456
|
-
|
|
457
|
-
expect(queryByText('Name for person 0')).toBeInTheDocument()
|
|
458
|
-
expect(queryByText('Name for person 1')).toBeInTheDocument()
|
|
459
|
-
await user.click(getByText('Remove person 1'))
|
|
460
|
-
expect(queryByText('Name for person 0')).toBeInTheDocument()
|
|
461
|
-
expect(queryByText('Name for person 1')).not.toBeInTheDocument()
|
|
462
|
-
|
|
463
|
-
await user.click(await findByText('Submit'))
|
|
464
|
-
expect(fn).toHaveBeenCalledWith({ people: ['John'] })
|
|
465
|
-
})
|
|
466
|
-
|
|
467
|
-
it('should handle arrays with subvalues', async () => {
|
|
468
|
-
const fn = vi.fn()
|
|
469
|
-
|
|
470
|
-
function Comp() {
|
|
471
|
-
const form = createForm(() => ({
|
|
472
|
-
defaultValues: {
|
|
473
|
-
people: [] as Array<{ age: number; name: string }>,
|
|
474
|
-
},
|
|
475
|
-
onSubmit: ({ value }) => fn(value),
|
|
476
|
-
}))
|
|
477
|
-
|
|
478
|
-
return (
|
|
479
|
-
<div>
|
|
480
|
-
<form
|
|
481
|
-
onSubmit={(e) => {
|
|
482
|
-
e.preventDefault()
|
|
483
|
-
e.stopPropagation()
|
|
484
|
-
form.handleSubmit()
|
|
485
|
-
}}
|
|
486
|
-
>
|
|
487
|
-
<form.Field name="people">
|
|
488
|
-
{(field) => (
|
|
489
|
-
<div>
|
|
490
|
-
<Show when={field().state.value.length > 0}>
|
|
491
|
-
{/* Do not change this to For or the test will fail */}
|
|
492
|
-
<Index each={field().state.value}>
|
|
493
|
-
{(_, i) => {
|
|
494
|
-
return (
|
|
495
|
-
<form.Field name={`people[${i}].name`}>
|
|
496
|
-
{(subField) => (
|
|
497
|
-
<div>
|
|
498
|
-
<label>
|
|
499
|
-
<div>Name for person {i}</div>
|
|
500
|
-
<input
|
|
501
|
-
value={subField().state.value}
|
|
502
|
-
onInput={(e) => {
|
|
503
|
-
subField().handleChange(
|
|
504
|
-
e.currentTarget.value,
|
|
505
|
-
)
|
|
506
|
-
}}
|
|
507
|
-
/>
|
|
508
|
-
</label>
|
|
509
|
-
<button
|
|
510
|
-
onClick={() => field().removeValue(i)}
|
|
511
|
-
type="button"
|
|
512
|
-
>
|
|
513
|
-
Remove person {i}
|
|
514
|
-
</button>
|
|
515
|
-
</div>
|
|
516
|
-
)}
|
|
517
|
-
</form.Field>
|
|
518
|
-
)
|
|
519
|
-
}}
|
|
520
|
-
</Index>
|
|
521
|
-
</Show>
|
|
522
|
-
|
|
523
|
-
<button
|
|
524
|
-
onClick={() => field().pushValue({ name: '', age: 0 })}
|
|
525
|
-
type="button"
|
|
526
|
-
>
|
|
527
|
-
Add person
|
|
528
|
-
</button>
|
|
529
|
-
</div>
|
|
530
|
-
)}
|
|
531
|
-
</form.Field>
|
|
532
|
-
<button type="submit">Submit</button>
|
|
533
|
-
</form>
|
|
534
|
-
</div>
|
|
535
|
-
)
|
|
536
|
-
}
|
|
537
|
-
|
|
538
|
-
const { getByText, findByLabelText, queryByText, findByText } = render(
|
|
539
|
-
() => <Comp />,
|
|
540
|
-
)
|
|
541
|
-
|
|
542
|
-
expect(queryByText('Name for person 0')).not.toBeInTheDocument()
|
|
543
|
-
expect(queryByText('Name for person 1')).not.toBeInTheDocument()
|
|
544
|
-
await user.click(getByText('Add person'))
|
|
545
|
-
const input = await findByLabelText('Name for person 0')
|
|
546
|
-
expect(input).toBeInTheDocument()
|
|
547
|
-
await user.type(input, 'John')
|
|
548
|
-
|
|
549
|
-
await user.click(getByText('Add person'))
|
|
550
|
-
const input2 = await findByLabelText('Name for person 1')
|
|
551
|
-
expect(input).toBeInTheDocument()
|
|
552
|
-
await user.type(input2, 'Jack')
|
|
553
|
-
|
|
554
|
-
expect(queryByText('Name for person 0')).toBeInTheDocument()
|
|
555
|
-
expect(queryByText('Name for person 1')).toBeInTheDocument()
|
|
556
|
-
await user.click(getByText('Remove person 1'))
|
|
557
|
-
expect(queryByText('Name for person 0')).toBeInTheDocument()
|
|
558
|
-
expect(queryByText('Name for person 1')).not.toBeInTheDocument()
|
|
559
|
-
|
|
560
|
-
await user.click(await findByText('Submit'))
|
|
561
|
-
expect(fn).toHaveBeenCalledWith({ people: [{ name: 'John', age: 0 }] })
|
|
562
|
-
})
|
|
563
|
-
})
|
|
@@ -1,466 +0,0 @@
|
|
|
1
|
-
import { describe, expect, it, vi } from 'vitest'
|
|
2
|
-
import { render, screen, waitFor } from '@solidjs/testing-library'
|
|
3
|
-
import userEvent from '@testing-library/user-event'
|
|
4
|
-
import { Show, createSignal, onCleanup } from 'solid-js'
|
|
5
|
-
import { createForm } from '../index'
|
|
6
|
-
import { sleep } from './utils'
|
|
7
|
-
import type { ValidationErrorMap } from '@tanstack/form-core'
|
|
8
|
-
|
|
9
|
-
const user = userEvent.setup()
|
|
10
|
-
|
|
11
|
-
describe('createForm', () => {
|
|
12
|
-
it('preserves field state', async () => {
|
|
13
|
-
type Person = {
|
|
14
|
-
firstName: string
|
|
15
|
-
lastName: string
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
function Comp() {
|
|
19
|
-
const form = createForm<Person>()
|
|
20
|
-
return (
|
|
21
|
-
<>
|
|
22
|
-
<form.Field
|
|
23
|
-
name="firstName"
|
|
24
|
-
defaultValue={''}
|
|
25
|
-
children={(field) => (
|
|
26
|
-
<input
|
|
27
|
-
data-testid="fieldinput"
|
|
28
|
-
value={field().state.value}
|
|
29
|
-
onBlur={field().handleBlur}
|
|
30
|
-
onChange={(e) => field().handleChange(e.currentTarget.value)}
|
|
31
|
-
/>
|
|
32
|
-
)}
|
|
33
|
-
/>
|
|
34
|
-
</>
|
|
35
|
-
)
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
render(() => <Comp />)
|
|
39
|
-
const input = screen.getByTestId('fieldinput')
|
|
40
|
-
expect(screen.queryByText('FirstName')).not.toBeInTheDocument()
|
|
41
|
-
await user.type(input, 'FirstName')
|
|
42
|
-
expect(input).toHaveValue('FirstName')
|
|
43
|
-
})
|
|
44
|
-
|
|
45
|
-
it('should allow default values to be set', async () => {
|
|
46
|
-
type Person = {
|
|
47
|
-
firstName: string
|
|
48
|
-
lastName: string
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function Comp() {
|
|
52
|
-
const form = createForm(() => ({
|
|
53
|
-
defaultValues: {
|
|
54
|
-
firstName: 'FirstName',
|
|
55
|
-
lastName: 'LastName',
|
|
56
|
-
} as Person,
|
|
57
|
-
}))
|
|
58
|
-
|
|
59
|
-
return (
|
|
60
|
-
<>
|
|
61
|
-
<form.Field
|
|
62
|
-
name="firstName"
|
|
63
|
-
children={(field) => {
|
|
64
|
-
return <p>{field().state.value}</p>
|
|
65
|
-
}}
|
|
66
|
-
/>
|
|
67
|
-
</>
|
|
68
|
-
)
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
const { findByText, queryByText } = render(() => <Comp />)
|
|
72
|
-
expect(await findByText('FirstName')).toBeInTheDocument()
|
|
73
|
-
expect(queryByText('LastName')).not.toBeInTheDocument()
|
|
74
|
-
})
|
|
75
|
-
|
|
76
|
-
it('should handle submitting properly', async () => {
|
|
77
|
-
let submittedData = null as { firstName: string } | null
|
|
78
|
-
function Comp() {
|
|
79
|
-
const form = createForm(() => ({
|
|
80
|
-
defaultValues: {
|
|
81
|
-
firstName: 'FirstName',
|
|
82
|
-
},
|
|
83
|
-
onSubmit: ({ value }) => {
|
|
84
|
-
submittedData = value
|
|
85
|
-
},
|
|
86
|
-
}))
|
|
87
|
-
|
|
88
|
-
return (
|
|
89
|
-
<>
|
|
90
|
-
<form.Field
|
|
91
|
-
name="firstName"
|
|
92
|
-
children={(field) => {
|
|
93
|
-
return (
|
|
94
|
-
<input
|
|
95
|
-
value={field().state.value}
|
|
96
|
-
onBlur={field().handleBlur}
|
|
97
|
-
onChange={(e) => field().handleChange(e.target.value)}
|
|
98
|
-
placeholder={'First name'}
|
|
99
|
-
/>
|
|
100
|
-
)
|
|
101
|
-
}}
|
|
102
|
-
/>
|
|
103
|
-
<button onClick={form.handleSubmit}>Submit</button>
|
|
104
|
-
</>
|
|
105
|
-
)
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
const { findByPlaceholderText, getByText } = render(() => <Comp />)
|
|
109
|
-
const input = await findByPlaceholderText('First name')
|
|
110
|
-
await user.clear(input)
|
|
111
|
-
await user.type(input, 'OtherName')
|
|
112
|
-
await user.click(getByText('Submit'))
|
|
113
|
-
expect(submittedData?.firstName).toEqual('OtherName')
|
|
114
|
-
})
|
|
115
|
-
|
|
116
|
-
it('should run on form mount', async () => {
|
|
117
|
-
const [formMounted, setFormMounted] = createSignal(false)
|
|
118
|
-
const [mountForm, setMountForm] = createSignal(false)
|
|
119
|
-
function Comp() {
|
|
120
|
-
const form = createForm(() => ({
|
|
121
|
-
defaultValues: {
|
|
122
|
-
firstName: 'FirstName',
|
|
123
|
-
},
|
|
124
|
-
validators: {
|
|
125
|
-
onMount: () => {
|
|
126
|
-
setFormMounted(true)
|
|
127
|
-
return undefined
|
|
128
|
-
},
|
|
129
|
-
},
|
|
130
|
-
}))
|
|
131
|
-
|
|
132
|
-
return (
|
|
133
|
-
<Show
|
|
134
|
-
when={mountForm()}
|
|
135
|
-
fallback={
|
|
136
|
-
<button onClick={() => setMountForm(true)}>Mount form</button>
|
|
137
|
-
}
|
|
138
|
-
>
|
|
139
|
-
<>
|
|
140
|
-
<h1>Form mounted</h1>
|
|
141
|
-
</>
|
|
142
|
-
</Show>
|
|
143
|
-
)
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
const { getByText } = render(() => <Comp />)
|
|
147
|
-
await user.click(getByText('Mount form'))
|
|
148
|
-
expect(formMounted()).toBe(true)
|
|
149
|
-
})
|
|
150
|
-
|
|
151
|
-
it('should not validate on change if isTouched is false', async () => {
|
|
152
|
-
type Person = {
|
|
153
|
-
firstName: string
|
|
154
|
-
lastName: string
|
|
155
|
-
}
|
|
156
|
-
const error = 'Please enter a different value'
|
|
157
|
-
|
|
158
|
-
function Comp() {
|
|
159
|
-
const form = createForm<Person>(() => ({
|
|
160
|
-
validators: {
|
|
161
|
-
onChange: ({ value }) =>
|
|
162
|
-
value.firstName.includes('other') ? error : undefined,
|
|
163
|
-
},
|
|
164
|
-
}))
|
|
165
|
-
|
|
166
|
-
const errors = form.useStore((s) => s.errors)
|
|
167
|
-
|
|
168
|
-
return (
|
|
169
|
-
<>
|
|
170
|
-
<form.Field
|
|
171
|
-
name="firstName"
|
|
172
|
-
children={(field) => (
|
|
173
|
-
<div>
|
|
174
|
-
<input
|
|
175
|
-
data-testid="fieldinput"
|
|
176
|
-
name={field().name}
|
|
177
|
-
value={field().state.value}
|
|
178
|
-
onBlur={field().handleBlur}
|
|
179
|
-
onInput={(e) => field().setValue(e.currentTarget.value)}
|
|
180
|
-
/>
|
|
181
|
-
<p>{errors().join(',')}</p>
|
|
182
|
-
</div>
|
|
183
|
-
)}
|
|
184
|
-
/>
|
|
185
|
-
</>
|
|
186
|
-
)
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
const { getByTestId, queryByText } = render(() => <Comp />)
|
|
190
|
-
const input = getByTestId('fieldinput')
|
|
191
|
-
await user.type(input, 'other')
|
|
192
|
-
expect(queryByText(error)).not.toBeInTheDocument()
|
|
193
|
-
})
|
|
194
|
-
|
|
195
|
-
it('should validate on change if isTouched is true', async () => {
|
|
196
|
-
type Person = {
|
|
197
|
-
firstName: string
|
|
198
|
-
lastName: string
|
|
199
|
-
}
|
|
200
|
-
const error = 'Please enter a different value'
|
|
201
|
-
|
|
202
|
-
function Comp() {
|
|
203
|
-
const form = createForm<Person>(() => ({
|
|
204
|
-
validators: {
|
|
205
|
-
onChange: ({ value }) =>
|
|
206
|
-
value.firstName.includes('other') ? error : undefined,
|
|
207
|
-
},
|
|
208
|
-
}))
|
|
209
|
-
|
|
210
|
-
const [errors, setErrors] = createSignal<ValidationErrorMap>()
|
|
211
|
-
onCleanup(form.store.subscribe(() => setErrors(form.state.errorMap)))
|
|
212
|
-
|
|
213
|
-
return (
|
|
214
|
-
<>
|
|
215
|
-
<form.Field
|
|
216
|
-
name="firstName"
|
|
217
|
-
defaultMeta={{ isTouched: true }}
|
|
218
|
-
children={(field) => {
|
|
219
|
-
return (
|
|
220
|
-
<div>
|
|
221
|
-
<input
|
|
222
|
-
data-testid="fieldinput"
|
|
223
|
-
name={field().name}
|
|
224
|
-
value={field().state.value}
|
|
225
|
-
onBlur={field().handleBlur}
|
|
226
|
-
onInput={(e) => field().setValue(e.currentTarget.value)}
|
|
227
|
-
/>
|
|
228
|
-
<p>{errors()?.onChange}</p>
|
|
229
|
-
</div>
|
|
230
|
-
)
|
|
231
|
-
}}
|
|
232
|
-
/>
|
|
233
|
-
</>
|
|
234
|
-
)
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
const { getByTestId, getByText, queryByText } = render(() => <Comp />)
|
|
238
|
-
const input = getByTestId('fieldinput')
|
|
239
|
-
expect(queryByText(error)).not.toBeInTheDocument()
|
|
240
|
-
await user.type(input, 'other')
|
|
241
|
-
expect(getByText(error)).toBeInTheDocument()
|
|
242
|
-
})
|
|
243
|
-
|
|
244
|
-
it('should validate on change and on blur', async () => {
|
|
245
|
-
type Person = {
|
|
246
|
-
firstName: string
|
|
247
|
-
lastName: string
|
|
248
|
-
}
|
|
249
|
-
const onChangeError = 'Please enter a different value (onChangeError)'
|
|
250
|
-
const onBlurError = 'Please enter a different value (onBlurError)'
|
|
251
|
-
|
|
252
|
-
function Comp() {
|
|
253
|
-
const form = createForm<Person>(() => ({
|
|
254
|
-
validators: {
|
|
255
|
-
onChange: ({ value }) =>
|
|
256
|
-
value.firstName.includes('other') ? onChangeError : undefined,
|
|
257
|
-
onBlur: ({ value }) =>
|
|
258
|
-
value.firstName.includes('other') ? onBlurError : undefined,
|
|
259
|
-
},
|
|
260
|
-
}))
|
|
261
|
-
|
|
262
|
-
const [errors, setErrors] = createSignal<ValidationErrorMap>()
|
|
263
|
-
onCleanup(form.store.subscribe(() => setErrors(form.state.errorMap)))
|
|
264
|
-
|
|
265
|
-
return (
|
|
266
|
-
<>
|
|
267
|
-
<form.Field
|
|
268
|
-
name="firstName"
|
|
269
|
-
defaultMeta={{ isTouched: true }}
|
|
270
|
-
children={(field) => (
|
|
271
|
-
<div>
|
|
272
|
-
<input
|
|
273
|
-
data-testid="fieldinput"
|
|
274
|
-
name={field().name}
|
|
275
|
-
value={field().state.value}
|
|
276
|
-
onBlur={field().handleBlur}
|
|
277
|
-
onInput={(e) => field().handleChange(e.currentTarget.value)}
|
|
278
|
-
/>
|
|
279
|
-
<p>{errors()?.onChange}</p>
|
|
280
|
-
<p>{errors()?.onBlur}</p>
|
|
281
|
-
</div>
|
|
282
|
-
)}
|
|
283
|
-
/>
|
|
284
|
-
</>
|
|
285
|
-
)
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
const { getByTestId, getByText, queryByText } = render(() => <Comp />)
|
|
289
|
-
const input = getByTestId('fieldinput')
|
|
290
|
-
expect(queryByText(onChangeError)).not.toBeInTheDocument()
|
|
291
|
-
expect(queryByText(onBlurError)).not.toBeInTheDocument()
|
|
292
|
-
await user.type(input, 'other')
|
|
293
|
-
expect(getByText(onChangeError)).toBeInTheDocument()
|
|
294
|
-
await user.click(document.body)
|
|
295
|
-
expect(queryByText(onBlurError)).toBeInTheDocument()
|
|
296
|
-
})
|
|
297
|
-
|
|
298
|
-
it('should validate async on change', async () => {
|
|
299
|
-
type Person = {
|
|
300
|
-
firstName: string
|
|
301
|
-
lastName: string
|
|
302
|
-
}
|
|
303
|
-
const error = 'Please enter a different value'
|
|
304
|
-
|
|
305
|
-
function Comp() {
|
|
306
|
-
const form = createForm<Person>(() => ({
|
|
307
|
-
validators: {
|
|
308
|
-
onChangeAsync: async () => {
|
|
309
|
-
await sleep(10)
|
|
310
|
-
return error
|
|
311
|
-
},
|
|
312
|
-
},
|
|
313
|
-
}))
|
|
314
|
-
|
|
315
|
-
const [errors, setErrors] = createSignal<ValidationErrorMap>()
|
|
316
|
-
onCleanup(form.store.subscribe(() => setErrors(form.state.errorMap)))
|
|
317
|
-
|
|
318
|
-
return (
|
|
319
|
-
<>
|
|
320
|
-
<form.Field
|
|
321
|
-
name="firstName"
|
|
322
|
-
defaultMeta={{ isTouched: true }}
|
|
323
|
-
children={(field) => (
|
|
324
|
-
<div>
|
|
325
|
-
<input
|
|
326
|
-
data-testid="fieldinput"
|
|
327
|
-
name={field().name}
|
|
328
|
-
value={field().state.value}
|
|
329
|
-
onBlur={field().handleBlur}
|
|
330
|
-
onInput={(e) => field().handleChange(e.currentTarget.value)}
|
|
331
|
-
/>
|
|
332
|
-
<p>{errors()?.onChange}</p>
|
|
333
|
-
</div>
|
|
334
|
-
)}
|
|
335
|
-
/>
|
|
336
|
-
</>
|
|
337
|
-
)
|
|
338
|
-
}
|
|
339
|
-
|
|
340
|
-
const { getByTestId, getByText, queryByText } = render(() => <Comp />)
|
|
341
|
-
const input = getByTestId('fieldinput')
|
|
342
|
-
expect(queryByText(error)).not.toBeInTheDocument()
|
|
343
|
-
await user.type(input, 'other')
|
|
344
|
-
await waitFor(() => getByText(error))
|
|
345
|
-
expect(getByText(error)).toBeInTheDocument()
|
|
346
|
-
})
|
|
347
|
-
|
|
348
|
-
it('should validate async on change and async on blur', async () => {
|
|
349
|
-
type Person = {
|
|
350
|
-
firstName: string
|
|
351
|
-
lastName: string
|
|
352
|
-
}
|
|
353
|
-
const onChangeError = 'Please enter a different value (onChangeError)'
|
|
354
|
-
const onBlurError = 'Please enter a different value (onBlurError)'
|
|
355
|
-
|
|
356
|
-
function Comp() {
|
|
357
|
-
const form = createForm<Person>(() => ({
|
|
358
|
-
validators: {
|
|
359
|
-
async onChangeAsync() {
|
|
360
|
-
await sleep(10)
|
|
361
|
-
return onChangeError
|
|
362
|
-
},
|
|
363
|
-
async onBlurAsync() {
|
|
364
|
-
await sleep(10)
|
|
365
|
-
return onBlurError
|
|
366
|
-
},
|
|
367
|
-
},
|
|
368
|
-
}))
|
|
369
|
-
|
|
370
|
-
const [errors, setErrors] = createSignal<ValidationErrorMap>()
|
|
371
|
-
onCleanup(form.store.subscribe(() => setErrors(form.state.errorMap)))
|
|
372
|
-
|
|
373
|
-
return (
|
|
374
|
-
<>
|
|
375
|
-
<form.Field
|
|
376
|
-
name="firstName"
|
|
377
|
-
defaultMeta={{ isTouched: true }}
|
|
378
|
-
children={(field) => (
|
|
379
|
-
<div>
|
|
380
|
-
<input
|
|
381
|
-
data-testid="fieldinput"
|
|
382
|
-
name={field().name}
|
|
383
|
-
value={field().state.value}
|
|
384
|
-
onBlur={field().handleBlur}
|
|
385
|
-
onInput={(e) => field().handleChange(e.currentTarget.value)}
|
|
386
|
-
/>
|
|
387
|
-
<p>{errors()?.onChange}</p>
|
|
388
|
-
<p>{errors()?.onBlur}</p>
|
|
389
|
-
</div>
|
|
390
|
-
)}
|
|
391
|
-
/>
|
|
392
|
-
</>
|
|
393
|
-
)
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
const { getByTestId, getByText, queryByText } = render(() => <Comp />)
|
|
397
|
-
const input = getByTestId('fieldinput')
|
|
398
|
-
|
|
399
|
-
expect(queryByText(onChangeError)).not.toBeInTheDocument()
|
|
400
|
-
expect(queryByText(onBlurError)).not.toBeInTheDocument()
|
|
401
|
-
await user.type(input, 'other')
|
|
402
|
-
await waitFor(() => getByText(onChangeError))
|
|
403
|
-
expect(getByText(onChangeError)).toBeInTheDocument()
|
|
404
|
-
await user.click(document.body)
|
|
405
|
-
await waitFor(() => getByText(onBlurError))
|
|
406
|
-
expect(getByText(onBlurError)).toBeInTheDocument()
|
|
407
|
-
})
|
|
408
|
-
|
|
409
|
-
it('should validate async on change with debounce', async () => {
|
|
410
|
-
type Person = {
|
|
411
|
-
firstName: string
|
|
412
|
-
lastName: string
|
|
413
|
-
}
|
|
414
|
-
const mockFn = vi.fn()
|
|
415
|
-
const error = 'Please enter a different value'
|
|
416
|
-
|
|
417
|
-
function Comp() {
|
|
418
|
-
const form = createForm<Person>(() => ({
|
|
419
|
-
validators: {
|
|
420
|
-
onChangeAsyncDebounceMs: 100,
|
|
421
|
-
onChangeAsync: async () => {
|
|
422
|
-
mockFn()
|
|
423
|
-
await sleep(10)
|
|
424
|
-
return error
|
|
425
|
-
},
|
|
426
|
-
},
|
|
427
|
-
}))
|
|
428
|
-
|
|
429
|
-
const [errors, setErrors] = createSignal<string>()
|
|
430
|
-
onCleanup(
|
|
431
|
-
form.store.subscribe(() =>
|
|
432
|
-
setErrors(form.state.errorMap.onChange || ''),
|
|
433
|
-
),
|
|
434
|
-
)
|
|
435
|
-
|
|
436
|
-
return (
|
|
437
|
-
<>
|
|
438
|
-
<form.Field
|
|
439
|
-
name="firstName"
|
|
440
|
-
defaultMeta={{ isTouched: true }}
|
|
441
|
-
children={(field) => (
|
|
442
|
-
<div>
|
|
443
|
-
<input
|
|
444
|
-
data-testid="fieldinput"
|
|
445
|
-
name={field().name}
|
|
446
|
-
value={field().state.value}
|
|
447
|
-
onBlur={field().handleBlur}
|
|
448
|
-
onInput={(e) => field().handleChange(e.currentTarget.value)}
|
|
449
|
-
/>
|
|
450
|
-
<p>{errors()}</p>
|
|
451
|
-
</div>
|
|
452
|
-
)}
|
|
453
|
-
/>
|
|
454
|
-
</>
|
|
455
|
-
)
|
|
456
|
-
}
|
|
457
|
-
|
|
458
|
-
const { getByTestId, getByText } = render(() => <Comp />)
|
|
459
|
-
const input = getByTestId('fieldinput')
|
|
460
|
-
await user.type(input, 'other')
|
|
461
|
-
// mockFn will have been called 5 times without onChangeAsyncDebounceMs
|
|
462
|
-
expect(mockFn).toHaveBeenCalledTimes(0)
|
|
463
|
-
await waitFor(() => getByText(error))
|
|
464
|
-
expect(getByText(error)).toBeInTheDocument()
|
|
465
|
-
})
|
|
466
|
-
})
|