Use Jest 🃏 and upgrade Webpack and other dependencies

Author: javivelasco

.stylelintrc

@@ -1,5 +1,8 @@
 {
   "extends": "stylelint-config-standard",
+  "plugins": [
+    "stylelint-order"
+  ],
   "rules": {
     "at-rule-no-unknown": [true, {
       ignoreAtRules: ["define-mixin", "mixin", "each"]
@@ -11,7 +14,11 @@
       ]
     }],
     "color-hex-case": "lower",
-    "declaration-block-properties-order": "alphabetical",
+    "order/declaration-block-order": [
+      "custom-properties",
+      "declarations"
+    ],
+    "order/declaration-block-properties-alphabetical-order": true,
     "font-family-name-quotes": "always-where-recommended",
     "string-quotes": "single",
     "selector-pseudo-class-no-unknown": [

components/__mocks__/react-css-themr.js

@@ -0,0 +1,7 @@
+export function themr() {
+  return (Component) => {
+    Component.defaultProps = Component.defaultProps || {};  // eslint-disable-line no-param-reassign
+    Component.defaultProps.theme = {}; // eslint-disable-line no-param-reassign
+    return Component;
+  };
+}

components/button/__test__/index.spec.js

@@ -1,43 +1,35 @@
-/* eslint-disable */
-import expect from 'expect';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import TestUtils from 'react-addons-test-utils';
+import { mount } from 'enzyme';
+import { Button } from '../Button';
 import theme from '../theme.css';
-import Button, { Button as RawButton } from '../Button';
-
-const getRenderedClassName = (tree, Component) => {
-  const rendered = TestUtils.findRenderedComponentWithType(tree, Component);
-  return ReactDOM.findDOMNode(rendered).getAttribute('class');
-};
 
 describe('Button', () => {
   describe('#render', () => {
     it('uses flat and neutral styles by default', () => {
-      const tree = TestUtils.renderIntoDocument(<Button theme={theme} />);
-      const className = getRenderedClassName(tree, RawButton);
+      const wrapper = mount(<Button theme={theme} />);
+      const { className } = wrapper.find('button').props();
       expect(className).toContain(theme.flat);
       expect(className).toContain(theme.neutral);
     });
 
     it('renders accent button with accent style', () => {
-      const tree = TestUtils.renderIntoDocument(<Button accent theme={theme} />);
-      const className = getRenderedClassName(tree, RawButton);
+      const wrapper = mount(<Button accent theme={theme} />);
+      const { className } = wrapper.find('button').props();
       expect(className).toContain(theme.flat);
       expect(className).toContain(theme.accent);
     });
 
     it('renders mini button with mini style', () => {
-      const tree = TestUtils.renderIntoDocument(<Button floating mini theme={theme} />);
-      const className = getRenderedClassName(tree, RawButton);
+      const wrapper = mount(<Button floating mini theme={theme} />);
+      const { className } = wrapper.find('button').props();
       expect(className).toContain(theme.floating);
       expect(className).toContain(theme.neutral);
       expect(className).toContain(theme.mini);
     });
 
     it('renders mini accented button with both styles', () => {
-      const tree = TestUtils.renderIntoDocument(<Button accent mini theme={theme} />);
-      const className = getRenderedClassName(tree, RawButton);
+      const wrapper = mount(<Button accent mini theme={theme} />);
+      const { className } = wrapper.find('button').props();
       expect(className).toContain(theme.flat);
       expect(className).toContain(theme.accent);
       expect(className).toContain(theme.mini);

components/chip/__test__/index.spec.js

@@ -1,53 +1,47 @@
-/* eslint-disable */
-import expect from 'expect';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-addons-test-utils';
+import { mount } from 'enzyme';
 import { themr } from 'react-css-themr';
-import { CHIP } from '../../identifiers.js';
-import { chipFactory } from '../Chip';
+import { CHIP } from '../../identifiers';
 import { tooltipFactory } from '../../tooltip';
+import { chipFactory } from '../Chip';
 
 const Avatar = ({ title }) => <span>{title}</span>; // eslint-disable-line react/prop-types
 const Chip = themr(CHIP)(chipFactory(Avatar));
 
 describe('Chip', () => {
   describe('with avatar', () => {
     it('adds the avatar class to the element', () => {
-      const tree = ReactTestUtils.renderIntoDocument(
+      const wrapper = mount(
         <Chip theme={{ avatar: 'avatar-class' }}>
           <Avatar title="Test" />
           <span>Test</span>
         </Chip>,
       );
-      const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
-      const chipNode = ReactDOM.findDOMNode(chip);
+      const chipNode = wrapper.find('div').node;
       expect(chipNode.className).toMatch(/\bavatar-class\b/);
     });
 
     it('works with non-flat children', () => {
       const TooltippedChip = tooltipFactory()(Chip);
-      const tree = ReactTestUtils.renderIntoDocument(
+      const wrapper = mount(
         <TooltippedChip theme={{ avatar: 'avatar-class' }} tooltip="Test tooltip">
           <Avatar title="Test" />
           <span>Test</span>
         </TooltippedChip>,
       );
-      const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
-      const chipNode = ReactDOM.findDOMNode(chip);
+      const chipNode = wrapper.find('div').node;
       expect(chipNode.className).toMatch(/\bavatar-class\b/);
     });
   });
 
   describe('without avatar', () => {
     it('does not add avatar class to the element', () => {
-      const tree = ReactTestUtils.renderIntoDocument(
+      const wrapper = mount(
         <Chip theme={{ avatar: 'avatar-class' }}>
           <span>Test</span>
         </Chip>,
       );
-      const chip = ReactTestUtils.findRenderedComponentWithType(tree, Chip);
-      const chipNode = ReactDOM.findDOMNode(chip);
+      const chipNode = wrapper.find('div').node;
       expect(chipNode.className).toNotMatch(/\bavatar-class\b/);
     });
   });

components/date_picker/DatePicker.js

@@ -169,4 +169,5 @@ export {
   DatePickerDialog,
   factory as datePickerFactory,
 };
+export { Calendar };
 export { DatePicker };

components/date_picker/__test__/index.spec.js

@@ -1,31 +1,34 @@
-/* eslint-disable */
-import expect from 'expect';
+import React from 'react';
+import { shallow } from 'enzyme';
 import theme from '../theme.css';
-import { DatePickerDialog } from '../DatePicker';
-import utils from '../../utils/testing';
+import { DatePickerDialog, Calendar } from '../DatePicker';
 
 describe('DatePickerDialog', () => {
   describe('#on mount', () => {
     it('passes value through to calendar if no maxDate/minDate specified', () => {
       const value = new Date(2016, 1, 1);
-      const wrapper = utils.shallowRenderComponent(DatePickerDialog, { theme, value });
-      expect(getDatePassedToCalendar(wrapper)).toBe(value);
+      const wrapper = shallow(<DatePickerDialog theme={theme} value={value} />);
+      expect(wrapper.find(Calendar).props().selectedDate).toBe(value);
     });
 
     describe('when minDate but not maxDate specified', () => {
       const minDate = new Date(2016, 1, 2);
 
       it('passes through a value after minDate', () => {
         const value = new Date(2016, 1, 3);
-        const wrapper = utils.shallowRenderComponent(DatePickerDialog, { theme, value, minDate });
-        expect(getDatePassedToCalendar(wrapper)).toBe(value);
+        const wrapper = shallow(<DatePickerDialog theme={theme} minDate={minDate} value={value} />);
+        expect(wrapper.find(Calendar).props().selectedDate).toBe(value);
       });
 
       it('sanitises a value before minDate to minDate', () => {
-        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
-          theme, value: new Date(2016, 1, 1), minDate,
-        });
-        expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
+        const wrapper = shallow(
+          <DatePickerDialog
+            theme={theme}
+            minDate={minDate}
+            value={new Date(2016, 1, 1)}
+          />,
+        );
+        expect(wrapper.find(Calendar).props().selectedDate).toBe(minDate);
       });
     });
 
@@ -34,15 +37,25 @@ describe('DatePickerDialog', () => {
 
       it('passes through a value before maxDate', () => {
         const value = new Date(2016, 1, 1);
-        const wrapper = utils.shallowRenderComponent(DatePickerDialog, { theme, value, maxDate });
-        expect(getDatePassedToCalendar(wrapper)).toBe(value);
+        const wrapper = shallow(
+          <DatePickerDialog
+            theme={theme}
+            maxDate={maxDate}
+            value={value}
+          />,
+        );
+        expect(wrapper.find(Calendar).props().selectedDate).toBe(value);
       });
 
       it('sanitises a value after maxDate to maxDate', () => {
-        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
-          theme, value: new Date(2016, 1, 3), maxDate,
-        });
-        expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
+        const wrapper = shallow(
+          <DatePickerDialog
+            theme={theme}
+            maxDate={maxDate}
+            value={new Date(2016, 1, 3)}
+          />,
+        );
+        expect(wrapper.find(Calendar).props().selectedDate).toBe(maxDate);
       });
     });
 
@@ -51,34 +64,41 @@ describe('DatePickerDialog', () => {
       const maxDate = new Date(2016, 1, 4);
 
       it('sanitises value to minDate if value is before minDate', () => {
-        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
-          theme,
-          value: new Date(2016, 1, 1),
-          minDate,
-          maxDate,
-        });
-        expect(getDatePassedToCalendar(wrapper)).toBe(minDate);
+        const wrapper = shallow(
+          <DatePickerDialog
+            theme={theme}
+            minDate={minDate}
+            maxDate={maxDate}
+            value={new Date(2016, 1, 1)}
+          />,
+        );
+        expect(wrapper.find(Calendar).props().selectedDate).toBe(minDate);
       });
 
       it('sanitises value to maxDate if value is after maxDate', () => {
-        const wrapper = utils.shallowRenderComponent(DatePickerDialog, {
-          theme,
-          value: new Date(2016, 1, 5),
-          minDate,
-          maxDate,
-        });
-        expect(getDatePassedToCalendar(wrapper)).toBe(maxDate);
+        const wrapper = shallow(
+          <DatePickerDialog
+            theme={theme}
+            minDate={minDate}
+            maxDate={maxDate}
+            value={new Date(2016, 1, 5)}
+          />,
+        );
+        expect(wrapper.find(Calendar).props().selectedDate).toBe(maxDate);
       });
 
       it('doesn\'t sanitise when value is between maxDate/minDate', () => {
         const value = new Date(2016, 1, 3);
-        const wrapper = utils.shallowRenderComponent(DatePickerDialog, { theme, value, minDate, maxDate });
-        expect(getDatePassedToCalendar(wrapper)).toBe(value);
+        const wrapper = shallow(
+          <DatePickerDialog
+            theme={theme}
+            minDate={minDate}
+            maxDate={maxDate}
+            value={value}
+          />,
+        );
+        expect(wrapper.find(Calendar).props().selectedDate).toBe(value);
       });
     });
-
-    function getDatePassedToCalendar(wrapper) {
-      return wrapper.props.children[1].props.children.props.selectedDate;
-    }
   });
 });

components/dropdown/__test__/index.spec.js

@@ -1,30 +1,20 @@
-/* eslint-disable */
-import expect from 'expect';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import ReactTestUtils from 'react-addons-test-utils';
-import Menu from '../Menu';
-import MenuItem, { MenuItem as RawMenuItem } from '../MenuItem';
+import { shallow } from 'enzyme';
+import { Menu } from '../Menu';
+import { MenuItem } from '../MenuItem';
 
 describe('MenuItem', () => {
   describe('#onClick', () => {
     it('passes to listener the event', () => {
-      let listenerCalled = false;
-      const handleClick = function (event) {
-        listenerCalled = true;
-        expect(event).toExist();
-        expect(event.target).toExist();
-      };
-
-      const tree = ReactTestUtils.renderIntoDocument(
+      const onClick = jest.fn();
+      const wrapper = shallow(
         <Menu>
-          <MenuItem key="1" onClick={handleClick} />
-        </Menu>);
-
-      const menuItem = ReactTestUtils.findRenderedComponentWithType(tree, RawMenuItem);
-      ReactTestUtils.Simulate.click(ReactDOM.findDOMNode(menuItem));
+          <MenuItem key="1" onClick={onClick} />
+        </Menu>,
+      );
 
-      expect(listenerCalled).toBe(true);
+      wrapper.find(MenuItem).first().simulate('click', { persist: () => {} });
+      expect(onClick).toHaveBeenCalled();
     });
   });
 });