Skip to content

Commit ad93810

Browse files
rvsiarvsia
committed
Add tests for multiple-choice-list common
1 parent 23ef5b6 commit ad93810

File tree

1 file changed

+225
-0
lines changed

1 file changed

+225
-0
lines changed

‎packages/common/src/test/multiple-choice-list/multiple-choice-list.test.js

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
/* eslint-disable react/prop-types */
2+
import React from 'react';
3+
import { act } from 'react-dom/test-utils';
4+
import { FormRenderer, componentTypes, useFormApi } from '@data-driven-forms/react-form-renderer';
5+
import { mount } from 'enzyme';
6+
7+
import MultipleChoiceList from '../../multiple-choice-list';
8+
9+
describe('multiple choice list', () => {
10+
let wrapper;
11+
let wrapperProps;
12+
13+
const SingleCheckbox = ({ isDisabled, label, option, meta, ...props }) => (
14+
<React.Fragment>
15+
<label>{label}</label>
16+
<input {...props} disabled={isDisabled} />
17+
</React.Fragment>
18+
);
19+
20+
const Wrapper = ({ children, ...props }) => {
21+
wrapperProps = props;
22+
return <div className="wrapper">{children}</div>;
23+
};
24+
25+
const Checkbox = (props) => <MultipleChoiceList Checkbox={SingleCheckbox} Wrapper={Wrapper} {...props} />;
26+
27+
const rendererProps = {
28+
onSubmit: jest.fn(),
29+
FormTemplate: ({ formFields }) => {
30+
const { handleSubmit } = useFormApi();
31+
return <form onSubmit={handleSubmit}>{formFields}</form>;
32+
},
33+
componentMapper: { [componentTypes.CHECKBOX]: Checkbox },
34+
schema: {
35+
fields: [
36+
{
37+
name: 'check',
38+
component: componentTypes.CHECKBOX,
39+
label: 'Select animals',
40+
helperText: 'some helper text',
41+
isRequired: true,
42+
options: [
43+
{
44+
value: 'cats',
45+
label: 'l cats'
46+
},
47+
{
48+
value: 'cats_1',
49+
label: 'l cats_1'
50+
},
51+
{
52+
value: 'cats_2',
53+
label: 'l cats_2'
54+
},
55+
{
56+
value: 'zebras',
57+
label: 'l zebras'
58+
},
59+
{
60+
value: 'pigeons',
61+
label: 'l pigeons'
62+
}
63+
]
64+
}
65+
]
66+
}
67+
};
68+
69+
it('renders correctly', async () => {
70+
await act(async () => {
71+
wrapper = mount(<FormRenderer {...rendererProps} />);
72+
});
73+
wrapper.update();
74+
75+
expect(wrapperProps).toEqual({
76+
description: undefined,
77+
error: undefined,
78+
helperText: 'some helper text',
79+
isRequired: true,
80+
label: 'Select animals',
81+
meta: {
82+
active: false,
83+
data: {},
84+
dirty: false,
85+
dirtySinceLastSubmit: false,
86+
error: undefined,
87+
initial: undefined,
88+
invalid: false,
89+
length: undefined,
90+
modified: false,
91+
modifiedSinceLastSubmit: false,
92+
pristine: true,
93+
submitError: undefined,
94+
submitFailed: false,
95+
submitSucceeded: false,
96+
submitting: false,
97+
touched: false,
98+
valid: true,
99+
validating: false,
100+
visited: false
101+
},
102+
name: 'check',
103+
rest: {},
104+
showError: false
105+
});
106+
expect(wrapper.find(SingleCheckbox)).toHaveLength(5);
107+
108+
expect(wrapper.find('label').map((l) => l.text())).toEqual(['l cats', 'l cats_1', 'l cats_2', 'l zebras', 'l pigeons']);
109+
expect(wrapper.find('input').map((i) => i.props().value)).toEqual(['cats', 'cats_1', 'cats_2', 'zebras', 'pigeons']);
110+
});
111+
112+
it('show error', async () => {
113+
await act(async () => {
114+
wrapper = mount(
115+
<FormRenderer
116+
{...rendererProps}
117+
schema={{
118+
fields: [{ ...rendererProps.schema.fields[0], validate: [{ type: 'required' }] }]
119+
}}
120+
/>
121+
);
122+
});
123+
wrapper.update();
124+
125+
await act(async () => {
126+
wrapper
127+
.find('input')
128+
.first()
129+
.simulate('focus');
130+
});
131+
wrapper.update();
132+
133+
await act(async () => {
134+
wrapper
135+
.find('input')
136+
.first()
137+
.simulate('change', { target: { checked: false } });
138+
});
139+
wrapper.update();
140+
141+
await act(async () => {
142+
wrapper
143+
.find('input')
144+
.first()
145+
.simulate('blur');
146+
});
147+
wrapper.update();
148+
149+
expect(wrapperProps).toEqual({
150+
description: undefined,
151+
error: 'Required',
152+
helperText: 'some helper text',
153+
isRequired: true,
154+
label: 'Select animals',
155+
meta: {
156+
active: false,
157+
data: {},
158+
dirty: false,
159+
dirtySinceLastSubmit: false,
160+
error: 'Required',
161+
initial: undefined,
162+
invalid: true,
163+
length: undefined,
164+
modified: false,
165+
modifiedSinceLastSubmit: false,
166+
pristine: true,
167+
submitError: undefined,
168+
submitFailed: false,
169+
submitSucceeded: false,
170+
submitting: false,
171+
touched: true,
172+
valid: false,
173+
validating: false,
174+
visited: true
175+
},
176+
name: 'check',
177+
rest: {},
178+
showError: 'Required'
179+
});
180+
});
181+
182+
it('show submit error', async () => {
183+
await act(async () => {
184+
wrapper = mount(<FormRenderer {...rendererProps} onSubmit={() => ({ check: 'submitError' })} />);
185+
});
186+
wrapper.update();
187+
188+
await act(async () => {
189+
wrapper.find('form').simulate('submit');
190+
});
191+
wrapper.update();
192+
193+
expect(wrapperProps).toEqual({
194+
description: undefined,
195+
error: 'submitError',
196+
helperText: 'some helper text',
197+
isRequired: true,
198+
label: 'Select animals',
199+
meta: {
200+
active: false,
201+
data: {},
202+
dirty: false,
203+
dirtySinceLastSubmit: false,
204+
error: undefined,
205+
initial: undefined,
206+
invalid: true,
207+
length: undefined,
208+
modified: false,
209+
modifiedSinceLastSubmit: false,
210+
pristine: true,
211+
submitError: 'submitError',
212+
submitFailed: true,
213+
submitSucceeded: false,
214+
submitting: false,
215+
touched: true,
216+
valid: false,
217+
validating: false,
218+
visited: false
219+
},
220+
name: 'check',
221+
rest: {},
222+
showError: 'submitError'
223+
});
224+
});
225+
});

0 commit comments

Comments
 (0)