Skip to content

Commit 0352f01

Browse files
rvsiarvsia
committed
Convert semantic tests to RTL
1 parent a6c0cfb commit 0352f01

File tree

5 files changed

+87
-144
lines changed

5 files changed

+87
-144
lines changed

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

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

‎packages/suir-component-mapper/src/tests/plain-text.test.js‎

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

44
import PlainText from '../plain-text';
55

@@ -8,17 +8,19 @@ describe('PlainText component', () => {
88
const label = 'One \n Two \n Three';
99
const name = 'name';
1010

11-
const wrapper = mount(<PlainText name={name} label={label} />);
11+
render(<PlainText name={name} label={label} />);
1212

13-
expect(wrapper.find('p')).toHaveLength(3);
13+
expect(screen.getByText('One', { selector: 'p' })).toBeInTheDocument();
14+
expect(screen.getByText('Two', { selector: 'p' })).toBeInTheDocument();
15+
expect(screen.getByText('Three', { selector: 'p' })).toBeInTheDocument();
1416
});
1517

1618
it('renders correctly with one paragraphs', () => {
1719
const label = 'One';
1820
const name = 'name';
1921

20-
const wrapper = mount(<PlainText name={name} label={label} />);
22+
render(<PlainText name={name} label={label} />);
2123

22-
expect(wrapper.find('p')).toHaveLength(1);
24+
expect(screen.getByText('One', { selector: 'p' })).toBeInTheDocument();
2325
});
2426
});

‎packages/suir-component-mapper/src/tests/subform.test.js‎

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

44
import Subform from '../sub-form';
55
import RenderWithProvider from '../../../../__mocks__/with-provider';
6-
import { Header } from 'semantic-ui-react';
76

87
describe('subform', () => {
98
const props = {
@@ -25,7 +24,7 @@ describe('subform', () => {
2524
const DESCRIPTION = 'THIS IS DESCRIPTION';
2625

2726
it('should render correctly', () => {
28-
const wrapper = mount(
27+
render(
2928
<RenderWithProvider
3029
value={{
3130
formOptions: {
@@ -37,11 +36,11 @@ describe('subform', () => {
3736
</RenderWithProvider>
3837
);
3938

40-
expect(wrapper.find('h1')).toHaveLength(1);
39+
expect(screen.getByText('Content')).toBeInTheDocument();
4140
});
4241

4342
it('should render correctly with title', () => {
44-
const wrapper = mount(
43+
render(
4544
<RenderWithProvider
4645
value={{
4746
formOptions: {
@@ -53,13 +52,11 @@ describe('subform', () => {
5352
</RenderWithProvider>
5453
);
5554

56-
expect(wrapper.find(Header)).toHaveLength(1);
57-
expect(wrapper.find(Header).text().includes(TITLE)).toEqual(true);
58-
expect(wrapper.find('h1')).toHaveLength(1);
55+
expect(screen.getByText(TITLE)).toBeInTheDocument();
5956
});
6057

6158
it('should render correctly with description', () => {
62-
const wrapper = mount(
59+
render(
6360
<RenderWithProvider
6461
value={{
6562
formOptions: {
@@ -71,13 +68,11 @@ describe('subform', () => {
7168
</RenderWithProvider>
7269
);
7370

74-
expect(wrapper.find('p')).toHaveLength(1);
75-
expect(wrapper.find('p').text().includes(DESCRIPTION)).toEqual(true);
76-
expect(wrapper.find('h1')).toHaveLength(1);
71+
expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();
7772
});
7873

7974
it('should render correctly with title and description', () => {
80-
const wrapper = mount(
75+
render(
8176
<RenderWithProvider
8277
value={{
8378
formOptions: {
@@ -89,10 +84,7 @@ describe('subform', () => {
8984
</RenderWithProvider>
9085
);
9186

92-
expect(wrapper.find(Header)).toHaveLength(1);
93-
expect(wrapper.find('p')).toHaveLength(1);
94-
expect(wrapper.find(Header).text().includes(TITLE)).toEqual(true);
95-
expect(wrapper.find('p').text().includes(DESCRIPTION)).toEqual(true);
96-
expect(wrapper.find('h1')).toHaveLength(1);
87+
expect(screen.getByText(TITLE)).toBeInTheDocument();
88+
expect(screen.getByText(DESCRIPTION)).toBeInTheDocument();
9789
});
9890
});

‎packages/suir-component-mapper/src/tests/tabs.test.js‎

Lines changed: 17 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from 'react';
2-
import { mount } from 'enzyme';
2+
import { render, screen } from '@testing-library/react';
3+
import userEvent from '@testing-library/user-event';
34

45
import FormTabs from '../tabs';
56
import RenderWithProvider from '../../../../__mocks__/with-provider';
67
import { FormRenderer, validatorTypes } from '@data-driven-forms/react-form-renderer';
78
import { componentMapper, FormTemplate } from '../index';
8-
import { Tab } from 'semantic-ui-react';
99

1010
describe('tabs', () => {
1111
const props = {
@@ -28,37 +28,34 @@ describe('tabs', () => {
2828
};
2929

3030
it('should render tabs correctly', () => {
31-
const wrapper = mount(
31+
render(
3232
<RenderWithProvider value={{ formOptions }}>
3333
<FormTabs {...props} />
3434
</RenderWithProvider>
3535
);
3636

37-
expect(wrapper.find(Tab)).toHaveLength(1);
38-
expect(wrapper.find(Tab.Pane)).toHaveLength(2);
37+
expect(screen.getAllByText('Content')).toHaveLength(2);
38+
expect(screen.getByText('cosiTitle')).toBeInTheDocument();
39+
expect(screen.getByText('cosiTitle2')).toBeInTheDocument();
3940
});
4041

4142
it('should switch tabs correctly', () => {
42-
const wrapper = mount(
43+
render(
4344
<RenderWithProvider value={{ formOptions }}>
4445
<FormTabs {...props} />
4546
</RenderWithProvider>
4647
);
4748

48-
expect(wrapper.find(Tab.Pane).first().prop('active')).toEqual(true);
49-
expect(wrapper.find(Tab.Pane).last().prop('active')).toEqual(false);
49+
expect(screen.getByText('cosiTitle')).toHaveClass('active item');
5050

51-
const secondTabButton = wrapper.find('a.item').last();
52-
secondTabButton.simulate('click');
53-
wrapper.update();
51+
userEvent.click(screen.getByText('cosiTitle2'));
5452

55-
expect(wrapper.find(Tab.Pane).first().prop('active')).toEqual(false);
56-
expect(wrapper.find(Tab.Pane).last().prop('active')).toEqual(true);
53+
expect(screen.getByText('cosiTitle2')).toHaveClass('active item');
5754
});
5855

5956
it('validate all tabs', () => {
6057
const onSubmit = jest.fn();
61-
const wrapper = mount(
58+
render(
6259
<FormRenderer
6360
componentMapper={componentMapper}
6461
FormTemplate={(props) => <FormTemplate {...props} />}
@@ -78,6 +75,7 @@ describe('tabs', () => {
7875
component: 'text-field',
7976
name: 'name',
8077
validate: [{ type: validatorTypes.REQUIRED }],
78+
'aria-label': 'name',
8179
},
8280
],
8381
},
@@ -89,6 +87,7 @@ describe('tabs', () => {
8987
component: 'text-field',
9088
name: 'password',
9189
validate: [{ type: validatorTypes.REQUIRED }],
90+
'aria-label': 'password',
9291
},
9392
],
9493
},
@@ -99,24 +98,13 @@ describe('tabs', () => {
9998
/>
10099
);
101100

102-
wrapper
103-
.find('input')
104-
.first()
105-
.simulate('change', { target: { value: 'NAME' } });
106-
wrapper.update();
107-
108-
wrapper.find('form').simulate('submit');
109-
wrapper.update();
101+
userEvent.type(screen.getByLabelText('name'), 'NAME');
102+
userEvent.click(screen.getByText('Submit'));
110103

111104
expect(onSubmit).not.toHaveBeenCalled();
112105

113-
wrapper
114-
.find('input')
115-
.last()
116-
.simulate('change', { target: { value: 'PASSWORD' } });
117-
wrapper.update();
118-
119-
wrapper.find('form').simulate('submit');
106+
userEvent.type(screen.getByLabelText('password'), 'PASSWORD');
107+
userEvent.click(screen.getByText('Submit'));
120108

121109
expect(onSubmit).toHaveBeenCalledWith({ name: 'NAME', password: 'PASSWORD' });
122110
});

0 commit comments

Comments
 (0)