From 6ede5e222ecb8002ba8d344443631a31ca43dc03 Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Wed, 30 Aug 2023 01:24:10 -0700
Subject: [PATCH] Migrate shortcut help e2e tests to Playwright (#53832)

* Migrate test case

* Migrate test case

* Use Role locators

* Update to have tests pass locally

- swap pressKeyWithModifier for pressKeys
- use locator assertions
- remove some extraneous steps in latter tests
- cleanup comments

* Combine tests

* Locate platform-agnostically

* Locate more rolefully

* Assert focus return

---------

Co-authored-by: alvitazwar <55917380+alvitazwar@users.noreply.github.com>
---
 .../editor/various/shortcut-help.test.js      | 47 -------------------
 .../editor/various/shortcut-help.spec.js      | 42 +++++++++++++++++
 2 files changed, 42 insertions(+), 47 deletions(-)
 delete mode 100644 packages/e2e-tests/specs/editor/various/shortcut-help.test.js
 create mode 100644 test/e2e/specs/editor/various/shortcut-help.spec.js

diff --git a/packages/e2e-tests/specs/editor/various/shortcut-help.test.js b/packages/e2e-tests/specs/editor/various/shortcut-help.test.js
deleted file mode 100644
index 838a3edac2a2a4..00000000000000
--- a/packages/e2e-tests/specs/editor/various/shortcut-help.test.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	clickOnMoreMenuItem,
-	clickOnCloseModalButton,
-	pressKeyWithModifier,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'keyboard shortcut help modal', () => {
-	beforeAll( async () => {
-		await createNewPost();
-	} );
-
-	it( 'displays the shortcut help modal when opened using the menu item in the more menu', async () => {
-		await clickOnMoreMenuItem( 'Keyboard shortcuts' );
-		const shortcutHelpModalElements = await page.$$(
-			'.edit-post-keyboard-shortcut-help-modal'
-		);
-		expect( shortcutHelpModalElements ).toHaveLength( 1 );
-	} );
-
-	it( 'closes the shortcut help modal when the close icon is clicked', async () => {
-		await clickOnCloseModalButton();
-		const shortcutHelpModalElements = await page.$$(
-			'.edit-post-keyboard-shortcut-help-modal'
-		);
-		expect( shortcutHelpModalElements ).toHaveLength( 0 );
-	} );
-
-	it( 'displays the shortcut help modal when opened using the shortcut key (access+h)', async () => {
-		await pressKeyWithModifier( 'access', 'h' );
-		const shortcutHelpModalElements = await page.$$(
-			'.edit-post-keyboard-shortcut-help-modal'
-		);
-		expect( shortcutHelpModalElements ).toHaveLength( 1 );
-	} );
-
-	it( 'closes the shortcut help modal when the shortcut key (access+h) is pressed again', async () => {
-		await pressKeyWithModifier( 'access', 'h' );
-		const shortcutHelpModalElements = await page.$$(
-			'.edit-post-keyboard-shortcut-help-modal'
-		);
-		expect( shortcutHelpModalElements ).toHaveLength( 0 );
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/shortcut-help.spec.js b/test/e2e/specs/editor/various/shortcut-help.spec.js
new file mode 100644
index 00000000000000..1aaf5e93c975c5
--- /dev/null
+++ b/test/e2e/specs/editor/various/shortcut-help.spec.js
@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'keyboard shortcut help modal', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'opens from the options menu, closes with its close button and returns focus', async ( {
+		page,
+	} ) => {
+		await page
+			.locator( 'role=region[name="Editor top bar"]' )
+			.locator( '[aria-label="Options"]' )
+			.click();
+		const menuItem = page.locator( 'role=menuitem', {
+			hasText: /^Keyboard shortcuts/i,
+		} );
+		const dialog = page.locator( 'role=dialog[name="Keyboard shortcuts"]' );
+
+		await menuItem.click();
+		await expect( dialog ).toBeVisible();
+
+		await page.locator( 'role=button[name="Close"]' ).click();
+		await expect( dialog ).toBeHidden();
+		await expect( menuItem ).toBeFocused();
+	} );
+
+	test( 'toggles open/closed using the keyboard shortcut (access+h)', async ( {
+		page,
+		pageUtils,
+	} ) => {
+		await pageUtils.pressKeys( 'access+h' );
+		const dialog = page.locator( 'role=dialog[name="Keyboard shortcuts"]' );
+		await expect( dialog ).toBeVisible();
+
+		await pageUtils.pressKeys( 'access+h' );
+		await expect( dialog ).toBeHidden();
+	} );
+} );