From a77773e4105430d131c7527a97675712cd963a35 Mon Sep 17 00:00:00 2001 From: Greg Hurrell Date: Thu, 8 Dec 2016 17:06:21 -0800 Subject: [PATCH 1/2] 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 35d8d384f. When we fixed the lint (1eeb36cba8), 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: - https://github.com/facebook/react/issues/7371 - https://github.com/facebook/react/issues/8324 > Yea sorry, refs can work but `findDOMNode()` can't (we tried). --- package.json | 6 +++--- src/components/QueryEditor.js | 17 ++++++++++++++--- src/components/ResultViewer.js | 18 ++++++++++++++---- src/components/VariableEditor.js | 17 ++++++++++++++--- src/components/__tests__/GraphiQL-test.js | 20 +++++++++++--------- src/utility/CodeMirrorSizer.js | 5 +---- 6 files changed, 57 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 3b904c03d7c..e463aea80e1 100644 --- a/package.json +++ b/package.json @@ -71,11 +71,11 @@ "express-graphql": "0.6.1", "flow-bin": "0.36.0", "graphql": "0.8.2", - "jsdom": "9.8.3", + "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" diff --git a/src/components/QueryEditor.js b/src/components/QueryEditor.js index 05506100232..fbc812f1290 100644 --- a/src/components/QueryEditor.js +++ b/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
; + return ( +
{ 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 ( diff --git a/src/components/ResultViewer.js b/src/components/ResultViewer.js index 90ccae14b4b..e7afbf558e2 100644 --- a/src/components/ResultViewer.js +++ b/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
; + return ( +
{ 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; + } } diff --git a/src/components/VariableEditor.js b/src/components/VariableEditor.js index cea26780872..f821dd8f564 100644 --- a/src/components/VariableEditor.js +++ b/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
; + return ( +
{ 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 ( diff --git a/src/components/__tests__/GraphiQL-test.js b/src/components/__tests__/GraphiQL-test.js index 5717c622734..5318c21ca64 100644 --- a/src/components/__tests__/GraphiQL-test.js +++ b/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,7 +47,7 @@ describe('GraphiQL', () => { const noOpFetcher = () => {}; it('should throw error without fetcher', () => { - expect(() => renderIntoDocument( + expect(() => ReactTestRenderer.create( )).to.throw( 'GraphiQL requires a fetcher function' @@ -55,30 +55,32 @@ describe('GraphiQL', () => { }); it('should construct correctly with fetcher', () => { - expect(() => renderIntoDocument( + expect(() => ReactTestRenderer.create( )).to.not.throw(); }); it('should not throw error if schema missing and query provided', () => { - expect(() => renderIntoDocument( + expect(() => ReactTestRenderer.create( )).to.not.throw(); }); it('defaults to the built-in default query', () => { - const graphiQL = renderIntoDocument(); - expect(graphiQL.state.query).to.include('# Welcome to GraphiQL'); + const graphiQL = ReactTestRenderer.create( + + ); + expect(graphiQL.getInstance().state.query) + .to.include('# Welcome to GraphiQL'); }); it('accepts a custom default query', () => { - const graphiQL = renderIntoDocument( + const graphiQL = ReactTestRenderer.create( ); - - expect(graphiQL.state.query).to.equal('GraphQL Party!!'); + expect(graphiQL.getInstance().state.query).to.equal('GraphQL Party!!'); }); }); diff --git a/src/utility/CodeMirrorSizer.js b/src/utility/CodeMirrorSizer.js index af8a530d71b..5fb539e5929 100644 --- a/src/utility/CodeMirrorSizer.js +++ b/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(); } From 66acb7ee2c9ee2f0e065596ffcad570f4000cc5d Mon Sep 17 00:00:00 2001 From: Lee Byron Date: Fri, 9 Dec 2016 15:14:30 -0800 Subject: [PATCH 2/2] Update package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e463aea80e1..e56f0f1fe84 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,7 @@ "express-graphql": "0.6.1", "flow-bin": "0.36.0", "graphql": "0.8.2", - "jsdom": "^9.8.3", + "jsdom": "9.8.3", "mocha": "3.2.0", "react": "15.4.1", "react-dom": "15.4.1",