From fc36077e5e85835f7704929d555b2c23080ad7c1 Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Sat, 30 Dec 2023 15:38:17 +0400
Subject: [PATCH] Migrate 'preferences' e2e tests to Playwright (#57446)

* Migrate 'preferences' e2e tests to Playwright

* Remove old test file

Co-authored-by: Pooja Killekar <41000648+pooja-muchandikar@users.noreply.github.com>

---------

Co-authored-by: Pooja Killekar <41000648+pooja-muchandikar@users.noreply.github.com>
---
 .../specs/editor/various/preferences.test.js  | 62 -------------------
 .../specs/editor/various/preferences.spec.js  | 50 +++++++++++++++
 2 files changed, 50 insertions(+), 62 deletions(-)
 delete mode 100644 packages/e2e-tests/specs/editor/various/preferences.test.js
 create mode 100644 test/e2e/specs/editor/various/preferences.spec.js

diff --git a/packages/e2e-tests/specs/editor/various/preferences.test.js b/packages/e2e-tests/specs/editor/various/preferences.test.js
deleted file mode 100644
index 54990a4004422..0000000000000
--- a/packages/e2e-tests/specs/editor/various/preferences.test.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createNewPost } from '@wordpress/e2e-test-utils';
-
-describe( 'preferences', () => {
-	beforeAll( async () => {
-		await createNewPost();
-	} );
-
-	/**
-	 * Returns a promise which resolves to the text content of the active
-	 * editor sidebar tab, or null if there is no active sidebar tab (closed).
-	 *
-	 * @return {Promise} Promise resolving to active tab.
-	 */
-	async function getActiveSidebarTabText() {
-		try {
-			return await page.$eval(
-				'div[aria-label="Editor settings"] [role="tab"][aria-selected="true"]',
-				( node ) => node.textContent
-			);
-		} catch ( error ) {
-			// page.$eval throws when it does not find the selector, which we
-			// can intentionally intercept and consider as there being no
-			// active sidebar tab (no sidebar).
-			return null;
-		}
-	}
-
-	it( 'remembers sidebar dismissal between sessions', async () => {
-		const blockTab = await page.waitForXPath(
-			`//button[@role="tab"][contains(text(), 'Block')]`
-		);
-
-		// Open by default.
-		expect( await getActiveSidebarTabText() ).toBe( 'Post' );
-
-		// Change to "Block" tab.
-		await blockTab.click();
-		expect( await getActiveSidebarTabText() ).toBe( 'Block' );
-
-		// Regression test: Reload resets to document tab.
-		//
-		// See: https://github.com/WordPress/gutenberg/issues/6377
-		// See: https://github.com/WordPress/gutenberg/pull/8995
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-		expect( await getActiveSidebarTabText() ).toBe( 'Post' );
-
-		// Dismiss.
-		await page.click(
-			'div[aria-label="Editor settings"] div[role="tablist"] + button[aria-label="Close Settings"]'
-		);
-		expect( await getActiveSidebarTabText() ).toBe( null );
-
-		// Remember after reload.
-		await page.reload();
-		await page.waitForSelector( '.edit-post-layout' );
-		expect( await getActiveSidebarTabText() ).toBe( null );
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/preferences.spec.js b/test/e2e/specs/editor/various/preferences.spec.js
new file mode 100644
index 0000000000000..89df0ae7ed9f7
--- /dev/null
+++ b/test/e2e/specs/editor/various/preferences.spec.js
@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Preferences', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'remembers sidebar dismissal between sessions', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+
+		const editorSettings = page.getByRole( 'region', {
+			name: 'Editor settings',
+		} );
+		const activeTab = editorSettings.getByRole( 'tab', { selected: true } );
+
+		// Open by default.
+		await expect( activeTab ).toHaveText( 'Post' );
+
+		// Change to "Block" tab.
+		await editorSettings.getByRole( 'tab', { name: 'Block' } ).click();
+		await expect( activeTab ).toHaveText( 'Block' );
+
+		/**
+		 * Regression test: Reload resets to document tab.
+		 *
+		 * See: https://github.com/WordPress/gutenberg/issues/6377
+		 * See: https://github.com/WordPress/gutenberg/pull/8995
+		 */
+		await page.reload();
+		await expect( activeTab ).toHaveText( 'Post' );
+
+		// Dismiss.
+		await editorSettings
+			.getByRole( 'button', {
+				name: 'Close Settings',
+			} )
+			.click();
+		await expect( activeTab ).toBeHidden();
+
+		// Remember after reload.
+		await page.reload();
+		await expect( activeTab ).toBeHidden();
+	} );
+} );