@@ -33,17 +33,21 @@ describe('useEditableValue', () => {
33
33
}
34
34
35
35
const container = document . createElement ( 'div' ) ;
36
- ReactDOM . render ( < Example value = "foo" /> , container ) ;
37
- expect ( state . editableValue ) . toEqual ( '"foo"' ) ;
38
- expect ( state . externalValue ) . toEqual ( 'foo' ) ;
36
+ ReactDOM . render ( < Example value = { 1 } /> , container ) ;
37
+ expect ( state . editableValue ) . toEqual ( '1' ) ;
38
+ expect ( state . externalValue ) . toEqual ( 1 ) ;
39
+ expect ( state . parsedValue ) . toEqual ( 1 ) ;
39
40
expect ( state . hasPendingChanges ) . toBe ( false ) ;
41
+ expect ( state . isValid ) . toBe ( true ) ;
40
42
41
43
// If there are NO pending changes,
42
44
// an update to the external prop value should override the local/pending value.
43
- ReactDOM . render ( < Example value = "bar" /> , container ) ;
44
- expect ( state . editableValue ) . toEqual ( '"bar"' ) ;
45
- expect ( state . externalValue ) . toEqual ( 'bar' ) ;
45
+ ReactDOM . render ( < Example value = { 2 } /> , container ) ;
46
+ expect ( state . editableValue ) . toEqual ( '2' ) ;
47
+ expect ( state . externalValue ) . toEqual ( 2 ) ;
48
+ expect ( state . parsedValue ) . toEqual ( 2 ) ;
46
49
expect ( state . hasPendingChanges ) . toBe ( false ) ;
50
+ expect ( state . isValid ) . toBe ( true ) ;
47
51
} ) ;
48
52
49
53
it ( 'should not override editable state when external props are updated if there are pending changes' , ( ) => {
@@ -57,28 +61,113 @@ describe('useEditableValue', () => {
57
61
}
58
62
59
63
const container = document . createElement ( 'div' ) ;
60
- ReactDOM . render ( < Example value = "foo" /> , container ) ;
61
- expect ( state . editableValue ) . toEqual ( '"foo"' ) ;
62
- expect ( state . externalValue ) . toEqual ( 'foo' ) ;
64
+ ReactDOM . render ( < Example value = { 1 } /> , container ) ;
65
+ expect ( state . editableValue ) . toEqual ( '1' ) ;
66
+ expect ( state . externalValue ) . toEqual ( 1 ) ;
67
+ expect ( state . parsedValue ) . toEqual ( 1 ) ;
63
68
expect ( state . hasPendingChanges ) . toBe ( false ) ;
69
+ expect ( state . isValid ) . toBe ( true ) ;
64
70
65
71
// Update (local) editable state.
66
72
act ( ( ) =>
67
73
dispatch ( {
68
74
type : 'UPDATE' ,
69
- editableValue : 'not-foo ' ,
70
- externalValue : 'foo' ,
75
+ editableValue : '2 ' ,
76
+ externalValue : 1 ,
71
77
} ) ,
72
78
) ;
73
- expect ( state . editableValue ) . toEqual ( 'not-foo' ) ;
74
- expect ( state . externalValue ) . toEqual ( 'foo' ) ;
79
+ expect ( state . editableValue ) . toEqual ( '2' ) ;
80
+ expect ( state . externalValue ) . toEqual ( 1 ) ;
81
+ expect ( state . parsedValue ) . toEqual ( 2 ) ;
75
82
expect ( state . hasPendingChanges ) . toBe ( true ) ;
83
+ expect ( state . isValid ) . toBe ( true ) ;
76
84
77
85
// If there ARE pending changes,
78
86
// an update to the external prop value should NOT override the local/pending value.
79
- ReactDOM . render ( < Example value = "bar" /> , container ) ;
80
- expect ( state . editableValue ) . toEqual ( 'not-foo' ) ;
81
- expect ( state . externalValue ) . toEqual ( 'bar' ) ;
87
+ ReactDOM . render ( < Example value = { 3 } /> , container ) ;
88
+ expect ( state . editableValue ) . toEqual ( '2' ) ;
89
+ expect ( state . externalValue ) . toEqual ( 3 ) ;
90
+ expect ( state . parsedValue ) . toEqual ( 2 ) ;
82
91
expect ( state . hasPendingChanges ) . toBe ( true ) ;
92
+ expect ( state . isValid ) . toBe ( true ) ;
93
+ } ) ;
94
+
95
+ it ( 'should parse edits to ensure valid JSON' , ( ) => {
96
+ let dispatch , state ;
97
+
98
+ function Example ( { value} ) {
99
+ const tuple = useEditableValue ( value ) ;
100
+ state = tuple [ 0 ] ;
101
+ dispatch = tuple [ 1 ] ;
102
+ return null ;
103
+ }
104
+
105
+ const container = document . createElement ( 'div' ) ;
106
+ ReactDOM . render ( < Example value = { 1 } /> , container ) ;
107
+ expect ( state . editableValue ) . toEqual ( '1' ) ;
108
+ expect ( state . externalValue ) . toEqual ( 1 ) ;
109
+ expect ( state . parsedValue ) . toEqual ( 1 ) ;
110
+ expect ( state . hasPendingChanges ) . toBe ( false ) ;
111
+ expect ( state . isValid ) . toBe ( true ) ;
112
+
113
+ // Update (local) editable state.
114
+ act ( ( ) =>
115
+ dispatch ( {
116
+ type : 'UPDATE' ,
117
+ editableValue : '"a' ,
118
+ externalValue : 1 ,
119
+ } ) ,
120
+ ) ;
121
+ expect ( state . editableValue ) . toEqual ( '"a' ) ;
122
+ expect ( state . externalValue ) . toEqual ( 1 ) ;
123
+ expect ( state . parsedValue ) . toEqual ( 1 ) ;
124
+ expect ( state . hasPendingChanges ) . toBe ( true ) ;
125
+ expect ( state . isValid ) . toBe ( false ) ;
126
+ } ) ;
127
+
128
+ it ( 'should reset to external value upon request' , ( ) => {
129
+ let dispatch , state ;
130
+
131
+ function Example ( { value} ) {
132
+ const tuple = useEditableValue ( value ) ;
133
+ state = tuple [ 0 ] ;
134
+ dispatch = tuple [ 1 ] ;
135
+ return null ;
136
+ }
137
+
138
+ const container = document . createElement ( 'div' ) ;
139
+ ReactDOM . render ( < Example value = { 1 } /> , container ) ;
140
+ expect ( state . editableValue ) . toEqual ( '1' ) ;
141
+ expect ( state . externalValue ) . toEqual ( 1 ) ;
142
+ expect ( state . parsedValue ) . toEqual ( 1 ) ;
143
+ expect ( state . hasPendingChanges ) . toBe ( false ) ;
144
+ expect ( state . isValid ) . toBe ( true ) ;
145
+
146
+ // Update (local) editable state.
147
+ act ( ( ) =>
148
+ dispatch ( {
149
+ type : 'UPDATE' ,
150
+ editableValue : '2' ,
151
+ externalValue : 1 ,
152
+ } ) ,
153
+ ) ;
154
+ expect ( state . editableValue ) . toEqual ( '2' ) ;
155
+ expect ( state . externalValue ) . toEqual ( 1 ) ;
156
+ expect ( state . parsedValue ) . toEqual ( 2 ) ;
157
+ expect ( state . hasPendingChanges ) . toBe ( true ) ;
158
+ expect ( state . isValid ) . toBe ( true ) ;
159
+
160
+ // Reset editable state
161
+ act ( ( ) =>
162
+ dispatch ( {
163
+ type : 'RESET' ,
164
+ externalValue : 1 ,
165
+ } ) ,
166
+ ) ;
167
+ expect ( state . editableValue ) . toEqual ( '1' ) ;
168
+ expect ( state . externalValue ) . toEqual ( 1 ) ;
169
+ expect ( state . parsedValue ) . toEqual ( 1 ) ;
170
+ expect ( state . hasPendingChanges ) . toBe ( false ) ;
171
+ expect ( state . isValid ) . toBe ( true ) ;
83
172
} ) ;
84
173
} ) ;
0 commit comments