Skip to content

Commit af0fcf6

Browse files
rvsiarvsia
authored
Merge pull request #642 from rvsia/antTesting
Fix(ant): add tests for ant mapper
2 parents dbe440c + 406e4e0 commit af0fcf6

File tree

12 files changed

+1213
-4
lines changed

12 files changed

+1213
-4
lines changed

‎packages/ant-component-mapper/src/files/slider.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const Slider = (props) => {
1717
min = 0,
1818
max = 100,
1919
isDisabled,
20+
isReadOnly,
2021
...rest
2122
} = useFieldApi(props);
2223
useEffect(() => {
@@ -35,7 +36,7 @@ const Slider = (props) => {
3536
isRequired={isRequired}
3637
>
3738
<AntSlider
38-
disabled={isDisabled}
39+
disabled={isDisabled || isReadOnly}
3940
onChange={onChange}
4041
{...input}
4142
value={range === true && !Array.isArray(value) ? [min, max] : value}

‎packages/ant-component-mapper/src/files/tabs.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const FormTabs = ({ fields, ...rest }) => {
1111
return (
1212
<Tabs {...rest}>
1313
{fields.map(({ fields, title, name, ...rest }) => (
14-
<TabPane tab={title} key={name} {...rest}>
14+
<TabPane tab={title} key={name} {...rest} forceRender>
1515
{formOptions.renderForm(fields, formOptions)}
1616
</TabPane>
1717
))}

‎packages/ant-component-mapper/src/tests/.eslintrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"rules": {
3+
"react/prop-types": "off"
4+
}
5+
}

‎packages/ant-component-mapper/src/tests/checkbox.test.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from 'react';
2+
import { mount } from 'enzyme';
3+
4+
import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
5+
6+
import FormTemplate from '../files/form-template';
7+
import componentMapper from '../files/component-mapper';
8+
import { Checkbox } from 'antd';
9+
10+
describe('<Checkbox />', () => {
11+
it('renders multiple checkbox', () => {
12+
const schema = {
13+
title: 'checkbox',
14+
description: 'desc',
15+
fields: [
16+
{
17+
component: componentTypes.CHECKBOX,
18+
name: 'check',
19+
options: [
20+
{
21+
label: 'option 1',
22+
value: 1
23+
},
24+
{
25+
label: 'option 2',
26+
value: 2
27+
}
28+
]
29+
}
30+
]
31+
};
32+
33+
const wrapper = mount(
34+
<FormRenderer onSubmit={jest.fn()} FormTemplate={(props) => <FormTemplate {...props} />} schema={schema} componentMapper={componentMapper} />
35+
);
36+
37+
expect(wrapper.find(Checkbox)).toHaveLength(2);
38+
expect(
39+
wrapper
40+
.find(Checkbox)
41+
.first()
42+
.props().children
43+
).toEqual('option 1');
44+
expect(
45+
wrapper
46+
.find(Checkbox)
47+
.last()
48+
.props().children
49+
).toEqual('option 2');
50+
expect(wrapper.find('.ant-form-item-required')).toHaveLength(0);
51+
});
52+
53+
it('renders multiple required checkbox', () => {
54+
const schema = {
55+
fields: [
56+
{
57+
component: componentTypes.CHECKBOX,
58+
isRequired: true,
59+
name: 'check',
60+
label: 'check',
61+
options: [
62+
{
63+
label: 'option 1',
64+
value: 1
65+
},
66+
{
67+
label: 'option 2',
68+
value: 2
69+
}
70+
]
71+
}
72+
]
73+
};
74+
75+
const wrapper = mount(
76+
<FormRenderer onSubmit={jest.fn()} FormTemplate={(props) => <FormTemplate {...props} />} schema={schema} componentMapper={componentMapper} />
77+
);
78+
79+
expect(wrapper.find('.ant-form-item-required')).toHaveLength(1);
80+
});
81+
});

‎packages/ant-component-mapper/src/tests/components.test.js

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
import React from 'react';
2+
import { mount } from 'enzyme';
3+
import { act } from 'react-dom/test-utils';
4+
5+
import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
6+
import FormTemplate from '../files/form-template';
7+
import componentMapper from '../files/component-mapper';
8+
import { validatorTypes } from '@data-driven-forms/react-form-renderer';
9+
import FormGroupWrapper from '../common/form-wrapper';
10+
11+
describe('formFields generated tests', () => {
12+
const RendererWrapper = ({ schema = { fields: [] }, ...props }) => (
13+
<FormRenderer
14+
onSubmit={jest.fn()}
15+
FormTemplate={(props) => <FormTemplate {...props} />}
16+
schema={schema}
17+
componentMapper={componentMapper}
18+
{...props}
19+
/>
20+
);
21+
let field;
22+
let schema;
23+
24+
const errorText = 'Required';
25+
const helperText = 'I am helper text';
26+
const description = 'This is description';
27+
const options = [
28+
{ label: 'Cat', value: 'cats' },
29+
{ label: 'Dog', value: 'dogs' },
30+
{ label: 'Hamster', value: 'hamsters' }
31+
];
32+
33+
const componentsWithOptions = [componentTypes.RADIO, componentTypes.SELECT];
34+
35+
beforeEach(() => {
36+
field = {};
37+
schema = [];
38+
});
39+
40+
describe('components', () => {
41+
[
42+
componentTypes.TEXT_FIELD,
43+
componentTypes.TEXTAREA,
44+
componentTypes.RADIO,
45+
componentTypes.CHECKBOX,
46+
componentTypes.DATE_PICKER,
47+
componentTypes.TIME_PICKER,
48+
componentTypes.SWITCH,
49+
componentTypes.SELECT,
50+
componentTypes.SLIDER
51+
].forEach((component) => {
52+
describe(`Component type: ${component}`, () => {
53+
beforeEach(() => {
54+
field.component = component;
55+
field.name = 'field-name';
56+
field.label = 'Some label';
57+
58+
if (componentsWithOptions.includes(component)) {
59+
field = {
60+
...field,
61+
options
62+
};
63+
}
64+
65+
schema = { fields: [field] };
66+
});
67+
68+
it('renders correctly', () => {
69+
const wrapper = mount(<RendererWrapper schema={schema} />);
70+
71+
if (component === componentTypes.RADIO) {
72+
expect(wrapper.find('.ant-radio-wrapper')).toHaveLength(options.length);
73+
} else {
74+
expect(wrapper.find(componentMapper[component])).toHaveLength(1);
75+
expect(
76+
wrapper
77+
.find('label')
78+
.text()
79+
.includes(field.label)
80+
).toEqual(true);
81+
}
82+
83+
expect(wrapper.find(FormGroupWrapper)).toHaveLength(1);
84+
expect(wrapper.find('.ant-form-item-explain')).toHaveLength(0);
85+
});
86+
87+
it('renders with error', async () => {
88+
const errorField = {
89+
...field,
90+
validate: [{ type: validatorTypes.REQUIRED }]
91+
};
92+
const wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
93+
await act(async () => {
94+
wrapper.find('form').simulate('submit');
95+
});
96+
wrapper.update();
97+
expect(
98+
wrapper
99+
.find('.ant-form-item-explain')
100+
.last()
101+
.text()
102+
).toEqual(errorText);
103+
expect(wrapper.find('.ant-form-item-has-error').length).toBeGreaterThanOrEqual(1);
104+
});
105+
106+
it('renders with error and validateOnMount', async () => {
107+
const errorField = {
108+
...field,
109+
validate: [{ type: validatorTypes.REQUIRED }],
110+
validateOnMount: true
111+
};
112+
let wrapper;
113+
await act(async () => {
114+
wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
115+
});
116+
wrapper.update();
117+
expect(
118+
wrapper
119+
.find('.ant-form-item-explain')
120+
.last()
121+
.text()
122+
).toEqual(errorText);
123+
expect(wrapper.find('.ant-form-item-has-error').length).toBeGreaterThanOrEqual(1);
124+
});
125+
126+
it('renders with helperText', () => {
127+
const helpertextField = {
128+
...field,
129+
helperText
130+
};
131+
const wrapper = mount(<RendererWrapper schema={{ fields: [helpertextField] }} />);
132+
133+
expect(
134+
wrapper
135+
.find('.ant-form-item-explain')
136+
.last()
137+
.text()
138+
).toEqual(helperText);
139+
});
140+
141+
it('renders with description', () => {
142+
const descriptionField = {
143+
...field,
144+
description
145+
};
146+
const wrapper = mount(<RendererWrapper schema={{ fields: [descriptionField] }} />);
147+
148+
expect(
149+
wrapper
150+
.find('.ant-form-item-explain')
151+
.last()
152+
.text()
153+
).toEqual(description);
154+
});
155+
156+
it('renders with description and helperText', () => {
157+
const descriptionField = {
158+
...field,
159+
description,
160+
helperText
161+
};
162+
const wrapper = mount(<RendererWrapper schema={{ fields: [descriptionField] }} />);
163+
164+
expect(
165+
wrapper
166+
.find('.ant-form-item-explain')
167+
.last()
168+
.text()
169+
).toEqual(helperText);
170+
});
171+
172+
it('renders with error and helperText', async () => {
173+
const errorFields = {
174+
...field,
175+
helperText,
176+
validate: [{ type: validatorTypes.REQUIRED }]
177+
};
178+
const wrapper = mount(<RendererWrapper schema={{ fields: [errorFields] }} />);
179+
await act(async () => {
180+
wrapper.find('form').simulate('submit');
181+
});
182+
wrapper.update();
183+
184+
expect(
185+
wrapper
186+
.find('.ant-form-item-explain')
187+
.last()
188+
.text()
189+
).toEqual(errorText);
190+
});
191+
192+
it('renders isRequired', () => {
193+
const requiredField = {
194+
...field,
195+
isRequired: true
196+
};
197+
const wrapper = mount(<RendererWrapper schema={{ fields: [requiredField] }} />);
198+
199+
if (component === componentTypes.CHECKBOX) {
200+
expect(wrapper.find('.ddorg__ant-component-mapper_is-required').text()).toEqual('*');
201+
} else {
202+
expect(wrapper.find('.ant-form-item-required')).toHaveLength(1);
203+
}
204+
});
205+
206+
it('renders isDisabled', () => {
207+
const disabledField = {
208+
...field,
209+
isDisabled: true
210+
};
211+
const wrapper = mount(<RendererWrapper schema={{ fields: [disabledField] }} />);
212+
213+
if (component === componentTypes.TEXTAREA) {
214+
expect(
215+
wrapper
216+
.find('textarea')
217+
.first()
218+
.props().disabled
219+
).toEqual(true);
220+
} else if (component === componentTypes.RADIO) {
221+
expect(wrapper.find('.ant-radio-disabled').length).toBeGreaterThanOrEqual(1);
222+
} else if (component === componentTypes.CHECKBOX) {
223+
expect(wrapper.find('.ant-checkbox-disabled').length).toBeGreaterThanOrEqual(1);
224+
} else if (component === componentTypes.SWITCH) {
225+
expect(wrapper.find('.ant-switch-disabled').length).toBeGreaterThanOrEqual(1);
226+
} else if (component === componentTypes.SLIDER) {
227+
expect(wrapper.find('.ant-slider-disabled').length).toBeGreaterThanOrEqual(1);
228+
} else {
229+
expect(
230+
wrapper
231+
.find('input')
232+
.first()
233+
.props().disabled
234+
).toEqual(true);
235+
}
236+
});
237+
238+
it('renders isReadOnly', () => {
239+
const disabledField = {
240+
...field,
241+
isReadOnly: true
242+
};
243+
const wrapper = mount(<RendererWrapper schema={{ fields: [disabledField] }} />);
244+
245+
if (component === componentTypes.TEXTAREA) {
246+
expect(
247+
wrapper
248+
.find('textarea')
249+
.first()
250+
.props().readOnly
251+
).toEqual(true);
252+
} else if (component === componentTypes.RADIO) {
253+
expect(wrapper.find('.ant-radio-disabled').length).toBeGreaterThanOrEqual(1);
254+
} else if (component === componentTypes.CHECKBOX) {
255+
expect(wrapper.find('.ant-checkbox-disabled').length).toBeGreaterThanOrEqual(1);
256+
} else if (component === componentTypes.SWITCH) {
257+
expect(wrapper.find('.ant-switch-disabled').length).toBeGreaterThanOrEqual(1);
258+
} else if (component === componentTypes.SLIDER) {
259+
expect(wrapper.find('.ant-slider-disabled').length).toBeGreaterThanOrEqual(1);
260+
} else {
261+
expect(
262+
wrapper
263+
.find('input')
264+
.first()
265+
.props().readOnly
266+
).toEqual(true);
267+
}
268+
});
269+
});
270+
});
271+
});
272+
});

0 commit comments

Comments
 (0)