chore(package): update to react 16 (#2131)

* chore(package): update to react 16 * test(Responsive): fix broken test * test(Transition): fix broken tests * chore(config): fix definition of process.env * chore(package): update chai-enzyme and enzyme * chore(package): temporialy disable satisfied * docs(react): use prop-types, update CDN urls * test(Tab): fix broken tests * test(Rating): fix broken tests and minor refactor * test(Checkbox): fix broken tests * test(Accordion): fix broken tests * test(Search): fix broken tests * test(Search): revert changes * test(setup): set disableLifecycleMethods globally * test(Sticky): fix broken tests * test(Search): fix broken tests * test(Dropdown): fix broken tests * docs(Popup): fix broken example * chore(package): update `react-ace`, reenable `satisfied`
Semantic-Org · Oct 10, 2017 · bc417d9 · bc417d9
1 parent 701f178
commit bc417d9
Show file tree

Hide file tree

Showing 16 changed files with 511 additions and 447 deletions.
diff --git a/config.js b/config.js
@@ -53,10 +53,8 @@ const config = {
   // ----------------------------------
   compiler_devtool: (__DEV__ || __TEST__) && 'cheap-source-map',
   compiler_globals: {
-    process: {
-      env: {
-        NODE_ENV: JSON.stringify(env),
-      },
+    'process.env': {
+      NODE_ENV: JSON.stringify(env),
     },
     __DEV__,
     __PATH_SEP__: JSON.stringify(path.sep),

diff --git a/docs/app/Components/LayoutsLayout.js b/docs/app/Components/LayoutsLayout.js
@@ -1,5 +1,6 @@
 import _ from 'lodash'
-import React, { Component, PropTypes } from 'react'
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
 import { NavLink, Route } from 'react-router-dom'
 
 import { Button } from 'src'

diff --git a/docs/app/Examples/modules/Popup/Types/PopupExampleTitled.js b/docs/app/Examples/modules/Popup/Types/PopupExampleTitled.js
@@ -18,13 +18,17 @@ const users = [
     avatar: '/assets/images/avatar/small/matt.jpg',
   },
 ]
-
+/* TODO: Remove <div> wrapper after all our components will be classes */
 const PopupExampleTitled = () => (
   <div>
     {users.map(user => (
       <Popup
         key={user.name}
-        trigger={<Image src={user.avatar} avatar />}
+        trigger={(
+          <div>
+            <Image src={user.avatar} avatar />
+          </div>
+        )}
         header={user.name}
         content={user.bio}
       />

diff --git a/docs/app/index.ejs b/docs/app/index.ejs
@@ -69,10 +69,10 @@
   <script src="//cdn.jsdelivr.net/faker.js/<%= htmlWebpackPlugin.options.versions.faker %>/faker.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/js-beautify/<%= htmlWebpackPlugin.options.versions.jsBeautify %>/beautify-html.min.js"></script>
   <!-- Use unminified React when not in production so we get errors and warnings -->
-  <script src="//unpkg.com/prop-types@<%= htmlWebpackPlugin.options.versions.propTypes %>/prop-types.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.react %>/react<%= __PROD__ ? '.min' : '' %>.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.reactDOM %>/react-dom.min.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.reactDOM %>/react-dom-server.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/prop-types/<%= htmlWebpackPlugin.options.versions.propTypes %>/prop-types.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/react/<%= htmlWebpackPlugin.options.versions.react %>/umd/react<%= __PROD__ ? '.production.min' : '.development' %>.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/<%= htmlWebpackPlugin.options.versions.reactDOM %>/umd/react-dom.production.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/react-dom/<%= htmlWebpackPlugin.options.versions.reactDOM %>/umd/react-dom-server.browser.production.min.js"></script>
   <script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
   <style>
     html, body {

diff --git a/package.json b/package.json
@@ -80,15 +80,16 @@
     "babel-register": "^6.24.1",
     "babel-standalone": "^6.25.0",
     "chai": "^4.1.1",
-    "chai-enzyme": "^0.8.0",
+    "chai-enzyme": "beta",
     "connect-history-api-fallback": "^1.3.0",
     "copy-to-clipboard": "^3.0.8",
     "cross-env": "^5.0.5",
     "debug": "^3.0.1",
     "dirty-chai": "^2.0.1",
     "doctoc": "^1.3.0",
     "doctrine": "^2.0.0",
-    "enzyme": "^2.9.1",
+    "enzyme": "^3.1.0",
+    "enzyme-adapter-react-16": "^1.0.1",
     "eslint": "^4.4.1",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-plugin-import": "^2.7.0",
@@ -118,16 +119,15 @@
     "node-sass": "^4.5.3",
     "puppeteer": "^0.10.1",
     "raw-loader": "^0.5.1",
-    "react": "^15.6.1",
+    "react": "^16.0.0",
     "react-ace": "^5.1.2",
-    "react-addons-test-utils": "15.6.0",
     "react-docgen": "^2.17.0",
     "react-document-title": "^2.0.3",
-    "react-dom": "15.6.1",
+    "react-dom": "^16.0.0",
     "react-hot-loader": "^3.0.0-beta.7",
     "react-router": "^4.1.2",
     "react-router-dom": "^4.1.2",
-    "react-test-renderer": "^15.6.1",
+    "react-test-renderer": "^16.0.0",
     "require-dir": "^0.3.2",
     "rimraf": "^2.6.1",
     "satisfied": "^1.1.1",
@@ -145,7 +145,7 @@
     "webpack-hot-middleware": "^2.18.2"
   },
   "peerDependencies": {
-    "react": ">=0.14.0 <= 15",
-    "react-dom": ">=0.14.0 <= 15"
+    "react": ">=0.14.0 <= 16",
+    "react-dom": ">=0.14.0 <= 16"
   }
 }
diff --git a/test/setup.js b/test/setup.js
@@ -4,9 +4,10 @@
  */
 import chai from 'chai'
 import chaiEnzyme from 'chai-enzyme'
+import enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
 import dirtyChai from 'dirty-chai'
 import sinonChai from 'sinon-chai'
-import * as enzyme from 'enzyme'
 
 //
 // Enzyme
@@ -16,6 +17,11 @@ global.shallow = enzyme.shallow
 global.render = enzyme.render
 global.mount = enzyme.mount
 
+enzyme.configure({
+  adapter: new Adapter(),
+  disableLifecycleMethods: true,
+})
+
 //
 // Mocha
 //

diff --git a/test/specs/addons/Responsive/Responsive-test.js b/test/specs/addons/Responsive/Responsive-test.js
@@ -46,7 +46,7 @@ describe('Responsive', () => {
   describe('onUpdate', () => {
     it('listens for resize', (done) => {
       sandbox.stub(window, 'innerWidth').value(Responsive.onlyMobile.minWidth)
-      const wrapper = mount(<Responsive {...Responsive.onlyMobile} />)
+      const wrapper = shallow(<Responsive {...Responsive.onlyMobile} />)
       wrapper.should.be.present()
 
       sandbox.stub(window, 'innerWidth').value(Responsive.onlyTablet.minWidth)

diff --git a/test/specs/modules/Accordion/AccordionAccordion-test.js b/test/specs/modules/Accordion/AccordionAccordion-test.js
@@ -34,17 +34,28 @@ describe('AccordionAccordion', () => {
 
     it('is toggled to -1 when clicking Title a second time', () => {
       const wrapper = mount(<AccordionAccordion panels={panels} />)
-      const title = wrapper.find('AccordionTitle').at(0)
 
       // open panel (activeIndex 0)
-      title.simulate('click')
-      title.should.have.prop('active', true)
+      wrapper
+        .find('AccordionTitle')
+        .at(0)
+        .simulate('click')
       wrapper.should.have.state('activeIndex', 0)
+      wrapper
+        .find('AccordionTitle')
+        .at(0)
+        .should.have.prop('active', true)
 
       // close panel (activeIndex -1)
-      title.simulate('click')
-      title.should.have.prop('active', false)
+      wrapper
+        .find('AccordionTitle')
+        .at(0)
+        .simulate('click')
       wrapper.should.have.state('activeIndex', -1)
+      wrapper
+        .find('AccordionTitle')
+        .at(0)
+        .should.have.prop('active', false)
     })
 
     it('sets the correct pair of title/content active', () => {
@@ -99,30 +110,62 @@ describe('AccordionAccordion', () => {
 
     it('can be inclusive and can open multiple panels by clicking', () => {
       const wrapper = mount(<AccordionAccordion exclusive={false} panels={panels} />)
-      const titles = wrapper.find('AccordionTitle')
-      const contents = wrapper.find('AccordionContent')
 
-      titles.at(0).simulate('click')
-      contents.at(0).should.have.prop('active', true)
-      titles.at(0).should.have.prop('active', true)
+      wrapper
+        .find('AccordionTitle')
+        .at(0)
+        .simulate('click')
+      wrapper
+        .find('AccordionTitle')
+        .at(0)
+        .should.have.prop('active', true)
+      wrapper
+        .find('AccordionContent')
+        .at(0)
+        .should.have.prop('active', true)
 
-      titles.at(1).simulate('click')
-      contents.at(1).should.have.prop('active', true)
-      titles.at(1).should.have.prop('active', true)
+      wrapper
+        .find('AccordionTitle')
+        .at(1)
+        .simulate('click')
+      wrapper
+        .find('AccordionTitle')
+        .at(1)
+        .should.have.prop('active', true)
+      wrapper
+        .find('AccordionContent')
+        .at(1)
+        .should.have.prop('active', true)
     })
 
     it('can be inclusive and close multiple panels by clicking', () => {
       const wrapper = mount(<AccordionAccordion defaultActiveIndex={[0, 1]} exclusive={false} panels={panels} />)
-      const titles = wrapper.find('AccordionTitle')
-      const contents = wrapper.find('AccordionContent')
 
-      titles.at(0).simulate('click')
-      contents.at(0).should.have.prop('active', false)
-      titles.at(0).should.have.prop('active', false)
+      wrapper
+        .find('AccordionTitle')
+        .at(0)
+        .simulate('click')
+      wrapper
+        .find('AccordionTitle')
+        .at(0)
+        .should.have.prop('active', false)
+      wrapper
+        .find('AccordionContent')
+        .at(0)
+        .should.have.prop('active', false)
 
-      titles.at(1).simulate('click')
-      contents.at(1).should.have.prop('active', false)
-      titles.at(1).should.have.prop('active', false)
+      wrapper
+        .find('AccordionTitle')
+        .at(1)
+        .simulate('click')
+      wrapper
+        .find('AccordionTitle')
+        .at(1)
+        .should.have.prop('active', false)
+      wrapper
+        .find('AccordionContent')
+        .at(1)
+        .should.have.prop('active', false)
     })
   })
 

diff --git a/test/specs/modules/Checkbox/Checkbox-test.js b/test/specs/modules/Checkbox/Checkbox-test.js
@@ -34,16 +34,36 @@ describe('Checkbox', () => {
     it('can be checked and unchecked', () => {
       const wrapper = shallow(<Checkbox />)
 
-      wrapper.find('input').should.not.be.checked()
-      wrapper.simulate('click').find('input').should.be.checked()
-      wrapper.simulate('click').find('input').should.not.be.checked()
+      wrapper
+        .find('input')
+        .should.not.be.checked()
+
+      wrapper.simulate('click')
+      wrapper
+        .find('input')
+        .should.be.checked()
+
+      wrapper.simulate('click')
+      wrapper
+        .find('input')
+        .should.not.be.checked()
     })
     it('can be checked but not unchecked when radio', () => {
       const wrapper = shallow(<Checkbox radio />)
 
-      wrapper.find('input').should.not.be.checked()
-      wrapper.simulate('click').find('input').should.be.checked()
-      wrapper.simulate('click').find('input').should.be.checked()
+      wrapper
+        .find('input')
+        .should.not.be.checked()
+
+      wrapper.simulate('click')
+      wrapper
+        .find('input')
+        .should.be.checked()
+
+      wrapper.simulate('click')
+      wrapper
+        .find('input')
+        .should.be.checked()
     })
   })
 
@@ -104,14 +124,18 @@ describe('Checkbox', () => {
 
   describe('disabled', () => {
     it('cannot be checked', () => {
-      shallow(<Checkbox disabled />)
-        .simulate('click')
+      const wrapper = shallow(<Checkbox disabled />)
+
+      wrapper.simulate('click')
+      wrapper
         .find('input')
         .should.not.be.checked()
     })
     it('cannot be unchecked', () => {
-      shallow(<Checkbox disabled defaultChecked />)
-        .simulate('click')
+      const wrapper = shallow(<Checkbox defaultChecked disabled />)
+
+      wrapper.simulate('click')
+      wrapper
         .find('input')
         .should.be.checked()
     })
@@ -204,14 +228,18 @@ describe('Checkbox', () => {
 
   describe('readOnly', () => {
     it('cannot be checked', () => {
-      shallow(<Checkbox readOnly />)
-        .simulate('click')
+      const wrapper = shallow(<Checkbox readOnly />)
+
+      wrapper.simulate('click')
+      wrapper
         .find('input')
         .should.not.be.checked()
     })
     it('cannot be unchecked', () => {
-      shallow(<Checkbox readOnly defaultChecked />)
-        .simulate('click')
+      const wrapper = shallow(<Checkbox defaultChecked readOnly />)
+
+      wrapper.simulate('click')
+      wrapper
         .find('input')
         .should.be.checked()
     })