From d20c61fd80e26f74786e9e573192392696bb160a Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Thu, 30 Jan 2025 13:28:46 +0530
Subject: [PATCH] E2E: Improve contrast checker e2e test with multiple
 scenarios

---
 .../editor/various/contrast-checker.spec.js   | 52 +++++++++++++------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/test/e2e/specs/editor/various/contrast-checker.spec.js b/test/e2e/specs/editor/various/contrast-checker.spec.js
index d8a81dece11243..0a6dab5c675fc4 100644
--- a/test/e2e/specs/editor/various/contrast-checker.spec.js
+++ b/test/e2e/specs/editor/various/contrast-checker.spec.js
@@ -3,33 +3,55 @@
  */
 const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
 
+const WARNING_TEXT = 'This color combination may be hard for people to read';
+
 test.describe( 'ContrastChecker', () => {
 	test.beforeEach( async ( { admin } ) => {
 		await admin.createNewPost();
 	} );
 
-	test( 'should show warning when text and background colors have low contrast', async ( {
+	test( 'should show warning for insufficient contrast', async ( {
 		editor,
 		page,
 	} ) => {
 		await editor.openDocumentSettingsSidebar();
-		await editor.insertBlock( {
-			name: 'core/paragraph',
-			attributes: { content: 'Contrast Checker Test' },
+
+		await test.step( 'Check black text on black background', async () => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: 'Black text on Black background' },
+			} );
+
+			await page
+				.getByRole( 'button', { name: 'Text', exact: true } )
+				.click();
+			await page.getByRole( 'option', { name: 'Black' } ).click();
+			await page.getByRole( 'button', { name: 'Background' } ).click();
+			await page.getByRole( 'option', { name: 'Black' } ).click();
+
+			const lowContrastWarning = page.locator(
+				'.block-editor-contrast-checker'
+			);
+			await expect( lowContrastWarning ).toBeVisible();
+			await expect( lowContrastWarning ).toContainText( WARNING_TEXT );
 		} );
 
-		await page.getByRole( 'button', { name: 'Text', exact: true } ).click();
-		await page.getByRole( 'option', { name: 'Black' } ).click();
+		await test.step( 'Check white text on default background', async () => {
+			await editor.insertBlock( {
+				name: 'core/paragraph',
+				attributes: { content: 'White text on Default background' },
+			} );
 
-		await page.getByRole( 'button', { name: 'Background' } ).click();
-		await page.getByRole( 'option', { name: 'Black' } ).click();
+			await page
+				.getByRole( 'button', { name: 'Text', exact: true } )
+				.click();
+			await page.getByRole( 'option', { name: 'White' } ).click();
 
-		const lowContrastWarning = page.locator(
-			'.block-editor-contrast-checker'
-		);
-		await expect( lowContrastWarning ).toBeVisible();
-		await expect( lowContrastWarning ).toContainText(
-			'This color combination may be hard for people to read'
-		);
+			const lowContrastWarning = page.locator(
+				'.block-editor-contrast-checker'
+			);
+			await expect( lowContrastWarning ).toBeVisible();
+			await expect( lowContrastWarning ).toContainText( WARNING_TEXT );
+		} );
 	} );
 } );