Skip to content

Commit 91ac453

Browse files
heath-freenomeheath-freenome
authored
Added snapshots tests for grids (#4559)
* Added snapshots tests for grids Added snapshot testing for the new grid layout feature - In `snapshots`, added the new `gridTests.tsx` file that supports testing grids in the themes - Also cleaned up the other tests little bit - In `core` added `GridSnap.tsx` and changed the other snapshot tests to be `tsx` files - Also updated `LayoutGridField` to add support for the `$lookup=` prefix on string props in the children field of a gridSchema - Updated the `LayoutGridField` tests accordingly - Added the new snapshot files (and deleted the old .jsx` ones) - In `antd`, `chakra`, `fluentui-rc`, `mui`, `react-bootstrap`, `semantic-ui` and `shadcdn` added `GridSnap.tsx` - Added the new snapshot files after running the test - In playground, updated the `layoutGrid.tsx` to add a `formContext` for the `PlaceholderText` lookup * - Responded to reviewer feedback with a few consolidation refactors
1 parent dc91565 commit 91ac453

34 files changed

+76009
-111
lines changed

‎packages/antd/test/Form.test.tsx

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,13 @@
11
import renderer from 'react-test-renderer';
22
import validator from '@rjsf/validator-ajv8';
33
import { RJSFSchema } from '@rjsf/utils';
4-
import { formTests, SELECT_CUSTOMIZE } from '@rjsf/snapshot-tests';
4+
import { formTests } from '@rjsf/snapshot-tests';
55

66
import '../__mocks__/matchMedia.mock';
77
import Form from '../src';
8+
import { FORM_RENDER_OPTIONS } from './snapshotConstants';
89

9-
formTests(Form, {
10-
[SELECT_CUSTOMIZE]: {
11-
createNodeMock: (element) => {
12-
if (element.type === 'span' && element.props['aria-hidden']) {
13-
// the `rc-select` MultipleSelector code expects a ref for this span to exist, so use the feature of
14-
// react-test-renderer to create one
15-
// See: https://reactjs.org/docs/test-renderer.html#ideas
16-
return { scrollWidth: 100 };
17-
}
18-
return null;
19-
},
20-
},
21-
});
10+
formTests(Form, FORM_RENDER_OPTIONS);
2211

2312
describe('antd specific tests', () => {
2413
test('descriptionLocation tooltip in formContext', () => {

‎packages/antd/test/GridSnap.test.tsx

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
import { gridTests, SELECT_CUSTOMIZE } from '@rjsf/snapshot-tests';
2+
3+
import '../__mocks__/matchMedia.mock';
4+
import Form from '../src';
5+
import { FORM_RENDER_OPTIONS } from './snapshotConstants';
6+
7+
gridTests(
8+
Form,
9+
{
10+
ColumnWidthAll: { xs: 24 },
11+
ColumnWidth4: { xs: 8 },
12+
ColumnWidth6: { xs: 12 },
13+
ColumnWidth8: { xs: 16 },
14+
ComplexUiSchema: {
15+
'ui:field': 'LayoutGridField',
16+
'ui:layoutGrid': {
17+
'ui:row': {
18+
children: [
19+
{
20+
'ui:row': {
21+
children: [
22+
{
23+
'ui:col': {
24+
xs: 24,
25+
children: ['person'],
26+
},
27+
},
28+
],
29+
},
30+
},
31+
{
32+
'ui:row': {
33+
gutter: [6, 0],
34+
children: [
35+
{
36+
'ui:columns': {
37+
xs: 8,
38+
children: ['person.name.first', 'person.name.middle', 'person.name.last'],
39+
},
40+
},
41+
],
42+
},
43+
},
44+
{
45+
'ui:row': {
46+
gutter: [6, 0],
47+
children: [
48+
{
49+
'ui:col': {
50+
xs: 8,
51+
children: [
52+
{
53+
name: 'person.birth_date',
54+
placeholder: '$lookup=PlaceholderText',
55+
},
56+
],
57+
},
58+
},
59+
{
60+
'ui:col': {
61+
xs: 16,
62+
children: ['person.race'],
63+
},
64+
},
65+
],
66+
},
67+
},
68+
{
69+
'ui:row': {
70+
gutter: [6, 0],
71+
children: [
72+
{
73+
'ui:col': {
74+
xs: 12,
75+
children: ['person.address'],
76+
},
77+
},
78+
{
79+
'ui:col': {
80+
xs: 12,
81+
children: [
82+
{
83+
'ui:row': {
84+
children: [
85+
{
86+
'ui:col': {
87+
xs: 24,
88+
style: { margin: '44px 0 30px' },
89+
children: ['employment'],
90+
},
91+
},
92+
{
93+
'ui:condition': {
94+
field: 'employment.job_type',
95+
value: 'company',
96+
operator: 'all',
97+
children: [
98+
{
99+
'ui:columns': {
100+
xs: 24,
101+
children: ['employment.business', 'employment.title'],
102+
},
103+
},
104+
{
105+
'ui:row': {
106+
gutter: [6, 0],
107+
children: [
108+
{
109+
'ui:col': {
110+
xs: 16,
111+
children: ['employment.location.city'],
112+
},
113+
},
114+
{
115+
'ui:col': {
116+
xs: 8,
117+
children: ['employment.location.state'],
118+
},
119+
},
120+
],
121+
},
122+
},
123+
],
124+
},
125+
},
126+
{
127+
'ui:condition': {
128+
field: 'employment.job_type',
129+
value: 'education',
130+
operator: 'all',
131+
children: [
132+
{
133+
'ui:columns': {
134+
xs: 24,
135+
children: ['employment.district', 'employment.school', 'employment.title'],
136+
},
137+
},
138+
{
139+
'ui:row': {
140+
gutter: [6, 0],
141+
children: [
142+
{
143+
'ui:col': {
144+
xs: 16,
145+
children: ['employment.location.city'],
146+
},
147+
},
148+
{
149+
'ui:col': {
150+
xs: 8,
151+
children: ['employment.location.state'],
152+
},
153+
},
154+
],
155+
},
156+
},
157+
],
158+
},
159+
},
160+
{
161+
'ui:condition': {
162+
field: 'employment.job_type',
163+
value: 'other',
164+
operator: 'all',
165+
children: [
166+
{
167+
'ui:columns': {
168+
xs: 24,
169+
children: [
170+
{
171+
name: 'employment.description',
172+
rows: 6,
173+
},
174+
],
175+
},
176+
},
177+
],
178+
},
179+
},
180+
],
181+
},
182+
},
183+
],
184+
},
185+
},
186+
],
187+
},
188+
},
189+
],
190+
},
191+
},
192+
person: {
193+
'ui:field': 'LayoutHeaderField',
194+
race: {
195+
'ui:options': {
196+
widget: 'checkboxes',
197+
},
198+
},
199+
address: {
200+
'ui:field': 'LayoutGridField',
201+
'ui:layoutGrid': {
202+
'ui:row': {
203+
children: [
204+
{
205+
'ui:columns': {
206+
xs: 24,
207+
children: ['line_1', 'line_2', 'city'],
208+
},
209+
},
210+
{
211+
'ui:row': {
212+
gutter: [6, 0],
213+
children: [
214+
{
215+
'ui:columns': {
216+
xs: 12,
217+
children: ['state', 'postal_code'],
218+
},
219+
},
220+
],
221+
},
222+
},
223+
],
224+
},
225+
},
226+
},
227+
},
228+
employment: {
229+
'ui:options': {
230+
inline: true,
231+
},
232+
description: {
233+
'ui:widget': 'textarea',
234+
},
235+
},
236+
},
237+
},
238+
FORM_RENDER_OPTIONS[SELECT_CUSTOMIZE]
239+
);

0 commit comments

Comments
 (0)