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
2017-12-20 11:14:41 +01:00 · 2017-12-20 11:14:41 +01:00 · 28dd28187a
commit 28dd28187a
--- a/client/src/components/Explorer/ExplorerPanel.test.js
+++ b/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'),
      });
--- a/client/src/components/Explorer/snapshots/Explorer.test.js.snap
+++ b/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],
    }
  }
 />
--- a/client/src/components/Explorer/snapshots/ExplorerHeader.test.js.snap
+++ b/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}
 >
--- a/client/src/components/Explorer/snapshots/ExplorerPanel.test.js.snap
+++ b/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>
--- a/client/src/components/Explorer/snapshots/ExplorerToggle.test.js.snap
+++ b/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],
    }
  }
 >
--- a/client/src/components/Explorer/index.test.js
+++ b/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');
    });
  });
 });
--- a/client/src/utils/performance.js
+++ b/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,
 };
--- a/client/tests/adapter.js
+++ b/client/tests/adapter.js
@ -0,0 +1,6 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({
+  adapter: new Adapter(),
+});
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/wagtail/admin/static_src/wagtailadmin/scss/panels/rich-text.scss
+++ b/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%;
        }