Merge pull request #135 from thathenderson/update-for-react-15

Update dependencies and fix tests for React 15
onefinestay · Jul 4, 2016 · ccdaaba · ccdaaba
2 parents 7072bb7 + 2075cd0
commit ccdaaba
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 22 deletions.
diff --git a/example/index.jsx b/example/index.jsx
@@ -47,11 +47,11 @@ const DatePickerRange = React.createClass({
         <RangePicker {...this.props} onSelect={this.handleSelect} value={this.state.value} />
         <div>
           <input type="text"
-            value={this.state.value ? this.state.value.start.format('LL') : null}
+            value={this.state.value ? this.state.value.start.format('LL') : ""}
             readOnly={true}
             placeholder="Start date"/>
           <input type="text"
-            value={this.state.value ? this.state.value.end.format('LL') : null}
+            value={this.state.value ? this.state.value.end.format('LL') : ""}
             readOnly={true}
             placeholder="End date" />
         </div>
@@ -64,7 +64,7 @@ const DatePickerRange = React.createClass({
 const DatePickerSingle = React.createClass({
   getInitialState() {
     return {
-      value: null,
+      value: "",
     };
   },
 
@@ -81,7 +81,7 @@ const DatePickerSingle = React.createClass({
           value={this.state.value} />
         <div>
           <input type="text"
-            value={this.state.value ? this.state.value.format('LL') : null}
+            value={this.state.value ? this.state.value.format('LL') : ""}
             readOnly={true} />
         </div>
       </div>

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -6,6 +6,7 @@ import gulp from 'gulp';
 
 import gulpLoadPlugins from 'gulp-load-plugins';
 import React from 'react';
+import ReactDOMServer from 'react-dom/server';
 import webpack from 'webpack';
 import { Server as KarmaServer } from 'karma';
 import clean from 'del';
@@ -155,7 +156,7 @@ gulp.task('build-example', function() {
   });
 
   var Index = React.createFactory(require('./example/base.jsx'));
-  var markup = '<!document html>' + React.renderToString(Index());
+  var markup = '<!document html>' + ReactDOMServer.renderToString(Index());
 
   // write file
   fs.writeFileSync('./example/index.html', markup);

diff --git a/package.json b/package.json
@@ -42,16 +42,16 @@
     "url": "https://github.com/onefinestay/react-daterange-picker"
   },
   "peerDependencies": {
-    "react": "^0.14.0",
-    "react-dom": "^0.14.0"
+    "react": "^0.14.0 || 15.x.x",
+    "react-dom": "^0.14.0 || 15.x.x"
   },
   "dependencies": {
     "calendar": "^0.1.0",
     "classnames": "^2.1.1",
     "immutable": "^3.7.2",
     "moment": "^2.10.6",
     "moment-range": "^2.0.3",
-    "react-addons-pure-render-mixin": "^0.14.0"
+    "react-addons-pure-render-mixin": "^0.14.0 || 15.x.x"
   },
   "devDependencies": {
     "babel": "^5.2.16",
@@ -89,7 +89,7 @@
     "object.assign": "^1.1.1",
     "phantomjs": "^1.9.18",
     "run-sequence": "~1.1.4",
-    "react-addons-test-utils": "^0.14.0",
+    "react-addons-test-utils": "^0.14.0 || 15.x.x",
     "timekeeper": "0.0.5",
     "transform-loader": "^0.2.1",
     "underscore": "^1.8.3",

diff --git a/src/calendar/tests/CalendarDate.spec.js b/src/calendar/tests/CalendarDate.spec.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
 import moment from 'moment';
 import _ from 'underscore';
@@ -59,9 +60,11 @@ describe('The CalendarDate Component', function () {
     };
 
     this.useDocumentRenderer = (props) => {
-      const renderedTable = TestUtils.renderIntoDocument(<table>
-        <tbody>{getCalendarDate(props)}</tbody>
-      </table>);
+      const renderedTable = TestUtils.renderIntoDocument(
+        <table>
+          <tbody><tr>{getCalendarDate(props)}</tr></tbody>
+        </table>
+      );
       this.renderedComponent = renderedTable.querySelector('td');
     };
 
@@ -72,7 +75,7 @@ describe('The CalendarDate Component', function () {
 
   afterEach( function () {
     if (this.component) {
-      React.unmountComponentAtNode(React.findDOMNode(this.component).parentNode);
+      ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this.component).parentNode);
     }
   });
 

diff --git a/src/calendar/tests/CalendarMonth.spec.js b/src/calendar/tests/CalendarMonth.spec.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
 import CalendarMonth from '../CalendarMonth';
 import CalendarDate from '../CalendarDate';
@@ -58,7 +59,7 @@ describe('The CalendarMonth Component', function () {
 
   afterEach( function () {
     if (this.component) {
-      React.unmountComponentAtNode(React.findDOMNode(this.component).parentNode);
+      ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this.component).parentNode);
     }
   });
 
@@ -115,12 +116,12 @@ describe('The CalendarMonth Component', function () {
 
       it('which calls props.onMonthChange if props.disableNavigation is false and if the selected value changes', function () {
         var onMonthChange = jasmine.createSpy();
-        this.useDocumentRenderer({
-          onMonthChange: onMonthChange,
-        });
-        var select = TestUtils.scryRenderedDOMComponentsWithTag(this.renderedComponent, 'select')[0].getDOMNode();
-        select.value = '2';
+        this.useDocumentRenderer({ onMonthChange: onMonthChange });
+
+        var select = TestUtils.scryRenderedDOMComponentsWithTag(this.renderedComponent, 'select')[0];
+        select.value = 2;
         TestUtils.Simulate.change(select);
+
         expect(onMonthChange).toHaveBeenCalledWith(2);
       });
 
@@ -165,7 +166,7 @@ describe('The CalendarMonth Component', function () {
         this.useDocumentRenderer({
           onYearChange: onYearChange,
         });
-        var select = TestUtils.scryRenderedDOMComponentsWithTag(this.renderedComponent, 'select')[1].getDOMNode();
+        var select = TestUtils.scryRenderedDOMComponentsWithTag(this.renderedComponent, 'select')[1];
         var value = (this.firstOfMonth.year() + 1).toString();
         select.value = value;
         TestUtils.Simulate.change(select);

diff --git a/src/tests/DateRangePicker.spec.js b/src/tests/DateRangePicker.spec.js
@@ -9,6 +9,7 @@ import isMomentRange from '../utils/isMomentRange';
 import areMomentRangesEqual from '../utils/areMomentRangesEqual';
 import Immutable from 'immutable';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
 import _ from 'underscore';
 
@@ -75,7 +76,7 @@ describe('The DateRangePicker component', function () {
 
   afterEach( function () {
     if (this.component) {
-      React.unmountComponentAtNode(React.findDOMNode(this.component).parentNode);
+      ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this.component).parentNode);
     }
   });
 

diff --git a/src/tests/Legend.spec.js b/src/tests/Legend.spec.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
 import Legend from '../Legend';
 import _ from 'underscore';
@@ -32,7 +33,7 @@ describe('The Legend component', function () {
 
   afterEach( function () {
     if (this.component) {
-      React.unmountComponentAtNode(React.findDOMNode(this.component).parentNode);
+      ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this.component).parentNode);
     }
   });