Try avoiding the deprecated findDOMNode API

WordPress · Nov 1, 2018 · 6a049e5 · 6a049e5
1 parent 85d58bb
commit 6a049e5
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/packages/components/src/drop-zone/provider.js b/packages/components/src/drop-zone/provider.js
@@ -6,7 +6,7 @@ import { isEqual, find, some, filter, throttle, includes } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Component, createContext, findDOMNode } from '@wordpress/element';
+import { Component, createContext, createRef } from '@wordpress/element';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 const { Provider, Consumer } = createContext( {
@@ -61,6 +61,7 @@ class DropZoneProvider extends Component {
 		this.resetDragState = this.resetDragState.bind( this );
 		this.toggleDraggingOverDocument = throttle( this.toggleDraggingOverDocument.bind( this ), 200 );
 
+		this.container = createRef();
 		this.dropZones = [];
 		this.dropZoneCallbacks = {
 			addDropZone: this.addDropZone,
@@ -79,10 +80,6 @@ class DropZoneProvider extends Component {
 		window.addEventListener( 'dragover', this.onDragOver );
 		window.addEventListener( 'drop', this.onDrop );
 		window.addEventListener( 'mouseup', this.resetDragState );
-
-		// Disable reason: Can't use a ref since this component just renders its children
-		// eslint-disable-next-line react/no-find-dom-node
-		this.container = findDOMNode( this );
 	}
 
 	componentWillUnmount() {
@@ -212,7 +209,7 @@ class DropZoneProvider extends Component {
 		const { position, hoveredDropZone } = this.state;
 		const dragEventType = getDragEventType( event );
 		const dropZone = this.dropZones[ hoveredDropZone ];
-		const isValidDropzone = !! dropZone && this.container.contains( event.target );
+		const isValidDropzone = !! dropZone && this.container.current.contains( event.target );
 		this.resetDragState();
 
 		if ( isValidDropzone ) {
@@ -234,9 +231,11 @@ class DropZoneProvider extends Component {
 
 	render() {
 		return (
-			<Provider value={ this.dropZoneCallbacks }>
-				{ this.props.children }
-			</Provider>
+			<div ref={ this.container } className="components-drop-zone__provider">
+				<Provider value={ this.dropZoneCallbacks }>
+					{ this.props.children }
+				</Provider>
+			</div>
 		);
 	}
 }

diff --git a/packages/components/src/drop-zone/style.scss b/packages/components/src/drop-zone/style.scss
@@ -58,3 +58,7 @@
 .components-drop-zone__content-text {
 	font-family: $default-font;
 }
+
+.components-drop-zone__provider {
+	height: 100%;
+}
diff --git a/test/e2e/specs/adding-blocks.test.js b/test/e2e/specs/adding-blocks.test.js
@@ -13,9 +13,23 @@ describe( 'adding blocks', () => {
 		await newPost();
 	} );
 
+	/**
+	 * Given a Puppeteer ElementHandle, clicks below its bounding box.
+	 *
+	 * @param {Puppeteer.ElementHandle} elementHandle Element handle.
+	 *
+	 * @return {Promise} Promise resolving when click occurs.
+	 */
+	async function clickBelow( elementHandle ) {
+		const box = await elementHandle.boundingBox();
+		const x = box.x + ( box.width / 2 );
+		const y = box.y + box.height + 100;
+		return page.mouse.click( x, y );
+	}
+
 	it( 'Should insert content using the placeholder and the regular inserter', async () => {
 		// Click below editor to focus last field (block appender)
-		await page.click( '.editor-writing-flow__click-redirect' );
+		await clickBelow( await page.$( '.editor-default-block-appender' ) );
 		expect( await page.$( '[data-type="core/paragraph"]' ) ).not.toBeNull();
 		await page.keyboard.type( 'Paragraph block' );