Testing: Fix failing tests caused by the node matcher

WordPress · Oct 24, 2017 · 7ddf1ca · 7ddf1ca
1 parent 161c101
commit 7ddf1ca
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 24 deletions.
diff --git a/blocks/api/test/source.js b/blocks/api/test/source.js
@@ -12,6 +12,7 @@ import { renderToString } from '@wordpress/element';
  * Internal dependencies
  */
 import * as sources from '../source';
+import { valueToElement } from '../../editable';
 
 describe( 'sources', () => {
 	it( 'should generate sources which apply internal flag', () => {
@@ -30,10 +31,10 @@ describe( 'sources', () => {
 		it( 'should return HTML equivalent WPElement of matched element', () => {
 			// Assumption here is that we can cleanly convert back and forth
 			// between a string and WPElement representation
-			const html = '<blockquote><p>A delicious sundae dessert</p></blockquote>';
+			const html = '<blockquote><p>A delicious <b>sundae</b> dessert.</p><p>I want it!</p></blockquote>';
 			const match = parse( html, sources.children() );
 
-			expect( renderToString( match ) ).toBe( html );
+			expect( renderToString( valueToElement( match ) ) ).toBe( html );
 		} );
 	} );
 
@@ -47,10 +48,10 @@ describe( 'sources', () => {
 		it( 'should return HTML equivalent WPElement of matched element', () => {
 			// Assumption here is that we can cleanly convert back and forth
 			// between a string and WPElement representation
-			const html = '<blockquote><p>A delicious sundae dessert</p></blockquote>';
+			const html = '<blockquote><p>A delicious <b>sundae</b> dessert.</p></blockquote>';
 			const match = parse( html, sources.node() );
 
-			expect( renderToString( match ) ).toBe( `<body>${ html }</body>` );
+			expect( renderToString( valueToElement( [ match ] ) ) ).toBe( `<body>${ html }</body>` );
 		} );
 	} );
 } );
diff --git a/blocks/editable/index.js b/blocks/editable/index.js
@@ -58,6 +58,28 @@ function isLinkBoundary( fragment ) {
 		fragment.childNodes[ 0 ].text[ 0 ] === '\uFEFF';
 }
 
+/**
+ * Transforms internal block's representation into an Element.
+ *
+ * @param {Array} value Value to transform
+ * @return {WPElement} Element.
+ */
+export function valueToElement( value ) {
+	if ( ! Array.isArray( value ) ) {
+		return value;
+	}
+
+	return value.map( ( element, i ) => {
+		if ( typeof element === 'string' ) {
+			return element;
+		}
+
+		const [ type, props, ...children ] = element;
+
+		return createElement( type, { ...props, key: i }, ...valueToElement( children ) );
+	} );
+}
+
 export default class Editable extends Component {
 	constructor( props ) {
 		super( ...arguments );
@@ -508,7 +530,7 @@ export default class Editable extends Component {
 			content = '';
 		}
 
-		content = renderToString( valueToReact( content ) );
+		content = renderToString( valueToElement( content ) );
 		this.editor.setContent( content, { format: 'raw' } );
 	}
 
@@ -647,7 +669,7 @@ export default class Editable extends Component {
 					getSettings={ this.getSettings }
 					onSetup={ this.onSetup }
 					style={ style }
-					defaultValue={ valueToReact( value ) }
+					defaultValue={ valueToElement( value ) }
 					isPlaceholderVisible={ isPlaceholderVisible }
 					label={ placeholder }
 					className={ className }
@@ -670,20 +692,4 @@ Editable.contextTypes = {
 	onUndo: noop,
 };
 
-Editable.Value = ( { value } ) => valueToReact( value );
-
-function valueToReact( value ) {
-	if ( ! Array.isArray( value ) ) {
-		return value;
-	}
-
-	return value.map( ( element, i ) => {
-		if ( typeof element === 'string' ) {
-			return element;
-		}
-
-		const [ type, props, ...children ] = element;
-
-		return createElement( type, { ...props, key: i }, ...valueToReact( children ) );
-	} );
-}
+Editable.Value = ( { value } ) => valueToElement( value );
diff --git a/blocks/editable/test/index.js b/blocks/editable/test/index.js
@@ -67,7 +67,7 @@ describe( 'Editable', () => {
 		it( 'should render value with deeply nested DOM nodes', () => {
 			const value = [
 				'This is a ',
-				[ 'strong', {}, 'paragraph', ],
+				[ 'strong', {}, 'paragraph' ],
 				' with a ',
 				[ 'a', { href: 'https://w.org/' }, 'link with ', [
 					'b',