Upgrade dependencies to fix build breakages (#238)

* Upgrade dependencies to fix build breakages

We've had some lint-related build failures:

  https://travis-ci.org/graphql/graphiql/builds/181453346

lately. Unfortunately, these masked test failures introduced by
35d8d38. When we fixed the lint (1eeb36c), the test failures showed
up:

  https://travis-ci.org/graphql/graphiql/builds/182431531

This commit fixes that by upgrading our deps:

- Replace "react-addons-test-utils", which access a path that doesn't
  exist in current "react-dom", with "react-test-renderer".

This required some API updates in the tests, but also some changes to
use ref-based DOM node access rather than `ReactDOM.findDOMNode`, which
doesn't work in "react-test-renderer".

See:

- facebook/react#7371
- facebook/react#8324

> Yea sorry, refs can work but `findDOMNode()` can't (we tried).

* Update package.json

package.json

@@ -74,8 +74,8 @@
     "jsdom": "9.8.3",
     "mocha": "3.2.0",
     "react": "15.4.1",
-    "react-addons-test-utils": "15.4.0",
-    "react-dom": "15.3.2",
+    "react-dom": "15.4.1",
+    "react-test-renderer": "15.4.1",
     "uglify-js": "2.7.5",
     "uglifyify": "3.0.4",
     "watchify": "3.7.0"

src/components/QueryEditor.js

@@ -7,7 +7,6 @@
  */
 
 import React, { PropTypes } from 'react';
-import ReactDOM from 'react-dom';
 import { GraphQLSchema } from 'graphql';
 
 import onHasCompletion from '../utility/onHasCompletion';
@@ -59,7 +58,7 @@ export class QueryEditor extends React.Component {
     require('codemirror-graphql/lint');
     require('codemirror-graphql/mode');
 
-    this.editor = CodeMirror(ReactDOM.findDOMNode(this), {
+    this.editor = CodeMirror(this._node, {
       value: this.props.value || '',
       lineNumbers: true,
       tabSize: 2,
@@ -139,7 +138,12 @@ export class QueryEditor extends React.Component {
   }
 
   render() {
-    return <div className="query-editor" />;
+    return (
+      <div
+        className="query-editor"
+        ref={node => { this._node = node; }}
+      />
+    );
   }
 
   /**
@@ -150,6 +154,13 @@ export class QueryEditor extends React.Component {
     return this.editor;
   }
 
+  /**
+   * Public API for retrieving the DOM client height for this component.
+   */
+  getClientHeight() {
+    return this._node && this._node.clientHeight;
+  }
+
   _onKeyUp = (cm, event) => {
     const code = event.keyCode;
     if (

src/components/ResultViewer.js

@@ -7,8 +7,6 @@
  */
 
 import React, { PropTypes } from 'react';
-import ReactDOM from 'react-dom';
-
 
 /**
  * ResultViewer
@@ -36,7 +34,7 @@ export class ResultViewer extends React.Component {
     require('codemirror/keymap/sublime');
     require('codemirror-graphql/results/mode');
 
-    this.viewer = CodeMirror(ReactDOM.findDOMNode(this), {
+    this.viewer = CodeMirror(this._node, {
       lineWrapping: true,
       value: this.props.value || '',
       readOnly: true,
@@ -70,7 +68,12 @@ export class ResultViewer extends React.Component {
   }
 
   render() {
-    return <div className="result-window" />;
+    return (
+      <div
+        className="result-window"
+        ref={node => { this._node = node; }}
+      />
+    );
   }
 
   /**
@@ -80,4 +83,11 @@ export class ResultViewer extends React.Component {
   getCodeMirror() {
     return this.viewer;
   }
+
+  /**
+   * Public API for retrieving the DOM client height for this component.
+   */
+  getClientHeight() {
+    return this._node && this._node.clientHeight;
+  }
 }

src/components/VariableEditor.js

@@ -7,7 +7,6 @@
  */
 
 import React, { PropTypes } from 'react';
-import ReactDOM from 'react-dom';
 
 import onHasCompletion from '../utility/onHasCompletion';
 
@@ -57,7 +56,7 @@ export class VariableEditor extends React.Component {
     require('codemirror-graphql/variables/lint');
     require('codemirror-graphql/variables/mode');
 
-    this.editor = CodeMirror(ReactDOM.findDOMNode(this), {
+    this.editor = CodeMirror(this._node, {
       value: this.props.value || '',
       lineNumbers: true,
       tabSize: 2,
@@ -136,7 +135,12 @@ export class VariableEditor extends React.Component {
   }
 
   render() {
-    return <div className="codemirrorWrap" />;
+    return (
+      <div
+        className="codemirrorWrap"
+        ref={node => { this._node = node; }}
+      />
+    );
   }
 
   /**
@@ -147,6 +151,13 @@ export class VariableEditor extends React.Component {
     return this.editor;
   }
 
+  /**
+   * Public API for retrieving the DOM client height for this component.
+   */
+  getClientHeight() {
+    return this._node && this._node.clientHeight;
+  }
+
   _onKeyUp = (cm, event) => {
     const code = event.keyCode;
     if (

src/components/__tests__/GraphiQL-test.js

@@ -9,7 +9,7 @@
 import { expect } from 'chai';
 import { describe, it } from 'mocha';
 import React from 'react';
-import { renderIntoDocument } from 'react-addons-test-utils';
+import ReactTestRenderer from 'react-test-renderer';
 
 import { GraphiQL } from '../GraphiQL';
 
@@ -47,38 +47,40 @@ describe('GraphiQL', () => {
   const noOpFetcher = () => {};
 
   it('should throw error without fetcher', () => {
-    expect(() => renderIntoDocument(
+    expect(() => ReactTestRenderer.create(
       <GraphiQL />
     )).to.throw(
       'GraphiQL requires a fetcher function'
     );
   });
 
   it('should construct correctly with fetcher', () => {
-    expect(() => renderIntoDocument(
+    expect(() => ReactTestRenderer.create(
       <GraphiQL fetcher={noOpFetcher} />
     )).to.not.throw();
   });
 
   it('should not throw error if schema missing and query provided', () => {
-    expect(() => renderIntoDocument(
+    expect(() => ReactTestRenderer.create(
       <GraphiQL fetcher={noOpFetcher} query="{}" />
     )).to.not.throw();
   });
 
   it('defaults to the built-in default query', () => {
-    const graphiQL = renderIntoDocument(<GraphiQL fetcher={noOpFetcher} />);
-    expect(graphiQL.state.query).to.include('# Welcome to GraphiQL');
+    const graphiQL = ReactTestRenderer.create(
+      <GraphiQL fetcher={noOpFetcher} />
+    );
+    expect(graphiQL.getInstance().state.query)
+      .to.include('# Welcome to GraphiQL');
   });
 
   it('accepts a custom default query', () => {
-    const graphiQL = renderIntoDocument(
+    const graphiQL = ReactTestRenderer.create(
       <GraphiQL
         fetcher={noOpFetcher}
         defaultQuery='GraphQL Party!!'
       />
     );
-
-    expect(graphiQL.state.query).to.equal('GraphQL Party!!');
+    expect(graphiQL.getInstance().state.query).to.equal('GraphQL Party!!');
   });
 });

src/utility/CodeMirrorSizer.js

@@ -6,9 +6,6 @@
  *  LICENSE-examples file in the root directory of this source tree.
  */
 
-import ReactDOM from 'react-dom';
-
-
 /**
  * When a containing DOM node's height has been altered, trigger a resize of
  * the related CodeMirror instance so that it is always correctly sized.
@@ -20,7 +17,7 @@ export default class CodeMirrorSizer {
 
   updateSizes(components) {
     components.forEach((component, i) => {
-      const size = ReactDOM.findDOMNode(component).clientHeight;
+      const size = component.getClientHeight();
       if (i <= this.sizes.length && size !== this.sizes[i]) {
         component.getCodeMirror().setSize();
       }