Skip to content

Commit 5ff6c1c

Browse files
author
Brian Vaughn
committed
Added additional useEditableValue() unit test cases
1 parent fef22e7 commit 5ff6c1c

File tree

1 file changed

+105
-16
lines changed

1 file changed

+105
-16
lines changed

packages/react-devtools-shared/src/__tests__/useEditableValue-test.js

Lines changed: 105 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,21 @@ describe('useEditableValue', () => {
3333
}
3434

3535
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);
3940
expect(state.hasPendingChanges).toBe(false);
41+
expect(state.isValid).toBe(true);
4042

4143
// If there are NO pending changes,
4244
// 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);
4649
expect(state.hasPendingChanges).toBe(false);
50+
expect(state.isValid).toBe(true);
4751
});
4852

4953
it('should not override editable state when external props are updated if there are pending changes', () => {
@@ -57,28 +61,113 @@ describe('useEditableValue', () => {
5761
}
5862

5963
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);
6368
expect(state.hasPendingChanges).toBe(false);
69+
expect(state.isValid).toBe(true);
6470

6571
// Update (local) editable state.
6672
act(() =>
6773
dispatch({
6874
type: 'UPDATE',
69-
editableValue: 'not-foo',
70-
externalValue: 'foo',
75+
editableValue: '2',
76+
externalValue: 1,
7177
}),
7278
);
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);
7582
expect(state.hasPendingChanges).toBe(true);
83+
expect(state.isValid).toBe(true);
7684

7785
// If there ARE pending changes,
7886
// 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);
8291
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);
83172
});
84173
});

0 commit comments

Comments
 (0)