Skip to content

Commit 92c5f6b

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #1191 from rvsia/bjsToRTL
Convert blueprint tests to RTL
2 parents c104e82 + 99bccb0 commit 92c5f6b

File tree

12 files changed

+348
-556
lines changed

12 files changed

+348
-556
lines changed

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

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

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,8 @@ const DualListInternal = ({
143143
LeftMenuItemProps,
144144
RightMenuProps,
145145
RightMenuItemProps,
146+
leftSortTitle,
147+
rightSortTitle,
146148
}) => {
147149
const { buttonGroup, wrapper } = useStyles();
148150

@@ -159,6 +161,7 @@ const DualListInternal = ({
159161
ControlGroupProps={LeftControlGroupProps}
160162
InputGroupProps={LeftInputGroupProps}
161163
ButtonProps={LeftButtonProps}
164+
sortTitle={leftSortTitle}
162165
/>
163166
<List
164167
optionClick={handleOptionsClick}
@@ -216,6 +219,7 @@ const DualListInternal = ({
216219
ControlGroupProps={RightControlGroupProps}
217220
InputGroupProps={RightInputGroupProps}
218221
ButtonProps={RightButtonProps}
222+
sortTitle={rightSortTitle}
219223
/>
220224
<List
221225
optionClick={handleValuesClick}
@@ -279,6 +283,8 @@ DualListInternal.propTypes = {
279283
LeftMenuItemProps: PropTypes.object,
280284
RightMenuProps: PropTypes.object,
281285
RightMenuItemProps: PropTypes.object,
286+
leftSortTitle: PropTypes.string,
287+
rightSortTitle: PropTypes.string,
282288
};
283289

284290
DualListInternal.defaultProps = {
@@ -294,6 +300,8 @@ DualListInternal.defaultProps = {
294300
filterValueTitle: 'Filter selected value',
295301
filterOptionsText: 'Remove your filter to see all options',
296302
filterValueText: 'Remove your filter to see all selected',
303+
leftSortTitle: 'Sort options',
304+
rightSortTitle: 'Sort value',
297305
options: [],
298306
allToLeft: true,
299307
allToRight: true,

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from 'react';
2-
import { mount } from 'enzyme';
2+
import { render, screen } from '@testing-library/react';
33

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

66
import FormTemplate from '../form-template/form-template';
77
import componentMapper from '../component-mapper/component-mapper';
8-
import { Checkbox } from '@blueprintjs/core';
98

109
describe('<Checkbox />', () => {
1110
it('renders multiple checkbox', () => {
@@ -28,13 +27,12 @@ describe('<Checkbox />', () => {
2827
],
2928
};
3029

31-
const wrapper = mount(
30+
render(
3231
<FormRenderer onSubmit={jest.fn()} FormTemplate={(props) => <FormTemplate {...props} />} schema={schema} componentMapper={componentMapper} />
3332
);
3433

35-
expect(wrapper.find(Checkbox)).toHaveLength(2);
36-
expect(wrapper.find(Checkbox).first().props().label).toEqual('option 1');
37-
expect(wrapper.find(Checkbox).last().props().label).toEqual('option 2');
34+
expect(screen.getByText('option 1')).toBeInTheDocument();
35+
expect(screen.getByText('option 2')).toBeInTheDocument();
3836
});
3937

4038
it('renders multiple required checkbox', () => {
@@ -59,10 +57,10 @@ describe('<Checkbox />', () => {
5957
],
6058
};
6159

62-
const wrapper = mount(
60+
render(
6361
<FormRenderer onSubmit={jest.fn()} FormTemplate={(props) => <FormTemplate {...props} />} schema={schema} componentMapper={componentMapper} />
6462
);
6563

66-
expect(wrapper.find('.bp3-text-muted').last().text()).toEqual('(required)');
64+
expect(screen.getByText('(required)')).toBeInTheDocument();
6765
});
6866
});

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

Lines changed: 58 additions & 52 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 } from '@data-driven-forms/react-form-renderer';
66
import FormTemplate from '../form-template/form-template';
77
import componentMapper from '../component-mapper/component-mapper';
88
import { validatorTypes } from '@data-driven-forms/react-form-renderer';
9-
import FormGroupWrapper from '../form-group/form-group';
109

1110
describe('formFields generated tests', () => {
1211
const RendererWrapper = ({ schema = { fields: [] }, ...props }) => (
@@ -67,30 +66,28 @@ describe('formFields generated tests', () => {
6766
});
6867

6968
it('renders correctly', () => {
70-
const wrapper = mount(<RendererWrapper schema={schema} />);
69+
render(<RendererWrapper schema={schema} />);
7170

7271
if (component === componentTypes.RADIO) {
73-
expect(wrapper.find('.bp3-radio')).toHaveLength(options.length);
74-
} else if (component === componentTypes.SWITCH) {
75-
expect(wrapper.find('.bp3-switch').first().text().includes(field.label)).toEqual(true);
76-
} else {
77-
expect(wrapper.find(componentMapper[component])).toHaveLength(1);
78-
expect(wrapper.find('label').text().includes(field.label)).toEqual(true);
72+
options.forEach((opt) => {
73+
expect(screen.getByText(opt.label)).toBeInTheDocument();
74+
});
7975
}
8076

81-
expect(wrapper.find(FormGroupWrapper)).toHaveLength(1);
82-
expect(wrapper.find('.bp3-form-helper-text')).toHaveLength(0);
77+
expect(screen.getAllByText(field.label)).toBeTruthy();
78+
expect(() => screen.getByText(errorText)).toThrow();
8379
});
8480

8581
it('renders with error', () => {
8682
const errorField = {
8783
...field,
8884
validate: [{ type: validatorTypes.REQUIRED }],
8985
};
90-
const wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
91-
wrapper.find('form').simulate('submit');
92-
expect(wrapper.find('.bp3-form-helper-text').last().text()).toEqual(errorText);
93-
expect(wrapper.find('.bp3-intent-danger').length).toBeGreaterThanOrEqual(1);
86+
render(<RendererWrapper schema={{ fields: [errorField] }} />);
87+
88+
userEvent.click(screen.getByText('Submit'));
89+
90+
expect(screen.getByText(errorText)).toBeInTheDocument();
9491
});
9592

9693
it('renders with warning', async () => {
@@ -100,35 +97,38 @@ describe('formFields generated tests', () => {
10097
useWarnings: true,
10198
validateOnMount: true,
10299
};
103-
let wrapper;
104100

105101
await act(async () => {
106-
wrapper = mount(<RendererWrapper schema={{ fields: [errorField] }} />);
102+
render(
103+
<RendererWrapper
104+
schema={{
105+
fields: [errorField, { name: 'error-reset-touched', component: componentTypes.TEXT_FIELD, validate: [{ type: 'required' }] }],
106+
}}
107+
/>
108+
);
107109
});
108-
wrapper.update();
109110

110-
expect(wrapper.find('.bp3-form-helper-text').last().text()).toEqual(errorText);
111-
expect(wrapper.find('.bp3-intent-warning').length).toBeGreaterThanOrEqual(1);
111+
expect(screen.getAllByText(errorText)).toBeTruthy();
112112
});
113113

114114
it('renders with helperText', () => {
115115
const helpertextField = {
116116
...field,
117117
helperText,
118118
};
119-
const wrapper = mount(<RendererWrapper schema={{ fields: [helpertextField] }} />);
119+
render(<RendererWrapper schema={{ fields: [helpertextField] }} />);
120120

121-
expect(wrapper.find('.bp3-form-helper-text').last().text()).toEqual(helperText);
121+
expect(screen.getByText(helperText)).toBeInTheDocument();
122122
});
123123

124124
it('renders with description', () => {
125125
const descriptionField = {
126126
...field,
127127
description,
128128
};
129-
const wrapper = mount(<RendererWrapper schema={{ fields: [descriptionField] }} />);
129+
render(<RendererWrapper schema={{ fields: [descriptionField] }} />);
130130

131-
expect(wrapper.find('.bp3-form-helper-text').last().text()).toEqual(description);
131+
expect(screen.getByText(description)).toBeInTheDocument();
132132
});
133133

134134
it('renders with description and helperText', () => {
@@ -137,9 +137,10 @@ describe('formFields generated tests', () => {
137137
description,
138138
helperText,
139139
};
140-
const wrapper = mount(<RendererWrapper schema={{ fields: [descriptionField] }} />);
140+
render(<RendererWrapper schema={{ fields: [descriptionField] }} />);
141141

142-
expect(wrapper.find('.bp3-form-helper-text').last().text()).toEqual(helperText);
142+
expect(screen.getByText(helperText)).toBeInTheDocument();
143+
expect(() => screen.getByText(description)).toThrow();
143144
});
144145

145146
it('renders with error and helperText', () => {
@@ -148,63 +149,68 @@ describe('formFields generated tests', () => {
148149
helperText,
149150
validate: [{ type: validatorTypes.REQUIRED }],
150151
};
151-
const wrapper = mount(<RendererWrapper schema={{ fields: [errorFields] }} />);
152-
wrapper.find('form').simulate('submit');
152+
render(<RendererWrapper schema={{ fields: [errorFields] }} />);
153+
154+
userEvent.click(screen.getByText('Submit'));
153155

154-
expect(wrapper.find('.bp3-form-helper-text').last().text()).toEqual(errorText);
156+
expect(screen.getByText(errorText)).toBeInTheDocument();
157+
expect(() => screen.getByText(helperText)).toThrow();
155158
});
156159

157160
it('renders isRequired', () => {
158161
const requiredField = {
159162
...field,
160163
isRequired: true,
161164
};
162-
const wrapper = mount(<RendererWrapper schema={{ fields: [requiredField] }} />);
165+
render(<RendererWrapper schema={{ fields: [requiredField] }} />);
163166

164-
expect(wrapper.find('.bp3-text-muted').last().text()).toEqual('(required)');
167+
expect(screen.getByText('(required)')).toBeInTheDocument();
165168
});
166169

167170
it('renders isDisabled', () => {
168171
const disabledField = {
169172
...field,
170173
isDisabled: true,
174+
'aria-label': field.name,
171175
};
172-
const wrapper = mount(<RendererWrapper schema={{ fields: [disabledField] }} />);
176+
const { container } = render(<RendererWrapper schema={{ fields: [disabledField] }} />);
173177

174-
if (component === componentTypes.TEXTAREA) {
175-
expect(wrapper.find('textarea').first().props().disabled).toEqual(true);
178+
if (component === componentTypes.RADIO) {
179+
options.forEach((opt) => {
180+
expect(screen.getByText(opt.label)).toHaveClass('bp3-disabled');
181+
});
182+
} else if ([componentTypes.SLIDER, componentTypes.DATE_PICKER, componentTypes.TIME_PICKER, componentTypes.SELECT].includes(component)) {
183+
expect(container.getElementsByClassName('bp3-disabled')).toHaveLength(1);
176184
} else {
177-
if (!wrapper.find('.bp3-disabled')) {
178-
expect(wrapper.find('input').first().props().disabled).toEqual(true);
179-
} else {
180-
expect(wrapper.find('.bp3-disabled').length).toBeGreaterThanOrEqual(1);
181-
}
185+
expect(screen.getAllByLabelText(field.name)[0]).toBeDisabled();
182186
}
183187
});
184188

185189
it('renders isReadOnly', () => {
186190
const disabledField = {
187191
...field,
188192
isReadOnly: true,
193+
'aria-label': field.name,
189194
};
190-
const wrapper = mount(<RendererWrapper schema={{ fields: [disabledField] }} />);
195+
const { container } = render(<RendererWrapper schema={{ fields: [disabledField] }} />);
191196

192-
if (component === componentTypes.TEXTAREA) {
193-
expect(wrapper.find('textarea').first().props().disabled).toEqual(true);
197+
if (component === componentTypes.RADIO) {
198+
options.forEach((opt) => {
199+
expect(screen.getByText(opt.label)).toHaveClass('bp3-disabled');
200+
});
201+
} else if ([componentTypes.SLIDER, componentTypes.DATE_PICKER, componentTypes.TIME_PICKER, componentTypes.SELECT].includes(component)) {
202+
expect(container.getElementsByClassName('bp3-disabled')).toHaveLength(1);
194203
} else {
195-
if (!wrapper.find('.bp3-disabled')) {
196-
expect(wrapper.find('input').first().props().disabled).toEqual(true);
197-
} else {
198-
expect(wrapper.find('.bp3-disabled').length).toBeGreaterThanOrEqual(1);
199-
}
204+
expect(screen.getAllByLabelText(field.name)[0]).toBeDisabled();
200205
}
201206
});
202207

203208
it('renders with submit error', () => {
204-
const wrapper = mount(<RendererWrapper schema={schema} onSubmit={() => ({ [field.name]: errorText })} />);
205-
wrapper.find('form').simulate('submit');
206-
expect(wrapper.find('.bp3-form-helper-text').last().text()).toEqual(errorText);
207-
expect(wrapper.find('.bp3-intent-danger').length).toBeGreaterThanOrEqual(1);
209+
render(<RendererWrapper schema={schema} onSubmit={() => ({ [field.name]: errorText })} />);
210+
211+
userEvent.click(screen.getByText('Submit'));
212+
213+
expect(screen.getByText(errorText)).toBeInTheDocument();
208214
});
209215
});
210216
});

0 commit comments

Comments
 (0)