Skip to content

Commit 3fa9c6c

Browse files
rvsiarvsia
committed
Add RTL tests for blueprint components
1 parent 49abf84 commit 3fa9c6c

File tree

1 file changed

+58
-52
lines changed

1 file changed

+58
-52
lines changed

‎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)