Skip to content

Commit 3c42569

Browse files
heath-freenomeheath-freenome
committed
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
1 parent dc91565 commit 3c42569

File tree

30 files changed

+75971
-42
lines changed

30 files changed

+75971
-42
lines changed

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

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

0 commit comments

Comments
 (0)