Skip to content

Commit bab4443

Browse files
rvsiarvsia
committed
Convert MUI wizard test to RTL
1 parent b8ccd96 commit bab4443

File tree

1 file changed

+52
-92
lines changed

1 file changed

+52
-92
lines changed

‎packages/mui-component-mapper/src/tests/wizard.test.js‎

Lines changed: 52 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
4+
25
import { FormRenderer, componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
3-
import { mount } from 'enzyme';
4-
import { Button } from '@mui/material';
56

67
import { componentMapper, FormTemplate } from '../index';
78
import { CONDITIONAL_SUBMIT_FLAG } from '@data-driven-forms/common/wizard';
@@ -35,6 +36,7 @@ describe('wizard', () => {
3536
component: componentTypes.TEXT_FIELD,
3637
name: 'aws',
3738
validate: [{ type: validatorTypes.REQUIRED }],
39+
inputProps: { 'aria-label': 'aws-field' },
3840
},
3941
],
4042
},
@@ -63,28 +65,19 @@ describe('wizard', () => {
6365
});
6466

6567
it('simple next and back', () => {
66-
const wrapper = mount(<FormRenderer {...initialProps} />);
67-
68-
expect(wrapper.find('.MuiStepLabel-label .Mui-active').first().text()).toEqual('AWS step');
69-
70-
wrapper.find(Button).last().simulate('click'); // disabled next
71-
wrapper.update();
72-
73-
expect(wrapper.find('.MuiStepLabel-label .Mui-active').first().text()).toEqual('AWS step');
68+
render(<FormRenderer {...initialProps} />);
7469

75-
wrapper.find('input').instance().value = 'something';
76-
wrapper.find('input').simulate('change');
77-
wrapper.update();
70+
expect(screen.getByText('AWS step')).toHaveClass('Mui-active');
71+
expect(() => userEvent.click(screen.getByText('Continue'))).toThrow();
7872

79-
wrapper.find(Button).last().simulate('click'); // next
80-
wrapper.update();
73+
userEvent.type(screen.getByLabelText('aws-field'), 'something');
74+
userEvent.click(screen.getByText('Continue'));
8175

82-
expect(wrapper.find('.MuiStepLabel-label .Mui-active').first().text()).toEqual('Summary');
76+
expect(screen.getByText('Summary')).toHaveClass('Mui-active');
8377

84-
wrapper.find(Button).at(1).simulate('click'); // back
85-
wrapper.update();
78+
userEvent.click(screen.getByText('Back'));
8679

87-
expect(wrapper.find('.MuiStepLabel-label .Mui-active').first().text()).toEqual('AWS step');
80+
expect(screen.getByText('AWS step')).toHaveClass('Mui-active');
8881
});
8982

9083
it('conditional next', () => {
@@ -118,6 +111,7 @@ describe('wizard', () => {
118111
component: componentTypes.TEXT_FIELD,
119112
name: 'aws',
120113
validate: [{ type: validatorTypes.REQUIRED }],
114+
inputProps: { 'aria-label': 'aws-field' },
121115
},
122116
],
123117
},
@@ -127,6 +121,7 @@ describe('wizard', () => {
127121
{
128122
component: componentTypes.TEXT_FIELD,
129123
name: 'summary',
124+
label: 'Summary field',
130125
},
131126
],
132127
},
@@ -136,6 +131,7 @@ describe('wizard', () => {
136131
{
137132
component: componentTypes.TEXT_FIELD,
138133
name: 'googlesummary',
134+
label: 'Google summary',
139135
},
140136
],
141137
},
@@ -144,40 +140,25 @@ describe('wizard', () => {
144140
],
145141
};
146142

147-
const wrapper = mount(<FormRenderer {...initialProps} schema={schema} />);
143+
render(<FormRenderer {...initialProps} schema={schema} />);
148144

149-
expect(wrapper.find('.MuiStepLabel-label .Mui-active').first().text()).toEqual('First step');
145+
expect(screen.getByText('First step')).toHaveClass('Mui-active');
150146

151-
wrapper.find('input').instance().value = 'aws';
152-
wrapper.find('input').simulate('change');
153-
wrapper.update();
147+
userEvent.type(screen.getByLabelText('aws-field'), 'aws');
148+
userEvent.click(screen.getByText('Continue'));
154149

155-
wrapper.find(Button).last().simulate('click'); // next
156-
wrapper.update();
150+
expect(screen.getByText('Last step')).toHaveClass('Mui-active');
151+
expect(screen.getAllByText('Summary field')).toHaveLength(2);
157152

158-
expect(wrapper.find('.MuiStepLabel-label .Mui-active').first().text()).toEqual('Last step');
159-
expect(wrapper.find('input').instance().name).toEqual('summary');
153+
userEvent.click(screen.getByText('Back'));
160154

161-
wrapper
162-
.find(Button)
163-
.at(1) // back
164-
.simulate('click');
165-
wrapper.update();
155+
expect(screen.getByText('First step')).toHaveClass('Mui-active');
166156

167-
expect(wrapper.find('.MuiStepLabel-label .Mui-active').first().text()).toEqual('First step');
157+
userEvent.type(screen.getByLabelText('aws-field'), '{backspace}{backspace}{backspace}google');
158+
userEvent.click(screen.getByText('Continue'));
168159

169-
wrapper.find('input').instance().value = 'google';
170-
wrapper.find('input').simulate('change');
171-
wrapper.update();
172-
173-
wrapper
174-
.find(Button)
175-
.last() // next
176-
.simulate('click');
177-
wrapper.update();
178-
179-
expect(wrapper.find('.MuiStepLabel-label .Mui-active').first().text()).toEqual('Last step');
180-
expect(wrapper.find('input').instance().name).toEqual('googlesummary');
160+
expect(screen.getByText('Last step')).toHaveClass('Mui-active');
161+
expect(screen.getAllByText('Google summary')).toHaveLength(2);
181162
});
182163

183164
it('conditional submit', () => {
@@ -203,6 +184,7 @@ describe('wizard', () => {
203184
component: componentTypes.TEXT_FIELD,
204185
name: 'aws',
205186
validate: [{ type: validatorTypes.REQUIRED }],
187+
inputProps: { 'aria-label': 'aws-field' },
206188
},
207189
],
208190
},
@@ -212,6 +194,7 @@ describe('wizard', () => {
212194
{
213195
component: componentTypes.TEXTAREA,
214196
name: 'summary',
197+
inputProps: { 'aria-label': 'summary-field' },
215198
},
216199
],
217200
},
@@ -221,6 +204,7 @@ describe('wizard', () => {
221204
{
222205
component: componentTypes.TEXTAREA,
223206
name: 'googlesummary',
207+
inputProps: { 'aria-label': 'google-field' },
224208
},
225209
],
226210
},
@@ -229,44 +213,25 @@ describe('wizard', () => {
229213
],
230214
};
231215

232-
const wrapper = mount(<FormRenderer {...initialProps} schema={schema} />);
233-
234-
wrapper.find('input').instance().value = 'aws';
235-
wrapper.find('input').simulate('change');
236-
wrapper.update();
237-
238-
wrapper.find(Button).last().simulate('click');
239-
wrapper.update();
216+
render(<FormRenderer {...initialProps} schema={schema} />);
240217

241-
wrapper.find('textarea').first().instance().value = 'summary';
242-
wrapper.find('textarea').first().simulate('change');
243-
wrapper.update();
244-
245-
wrapper.find(Button).last().simulate('click');
246-
wrapper.update();
218+
userEvent.type(screen.getByLabelText('aws-field'), 'aws');
219+
userEvent.click(screen.getByText('Continue'));
220+
userEvent.type(screen.getByLabelText('summary-field'), 'summary');
221+
userEvent.click(screen.getByText('Submit'));
247222

248223
expect(onSubmit).toHaveBeenCalledWith({
249224
aws: 'aws',
250225
summary: 'summary',
251226
});
252227
onSubmit.mockClear();
253228

254-
wrapper.find(Button).at(1).simulate('click');
255-
wrapper.update();
256-
257-
wrapper.find('input').instance().value = 'google';
258-
wrapper.find('input').simulate('change');
259-
wrapper.update();
260-
261-
wrapper.find(Button).last().simulate('click');
262-
wrapper.update();
263-
264-
wrapper.find('textarea').first().instance().value = 'google summary';
265-
wrapper.find('textarea').first().simulate('change');
266-
wrapper.update();
229+
userEvent.click(screen.getByText('Back'));
267230

268-
wrapper.find(Button).last().simulate('click');
269-
wrapper.update();
231+
userEvent.type(screen.getByLabelText('aws-field'), '{backspace}{backspace}{backspace}google');
232+
userEvent.click(screen.getByText('Continue'));
233+
userEvent.type(screen.getByLabelText('google-field'), 'google summary');
234+
userEvent.click(screen.getByText('Submit'));
270235

271236
expect(onSubmit).toHaveBeenCalledWith({
272237
aws: 'google',
@@ -276,14 +241,10 @@ describe('wizard', () => {
276241
});
277242

278243
it('sends values to cancel', () => {
279-
const wrapper = mount(<FormRenderer {...initialProps} />);
244+
render(<FormRenderer {...initialProps} />);
280245

281-
wrapper.find('input').instance().value = 'something';
282-
wrapper.find('input').simulate('change');
283-
wrapper.update();
284-
285-
wrapper.find(Button).first().simulate('click'); // disabled next
286-
wrapper.update();
246+
userEvent.type(screen.getByLabelText('aws-field'), 'something');
247+
userEvent.click(screen.getByText('Cancel'));
287248

288249
expect(onCancel).toHaveBeenCalledWith({
289250
aws: 'something',
@@ -312,6 +273,7 @@ describe('wizard', () => {
312273
component: componentTypes.TEXT_FIELD,
313274
name: 'name',
314275
validate: [{ type: validatorTypes.REQUIRED }],
276+
inputProps: { 'aria-label': 'name' },
315277
},
316278
],
317279
},
@@ -320,20 +282,18 @@ describe('wizard', () => {
320282
],
321283
};
322284

323-
const wrapper = mount(<FormRenderer {...initialProps} onSubmit={submit} schema={schema} />);
285+
render(<FormRenderer {...initialProps} onSubmit={submit} schema={schema} />);
286+
287+
userEvent.type(screen.getByLabelText('name'), 'summary');
288+
289+
expect(screen.getByText('Continue')).toBeInTheDocument();
324290

325-
wrapper.find('input').instance().value = 'bla';
326-
wrapper.find('input').simulate('change');
327-
wrapper.update();
291+
userEvent.type(screen.getByLabelText('name'), '{selectall}{backspace}submit');
328292

329-
expect(wrapper.find('button.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary').text()).toEqual('Continue');
293+
expect(screen.getByText('Submit')).toBeInTheDocument();
330294

331-
wrapper.find('input').instance().value = 'submit';
332-
wrapper.find('input').simulate('change');
333-
wrapper.update();
295+
userEvent.click(screen.getByText('Submit'));
334296

335-
expect(wrapper.find('button.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary').text()).toEqual('Submit');
336-
wrapper.find('button.MuiButtonBase-root.MuiButton-root.MuiButton-contained.MuiButton-containedPrimary').simulate('click');
337297
expect(submit).toHaveBeenCalledWith({ name: 'submit' }, expect.any(Object), expect.any(Object));
338298
});
339299
});

0 commit comments

Comments
 (0)