Skip to content

Commit b48c17d

Browse files
javivelascojavivelasco
committed
Use Jest 🃏 and upgrade Webpack and other dependencies
1 parent 60b147f commit b48c17d

File tree

19 files changed

+1519
-1309
lines changed

19 files changed

+1519
-1309
lines changed

‎.stylelintrc

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{
22
"extends": "stylelint-config-standard",
3+
"plugins": [
4+
"stylelint-order"
5+
],
36
"rules": {
47
"at-rule-no-unknown": [true, {
58
ignoreAtRules: ["define-mixin", "mixin", "each"]
@@ -11,7 +14,11 @@
1114
]
1215
}],
1316
"color-hex-case": "lower",
14-
"declaration-block-properties-order": "alphabetical",
17+
"order/declaration-block-order": [
18+
"custom-properties",
19+
"declarations"
20+
],
21+
"order/declaration-block-properties-alphabetical-order": true,
1522
"font-family-name-quotes": "always-where-recommended",
1623
"string-quotes": "single",
1724
"selector-pseudo-class-no-unknown": [

‎components/__mocks__/react-css-themr.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export function themr() {
2+
return (Component) => {
3+
Component.defaultProps = Component.defaultProps || {}; // eslint-disable-line no-param-reassign
4+
Component.defaultProps.theme = {}; // eslint-disable-line no-param-reassign
5+
return Component;
6+
};
7+
}

‎components/button/__test__/index.spec.js

+10-18
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,35 @@
1-
/* eslint-disable */
2-
import expect from 'expect';
31
import React from 'react';
4-
import ReactDOM from 'react-dom';
5-
import TestUtils from 'react-addons-test-utils';
2+
import { mount } from 'enzyme';
3+
import { Button } from '../Button';
64
import theme from '../theme.css';
7-
import Button, { Button as RawButton } from '../Button';
8-
9-
const getRenderedClassName = (tree, Component) => {
10-
const rendered = TestUtils.findRenderedComponentWithType(tree, Component);
11-
return ReactDOM.findDOMNode(rendered).getAttribute('class');
12-
};
135

146
describe('Button', () => {
157
describe('#render', () => {
168
it('uses flat and neutral styles by default', () => {
17-
const tree = TestUtils.renderIntoDocument(<Button theme={theme} />);
18-
const className = getRenderedClassName(tree, RawButton);
9+
const wrapper = mount(<Button theme={theme} />);
10+
const { className } = wrapper.find('button').props();
1911
expect(className).toContain(theme.flat);
2012
expect(className).toContain(theme.neutral);
2113
});
2214

2315
it('renders accent button with accent style', () => {
24-
const tree = TestUtils.renderIntoDocument(<Button accent theme={theme} />);
25-
const className = getRenderedClassName(tree, RawButton);
16+
const wrapper = mount(<Button accent theme={theme} />);
17+
const { className } = wrapper.find('button').props();
2618
expect(className).toContain(theme.flat);
2719
expect(className).toContain(theme.accent);
2820
});
2921

3022
it('renders mini button with mini style', () => {
31-
const tree = TestUtils.renderIntoDocument(<Button floating mini theme={theme} />);
32-
const className = getRenderedClassName(tree, RawButton);
23+
const wrapper = mount(<Button floating mini theme={theme} />);
24+
const { className } = wrapper.find('button').props();
3325
expect(className).toContain(theme.floating);
3426
expect(className).toContain(theme.neutral);
3527
expect(className).toContain(theme.mini);
3628
});
3729

3830
it('renders mini accented button with both styles', () => {
39-
const tree = TestUtils.renderIntoDocument(<Button accent mini theme={theme} />);
40-
const className = getRenderedClassName(tree, RawButton);
31+
const wrapper = mount(<Button accent mini theme={theme} />);
32+
const { className } = wrapper.find('button').props();
4133
expect(className).toContain(theme.flat);
4234
expect(className).toContain(theme.accent);
4335
expect(className).toContain(theme.mini);

‎components/chip/__test__/index.spec.js

+9-15
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,47 @@
1-
/* eslint-disable */
2-
import expect from 'expect';
31
import React from 'react';
4-
import ReactDOM from 'react-dom';
5-
import ReactTestUtils from 'react-addons-test-utils';
2+
import { mount } from 'enzyme';
63
import { themr } from 'react-css-themr';
7-
import { CHIP } from '../../identifiers.js';
8-
import { chipFactory } from '../Chip';
4+
import { CHIP } from '../../identifiers';
95
import { tooltipFactory } from '../../tooltip';
6+
import { chipFactory } from '../Chip';
107

118
const Avatar = ({ title }) => <span>{title}</span>; // eslint-disable-line react/prop-types
129
const Chip = themr(CHIP)(chipFactory(Avatar));
1310

1411
describe('Chip', () => {
1512
describe('with avatar', () => {
1613
it('adds the avatar class to the element', () => {
17-
const tree = ReactTestUtils.renderIntoDocument(
14+
const wrapper = mount(
1815
<Chip theme={{ avatar: 'avatar-class' }}>
1916
<Avatar title="Test" />
2017
<span>Test</span>
2118
</Chip>,
2219
);
23-
const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
24-
const chipNode = ReactDOM.findDOMNode(chip);
20+
const chipNode = wrapper.find('div').node;
2521
expect(chipNode.className).toMatch(/\bavatar-class\b/);
2622
});
2723

2824
it('works with non-flat children', () => {
2925
const TooltippedChip = tooltipFactory()(Chip);
30-
const tree = ReactTestUtils.renderIntoDocument(
26+
const wrapper = mount(
3127
<TooltippedChip theme={{ avatar: 'avatar-class' }} tooltip="Test tooltip">
3228
<Avatar title="Test" />
3329
<span>Test</span>
3430
</TooltippedChip>,
3531
);
36-
const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
37-
const chipNode = ReactDOM.findDOMNode(chip);
32+
const chipNode = wrapper.find('div').node;
3833
expect(chipNode.className).toMatch(/\bavatar-class\b/);
3934
});
4035
});
4136

4237
describe('without avatar', () => {
4338
it('does not add avatar class to the element', () => {
44-
const tree = ReactTestUtils.renderIntoDocument(
39+
const wrapper = mount(
4540
<Chip theme={{ avatar: 'avatar-class' }}>
4641
<span>Test</span>
4742
</Chip>,
4843
);
49-
const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
50-
const chipNode = ReactDOM.findDOMNode(chip);
44+
const chipNode = wrapper.find('div').node;
5145
expect(chipNode.className).toNotMatch(/\bavatar-class\b/);
5246
});
5347
});

‎components/date_picker/DatePicker.js

+1
Original file line numberDiff line numberDiff line change
@@ -169,4 +169,5 @@ export {
169169
DatePickerDialog,
170170
factory as datePickerFactory,
171171
};
172+
export { Calendar };
172173
export { DatePicker };

‎components/date_picker/__test__/index.spec.js

+58-38
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
1-
/* eslint-disable */
2-
import expect from 'expect';
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
33
import theme from '../theme.css';
4-
import { DatePickerDialog } from '../DatePicker';
5-
import utils from '../../utils/testing';
4+
import { DatePickerDialog, Calendar } from '../DatePicker';
65

76
describe('DatePickerDialog', () => {
87
describe('#on mount', () => {
98
it('passes value through to calendar if no maxDate/minDate specified', () => {
109
const value = new Date(2016, 1, 1);
11-
const wrapper = utils.shallowRenderComponent(DatePickerDialog, { theme, value });
12-
expect(getDatePassedToCalendar(wrapper)).toBe(value);
10+
const wrapper = shallow(<DatePickerDialog theme={theme} value={value} />);
11+
expect(wrapper.find(Calendar).props().selectedDate).toBe(value);
1312
});
1413

1514
describe('when minDate but not maxDate specified', () => {
1615
const minDate = new Date(2016, 1, 2);
1716

1817
it('passes through a value after minDate', () => {
1918
const value = new Date(2016, 1, 3);
20-
const wrapper = utils.shallowRenderComponent(DatePickerDialog, { theme, value, minDate });
21-
expect(getDatePassedToCalendar(wrapper)).toBe(value);
19+
const wrapper = shallow(<DatePickerDialog theme={theme} minDate={minDate} value={value} />);
20+
expect(wrapper.find(Calendar).props().selectedDate).toBe(value);
2221
});
2322

2423
it('sanitises a value before minDate to minDate', () => {
25-
const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
26-
theme, value: new Date(2016, 1, 1), minDate,
27-
});
28-
expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
24+
const wrapper = shallow(
25+
<DatePickerDialog
26+
theme={theme}
27+
minDate={minDate}
28+
value={new Date(2016, 1, 1)}
29+
/>,
30+
);
31+
expect(wrapper.find(Calendar).props().selectedDate).toBe(minDate);
2932
});
3033
});
3134

@@ -34,15 +37,25 @@ describe('DatePickerDialog', () => {
3437

3538
it('passes through a value before maxDate', () => {
3639
const value = new Date(2016, 1, 1);
37-
const wrapper = utils.shallowRenderComponent(DatePickerDialog, { theme, value, maxDate });
38-
expect(getDatePassedToCalendar(wrapper)).toBe(value);
40+
const wrapper = shallow(
41+
<DatePickerDialog
42+
theme={theme}
43+
maxDate={maxDate}
44+
value={value}
45+
/>,
46+
);
47+
expect(wrapper.find(Calendar).props().selectedDate).toBe(value);
3948
});
4049

4150
it('sanitises a value after maxDate to maxDate', () => {
42-
const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
43-
theme, value: new Date(2016, 1, 3), maxDate,
44-
});
45-
expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
51+
const wrapper = shallow(
52+
<DatePickerDialog
53+
theme={theme}
54+
maxDate={maxDate}
55+
value={new Date(2016, 1, 3)}
56+
/>,
57+
);
58+
expect(wrapper.find(Calendar).props().selectedDate).toBe(maxDate);
4659
});
4760
});
4861

@@ -51,34 +64,41 @@ describe('DatePickerDialog', () => {
5164
const maxDate = new Date(2016, 1, 4);
5265

5366
it('sanitises value to minDate if value is before minDate', () => {
54-
const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
55-
theme,
56-
value: new Date(2016, 1, 1),
57-
minDate,
58-
maxDate,
59-
});
60-
expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
67+
const wrapper = shallow(
68+
<DatePickerDialog
69+
theme={theme}
70+
minDate={minDate}
71+
maxDate={maxDate}
72+
value={new Date(2016, 1, 1)}
73+
/>,
74+
);
75+
expect(wrapper.find(Calendar).props().selectedDate).toBe(minDate);
6176
});
6277

6378
it('sanitises value to maxDate if value is after maxDate', () => {
64-
const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
65-
theme,
66-
value: new Date(2016, 1, 5),
67-
minDate,
68-
maxDate,
69-
});
70-
expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
79+
const wrapper = shallow(
80+
<DatePickerDialog
81+
theme={theme}
82+
minDate={minDate}
83+
maxDate={maxDate}
84+
value={new Date(2016, 1, 5)}
85+
/>,
86+
);
87+
expect(wrapper.find(Calendar).props().selectedDate).toBe(maxDate);
7188
});
7289

7390
it('doesn\'t sanitise when value is between maxDate/minDate', () => {
7491
const value = new Date(2016, 1, 3);
75-
const wrapper = utils.shallowRenderComponent(DatePickerDialog, { theme, value, minDate, maxDate });
76-
expect(getDatePassedToCalendar(wrapper)).toBe(value);
92+
const wrapper = shallow(
93+
<DatePickerDialog
94+
theme={theme}
95+
minDate={minDate}
96+
maxDate={maxDate}
97+
value={value}
98+
/>,
99+
);
100+
expect(wrapper.find(Calendar).props().selectedDate).toBe(value);
77101
});
78102
});
79-
80-
function getDatePassedToCalendar(wrapper) {
81-
return wrapper.props.children[1].props.children.props.selectedDate;
82-
}
83103
});
84104
});

‎components/dropdown/__test__/index.spec.js

-44
This file was deleted.

‎components/menu/__test__/index.spec.js

+10-20
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,20 @@
1-
/* eslint-disable */
2-
import expect from 'expect';
31
import React from 'react';
4-
import ReactDOM from 'react-dom';
5-
import ReactTestUtils from 'react-addons-test-utils';
6-
import Menu from '../Menu';
7-
import MenuItem, { MenuItem as RawMenuItem } from '../MenuItem';
2+
import { shallow } from 'enzyme';
3+
import { Menu } from '../Menu';
4+
import { MenuItem } from '../MenuItem';
85

96
describe('MenuItem', () => {
107
describe('#onClick', () => {
118
it('passes to listener the event', () => {
12-
let listenerCalled = false;
13-
const handleClick = function (event) {
14-
listenerCalled = true;
15-
expect(event).toExist();
16-
expect(event.target).toExist();
17-
};
18-
19-
const tree = ReactTestUtils.renderIntoDocument(
9+
const onClick = jest.fn();
10+
const wrapper = shallow(
2011
<Menu>
21-
<MenuItem key="1" onClick={handleClick} />
22-
</Menu>);
23-
24-
const menuItem = ReactTestUtils.findRenderedComponentWithType(tree, RawMenuItem);
25-
ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(menuItem));
12+
<MenuItem key="1" onClick={onClick} />
13+
</Menu>,
14+
);
2615

27-
expect(listenerCalled).toBe(true);
16+
wrapper.find(MenuItem).first().simulate('click', { persist: () => {} });
17+
expect(onClick).toHaveBeenCalled();
2818
});
2919
});
3020
});

0 commit comments

Comments
 (0)