Switch tests away from using enzyme.mount (components/higher-order/wi…

…th-focus-outside/test/index.js) (#7827)

* Switch tests away from using enzyme.mount

This switches all tests in `components/higher-order/with-focus-outside/test/index.js` from using enzyme.shallow  and enzyme.mount to `React.TestUtils`.  This is because `enzyme` does not fully support React 16.3+ (and movement to do so is really slow). This will fix issues with breakage due to the enzyme incompatibility as components receive React 16.3+ features (such as `forwardRef` usage in #7557).

* changes from review

components/higher-order/with-focus-outside/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { mount } from 'enzyme';
+import TestUtils from 'react-dom/test-utils';
 
 /**
  * WordPress dependencies
@@ -12,8 +12,9 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import withFocusOutside from '../';
+import ReactDOM from 'react-dom';
 
-jest.useFakeTimers();
+let wrapper, onFocusOutside;
 
 describe( 'withFocusOutside', () => {
 	const EnhancedComponent = withFocusOutside(
@@ -33,58 +34,73 @@ describe( 'withFocusOutside', () => {
 		}
 	);
 
-	it( 'should not call handler if focus shifts to element within component', () => {
-		const callback = jest.fn();
-		const wrapper = mount( <EnhancedComponent onFocusOutside={ callback } /> );
+	// this is needed because TestUtils does not accept a stateless component.
+	// anything run through a HOC ends up as a stateless component.
+	const getTestComponent = ( WrappedComponent, props ) => {
+		class TestComponent extends Component {
+			render() {
+				return <WrappedComponent { ...props } />;
+			}
+		}
+		return <TestComponent />;
+	};
+
+	const simulateEvent = ( event, index = 0 ) => {
+		const element = TestUtils.scryRenderedDOMComponentsWithTag( wrapper, 'input' );
+		TestUtils.Simulate[ event ]( element[ index ] );
+	};
+
+	beforeEach( () => {
+		onFocusOutside = jest.fn();
+		wrapper = TestUtils.renderIntoDocument(
+			getTestComponent( EnhancedComponent, { onFocusOutside } )
+		);
+	} );
 
-		wrapper.find( 'input' ).at( 0 ).simulate( 'focus' );
-		wrapper.find( 'input' ).at( 0 ).simulate( 'blur' );
-		wrapper.find( 'input' ).at( 1 ).simulate( 'focus' );
+	it( 'should not call handler if focus shifts to element within component', () => {
+		simulateEvent( 'focus' );
+		simulateEvent( 'blur' );
+		simulateEvent( 'focus', 1 );
 
 		jest.runAllTimers();
 
-		expect( callback ).not.toHaveBeenCalled();
+		expect( onFocusOutside ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should not call handler if focus transitions via click to button', () => {
-		const callback = jest.fn();
-		const wrapper = mount( <EnhancedComponent onFocusOutside={ callback } /> );
+		simulateEvent( 'focus' );
+		simulateEvent( 'mouseDown', 1 );
+		simulateEvent( 'blur' );
 
-		wrapper.find( 'input' ).at( 0 ).simulate( 'focus' );
-		wrapper.find( 'input' ).at( 1 ).simulate( 'mousedown' );
-		wrapper.find( 'input' ).at( 0 ).simulate( 'blur' );
 		// In most browsers, the input at index 1 would receive a focus event
 		// at this point, but this is not guaranteed, which is the intention of
 		// the normalization behavior tested here.
-		wrapper.find( 'input' ).at( 1 ).simulate( 'mouseup' );
+		simulateEvent( 'mouseUp', 1 );
 
 		jest.runAllTimers();
 
-		expect( callback ).not.toHaveBeenCalled();
+		expect( onFocusOutside ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should call handler if focus doesn\'t shift to element within component', () => {
-		const callback = jest.fn();
-		const wrapper = mount( <EnhancedComponent onFocusOutside={ callback } /> );
-
-		wrapper.find( 'input' ).at( 0 ).simulate( 'focus' );
-		wrapper.find( 'input' ).at( 0 ).simulate( 'blur' );
+		simulateEvent( 'focus' );
+		simulateEvent( 'blur' );
 
 		jest.runAllTimers();
 
-		expect( callback ).toHaveBeenCalled();
+		expect( onFocusOutside ).toHaveBeenCalled();
 	} );
 
 	it( 'should cancel check when unmounting while queued', () => {
-		const callback = jest.fn();
-		const wrapper = mount( <EnhancedComponent onFocusOutside={ callback } /> );
+		simulateEvent( 'focus' );
+		simulateEvent( 'input' );
 
-		wrapper.find( 'input' ).at( 0 ).simulate( 'focus' );
-		wrapper.find( 'input' ).at( 0 ).simulate( 'blur' );
-		wrapper.unmount();
+		/* eslint-disable react/no-find-dom-node */
+		ReactDOM.unmountComponentAtNode( ReactDOM.findDOMNode( wrapper ).parentNode );
+		/* eslint-enable react/no-find-dom-node */
 
 		jest.runAllTimers();
 
-		expect( callback ).not.toHaveBeenCalled();
+		expect( onFocusOutside ).not.toHaveBeenCalled();
 	} );
 } );