Skip to content

Commit e10789e

Browse files
rvsiarvsia
committed
Add more tests for SUI in RTL
1 parent 7f14f33 commit e10789e

File tree

3 files changed

+69
-78
lines changed

3 files changed

+69
-78
lines changed

‎packages/suir-component-mapper/src/tests/dual-list-select.test.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import { act } from 'react-dom/test-utils';
32
import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
43
import { render, screen } from '@testing-library/react';
54
import userEvent from '@testing-library/user-event';
@@ -172,7 +171,7 @@ describe('DualListSelect', () => {
172171
it('sort options', async () => {
173172
const { container } = render(<FormRenderer {...initialProps} />);
174173

175-
expect([...container.getElementsByClassName('ui segment')].map((el) => [...el.children].map((e) => e.textContent)).flatMap(x => x)).toEqual([
174+
expect([...container.getElementsByClassName('ui segment')].map((el) => [...el.children].map((e) => e.textContent)).flatMap((x) => x)).toEqual([
176175
'cats',
177176
'cats_1',
178177
'cats_2',
@@ -183,7 +182,7 @@ describe('DualListSelect', () => {
183182

184183
userEvent.click(screen.getByTitle('Sort options'));
185184

186-
expect([...container.getElementsByClassName('ui segment')].map((el) => [...el.children].map((e) => e.textContent)).flatMap(x => x)).toEqual([
185+
expect([...container.getElementsByClassName('ui segment')].map((el) => [...el.children].map((e) => e.textContent)).flatMap((x) => x)).toEqual([
187186
'zebras',
188187
'pigeons',
189188
'cats_2',
@@ -194,7 +193,7 @@ describe('DualListSelect', () => {
194193

195194
userEvent.click(screen.getByTitle('Sort options'));
196195

197-
expect([...container.getElementsByClassName('ui segment')].map((el) => [...el.children].map((e) => e.textContent)).flatMap(x => x)).toEqual([
196+
expect([...container.getElementsByClassName('ui segment')].map((el) => [...el.children].map((e) => e.textContent)).flatMap((x) => x)).toEqual([
198197
'cats',
199198
'cats_1',
200199
'cats_2',
@@ -209,7 +208,7 @@ describe('DualListSelect', () => {
209208
<FormRenderer {...initialProps} initialValues={{ 'dual-list': schema.fields[0].options.map(({ value }) => value) }} />
210209
);
211210

212-
expect([...container.getElementsByClassName('ui segment')].map((el) => [...el.children].map((e) => e.textContent)).flatMap(x => x)).toEqual([
211+
expect([...container.getElementsByClassName('ui segment')].map((el) => [...el.children].map((e) => e.textContent)).flatMap((x) => x)).toEqual([
213212
'No available options',
214213
'cats',
215214
'cats_1',
@@ -220,7 +219,7 @@ describe('DualListSelect', () => {
220219

221220
userEvent.click(screen.getByTitle('Sort value'));
222221

223-
expect([...container.getElementsByClassName('ui segment')].map((el) => [...el.children].map((e) => e.textContent)).flatMap(x => x)).toEqual([
222+
expect([...container.getElementsByClassName('ui segment')].map((el) => [...el.children].map((e) => e.textContent)).flatMap((x) => x)).toEqual([
224223
'No available options',
225224
'zebras',
226225
'pigeons',
@@ -231,7 +230,7 @@ describe('DualListSelect', () => {
231230

232231
userEvent.click(screen.getByTitle('Sort value'));
233232

234-
expect([...container.getElementsByClassName('ui segment')].map((el) => [...el.children].map((e) => e.textContent)).flatMap(x => x)).toEqual([
233+
expect([...container.getElementsByClassName('ui segment')].map((el) => [...el.children].map((e) => e.textContent)).flatMap((x) => x)).toEqual([
235234
'No available options',
236235
'cats',
237236
'cats_1',

‎packages/suir-component-mapper/src/tests/field-array.test.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,10 @@ import userEvent from '@testing-library/user-event';
55

66
import { componentMapper, FormTemplate } from '../index';
77
import { reducer } from '../field-array';
8-
import { Header, Button } from 'semantic-ui-react';
98

109
describe('<FieldArray/>', () => {
1110
let initialProps;
1211
let onSubmit;
13-
let wrapper;
1412

1513
beforeEach(() => {
1614
onSubmit = jest.fn();

‎packages/suir-component-mapper/src/tests/form-fields.test.js‎

Lines changed: 63 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
import React from 'react';
2-
import { mount } from 'enzyme';
3-
import { act } from 'react-dom/test-utils';
4-
import MultipleChoiceListCommon from '@data-driven-forms/common/multiple-choice-list';
2+
import { render, screen, act } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
4+
55
import { FormRenderer, componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
66
import Checkbox from '../checkbox';
77

88
import RenderWithProvider from '../../../../__mocks__/with-provider';
99
import FormTemplate from '../form-template';
1010
import componentMapper from '../component-mapper';
11-
import { Radio, Dropdown } from 'semantic-ui-react';
12-
import HelperText from '../helper-text/helper-text';
1311

1412
const RendererWrapper = ({ schema = { fields: [] }, ...props }) => (
1513
<FormRenderer
@@ -69,28 +67,28 @@ describe('formFields', () => {
6967
});
7068

7169
it('renders correctly', () => {
72-
const wrapper = mount(<RendererWrapper schema={schema} />);
70+
render(<RendererWrapper schema={schema} />);
7371

7472
if (component === componentTypes.RADIO) {
75-
expect(wrapper.find(Radio)).toHaveLength(options.length);
76-
} else {
77-
expect(wrapper.find(componentMapper[component])).toHaveLength(1);
73+
options.forEach((opt) => {
74+
expect(screen.getByText(opt.label)).toBeInTheDocument();
75+
});
7876
}
7977

80-
expect(wrapper.find('label').first().text()).toEqual(field.label);
81-
expect(wrapper.find('.ui.pointing.prompt.label')).toHaveLength(0);
82-
expect(wrapper.find(HelperText)).toHaveLength(0);
83-
expect(wrapper.find('.required.field')).toHaveLength(0);
78+
expect(screen.getAllByText(field.label)).toBeTruthy();
79+
expect(() => screen.getByText(errorText)).toThrow();
8480
});
8581

8682
it('renders with error', () => {
8783
const errorField = {
8884
...field,
8985
validate: [{ type: validatorTypes.REQUIRED }],
9086
};
91-
const wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
92-
wrapper.find('form').simulate('submit');
93-
expect(wrapper.find('.ui.pointing.prompt.label').last().text()).toEqual(errorText);
87+
render(<RendererWrapper schema={{ fields: [errorField] }} />);
88+
89+
userEvent.click(screen.getByText('Submit'));
90+
91+
expect(screen.getByText(errorText)).toBeInTheDocument();
9492
});
9593

9694
it('renders with warning', async () => {
@@ -100,24 +98,27 @@ describe('formFields', () => {
10098
useWarnings: true,
10199
validateOnMount: true,
102100
};
103-
let wrapper;
104-
105101
await act(async () => {
106-
wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
102+
render(
103+
<RendererWrapper
104+
schema={{
105+
fields: [errorField],
106+
}}
107+
/>
108+
);
107109
});
108-
wrapper.update();
109110

110-
expect(wrapper.find(HelperText).last().text()).toEqual(errorText);
111+
expect(screen.getAllByText(errorText)).toBeTruthy();
111112
});
112113

113114
it('renders with helperText', () => {
114115
const helpertextField = {
115116
...field,
116117
helperText,
117118
};
118-
const wrapper = mount(<RendererWrapper schema={{ fields: [helpertextField] }} />);
119+
render(<RendererWrapper schema={{ fields: [helpertextField] }} />);
119120

120-
expect(wrapper.find(HelperText).last().text()).toEqual(helperText);
121+
expect(screen.getByText(helperText)).toBeInTheDocument();
121122
});
122123

123124
it('renders with error and helperText', () => {
@@ -126,63 +127,56 @@ describe('formFields', () => {
126127
helperText,
127128
validate: [{ type: validatorTypes.REQUIRED }],
128129
};
129-
const wrapper = mount(<RendererWrapper schema={{ fields: [errorFields] }} />);
130-
wrapper.find('form').simulate('submit');
130+
render(<RendererWrapper schema={{ fields: [errorFields] }} />);
131131

132-
expect(wrapper.find('.ui.pointing.prompt.label').last().text()).toEqual(errorText);
133-
expect(wrapper.find(HelperText).last().text()).toEqual(helperText);
132+
userEvent.click(screen.getByText('Submit'));
133+
134+
expect(screen.getByText(errorText)).toBeInTheDocument();
135+
expect(screen.getByText(helperText)).toBeInTheDocument();
134136
});
135137

136138
it('renders isRequired', () => {
137139
const requiredField = {
138140
...field,
139141
isRequired: true,
140142
};
141-
const wrapper = mount(<RendererWrapper schema={{ fields: [requiredField] }} />);
142-
if (component === componentTypes.TEXTAREA) {
143-
expect(wrapper.find('.required.field')).toHaveLength(2);
144-
} else {
145-
expect(wrapper.find('.required.field')).toHaveLength(1);
146-
}
143+
render(<RendererWrapper schema={{ fields: [requiredField] }} />);
144+
145+
expect(screen.getByText(field.label).closest('.required')).toBeInTheDocument();
147146
});
148147

149148
it('renders isDisabled', () => {
150149
const disabledField = {
151150
...field,
152151
isDisabled: true,
153152
};
154-
const wrapper = mount(<RendererWrapper schema={{ fields: [disabledField] }} />);
155-
156-
if (component === componentTypes.TEXTAREA) {
157-
expect(wrapper.find('textarea').first().props().disabled).toEqual(true);
158-
} else if (component === componentTypes.SELECT) {
159-
expect(wrapper.find(Dropdown).first().prop('disabled')).toEqual(true);
160-
} else {
161-
expect(wrapper.find('input').first().props().disabled).toEqual(true);
162-
}
153+
const { container } = render(<RendererWrapper schema={{ fields: [disabledField] }} />);
154+
155+
[...container.getElementsByTagName('input')].forEach((el) => expect(el).toBeDisabled());
163156
});
164157

165158
it('renders isReadOnly', () => {
166159
const disabledField = {
167160
...field,
168161
isReadOnly: true,
169162
};
170-
const wrapper = mount(<RendererWrapper schema={{ fields: [disabledField] }} />);
171-
172-
if (component === componentTypes.TEXTAREA) {
173-
expect(wrapper.find('textarea').first().props().readOnly).toEqual(true);
174-
} else if (component === componentTypes.SELECT) {
175-
/**SUIR select does not have read only prop */
176-
expect(true);
177-
} else {
178-
expect(wrapper.find('input').first().props().readOnly).toEqual(true);
179-
}
163+
const { container } = render(<RendererWrapper schema={{ fields: [disabledField] }} />);
164+
165+
[...container.getElementsByTagName('input')].forEach((el) => {
166+
try {
167+
expect(el).toBeDisabled();
168+
} catch {
169+
expect(el).toHaveAttribute('readonly', '');
170+
}
171+
});
180172
});
181173

182174
it('renders with submitError', () => {
183-
const wrapper = mount(<RendererWrapper schema={schema} onSubmit={() => ({ [field.name]: errorText })} />);
184-
wrapper.find('form').simulate('submit');
185-
expect(wrapper.find('.ui.pointing.prompt.label').last().text()).toEqual(errorText);
175+
render(<RendererWrapper schema={schema} onSubmit={() => ({ [field.name]: errorText })} />);
176+
177+
userEvent.click(screen.getByText('Submit'));
178+
179+
expect(screen.getByText(errorText)).toBeInTheDocument();
186180
});
187181
});
188182
});
@@ -203,16 +197,15 @@ describe('formFields', () => {
203197
});
204198

205199
it('renders correctly', () => {
206-
const wrapper = mount(
200+
render(
207201
<RenderWithProvider>
208202
<Checkbox {...initialProps} />
209203
</RenderWithProvider>
210204
);
211205

212-
expect(wrapper.find(MultipleChoiceListCommon)).toHaveLength(1);
213-
expect(wrapper.find('.ui.pointing.prompt.label')).toHaveLength(0);
214-
expect(wrapper.find(HelperText)).toHaveLength(0);
215-
expect(wrapper.find('.required.field')).toHaveLength(0);
206+
expect(screen.getByText('Cat')).toBeInTheDocument();
207+
expect(screen.getByText('Dog')).toBeInTheDocument();
208+
expect(screen.getByText('Hamster')).toBeInTheDocument();
216209
});
217210

218211
it('renders with error', () => {
@@ -225,10 +218,11 @@ describe('formFields', () => {
225218
},
226219
],
227220
};
228-
const wrapper = mount(<RendererWrapper schema={schema} />);
229-
wrapper.find('form').simulate('submit');
221+
render(<RendererWrapper schema={schema} />);
222+
223+
userEvent.click(screen.getByText('Submit'));
230224

231-
expect(wrapper.find('.ui.pointing.prompt.label').last().text()).toEqual(errorText);
225+
expect(screen.getByText(errorText)).toBeInTheDocument();
232226
});
233227

234228
it('renders with helperText', () => {
@@ -241,9 +235,9 @@ describe('formFields', () => {
241235
},
242236
],
243237
};
244-
const wrapper = mount(<RendererWrapper schema={schema} />);
238+
render(<RendererWrapper schema={schema} />);
245239

246-
expect(wrapper.find(HelperText).last().text()).toEqual(helperText);
240+
expect(screen.getByText(helperText)).toBeInTheDocument();
247241
});
248242

249243
it('renders with error and helperText', () => {
@@ -257,12 +251,12 @@ describe('formFields', () => {
257251
},
258252
],
259253
};
260-
const wrapper = mount(<RendererWrapper schema={schema} />);
261-
wrapper.find('form').simulate('submit');
254+
render(<RendererWrapper schema={schema} />);
262255

263-
expect(wrapper.find('.ui.pointing.prompt.label').last().text()).toEqual(errorText);
256+
userEvent.click(screen.getByText('Submit'));
264257

265-
expect(wrapper.find(HelperText).last().text()).toEqual(helperText);
258+
expect(screen.getByText(errorText)).toBeInTheDocument();
259+
expect(screen.getByText(helperText)).toBeInTheDocument();
266260
});
267261
});
268262
});

0 commit comments

Comments
 (0)