Skip to content

Commit c741fd3

Browse files
rvsiarvsia
authored
Merge pull request #1197 from rvsia/convertCommonTORtl
Convert common tests to RTL
2 parents 84c7e8a + 406ff30 commit c741fd3

7 files changed

Lines changed: 553 additions & 925 deletions

File tree

‎packages/common/config/jest.setup.js‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎packages/common/src/tests/dual-list-select/dual-list-select.test.js‎

Lines changed: 54 additions & 168 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
/* eslint-disable react/prop-types */
22
import React from 'react';
3-
import { act } from 'react-dom/test-utils';
3+
import { render, screen } from '@testing-library/react';
4+
import userEvent from '@testing-library/user-event';
5+
46
import { FormRenderer, componentTypes } from '@data-driven-forms/react-form-renderer';
5-
import { mount } from 'enzyme';
67

78
import DualListSelectCommon from '../../dual-list-select';
89

910
describe('dual list select', () => {
1011
let state;
11-
let wrapper;
1212

1313
const spyState = (newState) => {
1414
state = newState;
1515
};
1616

17-
const event = { preventDefault: jest.fn() };
18-
1917
const Dummy = ({
2018
leftValues,
2119
rightValues,
@@ -36,16 +34,24 @@ describe('dual list select', () => {
3634

3735
return (
3836
<React.Fragment>
39-
<button id="handleOptionsClick" onClick={handleOptionsClick} />
40-
<button id="handleValuesClick" onClick={handleValuesClick} />
41-
<button id="handleMoveRight" onClick={handleMoveRight} />
42-
<button id="handleMoveLeft" onClick={handleMoveLeft} />
43-
<button id="sortOptions" onClick={sortOptions} />
44-
<button id="sortValues" onClick={sortValues} />
45-
<button id="filterOptions" onClick={filterOptions} />
46-
<button id="filterValues" onClick={filterValues} />
47-
<button id="handleClearLeftValues" onClick={handleClearLeftValues} />
48-
<button id="handleClearRightValues" onClick={handleClearRightValues} />
37+
{leftValues.map(({ label, value }) => (
38+
<button key={value} onClick={(event) => handleOptionsClick(event, value)}>
39+
{label}
40+
</button>
41+
))}
42+
{rightValues.map(({ label, value }) => (
43+
<button key={value} onClick={(event) => handleValuesClick(event, value)}>
44+
{label}
45+
</button>
46+
))}
47+
<button aria-label="handleMoveRight" onClick={handleMoveRight} />
48+
<button aria-label="handleMoveLeft" onClick={handleMoveLeft} />
49+
<button aria-label="sortOptions" onClick={sortOptions} />
50+
<button aria-label="sortValues" onClick={sortValues} />
51+
<input type="text" aria-label="filterOptions" onChange={(e) => filterOptions(e.target.value)} value={state.filterOptions} />
52+
<input type="text" aria-label="filterValues" onChange={(e) => filterValues(e.target.value)} value={state.filterValues} />
53+
<button aria-label="handleClearLeftValues" onClick={handleClearLeftValues} />
54+
<button aria-label="handleClearRightValues" onClick={handleClearRightValues} />
4955
</React.Fragment>
5056
);
5157
};
@@ -89,11 +95,7 @@ describe('dual list select', () => {
8995
};
9096

9197
it('move one left', async () => {
92-
await act(async () => {
93-
wrapper = mount(<FormRenderer {...rendererProps} initialValues={{ list: ['cats_2'] }} />);
94-
});
95-
wrapper.update();
96-
98+
render(<FormRenderer {...rendererProps} initialValues={{ list: ['cats_2'] }} />);
9799
expect(state).toEqual({
98100
filterOptions: '',
99101
filterValue: '',
@@ -113,10 +115,7 @@ describe('dual list select', () => {
113115
value: ['cats_2'],
114116
});
115117

116-
await act(async () => {
117-
wrapper.find('#handleValuesClick').props().onClick(event, 'cats_2');
118-
});
119-
wrapper.update();
118+
userEvent.click(screen.getByText('cats_2'));
120119

121120
expect(state).toEqual({
122121
filterOptions: '',
@@ -137,10 +136,7 @@ describe('dual list select', () => {
137136
value: ['cats_2'],
138137
});
139138

140-
await act(async () => {
141-
wrapper.find('#handleMoveLeft').simulate('click');
142-
});
143-
wrapper.update();
139+
userEvent.click(screen.getByLabelText('handleMoveLeft'));
144140

145141
expect(state).toEqual({
146142
filterOptions: '',
@@ -164,10 +160,7 @@ describe('dual list select', () => {
164160
});
165161

166162
it('move one right', async () => {
167-
await act(async () => {
168-
wrapper = mount(<FormRenderer {...rendererProps} />);
169-
});
170-
wrapper.update();
163+
render(<FormRenderer {...rendererProps} />);
171164

172165
expect(state).toEqual({
173166
filterOptions: '',
@@ -189,10 +182,7 @@ describe('dual list select', () => {
189182
value: '',
190183
});
191184

192-
await act(async () => {
193-
wrapper.find('#handleOptionsClick').props().onClick(event, 'cats_2');
194-
});
195-
wrapper.update();
185+
userEvent.click(screen.getByText('cats_2'));
196186

197187
expect(state).toEqual({
198188
filterOptions: '',
@@ -214,10 +204,7 @@ describe('dual list select', () => {
214204
value: '',
215205
});
216206

217-
await act(async () => {
218-
wrapper.find('#handleMoveRight').simulate('click');
219-
});
220-
wrapper.update();
207+
userEvent.click(screen.getByLabelText('handleMoveRight'));
221208

222209
expect(state).toEqual({
223210
filterOptions: '',
@@ -240,28 +227,11 @@ describe('dual list select', () => {
240227
});
241228

242229
it('move two right with ctrl', async () => {
243-
await act(async () => {
244-
wrapper = mount(<FormRenderer {...rendererProps} />);
245-
});
246-
wrapper.update();
247-
248-
await act(async () => {
249-
wrapper.find('#handleOptionsClick').props().onClick(event, 'cats_2');
250-
});
251-
wrapper.update();
252-
253-
await act(async () => {
254-
wrapper
255-
.find('#handleOptionsClick')
256-
.props()
257-
.onClick({ ...event, ctrlKey: true }, 'cats_1');
258-
});
259-
wrapper.update();
230+
render(<FormRenderer {...rendererProps} />);
260231

261-
await act(async () => {
262-
wrapper.find('#handleMoveRight').simulate('click');
263-
});
264-
wrapper.update();
232+
userEvent.click(screen.getByText('cats_2'));
233+
userEvent.click(screen.getByText('cats_1'), { ctrlKey: true });
234+
userEvent.click(screen.getByLabelText('handleMoveRight'));
265235

266236
expect(state).toEqual({
267237
filterOptions: '',
@@ -286,36 +256,11 @@ describe('dual list select', () => {
286256
});
287257

288258
it('unselect with ctrl', async () => {
289-
await act(async () => {
290-
wrapper = mount(<FormRenderer {...rendererProps} />);
291-
});
292-
wrapper.update();
293-
294-
await act(async () => {
295-
wrapper.find('#handleOptionsClick').props().onClick(event, 'cats_2');
296-
});
297-
wrapper.update();
298-
299-
await act(async () => {
300-
wrapper
301-
.find('#handleOptionsClick')
302-
.props()
303-
.onClick({ ...event, ctrlKey: true }, 'cats_1');
304-
});
305-
wrapper.update();
306-
307-
await act(async () => {
308-
wrapper
309-
.find('#handleOptionsClick')
310-
.props()
311-
.onClick({ ...event, ctrlKey: true }, 'cats_2');
312-
});
313-
wrapper.update();
314-
315-
await act(async () => {
316-
wrapper.find('#handleMoveRight').simulate('click');
317-
});
318-
wrapper.update();
259+
render(<FormRenderer {...rendererProps} />);
260+
userEvent.click(screen.getByText('cats_2'));
261+
userEvent.click(screen.getByText('cats_1'), { ctrlKey: true });
262+
userEvent.click(screen.getByText('cats_2'), { ctrlKey: true });
263+
userEvent.click(screen.getByLabelText('handleMoveRight'));
319264

320265
expect(state).toEqual({
321266
filterOptions: '',
@@ -338,28 +283,11 @@ describe('dual list select', () => {
338283
});
339284

340285
it('move three right with shift', async () => {
341-
await act(async () => {
342-
wrapper = mount(<FormRenderer {...rendererProps} />);
343-
});
344-
wrapper.update();
286+
render(<FormRenderer {...rendererProps} />);
345287

346-
await act(async () => {
347-
wrapper.find('#handleOptionsClick').props().onClick(event, 'cats');
348-
});
349-
wrapper.update();
350-
351-
await act(async () => {
352-
wrapper
353-
.find('#handleOptionsClick')
354-
.props()
355-
.onClick({ ...event, shiftKey: true }, 'cats_2');
356-
});
357-
wrapper.update();
358-
359-
await act(async () => {
360-
wrapper.find('#handleMoveRight').simulate('click');
361-
});
362-
wrapper.update();
288+
userEvent.click(screen.getByText('cats'));
289+
userEvent.click(screen.getByText('cats_2'), { shiftKey: true });
290+
userEvent.click(screen.getByLabelText('handleMoveRight'));
363291

364292
expect(state).toEqual({
365293
filterOptions: '',
@@ -384,15 +312,9 @@ describe('dual list select', () => {
384312
});
385313

386314
it('move all left', async () => {
387-
await act(async () => {
388-
wrapper = mount(<FormRenderer {...rendererProps} initialValues={{ list: ['cats', 'cats_1', 'cats_2', 'pigeons', 'zebras'] }} />);
389-
});
390-
wrapper.update();
315+
render(<FormRenderer {...rendererProps} initialValues={{ list: ['cats', 'cats_1', 'cats_2', 'pigeons', 'zebras'] }} />);
391316

392-
await act(async () => {
393-
wrapper.find('#handleClearRightValues').simulate('click');
394-
});
395-
wrapper.update();
317+
userEvent.click(screen.getByLabelText('handleClearRightValues'));
396318

397319
expect(state).toEqual({
398320
filterOptions: '',
@@ -416,15 +338,9 @@ describe('dual list select', () => {
416338
});
417339

418340
it('move all right', async () => {
419-
await act(async () => {
420-
wrapper = mount(<FormRenderer {...rendererProps} />);
421-
});
422-
wrapper.update();
341+
render(<FormRenderer {...rendererProps} />);
423342

424-
await act(async () => {
425-
wrapper.find('#handleClearLeftValues').simulate('click');
426-
});
427-
wrapper.update();
343+
userEvent.click(screen.getByLabelText('handleClearLeftValues'));
428344

429345
expect(state).toEqual({
430346
filterOptions: '',
@@ -448,15 +364,9 @@ describe('dual list select', () => {
448364
});
449365

450366
it('filter options', async () => {
451-
await act(async () => {
452-
wrapper = mount(<FormRenderer {...rendererProps} />);
453-
});
454-
wrapper.update();
367+
render(<FormRenderer {...rendererProps} />);
455368

456-
await act(async () => {
457-
wrapper.find('#filterOptions').props().onClick('cats_');
458-
});
459-
wrapper.update();
369+
userEvent.type(screen.getByLabelText('filterOptions'), 'cats_');
460370

461371
expect(state).toEqual({
462372
filterOptions: 'cats_',
@@ -477,15 +387,9 @@ describe('dual list select', () => {
477387
});
478388

479389
it('filter values', async () => {
480-
await act(async () => {
481-
wrapper = mount(<FormRenderer {...rendererProps} initialValues={{ list: ['cats', 'cats_1', 'cats_2', 'pigeons', 'zebras'] }} />);
482-
});
483-
wrapper.update();
390+
render(<FormRenderer {...rendererProps} initialValues={{ list: ['cats', 'cats_1', 'cats_2', 'pigeons', 'zebras'] }} />);
484391

485-
await act(async () => {
486-
wrapper.find('#filterValues').props().onClick('cats_');
487-
});
488-
wrapper.update();
392+
userEvent.type(screen.getByLabelText('filterValues'), 'cats_');
489393

490394
expect(state).toEqual({
491395
filterOptions: '',
@@ -506,15 +410,9 @@ describe('dual list select', () => {
506410
});
507411

508412
it('sort options', async () => {
509-
await act(async () => {
510-
wrapper = mount(<FormRenderer {...rendererProps} />);
511-
});
512-
wrapper.update();
413+
render(<FormRenderer {...rendererProps} />);
513414

514-
await act(async () => {
515-
wrapper.find('#sortOptions').simulate('click');
516-
});
517-
wrapper.update();
415+
userEvent.click(screen.getByLabelText('sortOptions'));
518416

519417
expect(state).toEqual({
520418
filterOptions: '',
@@ -536,10 +434,7 @@ describe('dual list select', () => {
536434
value: '',
537435
});
538436

539-
await act(async () => {
540-
wrapper.find('#sortOptions').simulate('click');
541-
});
542-
wrapper.update();
437+
userEvent.click(screen.getByLabelText('sortOptions'));
543438

544439
expect(state).toEqual({
545440
filterOptions: '',
@@ -563,15 +458,9 @@ describe('dual list select', () => {
563458
});
564459

565460
it('sort values', async () => {
566-
await act(async () => {
567-
wrapper = mount(<FormRenderer {...rendererProps} initialValues={{ list: ['cats', 'cats_1', 'cats_2', 'pigeons', 'zebras'] }} />);
568-
});
569-
wrapper.update();
461+
render(<FormRenderer {...rendererProps} initialValues={{ list: ['cats', 'cats_1', 'cats_2', 'pigeons', 'zebras'] }} />);
570462

571-
await act(async () => {
572-
wrapper.find('#sortValues').simulate('click');
573-
});
574-
wrapper.update();
463+
userEvent.click(screen.getByLabelText('sortValues'));
575464

576465
expect(state).toEqual({
577466
filterOptions: '',
@@ -593,10 +482,7 @@ describe('dual list select', () => {
593482
value: ['cats', 'cats_1', 'cats_2', 'pigeons', 'zebras'],
594483
});
595484

596-
await act(async () => {
597-
wrapper.find('#sortValues').simulate('click');
598-
});
599-
wrapper.update();
485+
userEvent.click(screen.getByLabelText('sortValues'));
600486

601487
expect(state).toEqual({
602488
filterOptions: '',

0 commit comments

Comments
 (0)