E2E: Improve contrast checker e2e test with multiple scenarios

WordPress · Jan 30, 2025 · d20c61f · d20c61f
1 parent d85916d
commit d20c61f
Showing 1 changed file with 37 additions and 15 deletions.
diff --git 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 );
+		} );
 	} );
 } );