Fix: Migrate to react-codemirror2 (styleguidist#574)

Closes styleguidist#573

Author: scniro

package-lock.json

@@ -68,7 +68,7 @@
     "minimist": "^1.2.0",
     "pretty-format": "^20.0.3",
     "prop-types": "^15.5.10",
-    "react-codemirror": "^1.0.0",
+    "react-codemirror2": "0.0.13",
     "react-dev-utils": "^3.0.2",
     "react-docgen": "^3.0.0-beta5",
     "react-docgen-displayname-handler": "^1.0.0",

package.json

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash/debounce';
-import Codemirror from 'react-codemirror';
+import CodeMirror from 'react-codemirror2';
 import 'codemirror/mode/jsx/jsx';
 
 // We’re explicitly specifying Webpack loaders here so we could skip specifying them in Webpack configuration.
@@ -40,7 +40,7 @@ export default class Editor extends Component {
 		return false;
 	}
 
-	handleChange(newCode) {
+	handleChange(editor, metadata, newCode) {
 		this.props.onChange(newCode);
 	}
 
@@ -51,6 +51,6 @@ export default class Editor extends Component {
 			...codemirrorOptions,
 			theme: highlightTheme,
 		};
-		return <Codemirror value={code} onChange={this.handleChange} options={options} />;
+		return <CodeMirror value={code} onValueChange={this.handleChange} options={options} />;
 	}
 }

src/rsg-components/Editor/Editor.js

@@ -1,10 +1,49 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { EditorLoaderRenderer } from './EditorLoaderRenderer';
+import Editor from './Editor';
 
-// We do not test Editor component because it requires Codemirror that do not work in Node environment.
+const code = '<button>MyAwesomeCode</button>';
+const newCode = '<button>MyNewAwesomeCode</button>';
+const options = {
+	context: {
+		config: {
+			showCode: false,
+			highlightTheme: 'base16-light',
+		},
+	},
+	childContextTypes: {
+		config: PropTypes.object.isRequired,
+	},
+};
 
-it('renderer should render loader', () => {
-	const actual = shallow(<EditorLoaderRenderer classes={{}} />);
+describe('EditorLoaderRenderer', () => {
+	it('should renderer should render loader', () => {
+		const actual = shallow(<EditorLoaderRenderer classes={{}} />);
 
-	expect(actual).toMatchSnapshot();
+		expect(actual).toMatchSnapshot();
+	});
+});
+
+describe('Editor', () => {
+	it('should renderer and editor', () => {
+		const actual = shallow(<Editor code={code} onChange={() => {}} />, options);
+
+		expect(actual).toMatchSnapshot();
+	});
+
+	it('should update code with debounce', done => {
+		const onChange = jest.fn();
+		const actual = mount(<Editor code={code} onChange={onChange} />, options);
+
+		expect(actual.text()).toMatch(code);
+
+		// Set new value by calling a method on the CodeMirror instance
+		actual.find('div').node.querySelector('.CodeMirror').CodeMirror.setValue(newCode);
+
+		setTimeout(() => {
+			expect(onChange).toBeCalledWith(newCode);
+			done();
+		}, 13);
+	});
 });

src/rsg-components/Editor/Editor.spec.js

@@ -1,6 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renderer should render loader 1`] = `
+exports[`Editor should renderer and editor 1`] = `
+<CodeMirror
+  onValueChange={[Function]}
+  options={
+    Object {
+      "lineNumbers": false,
+      "lineWrapping": true,
+      "matchBrackets": true,
+      "mode": "jsx",
+      "smartIndent": false,
+      "theme": "base16-light",
+      "viewportMargin": Infinity,
+    }
+  }
+  value="<button>MyAwesomeCode</button>"
+/>
+`;
+
+exports[`EditorLoaderRenderer should renderer should render loader 1`] = `
 <div>
   Loading…
 </div>

src/rsg-components/Editor/__snapshots__/Editor.spec.js.snap

@@ -7,6 +7,7 @@ import { PlaygroundRenderer } from './PlaygroundRenderer';
 
 const evalInContext = a =>
 	new Function('require', 'const React = require("react");' + a).bind(null, require); // eslint-disable-line no-new-func
+const reactCodeMirrorSelector = '.react-codemirror2';
 const code = '<button>OK</button>';
 const newCode = '<button>Not OK</button>';
 const props = {
@@ -72,12 +73,12 @@ it('should update code with debounce', done => {
 it('should open a code editor', done => {
 	const actual = mount(<Playground {...props} />, options);
 
-	expect(actual.find('.ReactCodeMirror')).toHaveLength(0);
+	expect(actual.find(reactCodeMirrorSelector)).toHaveLength(0);
 
 	actual.find(`button[name="${EXAMPLE_TAB_CODE_EDITOR}"]`).simulate('click');
 
 	setTimeout(() => {
-		expect(actual.find('.ReactCodeMirror')).toHaveLength(1);
+		expect(actual.find(reactCodeMirrorSelector)).toHaveLength(1);
 		done();
 	}, 1);
 });