From e2ed5432ca3e45fe2c146eb04ee17821ef72d59a Mon Sep 17 00:00:00 2001
From: George Mamadashvili <georgemamadashvili@gmail.com>
Date: Fri, 13 Oct 2023 22:20:25 +0400
Subject: [PATCH] Migrate 'text color' e2e test to Playwright (#55323)

* Migrate 'text color' e2e test to Playwright

* Remove old test files
---
 .../__snapshots__/text-color.test.js.snap     | 13 -----
 .../various/format-library/text-color.test.js | 46 ----------------
 .../various/format-library/text-color.spec.js | 54 +++++++++++++++++++
 3 files changed, 54 insertions(+), 59 deletions(-)
 delete mode 100644 packages/e2e-tests/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap
 delete mode 100644 packages/e2e-tests/specs/editor/various/format-library/text-color.test.js
 create mode 100644 test/e2e/specs/editor/various/format-library/text-color.spec.js

diff --git a/packages/e2e-tests/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap b/packages/e2e-tests/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap
deleted file mode 100644
index 03bd1c7ddd1d6..0000000000000
--- a/packages/e2e-tests/specs/editor/various/format-library/__snapshots__/text-color.test.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RichText should remove highlighting element 1`] = `
-"<!-- wp:paragraph -->
-<p><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-cyan-bluish-gray-color">1</mark></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`RichText should remove highlighting element 2`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->"
-`;
diff --git a/packages/e2e-tests/specs/editor/various/format-library/text-color.test.js b/packages/e2e-tests/specs/editor/various/format-library/text-color.test.js
deleted file mode 100644
index ba6a8bda06180..0000000000000
--- a/packages/e2e-tests/specs/editor/various/format-library/text-color.test.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	getEditedPostContent,
-	clickBlockAppender,
-	pressKeyWithModifier,
-	clickBlockToolbarButton,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'RichText', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'should remove highlighting element', async () => {
-		await clickBlockAppender();
-
-		// Add text and select to color.
-		await page.keyboard.type( '1' );
-		await pressKeyWithModifier( 'primary', 'a' );
-		await clickBlockToolbarButton( 'More' );
-
-		const button = await page.waitForXPath(
-			`//button[text()='Highlight']`
-		);
-		// Clicks may fail if the button is out of view. Assure it is before click.
-		await button.evaluate( ( element ) => element.scrollIntoView() );
-		await button.click();
-
-		// Use a color name with multiple words to ensure that it becomes
-		// active. Previously we had a broken regular expression.
-		const option = await page.waitForSelector(
-			'[aria-label="Color: Cyan bluish gray"]'
-		);
-
-		await option.click();
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		await option.click();
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );
diff --git a/test/e2e/specs/editor/various/format-library/text-color.spec.js b/test/e2e/specs/editor/various/format-library/text-color.spec.js
new file mode 100644
index 0000000000000..aba77251e3833
--- /dev/null
+++ b/test/e2e/specs/editor/various/format-library/text-color.spec.js
@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Format Library - Text color', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should remove highlighting element', async ( {
+		editor,
+		page,
+		pageUtils,
+	} ) => {
+		await editor.canvas
+			.getByRole( 'button', { name: 'Add default block' } )
+			.click();
+
+		await page.keyboard.type( '1' );
+		await pageUtils.pressKeys( 'primary+a' );
+		await editor.clickBlockToolbarButton( 'More' );
+		await page
+			.getByRole( 'menuitemcheckbox', { name: 'Highlight' } )
+			.click();
+
+		// Use a color name with multiple words to ensure that it becomes
+		// active. Previously we had a broken regular expression.
+		const color = page
+			.getByRole( 'listbox', { name: 'Custom color picker' } )
+			.getByRole( 'option', { name: 'Color: Cyan bluish gray' } );
+
+		await color.click();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content:
+						'<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-cyan-bluish-gray-color">1</mark>',
+				},
+			},
+		] );
+
+		await color.click();
+		await expect.poll( editor.getBlocks ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: '1',
+				},
+			},
+		] );
+	} );
+} );