From 809cf2cec7909cd2249ca0640c3224da2fba0102 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 18 Jun 2020 09:56:57 +0100
Subject: [PATCH] Make the block grouping test more stable

---
 .../src/click-block-toolbar-button.js          | 17 ++++++++++-------
 .../e2e-test-utils/src/show-block-toolbar.js   |  5 +++++
 .../e2e-test-utils/src/transform-block-to.js   |  9 +++++++--
 .../editor/various/block-grouping.test.js      | 18 ++++++++++++++----
 4 files changed, 36 insertions(+), 13 deletions(-)
 create mode 100644 packages/e2e-test-utils/src/show-block-toolbar.js

diff --git a/packages/e2e-test-utils/src/click-block-toolbar-button.js b/packages/e2e-test-utils/src/click-block-toolbar-button.js
index ad7c21a71f9a5b..1e25da1ba2e36a 100644
--- a/packages/e2e-test-utils/src/click-block-toolbar-button.js
+++ b/packages/e2e-test-utils/src/click-block-toolbar-button.js
@@ -1,16 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { showBlockToolbar } from './show-block-toolbar';
+
 /**
  * Clicks a block toolbar button.
  *
  * @param {string} buttonAriaLabel The aria label of the button to click.
  */
 export async function clickBlockToolbarButton( buttonAriaLabel ) {
+	await showBlockToolbar();
+
 	const BLOCK_TOOLBAR_SELECTOR = '.block-editor-block-toolbar';
 	const BUTTON_SELECTOR = `${ BLOCK_TOOLBAR_SELECTOR } button[aria-label="${ buttonAriaLabel }"]`;
-	if ( ( await page.$( BLOCK_TOOLBAR_SELECTOR ) ) === null ) {
-		// Move the mouse to show the block toolbar
-		await page.mouse.move( 0, 0 );
-		await page.mouse.move( 10, 10 );
-	}
 
 	// Hover the block switcher to show the movers
 	const switcher = await page.$(
@@ -20,6 +22,7 @@ export async function clickBlockToolbarButton( buttonAriaLabel ) {
 		await switcher.hover();
 	}
 
-	await page.waitForSelector( BUTTON_SELECTOR );
-	await page.click( BUTTON_SELECTOR );
+	const button = await page.waitForSelector( BUTTON_SELECTOR );
+	await button.evaluate( ( element ) => element.scrollIntoView() );
+	await button.click();
 }
diff --git a/packages/e2e-test-utils/src/show-block-toolbar.js b/packages/e2e-test-utils/src/show-block-toolbar.js
new file mode 100644
index 00000000000000..f76f0061d2ac71
--- /dev/null
+++ b/packages/e2e-test-utils/src/show-block-toolbar.js
@@ -0,0 +1,5 @@
+export async function showBlockToolbar() {
+	// Move the mouse to disable the isTyping mode
+	await page.mouse.move( 50, 50 );
+	await page.mouse.move( 100, 100 );
+}
diff --git a/packages/e2e-test-utils/src/transform-block-to.js b/packages/e2e-test-utils/src/transform-block-to.js
index 478b90964a89d8..a04c78b907dc57 100644
--- a/packages/e2e-test-utils/src/transform-block-to.js
+++ b/packages/e2e-test-utils/src/transform-block-to.js
@@ -1,11 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import { showBlockToolbar } from './show-block-toolbar';
+
 /**
  * Converts editor's block type.
  *
  * @param {string} name Block name.
  */
 export async function transformBlockTo( name ) {
-	await page.mouse.move( 0, 0 );
-	await page.mouse.move( 10, 10 );
+	await showBlockToolbar();
+
 	const switcherToggle = await page.waitForSelector(
 		'.block-editor-block-switcher__toggle'
 	);
diff --git a/packages/e2e-tests/specs/editor/various/block-grouping.test.js b/packages/e2e-tests/specs/editor/various/block-grouping.test.js
index 01a5c38def41a0..110cda048453a8 100644
--- a/packages/e2e-tests/specs/editor/various/block-grouping.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-grouping.test.js
@@ -171,14 +171,24 @@ describe( 'Block Grouping', () => {
 			// Full width image.
 			await insertBlock( 'Image' );
 			await clickBlockToolbarButton( 'Change alignment' );
-			const FULL_WIDTH_BUTTON_XPATH = `//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Full width')]`;
-			await ( await page.$x( FULL_WIDTH_BUTTON_XPATH ) )[ 0 ].click();
+			const fullButton = await page.waitForXPath(
+				`//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Full width')]`
+			);
+			await fullButton.evaluate( ( element ) =>
+				element.scrollIntoView()
+			);
+			await fullButton.click();
 
 			// Wide width image.
 			await insertBlock( 'Image' );
 			await clickBlockToolbarButton( 'Change alignment' );
-			const WIDE_BUTTON_XPATH = `//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Wide width')]`;
-			await ( await page.$x( WIDE_BUTTON_XPATH ) )[ 0 ].click();
+			const wideButton = await page.waitForXPath(
+				`//button[contains(@class,'components-dropdown-menu__menu-item') and contains(text(), 'Wide width')]`
+			);
+			await wideButton.evaluate( ( element ) =>
+				element.scrollIntoView()
+			);
+			await wideButton.click();
 
 			await insertBlock( 'Paragraph' );
 			await page.keyboard.type( 'Some paragraph' );