Convert ‘it closes by blur’ test to use React.TestUtils ( editor/components/autocomplete/test/index.js) (#7782)

* Convert ‘it closes by blur’ test to use React.TestUtils

* fix linting

* Testing: Reduce code duplication in autocomplete tests

Author: nerrad

components/autocomplete/test/index.js

@@ -3,6 +3,7 @@
  */
 import { mount } from 'enzyme';
 import { noop } from 'lodash';
+import TestUtils from 'react-dom/test-utils';
 
 /**
  * WordPress dependencies
@@ -38,9 +39,10 @@ class FakeEditor extends Component {
 
 function makeAutocompleter( completers, {
 	AutocompleteComponent = Autocomplete,
+	mountImplementation = mount,
 	onReplace = noop,
 } = {} ) {
-	return mount(
+	return mountImplementation(
 		<AutocompleteComponent instanceId="1"
 			completers={ completers }
 			onReplace={ onReplace }
@@ -107,6 +109,35 @@ function simulateInput( wrapper, nodeList, cursorPosition ) {
 	wrapper.update();
 }
 
+/**
+ * Same as simulateInput except configured for use with React.TestUtils
+ * @param {*}              wrapper        Wrapper around react node
+ *                                        containing  a FakeEditor.
+ * @param {Array.<Node>}   nodeList       Array of dom nodes.
+ * @param {Array.<number>} cursorPosition Array specifying the child indexes and
+ *                                        offset of the cursor.
+ */
+function simulateInputForUtils( wrapper, nodeList, cursorPosition ) {
+	// update the editor content
+	const fakeEditor = TestUtils.findRenderedDOMComponentWithClass(
+		wrapper,
+		'fake-editor'
+	);
+	fakeEditor.innerHTML = '';
+	nodeList.forEach( ( element ) => fakeEditor.appendChild( element ) );
+	if ( cursorPosition && cursorPosition.length >= 1 ) {
+		fakeEditor.setAttribute( 'data-cursor', cursorPosition.join( ',' ) );
+	} else {
+		fakeEditor.removeAttribute( 'data-cursor' );
+	}
+	TestUtils.Simulate.input(
+		fakeEditor,
+		{
+			target: fakeEditor,
+		}
+	);
+}
+
 /**
  * Fire a native keydown event on the fake editor in the wrapper.
  *
@@ -573,12 +604,25 @@ describe( 'Autocomplete', () => {
 
 		it( 'closes by blur', () => {
 			jest.spyOn( Autocomplete.prototype, 'handleFocusOutside' );
+			// required because TestUtils doesn't handle stateless components for some
+			// reason.  Without this, wrapper would end up with the value of null.
+			class Enhanced extends Component {
+				render() {
+					return <EnhancedAutocomplete { ...this.props } />;
+				}
+			}
 
 			const wrapper = makeAutocompleter( [], {
-				AutocompleteComponent: EnhancedAutocomplete,
+				AutocompleteComponent: Enhanced,
+				mountImplementation: TestUtils.renderIntoDocument,
 			} );
-			simulateInput( wrapper, [ par( tx( '/' ) ) ] );
-			wrapper.find( '.fake-editor' ).simulate( 'blur' );
+			simulateInputForUtils( wrapper, [ par( tx( '/' ) ) ] );
+			TestUtils.Simulate.blur(
+				TestUtils.findRenderedDOMComponentWithClass(
+					wrapper,
+					'fake-editor'
+				)
+			);
 
 			jest.runAllTimers();