Skip to content

Commit bb9bd01

Browse files
bluebill1049smably
andauthored
V6 (#27)
* fix dirtyFields type with V6 * fix unit test * Display Boolean field values correctly and add tests (#28) Co-authored-by: Sylvan Mably <[email protected]>
1 parent 285b715 commit bb9bd01

File tree

8 files changed

+1461
-941
lines changed

8 files changed

+1461
-941
lines changed

package.json

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,31 +26,31 @@
2626
"react-hook-form": "^5.6.1"
2727
},
2828
"dependencies": {
29-
"@emotion/core": "^10.0.27",
29+
"@emotion/core": "^10.0.28",
3030
"@emotion/styled": "^10.0.27",
31-
"@types/lodash": "^4.14.149",
32-
"little-state-machine": "^3.0.0",
31+
"@types/lodash": "^4.14.152",
32+
"little-state-machine": "^3.0.1",
3333
"lodash": "^4.17.15",
34-
"react-simple-animate": "^3.3.6"
34+
"react-simple-animate": "^3.3.8"
3535
},
3636
"devDependencies": {
37-
"@testing-library/react": "^9.4.0",
38-
"@types/jest": "^25.1.2",
39-
"@types/react": "^16.9.19",
40-
"@typescript-eslint/eslint-plugin": "^2.18.0",
41-
"@typescript-eslint/parser": "^2.18.0",
42-
"eslint": "^6.8.0",
43-
"eslint-plugin-react": "^7.17.0",
44-
"eslint-plugin-react-hooks": "^2.3.0",
45-
"jest": "^25.1.0",
46-
"prettier": "^1.19.1",
47-
"react": "^16.12.0",
48-
"react-dom": "^16.12.0",
49-
"react-hook-form": "^5.6.1",
50-
"rollup": "^1.31.0",
51-
"rollup-plugin-typescript2": "^0.25.3",
52-
"ts-jest": "^25.2.0",
53-
"typescript": "^3.7.5"
37+
"@testing-library/react": "^10.0.4",
38+
"@types/jest": "^25.2.3",
39+
"@types/react": "^16.9.35",
40+
"@typescript-eslint/eslint-plugin": "^3.0.0",
41+
"@typescript-eslint/parser": "^3.0.0",
42+
"eslint": "^7.1.0",
43+
"eslint-plugin-react": "^7.20.0",
44+
"eslint-plugin-react-hooks": "^4.0.2",
45+
"jest": "^26.0.1",
46+
"prettier": "^2.0.5",
47+
"react": "^16.13.1",
48+
"react-dom": "^16.13.1",
49+
"react-hook-form": "^5.7.2",
50+
"rollup": "^2.10.7",
51+
"rollup-plugin-typescript2": "^0.27.1",
52+
"ts-jest": "^26.0.0",
53+
"typescript": "^3.9.3"
5454
},
5555
"bugs": {
5656
"url": "https://github.com/react-hook-form/devtools/issues"

src/__snapshots__/panelTable.test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`PanelTable should render correctly 1`] = `
3+
exports[`PanelTable should render collapsed 1`] = `
44
<DocumentFragment>
55
<div
66
style="opacity: 1; transition: all 0.3s ease-in 0s;"

src/devTool.test.tsx

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@ import * as React from 'react';
22
import { DevTool } from './devTool';
33
import { render } from '@testing-library/react';
44

5-
jest.mock('lodash/get', () => ({
6-
default: () => {},
7-
}));
8-
95
describe('DevTool', () => {
106
it('render correctly ', () => {
117
// @ts-ignore
@@ -35,7 +31,7 @@ describe('DevTool', () => {
3531
current: {},
3632
},
3733
formState: {
38-
dirtyFields: new Set(),
34+
dirtyFields: {},
3935
},
4036
readFormStateRef: { current: {} },
4137
} as any

src/panel.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ export default ({
114114
const type = get(value, 'ref.type', undefined);
115115
const isTouched = !!get(formState.touched, name);
116116
const isNative = (value as any).ref.type;
117-
const isDirty = formState.dirtyFields.has(name);
117+
const isDirty = get(formState.dirtyFields, name);
118118
const hasError = !!error;
119119
const ref = get(value, 'ref');
120120

src/panelTable.test.tsx

Lines changed: 181 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
import * as React from 'react';
2-
import { render } from '@testing-library/react';
2+
import { render, fireEvent } from '@testing-library/react';
33
import PanelTable from './panelTable';
44

5-
jest.mock('lodash/isUndefined', () => ({ default: () => {} }));
6-
jest.mock('lodash/isObject', () => ({ default: () => {} }));
7-
85
describe('PanelTable', () => {
9-
it('should render correctly', () => {
6+
it('should render collapsed', () => {
107
const { asFragment } = render(
118
<PanelTable
129
isNative={false}
@@ -26,4 +23,183 @@ describe('PanelTable', () => {
2623
);
2724
expect(asFragment()).toMatchSnapshot();
2825
});
26+
27+
it('should render string field values correctly', () => {
28+
const { getByTitle, getByTestId } = render(
29+
<PanelTable
30+
isNative={false}
31+
errorMessage="test"
32+
errorType="test"
33+
hasError
34+
type="test"
35+
isTouched
36+
isDirty
37+
readFormStateRef={{ current: { touched: false } }}
38+
index={0}
39+
fieldsValues={{ test: 'RHF' }}
40+
name="test"
41+
collapseAll={false}
42+
refObject={{}}
43+
/>,
44+
);
45+
46+
fireEvent.click(getByTitle('Toggle field table'));
47+
48+
expect(getByTestId('test-field-value').textContent).toBe('RHF');
49+
});
50+
51+
it('should render number field values correctly', () => {
52+
const { getByTitle, getByTestId } = render(
53+
<PanelTable
54+
isNative={false}
55+
errorMessage="test"
56+
errorType="test"
57+
hasError
58+
type="test"
59+
isTouched
60+
isDirty
61+
readFormStateRef={{ current: { touched: false } }}
62+
index={0}
63+
fieldsValues={{ test: 1234 }}
64+
name="test"
65+
collapseAll={false}
66+
refObject={{}}
67+
/>,
68+
);
69+
70+
fireEvent.click(getByTitle('Toggle field table'));
71+
72+
expect(getByTestId('test-field-value').textContent).toBe('1234');
73+
});
74+
75+
it('should render boolean field values correctly', () => {
76+
const { getByTitle, getByTestId } = render(
77+
<PanelTable
78+
isNative={false}
79+
errorMessage="test"
80+
errorType="test"
81+
hasError
82+
type="test"
83+
isTouched
84+
isDirty
85+
readFormStateRef={{ current: { touched: false } }}
86+
index={0}
87+
fieldsValues={{ test: false }}
88+
name="test"
89+
collapseAll={false}
90+
refObject={{}}
91+
/>,
92+
);
93+
94+
fireEvent.click(getByTitle('Toggle field table'));
95+
96+
expect(getByTestId('test-field-value').textContent).toBe('false');
97+
});
98+
99+
it('should render null field values correctly', () => {
100+
const { getByTitle, getByTestId } = render(
101+
<PanelTable
102+
isNative={false}
103+
errorMessage="test"
104+
errorType="test"
105+
hasError
106+
type="test"
107+
isTouched
108+
isDirty
109+
readFormStateRef={{ current: { touched: false } }}
110+
index={0}
111+
fieldsValues={{ test: null }}
112+
name="test"
113+
collapseAll={false}
114+
refObject={{}}
115+
/>,
116+
);
117+
118+
fireEvent.click(getByTitle('Toggle field table'));
119+
120+
expect(getByTestId('test-field-value').textContent).toBe('null');
121+
});
122+
123+
it('should render object field values correctly', () => {
124+
const { getByTitle, getByTestId } = render(
125+
<PanelTable
126+
isNative={false}
127+
errorMessage="test"
128+
errorType="test"
129+
hasError
130+
type="test"
131+
isTouched
132+
isDirty
133+
readFormStateRef={{ current: { touched: false } }}
134+
index={0}
135+
fieldsValues={{ test: { deeply: { nested: 'value' } } }}
136+
name="test"
137+
collapseAll={false}
138+
refObject={{}}
139+
/>,
140+
);
141+
142+
fireEvent.click(getByTitle('Toggle field table'));
143+
144+
expect(getByTestId('test-field-value').textContent).toMatchInlineSnapshot(`
145+
"{
146+
\\"deeply\\": {
147+
\\"nested\\": \\"value\\"
148+
}
149+
}"
150+
`);
151+
});
152+
153+
it('should render non-serializable field values correctly', () => {
154+
const circular: any = {};
155+
circular.circular = circular;
156+
157+
const { getByTitle, getByTestId } = render(
158+
<PanelTable
159+
isNative={false}
160+
errorMessage="test"
161+
errorType="test"
162+
hasError
163+
type="test"
164+
isTouched
165+
isDirty
166+
readFormStateRef={{ current: { touched: false } }}
167+
index={0}
168+
fieldsValues={{ test: circular }}
169+
name="test"
170+
collapseAll={false}
171+
refObject={{}}
172+
/>,
173+
);
174+
175+
fireEvent.click(getByTitle('Toggle field table'));
176+
177+
expect(getByTestId('test-field-value').textContent).toMatchInlineSnapshot(
178+
`"[Nested Object]"`,
179+
);
180+
});
181+
182+
it('should not render undefined field values', () => {
183+
const { getByTitle, queryByTestId } = render(
184+
<PanelTable
185+
isNative={false}
186+
errorMessage="test"
187+
errorType="test"
188+
hasError
189+
type="test"
190+
isTouched
191+
isDirty
192+
readFormStateRef={{ current: { touched: false } }}
193+
index={0}
194+
fieldsValues={{ test: undefined }}
195+
name="test"
196+
collapseAll={false}
197+
refObject={{}}
198+
/>,
199+
);
200+
201+
fireEvent.click(getByTitle('Toggle field table'));
202+
203+
expect(queryByTestId('test-field-value')).toBeNull();
204+
});
29205
});

src/panelTable.tsx

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -46,17 +46,21 @@ const PanelTable = ({
4646

4747
let value = fieldsValues ? fieldsValues[name] : '';
4848

49-
if (fieldsValues && isObject(fieldsValues[name])) {
50-
try {
51-
value = (
52-
<pre style={{ margin: 0 }}>
53-
<code style={{ fontSize: 12 }}>
54-
{JSON.stringify(fieldsValues[name], null, 2)}
55-
</code>
56-
</pre>
57-
);
58-
} catch {
59-
value = <span>[Nested Object]</span>;
49+
if (fieldsValues) {
50+
if (isObject(fieldsValues[name])) {
51+
try {
52+
value = (
53+
<pre style={{ margin: 0 }}>
54+
<code style={{ fontSize: 12 }}>
55+
{JSON.stringify(fieldsValues[name], null, 2)}
56+
</code>
57+
</pre>
58+
);
59+
} catch {
60+
value = <span>[Nested Object]</span>;
61+
}
62+
} else if (typeof fieldsValues[name] !== 'string') {
63+
value = String(fieldsValues[name]);
6064
}
6165
}
6266

@@ -228,6 +232,7 @@ const PanelTable = ({
228232
Value:
229233
</td>
230234
<td
235+
data-testid={`${name}-field-value`}
231236
style={{
232237
display: 'block',
233238
maxWidth: 100,
@@ -256,6 +261,7 @@ const PanelTable = ({
256261
style={{
257262
color: isTouched ? colors.green : colors.lightPink,
258263
...paraGraphDefaultStyle,
264+
fontSize: 12,
259265
}}
260266
>
261267
{isTouched ? 'true' : 'false'}
@@ -281,6 +287,7 @@ const PanelTable = ({
281287
style={{
282288
color: isDirty ? colors.green : colors.lightPink,
283289
...paraGraphDefaultStyle,
290+
fontSize: 12,
284291
}}
285292
>
286293
{isDirty ? 'true' : 'false'}

tsconfig.jest.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"extends": "./tsconfig.json",
33
"compilerOptions": {
4-
"module": "commonjs"
4+
"module": "commonjs",
5+
"esModuleInterop": true
56
}
67
}

0 commit comments

Comments
 (0)