Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade dependencies to fix build breakages #238

Merged
merged 2 commits into from
Dec 9, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
17 changes: 14 additions & 3 deletions src/components/QueryEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
*/

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { GraphQLSchema } from 'graphql';

import onHasCompletion from '../utility/onHasCompletion';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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; }}
/>
);
}

/**
Expand All @@ -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 (
Expand Down
18 changes: 14 additions & 4 deletions src/components/ResultViewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@
*/

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';


/**
* ResultViewer
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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; }}
/>
);
}

/**
Expand All @@ -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;
}
}
17 changes: 14 additions & 3 deletions src/components/VariableEditor.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
*/

import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';

import onHasCompletion from '../utility/onHasCompletion';

Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -136,7 +135,12 @@ export class VariableEditor extends React.Component {
}

render() {
return <div className="codemirrorWrap" />;
return (
<div
className="codemirrorWrap"
ref={node => { this._node = node; }}
/>
);
}

/**
Expand All @@ -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 (
Expand Down
20 changes: 11 additions & 9 deletions src/components/__tests__/GraphiQL-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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!!');
});
});
5 changes: 1 addition & 4 deletions src/utility/CodeMirrorSizer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -20,7 +17,7 @@ export default class CodeMirrorSizer {

updateSizes(components) {
components.forEach((component, i) => {
const size = ReactDOM.findDOMNode(component).clientHeight;
const size = component.getClientHeight();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you check if DocExplorer also needs to expose this method?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think so. Only used from these.

if (i <= this.sizes.length && size !== this.sizes[i]) {
component.getCodeMirror().setSize();
}
Expand Down