fix(dependencies): update to React 16 and Enzyme 3

openedx · Nov 21, 2017 · a67e2d8 · a67e2d8
2 parents 1f9a726 + 0bf8174
commit a67e2d8
Show file tree

Hide file tree

Showing 18 changed files with 724 additions and 721 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,11 +24,12 @@
   },
   "dependencies": {
     "@edx/edx-bootstrap": "^0.4.2",
+    "babel-polyfill": "^6.26.0",
     "classnames": "^2.2.5",
     "font-awesome": "^4.7.0",
     "prop-types": "^15.5.8",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4",
+    "react": "^16.1.0",
+    "react-dom": "^16.1.0",
     "react-element-proptypes": "^1.0.0",
     "react-proptype-conditional-require": "^1.0.4"
   },
@@ -37,8 +38,8 @@
     "@storybook/addon-console": "^1.0.0",
     "@storybook/addon-options": "^3.2.6",
     "@storybook/addon-storyshots": "^3.2.8",
-    "@storybook/channels": "^3.2.15",
-    "@storybook/react": "^3.2.12",
+    "@storybook/channels": "^3.2.16",
+    "@storybook/react": "^3.2.16",
     "@storybook/storybook-deployer": "^2.0.0",
     "babel-cli": "^6.24.1",
     "babel-jest": "^21.0.0",
@@ -52,9 +53,10 @@
     "coveralls": "^3.0.0",
     "css-loader": "^0.28.4",
     "cz-conventional-changelog": "^2.1.0",
-    "enzyme": "^2.8.2",
+    "enzyme": "^3.1.1",
+    "enzyme-adapter-react-16": "^1.0.4",
     "eslint": "^4.5.0",
-    "eslint-config-airbnb": "^15.0.1",
+    "eslint-config-airbnb": "^16.0.0",
     "eslint-config-edx": "^4.0.1",
     "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-plugin-jsx-a11y": "^5.1.0",
@@ -67,7 +69,7 @@
     "node-sass": "^4.5.3",
     "postcss-scss": "^1.0.1",
     "react-router-dom": "^4.1.1",
-    "react-test-renderer": "^15.6.1",
+    "react-test-renderer": "^16.1.0",
     "sass-loader": "^6.0.5",
     "semantic-release": "^8.2.0",
     "source-map-loader": "^0.2.1",
@@ -77,6 +79,9 @@
     "webpack-dev-server": "^2.4.4"
   },
   "jest": {
+    "setupFiles": [
+      "./src/setupTest.js"
+    ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(css|scss)$": "identity-obj-proxy"

diff --git a/src/Button/Button.test.jsx b/src/Button/Button.test.jsx
@@ -12,11 +12,9 @@ describe('<Button />', () => {
   let button;
 
   beforeEach(() => {
-    wrapper = mount(
-      <Button
-        {...defaultProps}
-      />,
-    );
+    wrapper = mount(<Button
+      {...defaultProps}
+    />);
 
     button = wrapper.find('button');
   });
@@ -26,7 +24,8 @@ describe('<Button />', () => {
   it('puts focus on button on click', () => {
     expect(button.matchesElement(document.activeElement)).toEqual(false);
     button.simulate('click');
-    expect(button.at(0).matchesElement(document.activeElement)).toEqual(true);
+    button = wrapper.find('button');
+    expect(button.at(0).html()).toEqual(document.activeElement.outerHTML);
   });
   it('calls onClick prop on click', () => {
     const onClickSpy = jest.fn();

diff --git a/src/CheckBox/CheckBox.test.jsx b/src/CheckBox/CheckBox.test.jsx
@@ -5,12 +5,7 @@ import CheckBox from './index';
 
 describe('<CheckBox />', () => {
   it('attributes are set correctly', () => {
-    const wrapper = mount(
-      <CheckBox
-        name="checkbox"
-        label="check me out!"
-      />,
-    );
+    const wrapper = mount(<CheckBox name="checkbox" label="check me out!" />);
 
     expect(wrapper.find('[name="checkbox"]').exists()).toEqual(true);
     expect(wrapper.find('[type="checkbox"]').exists()).toEqual(true);
@@ -19,12 +14,7 @@ describe('<CheckBox />', () => {
   });
 
   it('aria-label changes after click', () => {
-    const wrapper = mount(
-      <CheckBox
-        name="checkbox"
-        label="check me out!"
-      />,
-    );
+    const wrapper = mount(<CheckBox name="checkbox" label="check me out!" />);
 
     expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
 
@@ -39,13 +29,7 @@ describe('<CheckBox />', () => {
 
   it('check that callback function is triggered when clicked', () => {
     const spy = jest.fn();
-    const wrapper = mount(
-      <CheckBox
-        name="checkbox"
-        label="check me out!"
-        onChange={spy}
-      />,
-    );
+    const wrapper = mount(<CheckBox name="checkbox" label="check me out!"onChange={spy} />);
 
     expect(spy).toHaveBeenCalledTimes(0);
     // check
@@ -59,13 +43,7 @@ describe('<CheckBox />', () => {
   });
 
   it('checks if start state can be set to checked', () => {
-    const wrapper = mount(
-      <CheckBox
-        name="checkbox"
-        label="I start checked"
-        checked
-      />,
-    );
+    const wrapper = mount(<CheckBox name="checkbox" label="I start checked" checked />);
 
     expect(wrapper.find('[defaultChecked=true]').exists()).toEqual(true);
     expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true);
@@ -76,13 +54,7 @@ describe('<CheckBox />', () => {
   });
 
   it('checkbox can be disabled', () => {
-    const wrapper = mount(
-      <CheckBox
-        name="checkbox"
-        label="I am disabled"
-        disabled
-      />,
-    );
+    const wrapper = mount(<CheckBox name="checkbox" label="I am disabled" disabled />);
 
     expect(wrapper.props().disabled).toEqual(true);
 

diff --git a/src/Dropdown/Dropdown.test.jsx b/src/Dropdown/Dropdown.test.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 
 import Dropdown, { triggerKeys } from './index';
 
@@ -14,20 +14,16 @@ const props = {
 };
 
 const menuOpen = (isOpen, wrapper) => {
-  expect(wrapper.hasClass('show')).toEqual(isOpen);
-  expect(wrapper.find('[type="button"]').prop('aria-expanded')).toEqual(isOpen);
+  expect(wrapper.childAt(0).hasClass('show')).toEqual(isOpen);
+  expect(wrapper.find('Button').prop('aria-expanded')).toEqual(isOpen);
   expect(wrapper.find('[aria-hidden=false]').exists()).toEqual(isOpen);
 };
 
 describe('<Dropdown />', () => {
   describe('renders', () => {
-    const wrapper = shallow(
-      <Dropdown
-        {...props}
-      />,
-    );
+    const wrapper = shallow(<Dropdown {...props} />);
     const menu = wrapper.find('.dropdown-menu');
-    const button = wrapper.find('[type="button"]');
+    const button = wrapper.find('Button');
 
     it('with menu and toggle', () => {
       expect(button.exists()).toEqual(true);
@@ -45,21 +41,17 @@ describe('<Dropdown />', () => {
     let wrapper;
 
     beforeEach(() => {
-      wrapper = mount(
-        <Dropdown
-          {...props}
-        />,
-      );
+      wrapper = mount(<Dropdown {...props} />);
     });
 
     it('on toggle click', () => {
-      wrapper.find('[type="button"]').simulate('click');
+      wrapper.find('Button').simulate('click');
       menuOpen(true, wrapper);
     });
 
     triggerKeys.OPEN_MENU.forEach((key) => {
       it(`on ${key}`, () => {
-        wrapper.find('[type="button"]').simulate('keyDown', { key });
+        wrapper.find('Button').simulate('keyDown', { key });
         menuOpen(true, wrapper);
       });
     });
@@ -69,27 +61,24 @@ describe('<Dropdown />', () => {
     let wrapper;
 
     beforeEach(() => {
-      wrapper = mount(
-        <Dropdown
-          {...props}
-        />,
-      );
-      wrapper.find('[type="button"]').simulate('click');
+      wrapper = mount(<Dropdown {...props} />);
+      wrapper.find('Button').simulate('click');
     });
 
     it('on toggle click', () => {
-      wrapper.find('[type="button"]').simulate('click');
+      wrapper.find('Button').simulate('click');
       menuOpen(false, wrapper);
     });
 
     it('on document click', () => {
       document.querySelector('body').click();
+      wrapper.update();
       menuOpen(false, wrapper);
     });
 
     triggerKeys.CLOSE_MENU.forEach((key) => {
       it(`on button ${key}`, () => {
-        wrapper.find('[type="button"]').simulate('keyDown', { key });
+        wrapper.find('Button').simulate('keyDown', { key });
         menuOpen(false, wrapper);
       });
 
@@ -109,7 +98,7 @@ describe('<Dropdown />', () => {
       />,
       { attachTo: div },
     );
-    wrapper.find('[type="button"]').simulate('click');
+    wrapper.find('Button').simulate('click');
     document.querySelector('.dropdown-menu').click();
     menuOpen(true, wrapper);
   });
@@ -118,23 +107,19 @@ describe('<Dropdown />', () => {
     let wrapper;
 
     beforeEach(() => {
-      wrapper = mount(
-        <Dropdown
-          {...props}
-        />,
-      );
-      wrapper.find('[type="button"]').simulate('click');
+      wrapper = mount(<Dropdown {...props} />);
+      wrapper.find('Button').simulate('click');
     });
 
     it('first menu item on open', () => {
-      expect(wrapper.find('a').at(0).matchesElement(document.activeElement)).toEqual(true);
+      expect(wrapper.find('a').at(0).html()).toEqual(document.activeElement.outerHTML);
     });
 
     describe('forward in list', () => {
       triggerKeys.NAVIGATE_DOWN.forEach((key) => {
         it(`on ${key}`, () => {
           wrapper.find('a').at(0).simulate('keyDown', { key });
-          expect(wrapper.find('a').at(1).matchesElement(document.activeElement)).toEqual(true);
+          expect(wrapper.find('a').at(1).html()).toEqual(document.activeElement.outerHTML);
         });
       });
     });
@@ -144,50 +129,51 @@ describe('<Dropdown />', () => {
         it(`on ${key}`, () => {
           wrapper.find('a').at(0).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] });
           wrapper.find('a').at(1).simulate('keyDown', { key });
-          expect(wrapper.find('a').at(0).matchesElement(document.activeElement)).toEqual(true);
+          expect(wrapper.find('a').at(0).html()).toEqual(document.activeElement.outerHTML);
         });
       });
     });
 
     describe('invalid key in open menu', () => {
       it('test', () => {
         menuOpen(true, wrapper);
-        expect(wrapper.find('a').at(0).matchesElement(document.activeElement)).toEqual(true);
+        expect(wrapper.find('a').at(0).html()).toEqual(document.activeElement.outerHTML);
         wrapper.find('a').at(0).simulate('keyDown', { key: 'q' });
         menuOpen(true, wrapper);
-        expect(wrapper.find('a').at(0).matchesElement(document.activeElement)).toEqual(true);
+        expect(wrapper.find('a').at(0).html()).toEqual(document.activeElement.outerHTML);
       });
     });
 
     it('first menu item after looping through', () => {
       wrapper.find('a').at(0).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] });
       wrapper.find('a').at(1).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] });
       wrapper.find('a').at(2).simulate('keyDown', { key: triggerKeys.NAVIGATE_DOWN[0] });
-      expect(wrapper.find('a').at(0).matchesElement(document.activeElement)).toEqual(true);
+      expect(wrapper.find('a').at(0).html()).toEqual(document.activeElement.outerHTML);
     });
 
     describe('toggle', () => {
       it('toggle on close', () => {
         wrapper.find('a').at(0).simulate('keyDown', { key: triggerKeys.CLOSE_MENU[0] });
-        expect(wrapper.find('[type="button"]').matchesElement(document.activeElement)).toEqual(true);
+        wrapper.instance().forceUpdate();
+        expect(wrapper.find('Button').html()).toEqual(document.activeElement.outerHTML);
       });
 
       it('does not toggle with invalid key', () => {
-        wrapper = mount(
-          <Dropdown
-            {...props}
-          />,
-        );
+        wrapper = mount(<Dropdown {...props} />);
 
         menuOpen(false, wrapper);
         // open and close button to get focus on button
-        wrapper.find('[type="button"]').simulate('click');
-        wrapper.find('[type="button"]').simulate('click');
-        expect(wrapper.find('[type="button"]').matchesElement(document.activeElement)).toEqual(true);
+        wrapper.find('Button').prop('onClick');
+        wrapper.instance().forceUpdate();
+
+        wrapper.find('Button').prop('onClick');
+        wrapper.instance().forceUpdate();
+
+        expect(wrapper.find('Button').html()).toEqual(document.activeElement.outerHTML);
 
-        wrapper.find('[type="button"]').simulate('keyDown', { key: 'q' });
+        wrapper.find('Button').simulate('keyDown', { key: 'q' });
         menuOpen(false, wrapper);
-        expect(wrapper.find('[type="button"]').matchesElement(document.activeElement)).toEqual(true);
+        expect(wrapper.find('Button').html()).toEqual(document.activeElement.outerHTML);
       });
     });
   });

diff --git a/src/Hyperlink/Hyperlink.stories.jsx b/src/Hyperlink/Hyperlink.stories.jsx
@@ -19,22 +19,22 @@ const onClick = (event) => {
 storiesOf('HyperLink', module)
   .add('minimal usage', () => (
     <Hyperlink
-      destination={'https://en.wikipedia.org/wiki/Hyperlink'}
-      content={'edX.org'}
+      destination="https://en.wikipedia.org/wiki/Hyperlink"
+      content="edX.org"
     />
   ))
   .add('with blank target', () => (
     <Hyperlink
-      destination={'https://www.edx.org'}
-      content={'edX.org'}
-      target={'_blank'}
+      destination="https://www.edx.org"
+      content="edX.org"
+      target="_blank"
     />
   ))
   .add('with onClick', () => (
     <Hyperlink
-      destination={'https://www.edx.org'}
-      content={'edX.org'}
-      target={'_blank'}
+      destination="https://www.edx.org"
+      content="edX.org"
+      target="_blank"
       onClick={onClick}
     />
   ));