Update React and related dependencies to latest versions

Updated snapshots due to the upgrade and failing ExplorerPanel test. This was due to the shallow call being made earlier than defining the document.body
Update to React 16
Update other dependencies
Stylelint updates
Remove unused imports
Update babel and gulp packages
Update package-lock

client/src/components/Explorer/ExplorerPanel.test.js

@@ -16,52 +16,58 @@ const mockProps = {
 };
 
 describe('ExplorerPanel', () => {
-  it('exists', () => {
-    expect(ExplorerPanel).toBeDefined();
-  });
+  describe('general rendering', () => {
+    beforeEach(() => {
+      document.body.innerHTML = '<div data-explorer-menu-item></div>';
+    });
 
-  it('renders', () => {
-    expect(shallow(<ExplorerPanel {...mockProps} />)).toMatchSnapshot();
-  });
+    it('exists', () => {
+      expect(ExplorerPanel).toBeDefined();
+    });
 
-  it('#isFetching', () => {
-    expect(shallow((
-      <ExplorerPanel
-        {...mockProps}
-        page={Object.assign({ isFetching: true }, mockProps.page)}
-      />
-    ))).toMatchSnapshot();
-  });
+    it('renders', () => {
+      expect(shallow(<ExplorerPanel {...mockProps} />)).toMatchSnapshot();
+    });
 
-  it('#isError', () => {
-    expect(shallow((
-      <ExplorerPanel
-        {...mockProps}
-        page={Object.assign({ isError: true }, mockProps.page)}
-      />
-    ))).toMatchSnapshot();
-  });
+    it('#isFetching', () => {
+      expect(shallow((
+        <ExplorerPanel
+          {...mockProps}
+          page={Object.assign({ isFetching: true }, mockProps.page)}
+        />
+      ))).toMatchSnapshot();
+    });
 
-  it('no children', () => {
-    expect(shallow((
-      <ExplorerPanel
-        {...mockProps}
-        page={{ children: {} }}
-      />
-    ))).toMatchSnapshot();
-  });
+    it('#isError', () => {
+      expect(shallow((
+        <ExplorerPanel
+          {...mockProps}
+          page={Object.assign({ isError: true }, mockProps.page)}
+        />
+      ))).toMatchSnapshot();
+    });
 
-  it('#items', () => {
-    expect(shallow((
-      <ExplorerPanel
-        {...mockProps}
-        page={{ children: { items: [1, 2] } }}
-        nodes={{
-          1: { id: 1, admin_display_title: 'Test', meta: { status: {}, type: 'test' } },
-          2: { id: 2, admin_display_title: 'Foo', meta: { status: {}, type: 'foo' } },
-        }}
-      />
-    ))).toMatchSnapshot();
+    it('no children', () => {
+      expect(shallow((
+        <ExplorerPanel
+          {...mockProps}
+          page={{ children: {} }}
+        />
+      ))).toMatchSnapshot();
+    });
+
+    it('#items', () => {
+      expect(shallow((
+        <ExplorerPanel
+          {...mockProps}
+          page={{ children: { items: [1, 2] } }}
+          nodes={{
+            1: { id: 1, admin_display_title: 'Test', meta: { status: {}, type: 'test' } },
+            2: { id: 2, admin_display_title: 'Foo', meta: { status: {}, type: 'foo' } },
+          }}
+        />
+      ))).toMatchSnapshot();
+    });
   });
 
   describe('onHeaderClick', () => {
@@ -115,22 +121,19 @@ describe('ExplorerPanel', () => {
   });
 
   describe('hooks', () => {
-    let wrapper;
-
-    beforeEach(() => {
-      wrapper = shallow(<ExplorerPanel {...mockProps} />);
-    });
-
     it('componentWillReceiveProps push', () => {
+      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
       expect(wrapper.setProps({ path: [1] }).state('transition')).toBe('push');
     });
 
     it('componentWillReceiveProps pop', () => {
+      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
       expect(wrapper.setProps({ path: [] }).state('transition')).toBe('pop');
     });
 
     it('componentDidMount', () => {
       document.body.innerHTML = '<div data-explorer-menu-item></div>';
+      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
       wrapper.instance().componentDidMount();
       expect(document.querySelector('[data-explorer-menu-item]').classList.contains('submenu-active')).toBe(true);
       expect(document.body.classList.contains('explorer-open')).toBe(true);
@@ -138,6 +141,7 @@ describe('ExplorerPanel', () => {
 
     it('componentWillUnmount', () => {
       document.body.innerHTML = '<div class="submenu-active" data-explorer-menu-item></div>';
+      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
       wrapper.instance().componentWillUnmount();
       expect(document.querySelector('[data-explorer-menu-item]').classList.contains('submenu-active')).toBe(false);
       expect(document.body.classList.contains('explorer-open')).toBe(false);
@@ -145,18 +149,13 @@ describe('ExplorerPanel', () => {
   });
 
   describe('clickOutside', () => {
-    let wrapper;
-
-    beforeEach(() => {
-      wrapper = shallow(<ExplorerPanel {...mockProps} />);
-    });
-
     afterEach(() => {
       mockProps.onClose.mockReset();
     });
 
     it('triggers onClose when click is outside', () => {
       document.body.innerHTML = '<div data-explorer-menu-item></div><div data-explorer-menu></div><div id="t"></div>';
+      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
       wrapper.instance().clickOutside({
         target: document.querySelector('#t'),
       });
@@ -165,6 +164,7 @@ describe('ExplorerPanel', () => {
 
     it('does not trigger onClose when click is inside', () => {
       document.body.innerHTML = '<div data-explorer-menu-item></div><div data-explorer-menu><div id="t"></div></div>';
+      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
       wrapper.instance().clickOutside({
         target: document.querySelector('#t'),
       });
@@ -173,6 +173,7 @@ describe('ExplorerPanel', () => {
 
     it('pauses focus trap inside toggle', () => {
       document.body.innerHTML = '<div data-explorer-menu-item><div id="t"></div></div><div data-explorer-menu></div>';
+      const wrapper = shallow(<ExplorerPanel {...mockProps} />);
       wrapper.instance().clickOutside({
         target: document.querySelector('#t'),
       });

client/src/components/Explorer/__snapshots__/Explorer.test.js.snap

@@ -14,12 +14,16 @@ exports[`Explorer renders 1`] = `
       "getState": [Function],
       "replaceReducer": [Function],
       "subscribe": [Function],
+      Symbol(observable): [Function],
     }
   }
   storeSubscription={
     Subscription {
       "listeners": Object {
+        "clear": [Function],
+        "get": [Function],
         "notify": [Function],
+        "subscribe": [Function],
       },
       "onStateChange": [Function],
       "parentSub": undefined,
@@ -30,7 +34,7 @@ exports[`Explorer renders 1`] = `
         "subscribe": [Function],
         Symbol(observable): [Function],
       },
-      "unsubscribe": null,
+      "unsubscribe": [Function],
     }
   }
 />
@@ -70,12 +74,16 @@ exports[`Explorer visible 1`] = `
       "getState": [Function],
       "replaceReducer": [Function],
       "subscribe": [Function],
+      Symbol(observable): [Function],
     }
   }
   storeSubscription={
     Subscription {
       "listeners": Object {
+        "clear": [Function],
+        "get": [Function],
         "notify": [Function],
+        "subscribe": [Function],
       },
       "onStateChange": [Function],
       "parentSub": undefined,
@@ -86,7 +94,7 @@ exports[`Explorer visible 1`] = `
         "subscribe": [Function],
         Symbol(observable): [Function],
       },
-      "unsubscribe": null,
+      "unsubscribe": [Function],
     }
   }
 />

client/src/components/Explorer/__snapshots__/ExplorerHeader.test.js.snap

@@ -7,7 +7,7 @@ exports[`ExplorerHeader #depth at root 1`] = `
   href="/admin/pages/"
   icon=""
   isLoading={false}
-  onClick={[Function]}
+  onClick={[MockFunction]}
   preventDefault={true}
   target={null}
 >
@@ -33,7 +33,7 @@ exports[`ExplorerHeader #page 1`] = `
   href="/admin/pages/a/"
   icon=""
   isLoading={false}
-  onClick={[Function]}
+  onClick={[MockFunction]}
   preventDefault={true}
   target={null}
 >
@@ -59,7 +59,7 @@ exports[`ExplorerHeader basic 1`] = `
   href="/admin/pages/"
   icon=""
   isLoading={false}
-  onClick={[Function]}
+  onClick={[MockFunction]}
   preventDefault={true}
   target={null}
 >

client/src/components/Explorer/__snapshots__/ExplorerPanel.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ExplorerPanel #isError 1`] = `
+exports[`ExplorerPanel general rendering #isError 1`] = `
 <FocusTrap
   _createFocusTrap={[Function]}
   active={true}
@@ -8,7 +8,7 @@ exports[`ExplorerPanel #isError 1`] = `
   focusTrapOptions={
     Object {
       "initialFocus": ".c-explorer__close",
-      "onDeactivate": [Function],
+      "onDeactivate": [MockFunction],
     }
   }
   paused={false}
@@ -20,7 +20,7 @@ exports[`ExplorerPanel #isError 1`] = `
     href="#"
     icon=""
     isLoading={false}
-    onClick={[Function]}
+    onClick={[MockFunction]}
     preventDefault={true}
     target={null}
   >
@@ -34,6 +34,7 @@ exports[`ExplorerPanel #isError 1`] = `
   >
     <div
       className="c-transition-group"
+      key="0"
     >
       <ExplorerHeader
         depth={0}
@@ -50,9 +51,12 @@ exports[`ExplorerPanel #isError 1`] = `
       <div
         className="c-explorer__drawer"
       >
-        <div />
+        <div
+          key="children"
+        />
         <div
           className="c-explorer__placeholder"
+          key="error"
         >
           Server Error
         </div>
@@ -72,7 +76,7 @@ exports[`ExplorerPanel #isError 1`] = `
 </FocusTrap>
 `;
 
-exports[`ExplorerPanel #isFetching 1`] = `
+exports[`ExplorerPanel general rendering #isFetching 1`] = `
 <FocusTrap
   _createFocusTrap={[Function]}
   active={true}
@@ -80,7 +84,7 @@ exports[`ExplorerPanel #isFetching 1`] = `
   focusTrapOptions={
     Object {
       "initialFocus": ".c-explorer__close",
-      "onDeactivate": [Function],
+      "onDeactivate": [MockFunction],
     }
   }
   paused={true}
@@ -92,7 +96,7 @@ exports[`ExplorerPanel #isFetching 1`] = `
     href="#"
     icon=""
     isLoading={false}
-    onClick={[Function]}
+    onClick={[MockFunction]}
     preventDefault={true}
     target={null}
   >
@@ -106,6 +110,7 @@ exports[`ExplorerPanel #isFetching 1`] = `
   >
     <div
       className="c-transition-group"
+      key="0"
     >
       <ExplorerHeader
         depth={0}
@@ -122,9 +127,12 @@ exports[`ExplorerPanel #isFetching 1`] = `
       <div
         className="c-explorer__drawer"
       >
-        <div />
+        <div
+          key="children"
+        />
         <div
           className="c-explorer__placeholder"
+          key="fetching"
         >
           <LoadingSpinner />
         </div>
@@ -134,7 +142,7 @@ exports[`ExplorerPanel #isFetching 1`] = `
 </FocusTrap>
 `;
 
-exports[`ExplorerPanel #items 1`] = `
+exports[`ExplorerPanel general rendering #items 1`] = `
 <FocusTrap
   _createFocusTrap={[Function]}
   active={true}
@@ -142,7 +150,7 @@ exports[`ExplorerPanel #items 1`] = `
   focusTrapOptions={
     Object {
       "initialFocus": ".c-explorer__close",
-      "onDeactivate": [Function],
+      "onDeactivate": [MockFunction],
     }
   }
   paused={false}
@@ -154,7 +162,7 @@ exports[`ExplorerPanel #items 1`] = `
     href="#"
     icon=""
     isLoading={false}
-    onClick={[Function]}
+    onClick={[MockFunction]}
     preventDefault={true}
     target={null}
   >
@@ -168,6 +176,7 @@ exports[`ExplorerPanel #items 1`] = `
   >
     <div
       className="c-transition-group"
+      key="0"
     >
       <ExplorerHeader
         depth={0}
@@ -186,7 +195,9 @@ exports[`ExplorerPanel #items 1`] = `
       <div
         className="c-explorer__drawer"
       >
-        <div>
+        <div
+          key="children"
+        >
           <ExplorerItem
             item={
               Object {
@@ -198,6 +209,7 @@ exports[`ExplorerPanel #items 1`] = `
                 },
               }
             }
+            key="1"
             onClick={[Function]}
           />
           <ExplorerItem
@@ -211,6 +223,7 @@ exports[`ExplorerPanel #items 1`] = `
                 },
               }
             }
+            key="2"
             onClick={[Function]}
           />
         </div>
@@ -220,7 +233,7 @@ exports[`ExplorerPanel #items 1`] = `
 </FocusTrap>
 `;
 
-exports[`ExplorerPanel no children 1`] = `
+exports[`ExplorerPanel general rendering no children 1`] = `
 <FocusTrap
   _createFocusTrap={[Function]}
   active={true}
@@ -228,7 +241,7 @@ exports[`ExplorerPanel no children 1`] = `
   focusTrapOptions={
     Object {
       "initialFocus": ".c-explorer__close",
-      "onDeactivate": [Function],
+      "onDeactivate": [MockFunction],
     }
   }
   paused={false}
@@ -240,7 +253,7 @@ exports[`ExplorerPanel no children 1`] = `
     href="#"
     icon=""
     isLoading={false}
-    onClick={[Function]}
+    onClick={[MockFunction]}
     preventDefault={true}
     target={null}
   >
@@ -254,6 +267,7 @@ exports[`ExplorerPanel no children 1`] = `
   >
     <div
       className="c-transition-group"
+      key="0"
     >
       <ExplorerHeader
         depth={0}
@@ -269,6 +283,7 @@ exports[`ExplorerPanel no children 1`] = `
       >
         <div
           className="c-explorer__placeholder"
+          key="empty"
         >
           No results
         </div>
@@ -278,7 +293,7 @@ exports[`ExplorerPanel no children 1`] = `
 </FocusTrap>
 `;
 
-exports[`ExplorerPanel renders 1`] = `
+exports[`ExplorerPanel general rendering renders 1`] = `
 <FocusTrap
   _createFocusTrap={[Function]}
   active={true}
@@ -286,7 +301,7 @@ exports[`ExplorerPanel renders 1`] = `
   focusTrapOptions={
     Object {
       "initialFocus": ".c-explorer__close",
-      "onDeactivate": [Function],
+      "onDeactivate": [MockFunction],
     }
   }
   paused={false}
@@ -298,7 +313,7 @@ exports[`ExplorerPanel renders 1`] = `
     href="#"
     icon=""
     isLoading={false}
-    onClick={[Function]}
+    onClick={[MockFunction]}
     preventDefault={true}
     target={null}
   >
@@ -312,6 +327,7 @@ exports[`ExplorerPanel renders 1`] = `
   >
     <div
       className="c-transition-group"
+      key="0"
     >
       <ExplorerHeader
         depth={0}
@@ -327,7 +343,9 @@ exports[`ExplorerPanel renders 1`] = `
       <div
         className="c-explorer__drawer"
       >
-        <div />
+        <div
+          key="children"
+        />
       </div>
     </div>
   </Transition>

client/src/components/Explorer/__snapshots__/ExplorerToggle.test.js.snap

@@ -6,7 +6,10 @@ exports[`ExplorerToggle basic 1`] = `
   storeSubscription={
     Subscription {
       "listeners": Object {
+        "clear": [Function],
+        "get": [Function],
         "notify": [Function],
+        "subscribe": [Function],
       },
       "onStateChange": [Function],
       "parentSub": undefined,
@@ -18,7 +21,7 @@ exports[`ExplorerToggle basic 1`] = `
         "replaceReducer": [Function],
         "subscribe": [Function],
       },
-      "unsubscribe": null,
+      "unsubscribe": [Function],
     }
   }
 >

client/src/components/Explorer/index.test.js

@@ -22,7 +22,7 @@ describe('Explorer index', () => {
       const toggleNode = document.querySelector('#t');
 
       initExplorer(explorerNode, toggleNode);
-      expect(document.body.innerHTML).toContain('data-reactroot');
+      expect(document.body.innerHTML).toContain('href');
     });
   });
 });

client/src/utils/performance.js

@@ -1,5 +1,3 @@
-import React, { Component } from 'react';
-
 /* eslint-disable import/no-mutable-exports */
 let perfMiddleware;
 
@@ -30,57 +28,6 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 
-let perfComponent;
-
-if (process.env.NODE_ENV !== 'production') {
-  /**
-   * Wraps the passed in `Component` in a higher-order component. It can then
-   * measure the performance of every render of the `Component`.
-   *
-   * Can also be used as an ES2016 decorator.
-   * @param  {ReactComponent} Component the component to wrap
-   * @return {ReactComponent}           the wrapped component
-   * See https://github.com/sheepsteak/react-perf-component
-   */
-  perfComponent = (Target) => {
-    if (process.env.NODE_ENV === 'production') {
-      return Target;
-    }
-
-    // eslint-disable-next-line global-require
-    const ReactPerf = require('react-addons-perf');
-
-    class Perf extends Component {
-      componentDidMount() {
-        ReactPerf.start();
-      }
-
-      componentDidUpdate() {
-        ReactPerf.stop();
-
-        const measurements = ReactPerf.getLastMeasurements();
-
-        ReactPerf.printWasted(measurements);
-        ReactPerf.start();
-      }
-
-      componentWillUnmount() {
-        ReactPerf.stop();
-      }
-
-      render() {
-        return <Target {...this.props} />;
-      }
-    }
-
-    Perf.displayName = `perf(${Target.displayName || Target.name || 'Component'})`;
-    Perf.WrappedComponent = Target;
-
-    return Perf;
-  };
-}
-
 export {
   perfMiddleware,
-  perfComponent,
 };

client/tests/adapter.js

@@ -0,0 +1,6 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({
+  adapter: new Adapter(),
+});

package.json

@@ -27,6 +27,7 @@
   },
   "jest": {
     "setupFiles": [
+      "./client/tests/adapter.js",
       "./client/tests/stubs.js",
       "./client/tests/mock-fetch.js"
     ],
@@ -35,14 +36,15 @@
     ]
   },
   "devDependencies": {
-    "babel-core": "^6.24.1",
-    "babel-jest": "^20.0.3",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-lodash": "^3.2.11",
+    "babel-core": "^6.26.0",
+    "babel-jest": "^22.0.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-lodash": "^3.3.2",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
-    "enzyme": "^2.8.2",
-    "enzyme-to-json": "^1.5.1",
+    "enzyme": "^3.2.0",
+    "enzyme-adapter-react-16": "^1.1.1",
+    "enzyme-to-json": "^3.3.0",
     "eslint": "^2.9.0",
     "eslint-config-wagtail": "0.1.1",
     "eslint-import-resolver-webpack": "^0.8.1",
@@ -50,36 +52,35 @@
     "eslint-plugin-jsx-a11y": "^1.5.3",
     "eslint-plugin-react": "^5.2.2",
     "gulp": "^3.9.1",
-    "gulp-autoprefixer": "~3.0.2",
+    "gulp-autoprefixer": "~4.0.0",
     "gulp-cssnano": "^2.1.2",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
     "gulp-size": "^2.1.0",
-    "gulp-sourcemaps": "~1.5.2",
-    "gulp-util": "~2.2.14",
-    "jest": "^20.0.4",
+    "gulp-sourcemaps": "~2.6.1",
+    "gulp-util": "~3.0.8",
+    "jest": "^22.0.3",
     "mustache": "^2.2.1",
-    "npm-run-all": "^4.1.1",
-    "react-addons-perf": "^15.4.2",
-    "react-test-renderer": "^15.6.2",
-    "redux-mock-store": "^1.2.2",
-    "stylelint": "^8.0.0",
-    "stylelint-scss": "^2.0.1",
-    "webpack": "^2.6.1"
+    "npm-run-all": "^4.1.2",
+    "react-test-renderer": "^16.2.0",
+    "redux-mock-store": "^1.3.0",
+    "stylelint": "^8.4.0",
+    "stylelint-scss": "^2.2.0",
+    "webpack": "^3.10.0"
   },
   "dependencies": {
-    "focus-trap-react": "^3.0.3",
+    "focus-trap-react": "^3.1.0",
     "lodash": "^4.17.4",
     "object-assign": "^4.1.1",
-    "promise": "^7.1.1",
-    "prop-types": "^15.5.10",
-    "react": "^15.6.2",
-    "react-dom": "^15.6.2",
-    "react-redux": "^5.0.5",
+    "promise": "^8.0.1",
+    "prop-types": "^15.6.0",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "react-redux": "^5.0.6",
     "react-transition-group": "^1.1.3",
-    "redux": "^3.6.0",
+    "redux": "^3.7.2",
     "redux-thunk": "^2.2.0",
-    "whatwg-fetch": "^2.0.2"
+    "whatwg-fetch": "^2.0.3"
   },
   "scripts": {
     "postinstall": "npm --prefix client install",

wagtail/admin/static_src/wagtailadmin/scss/panels/rich-text.scss

@@ -155,6 +155,7 @@
     // images render within the rich text area in the same styles that would appear on the front-end.
     .richtext-image {
         margin-top: 3px; // close as possible to match line-height space above p
+
         img {
             width: 100%;
         }