From f5af26c3901f869ad95127f853faacc7ae4b6b3c Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Thu, 23 Jan 2025 21:32:31 +0530
Subject: [PATCH] Testing: Add e2e test for basic ContrastChecker functionality

---
 .../editor/various/contrast-checker.spec.js   | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 test/e2e/specs/editor/various/contrast-checker.spec.js

diff --git a/test/e2e/specs/editor/various/contrast-checker.spec.js b/test/e2e/specs/editor/various/contrast-checker.spec.js
new file mode 100644
index 00000000000000..516eca17ad53e2
--- /dev/null
+++ b/test/e2e/specs/editor/various/contrast-checker.spec.js
@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'ContrastChecker', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'shows warning when text and background colors have low contrast', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Contrast Checker Test' },
+		} );
+
+		await editor.openDocumentSettingsSidebar();
+
+		await page.click( 'role=button[name="Color settings"]' );
+
+		await page.click( 'role=button[name="Text color"]' );
+		await page.click( 'button[aria-label="Color: Black"]' );
+
+		await page.click( 'role=button[name="Background color"]' );
+		await page.click( 'button[aria-label="Color: Black"]' );
+
+		const contrastWarning = page.locator(
+			'.block-editor-contrast-checker'
+		);
+		await expect( contrastWarning ).toBeVisible();
+
+		const warningText = await contrastWarning.textContent();
+		expect( warningText ).toContain(
+			'This color combination may be hard for people to read'
+		);
+	} );
+} );