-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
/
useForm.spec.tsx
161 lines (137 loc) · 6.95 KB
/
useForm.spec.tsx
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
import React from 'react'
import { renderHook } from '@testing-library/react-hooks'
import { Broadcast } from '../shared';
import { BroadcastContext } from '../context';
import { createForm } from '@uform/core'
import useForm from '../hooks/useForm'
import { createFormActions, createAsyncFormActions } from '..';
describe('useForm hook',()=>{
test('return createForm instance', ()=>{
const broadCastWrapper = ({ children }) => {
return <BroadcastContext.Provider value={new Broadcast()}>{children}</BroadcastContext.Provider>
}
const opts = {}
const form = createForm(opts)
const { result } = renderHook(() => useForm({ form }), { wrapper: broadCastWrapper })
expect(result.current).toEqual(form)
})
test('createForm instance binding api call with broadcast', ()=>{
const fn = jest.fn()
const typeArr = []
const broadcastInstance = new Broadcast()
broadcastInstance.subscribe(fn)
broadcastInstance.subscribe((a: any) => {
typeArr.push(a.type)
})
const broadCastWrapper = ({ children }) => {
return <BroadcastContext.Provider value={broadcastInstance}>{children}</BroadcastContext.Provider>
}
// 第一次formChange: initialized, editable(从true -> undefined , 有问题)
// 第二次formChange: mounted
const { result } = renderHook(() => useForm({}), { wrapper: broadCastWrapper })
expect(typeArr).toEqual([
'onFormWillInit', 'onFormChange', 'onFormInit', 'onFormChange', 'onFormMount',
])
expect(fn).toBeCalledTimes(5)
const targetValues = { username: 'abcd' }
result.current.setFormState(state => state.values = targetValues)
// 第三次formChange: values
expect(typeArr).toEqual([
'onFormWillInit', 'onFormChange', 'onFormInit', 'onFormChange', 'onFormMount',
'onFormChange', 'onFormValuesChange'
])
expect(fn).toBeCalledTimes(7)
expect(result.current.getFormState(state => state.values)).toEqual(targetValues)
})
test('useForm with initialValues', ()=>{
const broadCastWrapper = ({ children }) => {
return <BroadcastContext.Provider value={new Broadcast()}>{children}</BroadcastContext.Provider>
}
const targetValues = { username: 'abcd' }
const values = { age: 20 }
const { result } = renderHook(() => useForm({ initialValues: targetValues, value: values }), { wrapper: broadCastWrapper })
expect(result.current.getFormState(state => state.initialValues)).toEqual(targetValues)
expect(result.current.getFormState(state => state.values)).toEqual(values)
})
test('useForm with defaultValue', ()=>{
const broadCastWrapper = ({ children }) => {
return <BroadcastContext.Provider value={new Broadcast()}>{children}</BroadcastContext.Provider>
}
const targetValues = { username: 'abcd' }
const values = { age: 20 }
const { result } = renderHook(() => useForm({ defaultValue: targetValues, value: values }), { wrapper: broadCastWrapper })
expect(result.current.getFormState(state => state.initialValues)).toEqual(targetValues)
expect(result.current.getFormState(state => state.values)).toEqual(values)
})
test('useForm with values', ()=>{
const broadCastWrapper = ({ children }) => {
return <BroadcastContext.Provider value={new Broadcast()}>{children}</BroadcastContext.Provider>
}
const targetValues = { username: 'abcd' }
const { result } = renderHook(() => useForm({ value: targetValues }), { wrapper: broadCastWrapper })
expect(result.current.getFormState(state => state.initialValues)).toEqual({})
expect(result.current.getFormState(state => state.values)).toEqual(targetValues)
})
test('useForm with editable', ()=>{
const broadCastWrapper = ({ children }) => {
return <BroadcastContext.Provider value={new Broadcast()}>{children}</BroadcastContext.Provider>
}
const { result } = renderHook(() => useForm({ editable: false }), { wrapper: broadCastWrapper })
expect(result.current.getFormState(state => state.editable)).toEqual(false)
})
test('FormState change', ()=>{
const broadCastWrapper = ({ children }) => {
return <BroadcastContext.Provider value={new Broadcast()}>{children}</BroadcastContext.Provider>
}
const form = createForm({})
expect(form.getFormState(state => state.mounted)).toEqual(false)
expect(form.getFormState(state => state.initialized)).toEqual(true)
expect(form.getFormState(state => state.editable)).toEqual(undefined)
const { result } = renderHook(() => useForm({ form }), { wrapper: broadCastWrapper })
expect(result.current.getFormState(state => state.mounted)).toEqual(true)
expect(result.current.getFormState(state => state.initialized)).toEqual(true)
expect(result.current.getFormState(state => state.editable)).toEqual(undefined)
})
test('FormActions will implemented(sync)', ()=>{
const broadCastWrapper = ({ children }) => {
return <BroadcastContext.Provider value={new Broadcast()}>{children}</BroadcastContext.Provider>
}
const actions = createFormActions()
expect(actions.getFormState()).toEqual(undefined)
const targetValues = { username: 'abcd' }
actions.setFormState(state => state.values = targetValues)
expect(actions.getFormState(state => state.values)).toEqual(undefined)
const { result } = renderHook(() => useForm({ actions }), { wrapper: broadCastWrapper })
expect(actions.getFormState()).not.toEqual(undefined)
expect(result.current.getFormState()).toEqual(actions.getFormState())
expect(actions.getFormState(state => state.values)).toEqual({})
})
test('FormActions will implemented(async)', async ()=>{
const broadCastWrapper = ({ children }) => {
return <BroadcastContext.Provider value={new Broadcast()}>{children}</BroadcastContext.Provider>
}
const actions = createAsyncFormActions()
const targetValues = { username: 'abcd' }
const { result } = renderHook(() => useForm({ actions }), { wrapper: broadCastWrapper })
const initialValues = await actions.getFormState(state => state.values)
expect(initialValues).toEqual({})
await actions.setFormState(state => state.values = targetValues)
const resultValues = await actions.getFormState(state => state.values)
expect(resultValues).toEqual(targetValues)
const actionResultValues = await result.current.getFormState(state => state.values)
expect(actionResultValues).toEqual(resultValues)
})
test('broadaast context', ()=>{
const broadcastInstance = new Broadcast()
const broadCastWrapper = ({ children }) => {
return <BroadcastContext.Provider value={broadcastInstance}>{children}</BroadcastContext.Provider>
}
expect(broadcastInstance.context).toEqual(undefined)
const { result } = renderHook(() => useForm({}), { wrapper: broadCastWrapper })
const symbolList = Object.getOwnPropertySymbols(result.current)
expect({ ...broadcastInstance.context, [symbolList[0]]: true, }).toEqual({
...result.current,
dispatch: result.current.notify,
})
})
})