Skip to content

Commit c104e82

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #1189 from rvsia/antToRTL
Convert ANT tests to RTL
2 parents b124715 + 1fa3b95 commit c104e82

File tree

11 files changed

+269
-375
lines changed

11 files changed

+269
-375
lines changed

‎packages/ant-component-mapper/config/jest.setup.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from 'react';
2-
import { mount } from 'enzyme';
2+
import { render, screen } from '@testing-library/react';
33

44
import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
55

66
import FormTemplate from '../form-template';
77
import componentMapper from '../component-mapper';
8-
import { Checkbox } from 'antd';
98

109
describe('<Checkbox />', () => {
1110
it('renders multiple checkbox', () => {
@@ -30,14 +29,12 @@ describe('<Checkbox />', () => {
3029
],
3130
};
3231

33-
const wrapper = mount(
32+
render(
3433
<FormRenderer onSubmit={jest.fn()} FormTemplate={(props) => <FormTemplate {...props} />} schema={schema} componentMapper={componentMapper} />
3534
);
3635

37-
expect(wrapper.find(Checkbox)).toHaveLength(2);
38-
expect(wrapper.find(Checkbox).first().props().children).toEqual('option 1');
39-
expect(wrapper.find(Checkbox).last().props().children).toEqual('option 2');
40-
expect(wrapper.find('.ant-form-item-required')).toHaveLength(0);
36+
expect(screen.getByText('option 1')).toBeInTheDocument();
37+
expect(screen.getByText('option 2')).toBeInTheDocument();
4138
});
4239

4340
it('renders multiple required checkbox', () => {
@@ -62,10 +59,10 @@ describe('<Checkbox />', () => {
6259
],
6360
};
6461

65-
const wrapper = mount(
62+
render(
6663
<FormRenderer onSubmit={jest.fn()} FormTemplate={(props) => <FormTemplate {...props} />} schema={schema} componentMapper={componentMapper} />
6764
);
6865

69-
expect(wrapper.find('.ant-form-item-required')).toHaveLength(1);
66+
expect(screen.getByText('check')).toHaveClass('ant-form-item-required');
7067
});
7168
});

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

Lines changed: 64 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React from 'react';
2-
import { mount } from 'enzyme';
3-
import { act } from 'react-dom/test-utils';
2+
import { act, render, screen } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
44

55
import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
66
import FormTemplate from '../form-template';
77
import componentMapper from '../component-mapper';
88
import { validatorTypes } from '@data-driven-forms/react-form-renderer';
9-
import FormGroupWrapper from '../form-group';
109

1110
describe('formFields generated tests', () => {
1211
const RendererWrapper = ({ schema = { fields: [] }, ...props }) => (
@@ -67,31 +66,29 @@ describe('formFields generated tests', () => {
6766
});
6867

6968
it('renders correctly', () => {
70-
const wrapper = mount(<RendererWrapper schema={schema} />);
69+
render(<RendererWrapper schema={schema} />);
7170

7271
if (component === componentTypes.RADIO) {
73-
expect(wrapper.find('.ant-radio-wrapper')).toHaveLength(options.length);
74-
} else {
75-
expect(wrapper.find(componentMapper[component])).toHaveLength(1);
76-
expect(wrapper.find('label').text().includes(field.label)).toEqual(true);
72+
options.forEach((option) => {
73+
expect(screen.getByText(option.label)).toBeInTheDocument();
74+
});
7775
}
7876

79-
expect(wrapper.find(FormGroupWrapper)).toHaveLength(1);
80-
expect(wrapper.find('.ant-form-item-explain')).toHaveLength(0);
77+
expect(screen.getByText(field.label)).toBeInTheDocument();
8178
});
8279

8380
it('renders with error', async () => {
8481
const errorField = {
8582
...field,
8683
validate: [{ type: validatorTypes.REQUIRED }],
8784
};
88-
const wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
85+
render(<RendererWrapper schema={{ fields: [errorField] }} />);
86+
8987
await act(async () => {
90-
wrapper.find('form').simulate('submit');
88+
userEvent.click(screen.getByText('Submit'));
9189
});
92-
wrapper.update();
93-
expect(wrapper.find('.ant-form-item-explain').last().text()).toEqual(errorText);
94-
expect(wrapper.find('.ant-form-item-has-error').length).toBeGreaterThanOrEqual(1);
90+
91+
expect(screen.getByText(errorText)).toBeInTheDocument();
9592
});
9693

9794
it('renders with warning', async () => {
@@ -101,15 +98,12 @@ describe('formFields generated tests', () => {
10198
useWarnings: true,
10299
validateOnMount: true,
103100
};
104-
let wrapper;
105101

106102
await act(async () => {
107-
wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
103+
render(<RendererWrapper schema={{ fields: [errorField] }} />);
108104
});
109-
wrapper.update();
110105

111-
expect(wrapper.find('.ant-form-item-explain').last().text()).toEqual(errorText);
112-
expect(wrapper.find('.ant-form-item-has-warning').length).toBeGreaterThanOrEqual(1);
106+
expect(screen.getByText(errorText)).toBeInTheDocument();
113107
});
114108

115109
it('renders with error and validateOnMount', async () => {
@@ -118,33 +112,33 @@ describe('formFields generated tests', () => {
118112
validate: [{ type: validatorTypes.REQUIRED }],
119113
validateOnMount: true,
120114
};
121-
let wrapper;
122115
await act(async () => {
123-
wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
116+
render(<RendererWrapper schema={{ fields: [errorField] }} />);
124117
});
125-
wrapper.update();
126-
expect(wrapper.find('.ant-form-item-explain').last().text()).toEqual(errorText);
127-
expect(wrapper.find('.ant-form-item-has-error').length).toBeGreaterThanOrEqual(1);
118+
119+
expect(screen.getByText(errorText)).toBeInTheDocument();
128120
});
129121

130122
it('renders with helperText', () => {
131123
const helpertextField = {
132124
...field,
133125
helperText,
134126
};
135-
const wrapper = mount(<RendererWrapper schema={{ fields: [helpertextField] }} />);
136127

137-
expect(wrapper.find('.ant-form-item-explain').last().text()).toEqual(helperText);
128+
render(<RendererWrapper schema={{ fields: [helpertextField] }} />);
129+
130+
expect(screen.getByText(helperText)).toBeInTheDocument();
138131
});
139132

140133
it('renders with description', () => {
141134
const descriptionField = {
142135
...field,
143136
description,
144137
};
145-
const wrapper = mount(<RendererWrapper schema={{ fields: [descriptionField] }} />);
146138

147-
expect(wrapper.find('.ant-form-item-explain').last().text()).toEqual(description);
139+
render(<RendererWrapper schema={{ fields: [descriptionField] }} />);
140+
141+
expect(screen.getByText(description)).toBeInTheDocument();
148142
});
149143

150144
it('renders with description and helperText', () => {
@@ -153,9 +147,10 @@ describe('formFields generated tests', () => {
153147
description,
154148
helperText,
155149
};
156-
const wrapper = mount(<RendererWrapper schema={{ fields: [descriptionField] }} />);
157150

158-
expect(wrapper.find('.ant-form-item-explain').last().text()).toEqual(helperText);
151+
render(<RendererWrapper schema={{ fields: [descriptionField] }} />);
152+
153+
expect(screen.getByText(helperText)).toBeInTheDocument();
159154
});
160155

161156
it('renders with error and helperText', async () => {
@@ -164,81 +159,85 @@ describe('formFields generated tests', () => {
164159
helperText,
165160
validate: [{ type: validatorTypes.REQUIRED }],
166161
};
167-
const wrapper = mount(<RendererWrapper schema={{ fields: [errorFields] }} />);
162+
163+
render(<RendererWrapper schema={{ fields: [errorFields] }} />);
164+
168165
await act(async () => {
169-
wrapper.find('form').simulate('submit');
166+
userEvent.click(screen.getByText('Submit'));
170167
});
171-
wrapper.update();
172168

173-
expect(wrapper.find('.ant-form-item-explain').last().text()).toEqual(errorText);
169+
expect(screen.getByText(errorText)).toBeInTheDocument();
174170
});
175171

176172
it('renders isRequired', () => {
177173
const requiredField = {
178174
...field,
179175
isRequired: true,
180176
};
181-
const wrapper = mount(<RendererWrapper schema={{ fields: [requiredField] }} />);
177+
178+
render(<RendererWrapper schema={{ fields: [requiredField] }} />);
182179

183180
if (component === componentTypes.CHECKBOX) {
184-
expect(wrapper.find('.ddorg__ant-component-mapper_is-required').text()).toEqual('*');
181+
expect(screen.getByText('*')).toBeInTheDocument();
185182
} else {
186-
expect(wrapper.find('.ant-form-item-required')).toHaveLength(1);
183+
expect(screen.getByText(field.label)).toHaveClass('ant-form-item-required');
187184
}
188185
});
189186

190187
it('renders isDisabled', () => {
188+
const labelText = 'field';
189+
191190
const disabledField = {
192191
...field,
193192
isDisabled: true,
193+
'aria-label': labelText,
194194
};
195-
const wrapper = mount(<RendererWrapper schema={{ fields: [disabledField] }} />);
196195

197-
if (component === componentTypes.TEXTAREA) {
198-
expect(wrapper.find('textarea').first().props().disabled).toEqual(true);
196+
const { container } = render(<RendererWrapper schema={{ fields: [disabledField] }} />);
197+
198+
if (component === componentTypes.SLIDER) {
199+
expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true');
199200
} else if (component === componentTypes.RADIO) {
200-
expect(wrapper.find('.ant-radio-disabled').length).toBeGreaterThanOrEqual(1);
201-
} else if (component === componentTypes.CHECKBOX) {
202-
expect(wrapper.find('.ant-checkbox-disabled').length).toBeGreaterThanOrEqual(1);
203-
} else if (component === componentTypes.SWITCH) {
204-
expect(wrapper.find('.ant-switch-disabled').length).toBeGreaterThanOrEqual(1);
205-
} else if (component === componentTypes.SLIDER) {
206-
expect(wrapper.find('.ant-slider-disabled').length).toBeGreaterThanOrEqual(1);
201+
expect(container.getElementsByTagName('input')[0].disabled).toEqual(true);
202+
} else if (component === componentTypes.SELECT) {
203+
expect(screen.getAllByLabelText(labelText)[0]).toHaveClass('ant-select-disabled');
207204
} else {
208-
expect(wrapper.find('input').first().props().disabled).toEqual(true);
205+
expect(screen.getAllByLabelText(labelText)[0]).toBeDisabled();
209206
}
210207
});
211208

212209
it('renders isReadOnly', () => {
210+
const labelText = 'field';
211+
213212
const disabledField = {
214213
...field,
215214
isReadOnly: true,
215+
'aria-label': labelText,
216216
};
217-
const wrapper = mount(<RendererWrapper schema={{ fields: [disabledField] }} />);
218217

219-
if (component === componentTypes.TEXTAREA) {
220-
expect(wrapper.find('textarea').first().props().readOnly).toEqual(true);
218+
const { container } = render(<RendererWrapper schema={{ fields: [disabledField] }} />);
219+
220+
if (component === componentTypes.SLIDER) {
221+
expect(screen.getByRole('slider')).toHaveAttribute('aria-disabled', 'true');
221222
} else if (component === componentTypes.RADIO) {
222-
expect(wrapper.find('.ant-radio-disabled').length).toBeGreaterThanOrEqual(1);
223-
} else if (component === componentTypes.CHECKBOX) {
224-
expect(wrapper.find('.ant-checkbox-disabled').length).toBeGreaterThanOrEqual(1);
225-
} else if (component === componentTypes.SWITCH) {
226-
expect(wrapper.find('.ant-switch-disabled').length).toBeGreaterThanOrEqual(1);
227-
} else if (component === componentTypes.SLIDER) {
228-
expect(wrapper.find('.ant-slider-disabled').length).toBeGreaterThanOrEqual(1);
223+
expect(container.getElementsByTagName('input')[0].disabled).toEqual(true);
224+
} else if (component === componentTypes.SELECT) {
225+
expect(screen.getAllByLabelText(labelText)[0]).toHaveClass('ant-select-disabled');
226+
} else if (component === componentTypes.TEXTAREA || componentTypes.TEXT_FIELD === component) {
227+
expect(screen.getAllByLabelText(labelText)[0]).toHaveAttribute('readonly', '');
229228
} else {
230-
expect(wrapper.find('input').first().props().readOnly).toEqual(true);
229+
expect(screen.getAllByLabelText(labelText)[0]).toBeDisabled();
231230
}
232231
});
233232

234233
it('renders with submitError', async () => {
235-
const wrapper = mount(<RendererWrapper schema={schema} onSubmit={() => ({ [field.name]: errorText })} />);
234+
render(<RendererWrapper schema={schema} onSubmit={() => ({ [field.name]: errorText })} />);
235+
236236
await act(async () => {
237-
wrapper.find('form').simulate('submit');
237+
userEvent.click(screen.getByText('Submit'));
238238
});
239-
wrapper.update();
240-
expect(wrapper.find('.ant-form-item-explain').last().text()).toEqual(errorText);
241-
expect(wrapper.find('.ant-form-item-has-error').length).toBeGreaterThanOrEqual(1);
239+
240+
expect(screen.getByText(errorText)).toBeInTheDocument();
242241
});
243242
});
244243
});

0 commit comments

Comments
 (0)