From 145902a1d4276c3cfb46f622dabd22bb37e7c2e5 Mon Sep 17 00:00:00 2001
From: Pooja Killekar <41000648+pooja-muchandikar@users.noreply.github.com>
Date: Fri, 16 Jun 2023 21:26:37 +0530
Subject: [PATCH] Migrate Navigable toolbar test to Playwright (#51514)

Removed tests related to the alt + 10 shortcut as they are covered elsewhere.
---
 .../editor/various/navigable-toolbar.test.js  | 104 ------------------
 .../editor/various/navigable-toolbar.spec.js  |  48 ++++++++
 2 files changed, 48 insertions(+), 104 deletions(-)
 delete mode 100644 packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js
 create mode 100644 test/e2e/specs/editor/various/navigable-toolbar.spec.js

diff --git a/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js b/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js
deleted file mode 100644
index c2735f8fbf75c..0000000000000
--- a/packages/e2e-tests/specs/editor/various/navigable-toolbar.test.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost, pressKeyWithModifier } from '@wordpress/e2e-test-utils';
-
-async function isInBlockToolbar() {
-	return await page.evaluate( () => {
-		return !! document.activeElement.closest(
-			'.block-editor-block-toolbar'
-		);
-	} );
-}
-
-describe( 'Block Toolbar', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	describe( 'Contextual Toolbar', () => {
-		it( 'should not scroll page', async () => {
-			while (
-				await page.evaluate( () => {
-					const { activeElement } =
-						document.activeElement?.contentDocument ?? document;
-					const scrollable =
-						wp.dom.getScrollContainer( activeElement );
-					return ! scrollable || scrollable.scrollTop === 0;
-				} )
-			) {
-				await page.keyboard.press( 'Enter' );
-			}
-
-			await page.keyboard.type( 'a' );
-
-			const scrollTopBefore = await page.evaluate( () => {
-				const { activeElement } =
-					document.activeElement?.contentDocument ?? document;
-				window.scrollContainer =
-					wp.dom.getScrollContainer( activeElement );
-				return window.scrollContainer.scrollTop;
-			} );
-
-			await pressKeyWithModifier( 'alt', 'F10' );
-			expect( await isInBlockToolbar() ).toBe( true );
-
-			const scrollTopAfter = await page.evaluate( () => {
-				return window.scrollContainer.scrollTop;
-			} );
-			expect( scrollTopBefore ).toBe( scrollTopAfter );
-		} );
-
-		it( 'navigates into the toolbar by keyboard (Alt+F10)', async () => {
-			// Assumes new post focus starts in title. Create first new
-			// block by Enter.
-			await page.keyboard.press( 'Enter' );
-
-			// [TEMPORARY]: A new paragraph is not technically a block yet
-			// until starting to type within it.
-			await page.keyboard.type( 'Example' );
-
-			// Upward.
-			await pressKeyWithModifier( 'alt', 'F10' );
-
-			expect( await isInBlockToolbar() ).toBe( true );
-		} );
-	} );
-
-	describe( 'Unified Toolbar', () => {
-		beforeEach( async () => {
-			// Enable unified toolbar
-			await page.evaluate( () => {
-				const { select, dispatch } = wp.data;
-				const isCurrentlyUnified =
-					select( 'core/edit-post' ).isFeatureActive(
-						'fixedToolbar'
-					);
-				if ( ! isCurrentlyUnified ) {
-					dispatch( 'core/edit-post' ).toggleFeature(
-						'fixedToolbar'
-					);
-				}
-			} );
-		} );
-
-		it( 'navigates into the toolbar by keyboard (Alt+F10)', async () => {
-			// Assumes new post focus starts in title. Create first new
-			// block by Enter.
-			await page.keyboard.press( 'Enter' );
-
-			// [TEMPORARY]: A new paragraph is not technically a block yet
-			// until starting to type within it.
-			await page.keyboard.type( 'Example' );
-
-			// Upward.
-			await pressKeyWithModifier( 'alt', 'F10' );
-
-			expect(
-				await page.evaluate( () => {
-					return document.activeElement.getAttribute( 'aria-label' );
-				} )
-			).toBe( 'Show document tools' );
-		} );
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/navigable-toolbar.spec.js b/test/e2e/specs/editor/various/navigable-toolbar.spec.js
new file mode 100644
index 0000000000000..d6524eeabb64b
--- /dev/null
+++ b/test/e2e/specs/editor/various/navigable-toolbar.spec.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Block Toolbar', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.describe( 'Contextual Toolbar', () => {
+		test( 'should not scroll page', async ( { page, pageUtils } ) => {
+			while (
+				await page.evaluate( () => {
+					const { activeElement } =
+						document.activeElement?.contentDocument ?? document;
+					const scrollable =
+						window.wp.dom.getScrollContainer( activeElement );
+					return ! scrollable || scrollable.scrollTop === 0;
+				} )
+			) {
+				await page.keyboard.press( 'Enter' );
+			}
+
+			await page.keyboard.type( 'a' );
+
+			const scrollTopBefore = await page.evaluate( () => {
+				const { activeElement } =
+					document.activeElement?.contentDocument ?? document;
+				window.scrollContainer =
+					window.wp.dom.getScrollContainer( activeElement );
+				return window.scrollContainer.scrollTop;
+			} );
+
+			await pageUtils.pressKeys( 'alt+F10' );
+			await expect(
+				page
+					.getByRole( 'toolbar', { name: 'Block Tools' } )
+					.getByRole( 'button', { name: 'Paragraph' } )
+			).toBeFocused();
+
+			const scrollTopAfter = await page.evaluate( () => {
+				return window.scrollContainer.scrollTop;
+			} );
+			expect( scrollTopBefore ).toBe( scrollTopAfter );
+		} );
+	} );
+} );