Merge pull request #249 from Adam13531/master

Upgrade to React 16

Author: nutgaard

package.json

@@ -43,7 +43,8 @@
     "babel-preset-stage-2": "6.18.0",
     "chai": "3.5.0",
     "codecov": "1.0.1",
-    "enzyme": "2.6.0",
+    "enzyme": "3.3.0",
+    "enzyme-adapter-react-16": "1.1.1",
     "eslint": "3.12.2",
     "eslint-config-airbnb": "13.0.0",
     "eslint-plugin-import": "2.2.0",
@@ -55,16 +56,17 @@
     "mocha": "3.2.0",
     "npm-run-all": "3.1.2",
     "nyc": "^10.0.0",
-    "react": "15.4.1",
+    "prop-types": "^15.5.8",
+    "react": "16.2.0",
     "react-addons-test-utils": "15.4.1",
-    "react-dom": "15.4.1",
+    "react-dom": "16.2.0",
     "sinon": "1.17.6",
     "webpack": "1.14.0",
     "webpack-dev-server": "1.16.2"
   },
   "peerDependencies": {
-    "react": "^0.14.7 || ^15.0.1",
-    "react-dom": "^0.14.7 || ^15.0.1"
+    "react": "^0.14.7 || ^15.0.1 || ^16.0",
+    "react-dom": "^0.14.7 || ^15.0.1 || ^16.0"
   },
   "dependencies": {
     "tween-functions": "^1.2.0"

src/anchor-element.js

@@ -1,7 +1,8 @@
 /**
  * Provides the anchor-panel which can be linked to by `anchor`-augmented componented
  */
-import React, { PropTypes as PT, Component } from 'react';
+import React, { Component } from 'react';
+import { PropTypes as PT } from 'prop-types';
 import scroller from './scroller';
 import CtxTypes from './ctx-types';
 import { filterUndefined } from './utils';

src/anchor.js

@@ -1,7 +1,8 @@
 /**
  * Exports a helper function which wraps clickable elements, hijacking onClick and passing it to the scroller
  */
-import React, { PropTypes as PT } from 'react';
+import React from 'react';
+import { PropTypes as PT } from 'prop-types';
 import ReactDOM from 'react-dom';
 import scroller from './scroller';
 import ScrollSpy from './scroll-spy';

src/ctx-types.js

@@ -1,7 +1,7 @@
 /**
  * Proptypes used for the context
  */
-import { PropTypes as PT } from 'react';
+import { PropTypes as PT } from 'prop-types';
 
 export const contextTypes = {
     offset: PT.number,

src/scroll-panel.js

@@ -1,7 +1,8 @@
 /**
  * A component to use when you want scrolling other places than the global document
  */
-import React, { PropTypes as PT } from 'react';
+import React from 'react';
+import { PropTypes as PT } from 'prop-types';
 import CtxTypes from './ctx-types';
 import ScrollSpy from './scroll-spy';
 import { omit } from './utils';

test/anchor-element-test.js

@@ -3,11 +3,14 @@
 import React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Enzyme, { mount } from 'enzyme';
 import AnchorElement from './../src/anchor-element';
 import { defaultConfig } from './../src/ctx-types';
 import { omit } from './test-utils';
 
+Enzyme.configure({ adapter: new Adapter() });
+
 describe('AnchorElement', () => {
     it('should register with scroller on mount', () => {
         const registerElementPanel = spy();
@@ -37,15 +40,15 @@ describe('AnchorElement', () => {
     describe('getConfig', () => {
         it('should return defaults if no props are provided', () => {
             const wrapper = mount(<AnchorElement id="test"><h1>Test</h1></AnchorElement>);
-            const config = wrapper.node.getConfig();
+            const config = wrapper.instance().getConfig();
 
             expect(omit(config, ['children', 'isInside', 'id'])).to.deep.equal(defaultConfig);
         });
 
         it('should inherit from context', () => {
             const ctx = { offset: 10, events: { test: 0 }, animate: false, container: {} };
             const wrapper = mount(<AnchorElement id="test"><h1>Test</h1></AnchorElement>, { context: ctx });
-            const config = wrapper.node.getConfig();
+            const config = wrapper.instance().getConfig();
 
             expect(omit(config, ['children', 'isInside', 'id'])).to.not.deep.equal(defaultConfig);
             expect(omit(config, ['children', 'isInside', 'id'])).to.deep.equal(ctx);
@@ -59,7 +62,7 @@ describe('AnchorElement', () => {
               { context: ctx }
             );
 
-            const config = wrapper.node.getConfig();
+            const config = wrapper.instance().getConfig();
 
             expect(omit(config, ['children', 'isInside', 'id'])).to.not.deep.equal(defaultConfig);
             expect(omit(config, ['children', 'isInside', 'id'])).to.not.deep.equal(ctx);

test/anchor-test.js

@@ -3,10 +3,13 @@
 import React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Enzyme, { mount } from 'enzyme';
 import anchor from './../src/anchor';
 import { AnchorButton } from './../src/index';
 
+Enzyme.configure({ adapter: new Adapter() });
+
 describe('Anchor', () => {
     it('should call prepareToScroll onClick', () => {
         const prepareToScroll = spy();

test/scroller-test.js

@@ -2,19 +2,22 @@
 /* eslint-disable newline-per-chained-call */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Enzyme, { mount } from 'enzyme';
 import { spy } from 'sinon';
 import { expect } from 'chai';
 import AnchorElement from './../src/anchor-element';
 import { Scroller } from './../src/scroller';
 
+Enzyme.configure({ adapter: new Adapter() });
+
 // Utils
 const size = (instance) => Object.keys(instance._elementPanelRegister).length;
 const createAnchorElement = () => {
     const wrapper = mount(<AnchorElement id="test"><h1>Test</h1></AnchorElement>);
-    spy(wrapper.node, 'getConfig');
+    spy(wrapper.instance(), 'getConfig');
 
-    return wrapper.node;
+    return wrapper.instance();
 };
 
 // So we can work on a clean instance for each test