Skip to content

Commit 90abe7d

Browse files
danezdanez
committed
Use jest snapshot test where possible
1 parent f5ee8ed commit 90abe7d

8 files changed

Lines changed: 1149 additions & 194 deletions

File tree

‎src/components/__tests__/Tab-test.js‎

Lines changed: 13 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
/* eslint-env jest */
22
import React from 'react';
3-
import { shallow } from 'enzyme';
3+
import renderer from 'react-test-renderer';
44
import Tab from '../Tab';
55

6+
function expectToMatchSnapshot(component) {
7+
expect(renderer.create(component).toJSON()).toMatchSnapshot();
8+
}
9+
610
describe('<Tab />', () => {
711
beforeAll(() => {
812
// eslint-disable-next-line no-console
@@ -12,72 +16,35 @@ describe('<Tab />', () => {
1216
});
1317

1418
it('should have sane defaults', () => {
15-
const wrapper = shallow(<Tab />);
16-
17-
expect(wrapper.hasClass('react-tabs__tab')).toBe(true);
18-
expect(wrapper.prop('role')).toBe('tab');
19-
expect(wrapper.prop('aria-selected')).toBe('false');
20-
expect(wrapper.prop('aria-disabled')).toBe('false');
21-
expect(wrapper.prop('aria-controls')).toBe(null);
22-
expect(wrapper.prop('id')).toBe(null);
23-
expect(wrapper.children().length).toBe(0);
19+
expectToMatchSnapshot(<Tab />);
2420
});
2521

2622
it('should accept className', () => {
27-
const wrapper = shallow(<Tab className="foobar" />);
28-
29-
expect(wrapper.hasClass('react-tabs__tab')).toBe(false);
30-
expect(wrapper.hasClass('foobar')).toBe(true);
23+
expectToMatchSnapshot(<Tab className="foobar" />);
3124
});
3225

3326
it('should support being selected', () => {
34-
const wrapper = shallow(<Tab selected id="abcd" panelId="1234">Hello</Tab>);
35-
36-
expect(wrapper.hasClass('react-tabs__tab')).toBe(true);
37-
expect(wrapper.hasClass('react-tabs__tab--selected')).toBe(true);
38-
expect(wrapper.prop('aria-selected')).toBe('true');
39-
expect(wrapper.prop('aria-disabled')).toBe('false');
40-
expect(wrapper.prop('aria-controls')).toBe('1234');
41-
expect(wrapper.prop('id')).toBe('abcd');
42-
expect(wrapper.text()).toBe('Hello');
27+
expectToMatchSnapshot(<Tab selected id="abcd" panelId="1234">Hello</Tab>);
4328
});
4429

4530
it('should support being selected with custom class', () => {
46-
const wrapper = shallow(<Tab selected selectedClassName="cool" />);
47-
48-
expect(wrapper.hasClass('react-tabs__tab')).toBe(true);
49-
expect(wrapper.hasClass('react-tabs__tab--selected')).toBe(false);
50-
expect(wrapper.hasClass('cool')).toBe(true);
51-
expect(wrapper.prop('aria-selected')).toBe('true');
31+
expectToMatchSnapshot(<Tab selected selectedClassName="cool" />);
5232
});
5333

5434
it('should support being disabled', () => {
55-
const wrapper = shallow(<Tab disabled />);
56-
57-
expect(wrapper.hasClass('react-tabs__tab')).toBe(true);
58-
expect(wrapper.hasClass('react-tabs__tab--disabled')).toBe(true);
59-
expect(wrapper.prop('aria-disabled')).toBe('true');
35+
expectToMatchSnapshot(<Tab disabled />);
6036
});
6137

6238
it('should support being disabled with custom class name', () => {
63-
const wrapper = shallow(<Tab disabled disabledClassName="coolDisabled" />);
64-
65-
expect(wrapper.hasClass('react-tabs__tab')).toBe(true);
66-
expect(wrapper.hasClass('react-tabs__tab--disabled')).toBe(false);
67-
expect(wrapper.hasClass('coolDisabled')).toBe(true);
68-
expect(wrapper.prop('aria-disabled')).toBe('true');
39+
expectToMatchSnapshot(<Tab disabled disabledClassName="coolDisabled" />);
6940
});
7041

7142
it('should pass through custom properties', () => {
72-
const wrapper = shallow(<Tab data-tooltip="Tooltip contents" />);
73-
74-
expect(wrapper.prop('data-tooltip')).toBe('Tooltip contents');
43+
expectToMatchSnapshot(<Tab data-tooltip="Tooltip contents" />);
7544
});
7645

7746
it('should not allow overriding all default properties', () => {
7847
// eslint-disable-next-line jsx-a11y/aria-role
79-
const wrapper = shallow(<Tab role="micro-tab" />);
80-
81-
expect(wrapper.prop('role')).toBe('tab');
48+
expectToMatchSnapshot(<Tab role="micro-tab" />);
8249
});
8350
});

‎src/components/__tests__/TabList-test.js‎

Lines changed: 10 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
/* eslint-env jest */
22
import React from 'react';
3-
import { shallow, mount } from 'enzyme';
3+
import renderer from 'react-test-renderer';
44
import Tab from '../Tab';
55
import TabList from '../TabList';
66
import TabPanel from '../TabPanel';
77
import Tabs from '../Tabs';
88

9-
function hasClassAt(wrapper, index, className) {
10-
return wrapper.childAt(index).find('li').hasClass(className);
9+
function expectToMatchSnapshot(component) {
10+
expect(renderer.create(component).toJSON()).toMatchSnapshot();
1111
}
1212

1313
describe('<TabList />', () => {
@@ -19,34 +19,24 @@ describe('<TabList />', () => {
1919
});
2020

2121
it('should have sane defaults', () => {
22-
const wrapper = shallow(<TabList />);
23-
24-
expect(wrapper.hasClass('react-tabs__tab-list')).toBe(true);
25-
expect(wrapper.prop('role')).toBe('tablist');
22+
expectToMatchSnapshot(<TabList />);
2623
});
2724

2825
it('should accept className', () => {
29-
const wrapper = shallow(<TabList className="foobar" />);
30-
31-
expect(wrapper.hasClass('react-tabs__tab-list')).toBe(false);
32-
expect(wrapper.hasClass('foobar')).toBe(true);
26+
expectToMatchSnapshot(<TabList className="foobar" />);
3327
});
3428

3529
it('should pass through custom properties', () => {
36-
const wrapper = shallow(<TabList data-tooltip="Tooltip contents" />);
37-
38-
expect(wrapper.prop('data-tooltip')).toBe('Tooltip contents');
30+
expectToMatchSnapshot(<TabList data-tooltip="Tooltip contents" />);
3931
});
4032

4133
it('should not allow overriding all default properties', () => {
4234
// eslint-disable-next-line jsx-a11y/aria-role
43-
const wrapper = shallow(<TabList role="micro-tab" />);
44-
45-
expect(wrapper.prop('role')).toBe('tablist');
35+
expectToMatchSnapshot(<TabList role="micro-tab" />);
4636
});
4737

4838
it('should retain the default classnames for active and disabled tab', () => {
49-
const wrapper = mount(
39+
expectToMatchSnapshot(
5040
<Tabs defaultIndex={0}>
5141
<TabList>
5242
<Tab>Foo</Tab>
@@ -56,14 +46,10 @@ describe('<TabList />', () => {
5646
<TabPanel>Bar</TabPanel>
5747
</Tabs>,
5848
);
59-
60-
const tabsList = wrapper.childAt(0);
61-
expect(hasClassAt(tabsList, 0, 'react-tabs__tab--selected')).toBe(true);
62-
expect(hasClassAt(tabsList, 1, 'react-tabs__tab--disabled')).toBe(true);
6349
});
6450

6551
it('should display the custom classnames for selected and disabled tab specified on tabs', () => {
66-
const wrapper = mount(
52+
expectToMatchSnapshot(
6753
<Tabs defaultIndex={0} selectedTabClassName="active" disabledTabClassName="disabled">
6854
<TabList>
6955
<Tab>Foo</Tab>
@@ -73,17 +59,10 @@ describe('<TabList />', () => {
7359
<TabPanel>Bar</TabPanel>
7460
</Tabs>,
7561
);
76-
77-
const tabsList = wrapper.childAt(0);
78-
expect(hasClassAt(tabsList, 0, 'react-tabs__tab--selected')).toBe(false);
79-
expect(hasClassAt(tabsList, 1, 'react-tabs__tab--disabled')).toBe(false);
80-
81-
expect(hasClassAt(tabsList, 0, 'active')).toBe(true);
82-
expect(hasClassAt(tabsList, 1, 'disabled')).toBe(true);
8362
});
8463

8564
it('should display the custom classnames for selected and disabled tab', () => {
86-
const wrapper = mount(
65+
expectToMatchSnapshot(
8766
<Tabs defaultIndex={0}>
8867
<TabList>
8968
<Tab selectedClassName="active" disabledClassName="disabled">Foo</Tab>
@@ -95,12 +74,5 @@ describe('<TabList />', () => {
9574
<TabPanel>Bar</TabPanel>
9675
</Tabs>,
9776
);
98-
99-
const tabsList = wrapper.childAt(0);
100-
expect(hasClassAt(tabsList, 0, 'react-tabs__tab--selected')).toBe(false);
101-
expect(hasClassAt(tabsList, 1, 'react-tabs__tab--disabled')).toBe(false);
102-
103-
expect(hasClassAt(tabsList, 0, 'active')).toBe(true);
104-
expect(hasClassAt(tabsList, 1, 'disabled')).toBe(true);
10577
});
10678
});

‎src/components/__tests__/TabPanel-test.js‎

Lines changed: 13 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
/* eslint-env jest */
22
import React from 'react';
3-
import { shallow } from 'enzyme';
3+
import renderer from 'react-test-renderer';
44
import TabPanel from '../TabPanel';
55

6+
function expectToMatchSnapshot(component) {
7+
expect(renderer.create(component).toJSON()).toMatchSnapshot();
8+
}
9+
610
describe('<TabPanel />', () => {
711
beforeAll(() => {
812
// eslint-disable-next-line no-console
@@ -12,67 +16,39 @@ describe('<TabPanel />', () => {
1216
});
1317

1418
it('should have sane defaults', () => {
15-
const wrapper = shallow(<TabPanel>Hola</TabPanel>);
16-
17-
expect(wrapper.hasClass('react-tabs__tab-panel')).toBe(true);
18-
expect(wrapper.prop('role')).toBe('tabpanel');
19-
expect(wrapper.children().length).toBe(0);
19+
expectToMatchSnapshot(<TabPanel>Hola</TabPanel>);
2020
});
2121

2222
it('should render when selected', () => {
23-
const wrapper = shallow(<TabPanel selected>Hola</TabPanel>);
24-
25-
expect(wrapper.children().length).toBe(1);
23+
expectToMatchSnapshot(<TabPanel selected>Hola</TabPanel>);
2624
});
2725

2826
it('should render when forced', () => {
29-
const wrapper = shallow(<TabPanel forceRender>Hola</TabPanel>);
30-
31-
expect(wrapper.children().length).toBe(1);
27+
expectToMatchSnapshot(<TabPanel forceRender>Hola</TabPanel>);
3228
});
3329

3430
it('should accept className', () => {
35-
const wrapper = shallow(<TabPanel className="foobar" />);
36-
37-
expect(wrapper.hasClass('react-tabs__tab-panel')).toBe(false);
38-
expect(wrapper.hasClass('foobar')).toBe(true);
31+
expectToMatchSnapshot(<TabPanel className="foobar" />);
3932
});
4033

4134
it('should support being selected', () => {
42-
const wrapper = shallow(<TabPanel selected id="abcd" tabId="1234">Hola</TabPanel>);
43-
44-
expect(wrapper.hasClass('react-tabs__tab-panel')).toBe(true);
45-
expect(wrapper.hasClass('react-tabs__tab-panel--selected')).toBe(true);
46-
expect(wrapper.prop('aria-labelledby')).toBe('1234');
47-
expect(wrapper.prop('id')).toBe('abcd');
48-
expect(wrapper.text()).toBe('Hola');
35+
expectToMatchSnapshot(<TabPanel selected id="abcd" tabId="1234">Hola</TabPanel>);
4936
});
5037

5138
it('should support being selected with custom class name', () => {
52-
const wrapper = shallow(
39+
expectToMatchSnapshot(
5340
<TabPanel selected id="abcd" tabId="1234" selectedClassName="selected">
5441
Hola
5542
</TabPanel>,
5643
);
57-
58-
expect(wrapper.hasClass('react-tabs__tab-panel')).toBe(true);
59-
expect(wrapper.hasClass('react-tabs__tab-panel--selected')).toBe(false);
60-
expect(wrapper.hasClass('selected')).toBe(true);
61-
expect(wrapper.prop('aria-labelledby')).toBe('1234');
62-
expect(wrapper.prop('id')).toBe('abcd');
63-
expect(wrapper.text()).toBe('Hola');
6444
});
6545

6646
it('should pass through custom properties', () => {
67-
const wrapper = shallow(<TabPanel data-tooltip="Tooltip contents" />);
68-
69-
expect(wrapper.prop('data-tooltip')).toBe('Tooltip contents');
47+
expectToMatchSnapshot(<TabPanel data-tooltip="Tooltip contents" />);
7048
});
7149

7250
it('should not allow overriding all default properties', () => {
7351
// eslint-disable-next-line jsx-a11y/aria-role
74-
const wrapper = shallow(<TabPanel role="micro-tab" />);
75-
76-
expect(wrapper.prop('role')).toBe('tabpanel');
52+
expectToMatchSnapshot(<TabPanel role="micro-tab" />);
7753
});
7854
});

0 commit comments

Comments
 (0)