You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@couchdb.apache.org by GitBox <gi...@apache.org> on 2018/01/15 06:59:42 UTC

[GitHub] garrensmith closed pull request #1044: Upgrade to React 16

garrensmith closed pull request #1044: Upgrade to React 16
URL: https://github.com/apache/couchdb-fauxton/pull/1044
 
 
   

This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:

As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):

diff --git a/app/addons/components/components/menudropdown.js b/app/addons/components/components/menudropdown.js
index d10f014c1..a67e24060 100644
--- a/app/addons/components/components/menudropdown.js
+++ b/app/addons/components/components/menudropdown.js
@@ -41,13 +41,13 @@ export class MenuDropDown extends React.Component {
     );
   };
 
-  createSectionTitle = (title) => {
+  createSectionTitle = (title, key) => {
     if (!title) {
       return null;
     }
 
     return (
-      <li className="header-label">{title}</li>
+      <li key={key} className="header-label">{title}</li>
     );
   };
 
@@ -55,7 +55,7 @@ export class MenuDropDown extends React.Component {
     return this.props.links.map((linkSection, key) => {
       if (linkSection.title && linkSection.links) {
         return ([
-          this.createSectionTitle(linkSection.title),
+          this.createSectionTitle(linkSection.title, 'title_' + key),
           this.createSectionLinks(linkSection.links)
         ]);
       }
diff --git a/app/addons/components/components/tray.js b/app/addons/components/components/tray.js
index c885c2514..3a85365ab 100644
--- a/app/addons/components/components/tray.js
+++ b/app/addons/components/components/tray.js
@@ -25,13 +25,17 @@ export class TrayContents extends React.Component {
     container: PropTypes.object
   };
 
-  defaultProps = () => {
-    return {
-      onEnter: () => {},
-      container: this
-    };
+  static defaultProps = {
+    onEnter: () => {}
   };
 
+  constructor (props) {
+    super(props);
+    if (!props.container) {
+      this.container = this;
+    }
+  }
+
   getChildren = (items) => {
     const {style} = items[0];
     var className = "tray show-tray " + this.props.className;
diff --git a/app/addons/components/header-breadcrumbs.js b/app/addons/components/header-breadcrumbs.js
index e3ef11f76..898b99798 100644
--- a/app/addons/components/header-breadcrumbs.js
+++ b/app/addons/components/header-breadcrumbs.js
@@ -60,7 +60,7 @@ function getChildren (crumbs) {
     }
 
     if (i < amountDividers) {
-      res.push(<Divider />);
+      res.push(<Divider key={'divider_' + i}/>);
     }
 
     return res;
diff --git a/app/addons/config/__tests__/components.test.js b/app/addons/config/__tests__/components.test.js
index ee4aba3bb..bd4c515e4 100644
--- a/app/addons/config/__tests__/components.test.js
+++ b/app/addons/config/__tests__/components.test.js
@@ -79,7 +79,7 @@ describe('Config Components', () => {
         header: true
       };
 
-      const el = mount(<Views.ConfigOption option={option}/>);
+      const el = mount(<table><tbody><Views.ConfigOption option={option}/></tbody></table>);
       assert.equal(el.find('th').text(), 'test_section');
     });
   });
@@ -87,7 +87,9 @@ describe('Config Components', () => {
   describe('ConfigOptionValue', () => {
     it('displays the value prop', () => {
       const el = mount(
-        <Views.ConfigOptionValue value={'test_value'}/>
+        <table><tbody><tr>
+          <Views.ConfigOptionValue value={'test_value'}/>
+        </tr></tbody></table>
       );
 
       assert.equal(el.text(), 'test_value');
@@ -96,16 +98,20 @@ describe('Config Components', () => {
     it('starts editing when clicked', () => {
       const spy = sinon.spy();
       const el = mount(
-        <Views.ConfigOptionValue value={'test_value'} onEdit={spy}/>
+        <table><tbody><tr>
+          <Views.ConfigOptionValue value={'test_value'} onEdit={spy}/>
+        </tr></tbody></table>
       );
 
-      el.simulate('click');
+      el.find(Views.ConfigOptionValue).simulate('click');
       assert.ok(spy.calledOnce);
     });
 
     it('displays editing controls if editing', () => {
       const el = mount(
-        <Views.ConfigOptionValue value={'test_value'} editing/>
+        <table><tbody><tr>
+          <Views.ConfigOptionValue value={'test_value'} editing/>
+        </tr></tbody></table>
       );
 
       assert.equal(el.find('input.config-value-input').length, 1);
@@ -115,7 +121,9 @@ describe('Config Components', () => {
 
     it('disables input when save clicked', () => {
       const el = mount(
-        <Views.ConfigOptionValue value={'test_value'} editing/>
+        <table><tbody><tr>
+          <Views.ConfigOptionValue value={'test_value'} editing/>
+        </tr></tbody></table>
       );
 
       el.find('input.config-value-input').simulate('change', {target: {value: 'value'}});
@@ -127,7 +135,9 @@ describe('Config Components', () => {
       var change = { target: { value: 'new_value' } };
       const spy = sinon.spy();
       const el = mount(
-        <Views.ConfigOptionValue value={'test_value'} editing onSave={spy}/>
+        <table><tbody><tr>
+          <Views.ConfigOptionValue value={'test_value'} editing onSave={spy}/>
+        </tr></tbody></table>
       );
 
       el.find('input.config-value-input').simulate('change', change);
@@ -138,7 +148,9 @@ describe('Config Components', () => {
     it('cancels edit if save clicked with unchanged value', () => {
       const spy = sinon.spy();
       const el = mount(
-        <Views.ConfigOptionValue value={'test_value'} editing onCancelEdit={spy}/>
+        <table><tbody><tr>
+          <Views.ConfigOptionValue value={'test_value'} editing onCancelEdit={spy}/>
+        </tr></tbody></table>
       );
 
       el.find('button.btn-config-save').simulate('click');
diff --git a/app/addons/cors/__tests__/components.test.js b/app/addons/cors/__tests__/components.test.js
index 7575e55a3..a4d2bd8d5 100644
--- a/app/addons/cors/__tests__/components.test.js
+++ b/app/addons/cors/__tests__/components.test.js
@@ -158,7 +158,7 @@ describe('CORS Components', () => {
     const spyChangeOrigin = sinon.spy();
 
     afterEach(() => {
-      spyChangeOrigin.reset();
+      spyChangeOrigin.resetHistory();
     });
 
     it('calls changeOrigin() when you switch from "Select List of Origins" to "Allow All Origins"', () => {
@@ -186,8 +186,8 @@ describe('CORS Components', () => {
     });
 
     afterEach(() => {
-      spyUpdateOrigin.reset();
-      spyDeleteOrigin.reset();
+      spyUpdateOrigin.resetHistory();
+      spyDeleteOrigin.resetHistory();
     });
 
     it('should call deleteOrigin on delete', () => {
diff --git a/app/addons/databases/__tests__/components.test.js b/app/addons/databases/__tests__/components.test.js
index fa3954711..1c0bc5bd7 100644
--- a/app/addons/databases/__tests__/components.test.js
+++ b/app/addons/databases/__tests__/components.test.js
@@ -17,6 +17,7 @@ import utils from "../../../../test/mocha/testUtils";
 import React from "react";
 import ReactDOM from "react-dom";
 import { mount } from 'enzyme';
+import sinon from 'sinon';
 
 const assert = utils.assert;
 
@@ -96,6 +97,12 @@ describe('DatabaseTable', () => {
       failedDbs: ['db1'],
       fullDbList: ['db1']
     });
+    // To avoid console.error() in app/core/api.js
+    sinon.stub(FauxtonAPI, 'urls').returns('/fake/url');
+  });
+
+  afterEach(() => {
+    utils.restore(FauxtonAPI.urls);
   });
 
   it('adds multiple extra columns if extended', () => {
diff --git a/app/addons/documents/__tests__/index-results.test.js b/app/addons/documents/__tests__/index-results.test.js
index e62c5dae7..7bd7ee678 100644
--- a/app/addons/documents/__tests__/index-results.test.js
+++ b/app/addons/documents/__tests__/index-results.test.js
@@ -30,7 +30,7 @@ describe('IndexResults', () => {
 
     expect(spy.calledOnce).toBe(true);
 
-    spy.reset();
+    spy.resetHistory();
     const wrapperDontFetch = shallow(<IndexResults
       fetchParams={{}}
       selectedDocs={[]}
diff --git a/app/addons/documents/changes/components.js b/app/addons/documents/changes/components.js
index 9a9c86cfe..3c5d1c961 100644
--- a/app/addons/documents/changes/components.js
+++ b/app/addons/documents/changes/components.js
@@ -208,7 +208,7 @@ class AddFilterForm extends React.Component {
     );
   }
 }
-AddFilterForm.PropTypes = {
+AddFilterForm.propTypes = {
   addFilter: PropTypes.func.isRequired,
   hasFilter: PropTypes.func.isRequired,
   tooltips: PropTypes.string
@@ -309,7 +309,7 @@ class ChangeRow extends React.Component {
   }
 }
 
-ChangeRow.PropTypes = {
+ChangeRow.propTypes = {
   change: PropTypes.object,
   databaseName: PropTypes.string.isRequired
 };
diff --git a/app/addons/documents/sidebar/__tests__/sidebar.components.test.js b/app/addons/documents/sidebar/__tests__/sidebar.components.test.js
index ad17a2d44..75733cbab 100644
--- a/app/addons/documents/sidebar/__tests__/sidebar.components.test.js
+++ b/app/addons/documents/sidebar/__tests__/sidebar.components.test.js
@@ -96,6 +96,7 @@ describe('DesignDoc', () => {
   });
 
   it('confirm design doc sidebar extensions appear', function () {
+    sinon.stub(FauxtonAPI, 'urls');
     const el = mount(<DesignDoc
       database={database}
       toggle={function () {}}
@@ -120,6 +121,7 @@ describe('DesignDoc', () => {
   });
 
   it('confirm design doc sidebar extensions do not appear when they have no content', function () {
+    sinon.stub(FauxtonAPI, 'urls');
     const el = mount(<DesignDoc
       database={database}
       toggle={function () {}}
diff --git a/jest-config.json b/jest-config.json
index b1ea6614d..aee9d4f46 100644
--- a/jest-config.json
+++ b/jest-config.json
@@ -2,6 +2,7 @@
   "testPathDirs": ["app"],
   "testPathIgnorePatterns": ["/node_modules/", "stub", "fakeActiveTaskResponse", "fixtures"],
 
+  "setupFiles": ["./jest-shim.js"],
   "setupTestFrameworkScriptFile": "./jest-setup.js",
 
   "moduleNameMapper": {
diff --git a/jest-setup.js b/jest-setup.js
index 60bd5a044..870b7f8e5 100644
--- a/jest-setup.js
+++ b/jest-setup.js
@@ -41,5 +41,5 @@ Object.defineProperty(window.location, 'origin', {
 
 // Setup enzyme's react adapter
 const Enzyme = require('enzyme');
-const EnzymeAdapter = require('enzyme-adapter-react-15');
+const EnzymeAdapter = require('enzyme-adapter-react-16');
 Enzyme.configure({ adapter: new EnzymeAdapter() });
diff --git a/jest-shim.js b/jest-shim.js
new file mode 100644
index 000000000..cb42fc681
--- /dev/null
+++ b/jest-shim.js
@@ -0,0 +1,8 @@
+// This file is imported by Jest to avoid a React Warning:
+//     Warning: React depends on requestAnimationFrame. Make sure that you load a
+//     polyfill in older browsers. http://fb.me/react-polyfills
+// See https://github.com/facebook/jest/issues/4545#issuecomment-332762365 for details
+
+global.requestAnimationFrame = (callback) => {
+  setTimeout(callback, 0);
+};
diff --git a/package.json b/package.json
index 4bb3ccefa..13da0e8b5 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "babel-jest": "^18.0.0",
     "bootstrap": "^3.3.7",
     "enzyme": "^3.2.0",
-    "enzyme-adapter-react-15": "^1.0.5",
+    "enzyme-adapter-react-16": "^1.1.0",
     "es5-shim": "4.5.4",
     "fetch-mock": "^5.9.3",
     "jest": "^18.1.0",
@@ -27,7 +27,6 @@
     "less-loader": "^4.0.3",
     "mock-local-storage": "^1.0.4",
     "nightwatch": "~0.9.0",
-    "react-addons-test-utils": "~15.4.2",
     "redux-devtools": "^3.3.1",
     "redux-mock-store": "^1.2.1",
     "sinon": "^4.1.3"
@@ -90,15 +89,15 @@
     "pouchdb-adapter-http": "^6.1.2",
     "pouchdb-core": "^6.1.2",
     "prop-types": "^15.6.0",
-    "react": "~15.6.2",
+    "react": "~16.2.0",
     "react-bootstrap": "^0.31.3",
-    "react-dom": "~15.6.2",
+    "react-dom": "~16.2.0",
     "react-motion": "^0.5.0",
     "react-overlays": "^0.7.0",
     "react-range": "0.0.7",
     "react-redux": "^5.0.0",
-    "react-select": "1.0.0-rc.2",
-    "react-test-renderer": "^15.6.2",
+    "react-select": "^1.2.0",
+    "react-test-renderer": "~16.2.0",
     "redux": "^3.6.0",
     "redux-thunk": "^2.1.0",
     "request": "^2.54.0",


 

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services