Merge pull request #2344 from WordPress/add/editable-proptypes

Editable: Add prop types to warn on non-array value

blocks/editable/index.js

@@ -55,6 +55,18 @@ export default class Editable extends Component {
 	constructor( props ) {
 		super( ...arguments );
 
+		const { value } = props;
+		if ( 'production' !== process.env.NODE_ENV && undefined !== value &&
+					! Array.isArray( value ) ) {
+			// eslint-disable-next-line no-console
+			console.error(
+				`Invalid value of type ${ typeof value } passed to Editable ` +
+				'(expected array). Attribute values should be sourced using ' +
+				'the `children` source when used with Editable.\n\n' +
+				'See: http://gutenberg-devdoc.surge.sh/reference/attribute-sources/#children'
+			);
+		}
+
 		this.onInit = this.onInit.bind( this );
 		this.getSettings = this.getSettings.bind( this );
 		this.onSetup = this.onSetup.bind( this );
@@ -72,7 +84,7 @@ export default class Editable extends Component {
 		this.state = {
 			formats: {},
 			bookmark: null,
-			empty: ! props.value || ! props.value.length,
+			empty: ! value || ! value.length,
 		};
 	}
 

blocks/editable/test/index.js

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import Editable from '../';
+
+describe( 'Editable', () => {
+	describe( '.propTypes', () => {
+		/* eslint-disable no-console */
+		let consoleError;
+		beforeEach( () => {
+			consoleError = console.error;
+			console.error = jest.fn();
+		} );
+
+		afterEach( () => {
+			console.error = consoleError;
+		} );
+
+		it( 'should warn when rendered with string value', () => {
+			shallow( <Editable value="Uh oh!" /> );
+
+			expect( console.error ).toHaveBeenCalled();
+		} );
+
+		it( 'should not warn when rendered with undefined value', () => {
+			shallow( <Editable /> );
+
+			expect( console.error ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should not warn when rendered with array value', () => {
+			shallow( <Editable value={ [ 'Oh, good' ] } /> );
+
+			expect( console.error ).not.toHaveBeenCalled();
+		} );
+		/* eslint-enable no-console */
+	} );
+} );