From e07956daad8ffd13a9d7bc0f7cdfd6458c8ab3c4 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Wed, 29 Nov 2023 08:08:47 -0600
Subject: [PATCH] Migrate Is Typing Test to Playwright (#56616)

To simplify, the the test method for typing in dropdowns from a toolbar was switched to use an existing block with a dropdown rather than add a dropdown with an input to the toolbar manually.
---
 .../specs/editor/various/is-typing.test.js    | 101 ------------------
 .../specs/editor/various/is-typing.spec.js    |  63 +++++++++++
 2 files changed, 63 insertions(+), 101 deletions(-)
 delete mode 100644 packages/e2e-tests/specs/editor/various/is-typing.test.js
 create mode 100644 test/e2e/specs/editor/various/is-typing.spec.js

diff --git a/packages/e2e-tests/specs/editor/various/is-typing.test.js b/packages/e2e-tests/specs/editor/various/is-typing.test.js
deleted file mode 100644
index c6208470ffb8e..0000000000000
--- a/packages/e2e-tests/specs/editor/various/is-typing.test.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	createNewPost,
-	showBlockToolbar,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'isTyping', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should hide the toolbar when typing', async () => {
-		const blockToolbarSelector = '.block-editor-block-toolbar';
-
-		await clickBlockAppender();
-
-		// Type in a paragraph.
-		await page.keyboard.type( 'Type' );
-
-		// Toolbar is hidden
-		let blockToolbar = await page.$( blockToolbarSelector );
-		expect( blockToolbar ).toBe( null );
-
-		// Moving the mouse shows the toolbar.
-		await showBlockToolbar();
-
-		// Toolbar is visible.
-		blockToolbar = await page.$( blockToolbarSelector );
-		expect( blockToolbar ).not.toBe( null );
-
-		// Typing again hides the toolbar
-		await page.keyboard.type( ' and continue' );
-
-		// Toolbar is hidden again
-		blockToolbar = await page.$( blockToolbarSelector );
-		expect( blockToolbar ).toBe( null );
-	} );
-
-	it( 'should not close the dropdown when typing in it', async () => {
-		// Adds a Dropdown with an input to all blocks.
-		await page.evaluate( () => {
-			const { Dropdown, ToolbarButton, Fill } = wp.components;
-			const { createElement: el, Fragment } = wp.element;
-			function AddDropdown( BlockListBlock ) {
-				return ( props ) => {
-					return el(
-						Fragment,
-						{},
-						el(
-							Fill,
-							{ name: 'BlockControls' },
-							el( Dropdown, {
-								renderToggle: ( { onToggle } ) =>
-									el(
-										ToolbarButton,
-										{
-											onClick: onToggle,
-											className: 'dropdown-open',
-										},
-										'Open Dropdown'
-									),
-								renderContent: () =>
-									el( 'input', {
-										className: 'dropdown-input',
-									} ),
-							} )
-						),
-						el( BlockListBlock, props )
-					);
-				};
-			}
-
-			wp.hooks.addFilter(
-				'editor.BlockListBlock',
-				'e2e-test/add-dropdown',
-				AddDropdown
-			);
-		} );
-
-		await clickBlockAppender();
-
-		// Type in a paragraph.
-		await page.keyboard.type( 'Type' );
-
-		// Show Toolbar.
-		await showBlockToolbar();
-
-		// Open the dropdown.
-		await page.click( '.dropdown-open' );
-
-		// Type inside the dropdown's input
-		await page.type( '.dropdown-input', 'Random' );
-
-		// The input should still be visible.
-		const input = await page.$( '.dropdown-input' );
-		expect( input ).not.toBe( null );
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/is-typing.spec.js b/test/e2e/specs/editor/various/is-typing.spec.js
new file mode 100644
index 0000000000000..0cd5e0d6f6495
--- /dev/null
+++ b/test/e2e/specs/editor/various/is-typing.spec.js
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'isTyping', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should hide the toolbar when typing', async ( { editor, page } ) => {
+		// Enter to reach paragraph block.
+		await page.keyboard.press( 'Enter' );
+		// Insert paragraph
+		await page.keyboard.type( 'Type' );
+
+		const blockToolbar = page.locator(
+			'role=toolbar[name="Block tools"i]'
+		);
+
+		// Toolbar should not be showing
+		await expect( blockToolbar ).toBeHidden();
+
+		// Moving the mouse shows the toolbar.
+		await editor.showBlockToolbar();
+
+		// Toolbar is visible.
+		await expect( blockToolbar ).toBeVisible();
+
+		// Typing again hides the toolbar
+		await page.keyboard.type( ' and continue' );
+
+		// Toolbar is hidden again
+		await expect( blockToolbar ).toBeHidden();
+	} );
+
+	test( 'should not close the dropdown when typing in it', async ( {
+		editor,
+		page,
+	} ) => {
+		// Add a block with a dropdown in the toolbar that contains an input.
+		await editor.insertBlock( { name: 'core/query' } );
+
+		// Tab to Start Blank Button
+		await page.keyboard.press( 'Tab' );
+		// Select the Start Blank Button
+		await page.keyboard.press( 'Enter' );
+		// Select the First variation
+		await page.keyboard.press( 'Enter' );
+		// Moving the mouse shows the toolbar.
+		await editor.showBlockToolbar();
+		// Open the dropdown.
+		await page.getByRole( 'button', { name: 'Display settings' } ).click();
+
+		const itemsPerPageInput = page.getByLabel( 'Items per Page' );
+		// Make sure we're where we think we are
+		await expect( itemsPerPageInput ).toBeFocused();
+		// Type inside the dropdown's input
+		await page.keyboard.type( '00' );
+		// The input should still be visible.
+		await expect( itemsPerPageInput ).toBeVisible();
+	} );
+} );