feat(client): upgrade React to version 16

BREAKING CHANGE: Upgrade React to version 16

closes #65

packages/client/package.json

@@ -23,7 +23,7 @@
     "lodash": "^4.0.0",
     "prop-types": "^15.5.8",
     "pubsweet-component-login": "^0.6.0",
-    "react": "^15.4.4",
+    "react": "^16.2.0",
     "react-css-themr": "^2.1.2",
     "react-redux": "^5.0.2",
     "react-router-dom": "^4.2.2",
@@ -39,13 +39,14 @@
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
-    "enzyme": "^2.9.1",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.1.1",
     "eventsourcemock": "^1.0.1",
     "isomorphic-form-data": "^1.0.0",
     "jest": "^22.1.4",
     "nock": "^9.0.14",
-    "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1",
+    "react-dom": "^16.2.0",
+    "react-test-renderer": "^16.2.0",
     "redux-mock-store": "^1.3.0"
   },
   "peerDependencies": {

packages/client/test/components/UpdateSubscriber.test.jsx

@@ -29,7 +29,7 @@ describe('<UpdateSubscriber/>', () => {
   it('is connected after open event', () => {
     const wrapper = makeWrapper()
     sources['/updates?access_token=tok'].emit('open')
-
+    wrapper.update()
     expect(wrapper.html()).toContain('color:green')
   })
 
@@ -37,6 +37,7 @@ describe('<UpdateSubscriber/>', () => {
     const wrapper = makeWrapper()
 
     sources['/updates?access_token=tok'].emit('open')
+    wrapper.update()
     expect(wrapper.html()).toContain('color:green')
 
     sources['/updates?access_token=tok'].readyState = 0
@@ -49,6 +50,7 @@ describe('<UpdateSubscriber/>', () => {
     const wrapper = makeWrapper()
 
     sources['/updates?access_token=tok'].emit('open')
+    wrapper.update()
     expect(wrapper.html()).toContain('color:green')
 
     sources['/updates?access_token=tok'].emit('close')
@@ -69,9 +71,7 @@ describe('<UpdateSubscriber/>', () => {
     })
   })
 
-  // TODO enable this test once PR is merged
-  // https://github.com/gcedo/eventsourcemock/pull/1
-  it.skip('unregisters listeners on unmount', () => {
+  it('unregisters listeners on unmount', () => {
     const handleUpdate = jest.fn()
     const wrapper = makeWrapper({ handleUpdate })
     wrapper.instance().componentWillUnmount()
@@ -91,6 +91,7 @@ describe('<UpdateSubscriber/>', () => {
 
     wrapper.setProps({ currentUser: {} }).update()
     sources['/updates?access_token=tok'].emit('open')
+    wrapper.update()
     expect(wrapper.html()).toContain('color:green')
   })
 

packages/client/test/helpers/Authorize.test.jsx

@@ -49,6 +49,7 @@ describe('<Authorize/>', () => {
 
     resolveMode(false)
     await modePromise
+    wrapper.update()
     expect(wrapper.type()).toBe('span')
   })
 
@@ -61,6 +62,7 @@ describe('<Authorize/>', () => {
     try {
       await modePromise
     } catch (err) {
+      wrapper.update()
       expect(wrapper.type()).toBe(null)
       expect(console.error).toHaveBeenCalled()
     }
@@ -73,7 +75,8 @@ describe('<Authorize/>', () => {
 
     resolveMode(true)
     await modePromise
-    expect(wrapper.type()).toBe('div')
+    wrapper.update()
+    expect(wrapper.find('div')).toHaveLength(1)
   })
 
   it('rechecks auth when props change', () => {
@@ -83,6 +86,7 @@ describe('<Authorize/>', () => {
     mode.mockClear()
 
     wrapper.setProps({ authsome, currentUser: { id: 'user2' } })
+    wrapper.update()
     expect(mode).toHaveBeenCalled()
   })
 })

packages/client/test/jest-setup.js

+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
 import path from 'path'
 
+Enzyme.configure({ adapter: new Adapter() })
+
 process.env.NODE_CONFIG_DIR = path.resolve(__dirname, '..', 'config')

packages/components/package.json

@@ -18,7 +18,7 @@
     "babel-preset-stage-2": "^6.24.1",
     "config": "^1.28.1",
     "css-loader": "^0.28.7",
-    "enzyme": "^2.9.1",
+    "enzyme": "^3.3.0",
     "express": "^4.15.4",
     "file-loader": "^0.11.2",
     "font-awesome": "^4.7.0",
@@ -31,11 +31,11 @@
     "pubsweet-client": "^1.1.4",
     "pubsweet-server": "^1.1.0",
     "pubsweet-theme-plugin": "^0.0.3",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-router-dom": "^4.2.2",
     "react-styleguidist": "^6.0.24",
-    "react-test-renderer": "^15.6.1",
+    "react-test-renderer": "^16.2.0",
     "redux": "^3.7.2",
     "redux-mock-store": "^1.3.0",
     "redux-thunk": "^2.2.0",

packages/components/packages/Blog/package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "prop-types": "^15.5.10",
     "pubsweet-component-manage": "^0.2.2",
-    "react-bootstrap": "^0.31.3",
+    "react-bootstrap": "^0.32.0",
     "react-redux": "^5.0.6",
     "react-router-bootstrap": "^0.24.4",
     "react-router-dom": "^4.2.2",

packages/components/packages/FormGroup/package.json

@@ -10,11 +10,11 @@
     "joi-browser": "^13.0.1",
     "prop-types": "^15.5.10",
     "pubsweet-server": "^1.1.0",
-    "react-bootstrap": "^0.31.3"
+    "react-bootstrap": "^0.32.0"
   },
   "peerDependencies": {
-    "pubsweet-client": ">=1.0.0-alpha.1",
-    "react": ">=15"
+    "pubsweet-client": ">=1.0.0",
+    "react": ">=16"
   },
   "repository": {
     "type": "git",

packages/components/packages/InkFrontend/package.json

@@ -21,8 +21,8 @@
   "dependencies": {
     "prop-types": "^15.5.10",
     "query-string": "^5.0.1",
-    "react-bootstrap": "^0.31.3",
-    "react-dropzone": "^3.7.3",
+    "react-bootstrap": "^0.32.0",
+    "react-dropzone": "^4.2.7",
     "react-redux": "^5.0.6",
     "redux": "^3.7.2"
   },

packages/components/packages/Login/package.json

@@ -7,7 +7,7 @@
   "license": "MIT",
   "dependencies": {
     "prop-types": "^15.5.10",
-    "react-bootstrap": "^0.31.3",
+    "react-bootstrap": "^0.32.0",
     "react-redux": "^5.0.6",
     "react-router-dom": "^4.2.2",
     "react-router-redux": "^4.0.8",

packages/components/packages/Navigation/package.json

@@ -7,7 +7,7 @@
   "license": "MIT",
   "dependencies": {
     "prop-types": "^15.5.10",
-    "react-bootstrap": "^0.31.3",
+    "react-bootstrap": "^0.32.0",
     "react-router-bootstrap": "^0.24.4",
     "react-router-dom": "^4.2.2"
   },

packages/components/packages/PasswordResetFrontend/package.json

@@ -8,7 +8,7 @@
   "dependencies": {
     "prop-types": "^15.5.10",
     "query-string": "^5.0.0",
-    "react-bootstrap": "^0.31.3",
+    "react-bootstrap": "^0.32.0",
     "react-router": "^4.2.0"
   },
   "peerDependencies": {

packages/components/packages/PostsManager/package.json

@@ -8,8 +8,8 @@
   "dependencies": {
     "prop-types": "^15.5.10",
     "pubsweet-component-form-group": "^0.1.10",
-    "react-bootstrap": "^0.31.3",
-    "react-dom": "^15.6.1",
+    "react-bootstrap": "^0.32.0",
+    "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",
     "react-router-bootstrap": "^0.24.4",
     "react-router-dom": "^4.2.2",

packages/components/packages/Signup/package.json

@@ -7,7 +7,7 @@
   "license": "MIT",
   "dependencies": {
     "prop-types": "^15.5.10",
-    "react-bootstrap": "^0.31.3",
+    "react-bootstrap": "^0.32.0",
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "redux": "^3.7.2"

packages/components/packages/TeamsManager/package.json

@@ -7,8 +7,8 @@
   "license": "MIT",
   "dependencies": {
     "prop-types": "^15.5.10",
-    "react-bootstrap": "^0.31.3",
-    "react-dom": "^15.6.1",
+    "react-bootstrap": "^0.32.0",
+    "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",
     "react-select": "^1.0.0-rc.10",
     "redux": "^3.7.2"

packages/components/packages/UsersManager/package.json

@@ -7,7 +7,7 @@
   "license": "MIT",
   "dependencies": {
     "prop-types": "^15.5.10",
-    "react-bootstrap": "^0.31.3",
+    "react-bootstrap": "^0.32.0",
     "react-redux": "^5.0.6",
     "redux": "^3.7.2"
   },

packages/components/test/jest-setup.js

+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
 import path from 'path'
 
+Enzyme.configure({ adapter: new Adapter() })
+
 process.env.NODE_CONFIG_DIR = path.resolve(__dirname, '..', 'config')

packages/styleguide/package.json

@@ -5,8 +5,8 @@
   "main": "src",
   "dependencies": {
     "@pubsweet/theme": "^0.1.3",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-redux": "^5.0.2",
     "react-router-dom": "^4.2.2",
     "recompose": "^0.26.0",

packages/ui/package.json

@@ -16,8 +16,8 @@
     "humps": "^2.0.1",
     "lodash": "^4.17.4",
     "prop-types": "^15.5.10",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-feather": "^1.0.7",
     "react-redux": "^5.0.2",
     "react-router-dom": "^4.2.2",
@@ -40,7 +40,7 @@
     "jest": "^22.1.4",
     "node-sass": "^4.5.3",
     "react-styleguidist": "^6.0.8",
-    "react-test-renderer": "^15.6.1",
+    "react-test-renderer": "^16.2.0",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.0",
     "webpack": "^3.8.1",

packages/ui/test/AlignmentBox.test.js

@@ -65,6 +65,6 @@ describe('AlignmentBox', () => {
   test('on click the corresponding method is triggered', () => {
     const newWrapper = shallow(<AlignmentBox {...props} />)
     newWrapper.simulate('click')
-    expect(newWrapper.instance().props.onClick).toHaveBeenCalled()
+    expect(newWrapper.props().onClick).toHaveBeenCalled()
   })
 })

packages/ui/test/StateItem.test.js

@@ -41,6 +41,6 @@ describe('StateItem', () => {
 
   test('update method should be triggered upon click', () => {
     wrapper.simulate('click')
-    expect(wrapper.instance().props.update).toHaveBeenCalled()
+    expect(props.update).toHaveBeenCalled()
   })
 })