Skip to content

Commit ab6124d

Browse files
rvsiarvsia
committed
Convert Carbon enzyme tests to RTL
1 parent ad7c544 commit ab6124d

14 files changed

+496
-971
lines changed

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

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

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

Lines changed: 15 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import React from 'react';
2-
import { act } from 'react-dom/test-utils';
3-
import { mount } from 'enzyme';
2+
import { 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

77
import FormTemplate from '../form-template';
88
import componentMapper from '../component-mapper';
9-
import { Checkbox } from 'carbon-components-react';
109

1110
describe('<Checkbox />', () => {
1211
it('renders multiple checkbox', () => {
@@ -30,13 +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().labelText).toEqual('option 1');
39-
expect(wrapper.find(Checkbox).last().props().labelText).toEqual('option 2');
36+
expect(screen.getByText('option 1')).toBeInTheDocument();
37+
expect(screen.getByText('option 2')).toBeInTheDocument();
4038
});
4139

4240
it('selects item in multiple checkbox', async () => {
@@ -59,22 +57,10 @@ describe('<Checkbox />', () => {
5957
},
6058
],
6159
};
62-
const eventCheck = {
63-
target: {
64-
checked: true,
65-
type: 'checkbox',
66-
},
67-
};
68-
const eventUncheck = {
69-
target: {
70-
checked: false,
71-
type: 'checkbox',
72-
},
73-
};
7460

7561
const submitSpy = jest.fn();
7662

77-
const wrapper = mount(
63+
render(
7864
<FormRenderer
7965
onSubmit={(values) => submitSpy(values)}
8066
FormTemplate={(props) => <FormTemplate {...props} />}
@@ -83,43 +69,18 @@ describe('<Checkbox />', () => {
8369
/>
8470
);
8571

86-
await act(async () => {
87-
wrapper.find('input').first().simulate('change', eventCheck);
88-
});
89-
wrapper.update();
90-
91-
await act(async () => {
92-
wrapper.find('form').simulate('submit');
93-
});
94-
wrapper.update();
95-
96-
expect(submitSpy).toHaveBeenCalledWith({ check: ['option-1'] });
97-
submitSpy.mockClear();
98-
99-
await act(async () => {
100-
wrapper.find('input').last().simulate('change', eventCheck);
101-
});
102-
wrapper.update();
103-
104-
await act(async () => {
105-
wrapper.find('form').simulate('submit');
106-
});
107-
wrapper.update();
72+
userEvent.click(screen.getByText('option 1'));
73+
userEvent.click(screen.getByText('Submit'));
74+
expect(submitSpy).toHaveBeenLastCalledWith({ check: ['option-1'] });
10875

109-
expect(submitSpy).toHaveBeenCalledWith({ check: ['option-1', 'option-2'] });
110-
submitSpy.mockClear();
76+
userEvent.click(screen.getByText('option 2'));
77+
userEvent.click(screen.getByText('Submit'));
11178

112-
await act(async () => {
113-
wrapper.find('input').first().simulate('change', eventUncheck);
114-
});
115-
wrapper.update();
79+
expect(submitSpy).toHaveBeenLastCalledWith({ check: ['option-1', 'option-2'] });
11680

117-
await act(async () => {
118-
wrapper.find('form').simulate('submit');
119-
});
120-
wrapper.update();
81+
userEvent.click(screen.getByText('option 1'));
82+
userEvent.click(screen.getByText('Submit'));
12183

122-
expect(submitSpy).toHaveBeenCalledWith({ check: ['option-2'] });
123-
submitSpy.mockClear();
84+
expect(submitSpy).toHaveBeenLastCalledWith({ check: ['option-2'] });
12485
});
12586
});

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

Lines changed: 41 additions & 62 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 { render, screen, act } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
44

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

77
import FormTemplate from '../form-template';
88
import componentMapper from '../component-mapper';
9-
import WithDescription from '../with-description';
109

1110
describe('component tests', () => {
1211
const RendererWrapper = ({ schema = { fields: [] }, ...props }) => (
@@ -73,34 +72,28 @@ describe('component tests', () => {
7372
});
7473

7574
it('renders correctly', () => {
76-
const wrapper = mount(<RendererWrapper schema={schema} />);
75+
render(<RendererWrapper schema={schema} />);
7776

7877
if (component === componentTypes.RADIO) {
79-
expect(wrapper.find('.bx--radio-button-wrapper')).toHaveLength(options.length);
80-
} else if (component === 'text-field-number') {
81-
expect(wrapper.find('NumberInput')).toHaveLength(1);
82-
} else {
83-
expect(wrapper.find(componentMapper[component])).toHaveLength(1);
84-
expect(wrapper.find('label').text().includes(field.label)).toEqual(true);
78+
options.forEach((opt) => {
79+
expect(screen.getByText(opt.label)).toBeInTheDocument();
80+
});
8581
}
82+
83+
expect(screen.getAllByText(field.label)).toBeTruthy();
84+
expect(() => screen.getByText(errorText)).toThrow();
8685
});
8786

8887
it('renders with error', () => {
8988
const errorField = {
9089
...field,
9190
validate: [{ type: validatorTypes.REQUIRED }],
9291
};
93-
const wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
94-
wrapper.find('form').simulate('submit');
92+
render(<RendererWrapper schema={{ fields: [errorField] }} />);
9593

96-
if (wrapper.find('#field-name-error-msg').length) {
97-
expect(wrapper.find('#field-name-error-msg').text()).toEqual(errorText);
98-
expect(wrapper.find('[invalid=true]').length).toBeGreaterThanOrEqual(1);
99-
}
94+
userEvent.click(screen.getByText('Submit'));
10095

101-
if (wrapper.find('.ddorg__carbon-error-helper-text').length) {
102-
expect(wrapper.find('.ddorg__carbon-error-helper-text').text()).toEqual(errorText);
103-
}
96+
expect(screen.getByText(errorText)).toBeInTheDocument();
10497
});
10598

10699
if (component !== 'text-field-number') {
@@ -111,31 +104,28 @@ describe('component tests', () => {
111104
useWarnings: true,
112105
validateOnMount: true,
113106
};
114-
let wrapper;
115107

116108
await act(async () => {
117-
wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
109+
render(
110+
<RendererWrapper
111+
schema={{
112+
fields: [errorField],
113+
}}
114+
/>
115+
);
118116
});
119-
wrapper.update();
120-
wrapper.update();
121-
122-
const helperText = wrapper.find('.bx--form__helper-text');
123117

124-
if (helperText.length) {
125-
expect(helperText.text()).toEqual(errorText);
126-
} else {
127-
expect(wrapper.find('.bx--form-requirement').last().text()).toEqual(errorText);
128-
}
118+
expect(screen.getAllByText(errorText)).toBeTruthy();
129119
});
130120

131121
it('renders with helperText', () => {
132122
const helpertextField = {
133123
...field,
134124
helperText,
135125
};
136-
const wrapper = mount(<RendererWrapper schema={{ fields: [helpertextField] }} />);
126+
render(<RendererWrapper schema={{ fields: [helpertextField] }} />);
137127

138-
expect(wrapper.find('.bx--form__helper-text').last().text()).toEqual(helperText);
128+
expect(screen.getByText(helperText)).toBeInTheDocument();
139129
});
140130

141131
it('renders with description and helperText', () => {
@@ -144,11 +134,10 @@ describe('component tests', () => {
144134
description,
145135
helperText,
146136
};
147-
const wrapper = mount(<RendererWrapper schema={{ fields: [descriptionField] }} />);
137+
render(<RendererWrapper schema={{ fields: [descriptionField] }} />);
148138

149-
expect(wrapper.find(WithDescription)).toHaveLength(1);
150-
151-
expect(wrapper.find('.bx--form__helper-text').last().text()).toEqual(helperText);
139+
expect(screen.getByText(helperText)).toBeInTheDocument();
140+
expect(() => screen.getByText(description)).toThrow();
152141
});
153142

154143
it('renders with error and helperText', () => {
@@ -157,19 +146,12 @@ describe('component tests', () => {
157146
helperText,
158147
validate: [{ type: validatorTypes.REQUIRED }],
159148
};
160-
const wrapper = mount(<RendererWrapper schema={{ fields: [errorFields] }} />);
161-
wrapper.find('form').simulate('submit');
162-
163-
if (wrapper.find('#field-name-error-msg').length) {
164-
expect(wrapper.find('#field-name-error-msg').text()).toEqual(errorText);
165-
expect(wrapper.find('[invalid=true]').length).toBeGreaterThanOrEqual(1);
166-
}
149+
render(<RendererWrapper schema={{ fields: [errorFields] }} />);
167150

168-
if (wrapper.find('.ddorg__carbon-error-helper-text').length) {
169-
expect(wrapper.find('.ddorg__carbon-error-helper-text').text()).toEqual(errorText);
170-
}
151+
userEvent.click(screen.getByText('Submit'));
171152

172-
expect(wrapper.find('.bx--form__helper-text')).toHaveLength(0);
153+
expect(screen.getByText(errorText)).toBeInTheDocument();
154+
expect(() => screen.getByText(helperText)).toThrow();
173155
});
174156
}
175157

@@ -178,42 +160,39 @@ describe('component tests', () => {
178160
...field,
179161
description,
180162
};
181-
const wrapper = mount(<RendererWrapper schema={{ fields: [descriptionField] }} />);
163+
render(<RendererWrapper schema={{ fields: [descriptionField] }} />);
182164

183-
expect(wrapper.find(WithDescription)).toHaveLength(1);
165+
expect(screen.getAllByRole('button')[0]).toHaveClass('bx--tooltip__trigger');
184166
});
185167

186168
it('renders isDisabled', () => {
187169
const disabledField = {
188170
...field,
189171
isDisabled: true,
172+
'aria-label': field.name,
173+
...(field.type === 'number' && { ariaLabel: field.name }),
190174
};
191-
const wrapper = mount(<RendererWrapper schema={{ fields: [disabledField] }} />);
175+
const { container } = render(<RendererWrapper schema={{ fields: [disabledField] }} />);
192176

193-
expect(wrapper.find('[disabled=true]').length).toBeGreaterThanOrEqual(1);
177+
[...container.getElementsByTagName('input')].forEach((el) => expect(el).toBeDisabled());
194178
});
195179

196180
it('renders isRequired', () => {
197181
const requiredField = {
198182
...field,
199183
isRequired: true,
200184
};
201-
const wrapper = mount(<RendererWrapper schema={{ fields: [requiredField] }} />);
202-
expect(wrapper.find('.ddorg__carbon-component-mapper_is-required').text()).toEqual('*');
185+
render(<RendererWrapper schema={{ fields: [requiredField] }} />);
186+
187+
expect(screen.getByText('*')).toBeInTheDocument();
203188
});
204189

205190
it('renders with submitError', () => {
206-
const wrapper = mount(<RendererWrapper schema={schema} onSubmit={() => ({ [field.name]: errorText })} />);
207-
wrapper.find('form').simulate('submit');
191+
render(<RendererWrapper schema={schema} onSubmit={() => ({ [field.name]: errorText })} />);
208192

209-
if (wrapper.find('#field-name-error-msg').length) {
210-
expect(wrapper.find('#field-name-error-msg').text()).toEqual(errorText);
211-
expect(wrapper.find('[invalid=true]').length).toBeGreaterThanOrEqual(1);
212-
}
193+
userEvent.click(screen.getByText('Submit'));
213194

214-
if (wrapper.find('.ddorg__carbon-error-helper-text').length) {
215-
expect(wrapper.find('.ddorg__carbon-error-helper-text').text()).toEqual(errorText);
216-
}
195+
expect(screen.getByText(errorText)).toBeInTheDocument();
217196
});
218197
});
219198
});

0 commit comments

Comments
 (0)