Skip to content

Commit b124715

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #1187 from rvsia/muiRTL
Replace Enzyme with RTL in MUI
2 parents 6ace642 + 04d69df commit b124715

File tree

8 files changed

+325
-296
lines changed

8 files changed

+325
-296
lines changed

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

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

‎packages/mui-component-mapper/src/dual-list-select/dual-list-select.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ const ToolbarInternal = ({
183183
LeftSortIconButtonProps,
184184
filter,
185185
sortDesc,
186+
isValue,
186187
}) => (
187188
<Toolbar
188189
variant="dense"
@@ -192,7 +193,7 @@ const ToolbarInternal = ({
192193
>
193194
<TextField
194195
edge="start"
195-
id="options-search"
196+
aria-label={isValue ? 'value-search' : 'options-search'}
196197
label={filterOptionsTitle}
197198
onChange={({ target: { value } }) => filterOptions(value)}
198199
value={filter}
@@ -202,7 +203,7 @@ const ToolbarInternal = ({
202203
className={clsx(classes.filter, FilterFieldProps && FilterFieldProps.className, LeftFilterFieldProps && LeftFilterFieldProps.className)}
203204
/>
204205
<IconButton
205-
aria-label="sort options"
206+
aria-label={isValue ? 'sort value' : 'sort options'}
206207
edge="end"
207208
onClick={sortOptions}
208209
color="inherit"
@@ -234,6 +235,7 @@ ToolbarInternal.propTypes = {
234235
LeftSortIconButtonProps: PropTypes.object,
235236
filter: PropTypes.string,
236237
sortDesc: PropTypes.bool,
238+
isValue: PropTypes.bool,
237239
};
238240

239241
const DualListSelect = ({
@@ -490,6 +492,7 @@ const DualListSelect = ({
490492
LeftSortIconButtonProps={RightSortIconButtonProps}
491493
filter={state.filterValue}
492494
sortDesc={state.sortRightDesc}
495+
isValue
493496
/>
494497
)}
495498
<ListInternal

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

Lines changed: 148 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,16 @@
11
import React from 'react';
2-
import { act } from 'react-dom/test-utils';
32
import { render, screen } from '@testing-library/react';
43
import userEvent from '@testing-library/user-event';
54

65
import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
7-
import { mount } from 'enzyme';
8-
9-
import { List, ListItem, Toolbar, TextField, Paper, Button, IconButton } from '@mui/material';
10-
11-
import SortIcon from '@mui/icons-material/ArrowUpward';
126

137
import { componentMapper, FormTemplate } from '../index';
14-
import FormFieldGrid from '../form-field-grid';
158

169
describe('DualListSelect', () => {
1710
let onSubmit;
1811
let initialProps;
1912
let schema;
2013

21-
const ALL_LEFT_POSITION = 3;
22-
const ALL_RIGHT_POSITION = 0;
23-
2414
beforeEach(() => {
2515
onSubmit = jest.fn();
2616

@@ -67,15 +57,16 @@ describe('DualListSelect', () => {
6757
});
6858

6959
it('renders correctly', () => {
70-
const wrapper = mount(<FormRenderer {...initialProps} />);
71-
72-
expect(wrapper.find(FormFieldGrid)).toHaveLength(1);
73-
expect(wrapper.find(Toolbar)).toHaveLength(2);
74-
expect(wrapper.find(TextField)).toHaveLength(2);
75-
expect(wrapper.find(SortIcon)).toHaveLength(2);
76-
expect(wrapper.find(List)).toHaveLength(2);
77-
expect(wrapper.find(Paper)).toHaveLength(2);
78-
expect(wrapper.find(ListItem)).toHaveLength(schema.fields[0].options.length + 1); // + empty placeholder
60+
render(<FormRenderer {...initialProps} />);
61+
62+
expect(screen.getByText('cats')).toBeInTheDocument();
63+
expect(screen.getByText('cats_1')).toBeInTheDocument();
64+
expect(screen.getByText('cats_2')).toBeInTheDocument();
65+
expect(screen.getByText('zebras')).toBeInTheDocument();
66+
expect(screen.getByText('pigeons')).toBeInTheDocument();
67+
expect(screen.getByLabelText('Filter options')).toBeInTheDocument();
68+
expect(screen.getByLabelText('Filter selected value')).toBeInTheDocument();
69+
expect(screen.getByText('No selected')).toBeInTheDocument();
7970
});
8071

8172
it('switch left option', async () => {
@@ -140,157 +131,178 @@ describe('DualListSelect', () => {
140131
});
141132

142133
it('switch all to right', async () => {
143-
const wrapper = mount(<FormRenderer {...initialProps} />);
144-
await act(async () => {
145-
wrapper.find('#buttons-grid').find(Button).at(ALL_RIGHT_POSITION).props().onClick();
146-
});
147-
wrapper.update();
148-
await act(async () => {
149-
wrapper.find('form').simulate('submit');
150-
});
134+
render(<FormRenderer {...initialProps} />);
135+
136+
userEvent.click(screen.getByLabelText('Move all to right'));
137+
userEvent.click(screen.getByText('Submit'));
151138

152139
expect(onSubmit).toHaveBeenCalledWith({ 'dual-list': ['cats', 'cats_1', 'cats_2', 'pigeons', 'zebras'] });
153140
});
154141

155142
it('switch all to left', async () => {
156-
const wrapper = mount(<FormRenderer {...initialProps} initialValues={{ 'dual-list': schema.fields[0].options.map(({ value }) => value) }} />);
157-
await act(async () => {
158-
wrapper.find('#buttons-grid').find(Button).at(ALL_LEFT_POSITION).props().onClick();
159-
});
160-
wrapper.update();
161-
await act(async () => {
162-
wrapper.find('form').simulate('submit');
163-
});
143+
render(<FormRenderer {...initialProps} initialValues={{ 'dual-list': schema.fields[0].options.map(({ value }) => value) }} />);
144+
145+
userEvent.click(screen.getByLabelText('Move all to left'));
146+
userEvent.click(screen.getByText('Submit'));
164147

165148
expect(onSubmit).toHaveBeenCalledWith({});
166149
});
167150

168151
it('filters options', async () => {
169-
const wrapper = mount(<FormRenderer {...initialProps} />);
152+
render(<FormRenderer {...initialProps} />);
170153

171-
expect(wrapper.find(List).first().find(ListItem)).toHaveLength(schema.fields[0].options.length);
172-
await act(async () => {
173-
wrapper.find('input').first().instance().value = 'cats';
174-
});
175-
await act(async () => {
176-
wrapper.find('input').first().simulate('change');
177-
});
178-
wrapper.update();
179-
180-
expect(wrapper.find(List).first().find(ListItem)).toHaveLength(3);
181-
wrapper
182-
.find(List)
183-
.first()
184-
.find(ListItem)
185-
.forEach((option) => expect(option.text()).toEqual(expect.stringContaining('cats')));
154+
userEvent.type(screen.getByLabelText('Filter options'), 'cats');
155+
156+
expect(screen.getByText('cats')).toBeInTheDocument();
157+
expect(screen.getByText('cats_1')).toBeInTheDocument();
158+
expect(screen.getByText('cats_2')).toBeInTheDocument();
159+
expect(() => screen.getByText('zebras')).toThrow();
160+
expect(() => screen.getByText('pigeons')).toThrow();
186161
});
187162

188163
it('filters value', async () => {
189-
const wrapper = mount(<FormRenderer {...initialProps} initialValues={{ 'dual-list': schema.fields[0].options.map(({ value }) => value) }} />);
164+
render(<FormRenderer {...initialProps} initialValues={{ 'dual-list': schema.fields[0].options.map(({ value }) => value) }} />);
190165

191-
expect(wrapper.find(List).last().find(ListItem)).toHaveLength(schema.fields[0].options.length);
192-
await act(async () => {
193-
wrapper.find('input').last().instance().value = 'cats';
194-
});
166+
userEvent.type(screen.getByLabelText('Filter selected value'), 'cats');
195167

196-
await act(async () => {
197-
wrapper.find('input').last().simulate('change');
198-
});
199-
wrapper.update();
200-
201-
expect(wrapper.find(List).last().find(ListItem)).toHaveLength(3);
202-
wrapper
203-
.find(List)
204-
.last()
205-
.find(ListItem)
206-
.forEach((option) => expect(option.text()).toEqual(expect.stringContaining('cats')));
168+
expect(screen.getByText('cats')).toBeInTheDocument();
169+
expect(screen.getByText('cats_1')).toBeInTheDocument();
170+
expect(screen.getByText('cats_2')).toBeInTheDocument();
171+
expect(() => screen.getByText('zebras')).toThrow();
172+
expect(() => screen.getByText('pigeons')).toThrow();
207173
});
208174

209175
it('sort options', async () => {
210-
const wrapper = mount(<FormRenderer {...initialProps} />);
211-
212-
expect(wrapper.find(List).first().find(ListItem).first().text()).toEqual('cats');
213-
expect(wrapper.find(List).first().find(ListItem).last().text()).toEqual('zebras');
214-
await act(async () => {
215-
wrapper.find(IconButton).at(0).props().onClick();
216-
});
217-
wrapper.update();
218-
219-
expect(wrapper.find(List).first().find(ListItem).first().text()).toEqual('zebras');
220-
expect(wrapper.find(List).first().find(ListItem).last().text()).toEqual('cats');
221-
await act(async () => {
222-
wrapper.find(IconButton).at(0).props().onClick();
223-
});
224-
wrapper.update();
176+
render(<FormRenderer {...initialProps} />);
225177

226-
expect(wrapper.find(List).first().find(ListItem).first().text()).toEqual('cats');
227-
expect(wrapper.find(List).first().find(ListItem).last().text()).toEqual('zebras');
178+
expect(screen.getAllByRole('button').map((b) => b.textContent)).toEqual([
179+
'',
180+
'cats',
181+
'cats_1',
182+
'cats_2',
183+
'pigeons',
184+
'zebras',
185+
'≫',
186+
'>',
187+
'<',
188+
'≪',
189+
'',
190+
'No selected',
191+
'Submit',
192+
]);
193+
194+
userEvent.click(screen.getByLabelText('sort options'));
195+
196+
expect(screen.getAllByRole('button').map((b) => b.textContent)).toEqual([
197+
'',
198+
'zebras',
199+
'pigeons',
200+
'cats_2',
201+
'cats_1',
202+
'cats',
203+
'≫',
204+
'>',
205+
'<',
206+
'≪',
207+
'',
208+
'No selected',
209+
'Submit',
210+
]);
211+
212+
userEvent.click(screen.getByLabelText('sort options'));
213+
214+
expect(screen.getAllByRole('button').map((b) => b.textContent)).toEqual([
215+
'',
216+
'cats',
217+
'cats_1',
218+
'cats_2',
219+
'pigeons',
220+
'zebras',
221+
'≫',
222+
'>',
223+
'<',
224+
'≪',
225+
'',
226+
'No selected',
227+
'Submit',
228+
]);
228229
});
229230

230231
it('sort value', async () => {
231-
const wrapper = mount(<FormRenderer {...initialProps} initialValues={{ 'dual-list': schema.fields[0].options.map(({ value }) => value) }} />);
232-
233-
expect(wrapper.find(List).last().find(ListItem).first().text()).toEqual('cats');
234-
expect(wrapper.find(List).last().find(ListItem).last().text()).toEqual('zebras');
235-
await act(async () => {
236-
wrapper.find(IconButton).last().props().onClick();
237-
});
238-
wrapper.update();
239-
240-
expect(wrapper.find(List).last().find(ListItem).first().text()).toEqual('zebras');
241-
expect(wrapper.find(List).last().find(ListItem).last().text()).toEqual('cats');
242-
await act(async () => {
243-
wrapper.find(IconButton).last().props().onClick();
244-
});
245-
wrapper.update();
246-
247-
expect(wrapper.find(List).last().find(ListItem).first().text()).toEqual('cats');
248-
expect(wrapper.find(List).last().find(ListItem).last().text()).toEqual('zebras');
232+
render(<FormRenderer {...initialProps} initialValues={{ 'dual-list': schema.fields[0].options.map(({ value }) => value) }} />);
233+
234+
expect(screen.getAllByRole('button').map((b) => b.textContent)).toEqual([
235+
'',
236+
'No available options',
237+
'≫',
238+
'>',
239+
'<',
240+
'≪',
241+
'',
242+
'cats',
243+
'cats_1',
244+
'cats_2',
245+
'pigeons',
246+
'zebras',
247+
'Submit',
248+
]);
249+
250+
userEvent.click(screen.getByLabelText('sort value'));
251+
252+
expect(screen.getAllByRole('button').map((b) => b.textContent)).toEqual([
253+
'',
254+
'No available options',
255+
'≫',
256+
'>',
257+
'<',
258+
'≪',
259+
'',
260+
'zebras',
261+
'pigeons',
262+
'cats_2',
263+
'cats_1',
264+
'cats',
265+
'Submit',
266+
]);
267+
268+
userEvent.click(screen.getByLabelText('sort value'));
269+
270+
expect(screen.getAllByRole('button').map((b) => b.textContent)).toEqual([
271+
'',
272+
'No available options',
273+
'≫',
274+
'>',
275+
'<',
276+
'≪',
277+
'',
278+
'cats',
279+
'cats_1',
280+
'cats_2',
281+
'pigeons',
282+
'zebras',
283+
'Submit',
284+
]);
249285
});
250286

251287
describe('filtered options', () => {
252288
it('switch all visible to right', async () => {
253-
const wrapper = mount(<FormRenderer {...initialProps} />);
254-
await act(async () => {
255-
wrapper.find('input').first().instance().value = 'cats';
256-
});
257-
258-
await act(async () => {
259-
wrapper.find('input').first().simulate('change');
260-
});
261-
wrapper.update();
262-
await act(async () => {
263-
wrapper.find('#buttons-grid').find(Button).at(ALL_RIGHT_POSITION).props().onClick();
264-
});
265-
wrapper.update();
266-
267-
await act(async () => {
268-
wrapper.find('form').simulate('submit');
269-
});
289+
render(<FormRenderer {...initialProps} />);
290+
291+
userEvent.type(screen.getByLabelText('Filter options'), 'cats');
292+
userEvent.click(screen.getByLabelText('Move all to right'));
293+
userEvent.click(screen.getByText('Submit'));
270294

271295
expect(onSubmit).toHaveBeenCalledWith({ 'dual-list': ['cats', 'cats_1', 'cats_2'] });
272296
});
273297
});
274298

275299
describe('filtered value', () => {
276300
it('switch all visible to left', async () => {
277-
const wrapper = mount(<FormRenderer {...initialProps} initialValues={{ 'dual-list': schema.fields[0].options.map(({ value }) => value) }} />);
278-
await act(async () => {
279-
wrapper.find('input').last().instance().value = 'cats';
280-
});
281-
await act(async () => {
282-
wrapper.find('input').last().simulate('change');
283-
});
284-
wrapper.update();
285-
286-
await act(async () => {
287-
wrapper.find('#buttons-grid').find(Button).at(ALL_LEFT_POSITION).props().onClick();
288-
});
289-
wrapper.update();
290-
291-
await act(async () => {
292-
wrapper.find('form').simulate('submit');
293-
});
301+
render(<FormRenderer {...initialProps} initialValues={{ 'dual-list': schema.fields[0].options.map(({ value }) => value) }} />);
302+
303+
userEvent.type(screen.getByLabelText('Filter selected value'), 'cats');
304+
userEvent.click(screen.getByLabelText('Move all to left'));
305+
userEvent.click(screen.getByText('Submit'));
294306

295307
expect(onSubmit).toHaveBeenCalledWith({ 'dual-list': ['zebras', 'pigeons'] });
296308
});

0 commit comments

Comments
 (0)