Fix: Heading color end to end test

WordPress · Dec 14, 2021 · 957fac3 · 957fac3
1 parent 22814c7
commit 957fac3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap b/packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
@@ -13,8 +13,8 @@ exports[`Heading can be created by prefixing number sign and a space 1`] = `
 `;
 
 exports[`Heading should correctly apply custom colors 1`] = `
-"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#7700ff\\"}}} -->
-<h3 class=\\"has-text-color\\" id=\\"heading\\" style=\\"color:#7700ff\\">Heading</h3>
+"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#0782f6\\"}}} -->
+<h3 class=\\"has-text-color\\" id=\\"heading\\" style=\\"color:#0782f6\\">Heading</h3>
 <!-- /wp:heading -->"
 `;
 

diff --git a/packages/e2e-tests/specs/editor/blocks/heading.test.js b/packages/e2e-tests/specs/editor/blocks/heading.test.js
@@ -9,6 +9,8 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Heading', () => {
+	const COLOR_ITEM_SELECTOR =
+		'.block-editor-panel-color-gradient-settings__item';
 	const CUSTOM_COLOR_BUTTON_X_SELECTOR = `.components-color-palette__custom-color`;
 	const CUSTOM_COLOR_DETAILS_BUTTON_SELECTOR =
 		'.components-color-picker button[aria-label="Show detailed inputs"]';
@@ -68,14 +70,19 @@ describe( 'Heading', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	it.skip( 'should correctly apply custom colors', async () => {
+	it( 'should correctly apply custom colors', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '### Heading' );
 		const colorPanelToggle = await page.waitForXPath(
 			COLOR_PANEL_TOGGLE_X_SELECTOR
 		);
 		await colorPanelToggle.click();
 
+		const textColorButton = await page.waitForSelector(
+			COLOR_ITEM_SELECTOR
+		);
+		await textColorButton.click();
+
 		const customTextColorButton = await page.waitForSelector(
 			CUSTOM_COLOR_BUTTON_X_SELECTOR
 		);
@@ -85,27 +92,32 @@ describe( 'Heading', () => {
 		await page.waitForSelector( COLOR_INPUT_FIELD_SELECTOR );
 		await page.click( COLOR_INPUT_FIELD_SELECTOR );
 		await pressKeyWithModifier( 'primary', 'A' );
-		await page.keyboard.type( '7700ff' );
+		await page.keyboard.type( '0782f6' );
 		await page.click( 'h3[data-type="core/heading"]' );
-		await page.waitForXPath( '//button[text()="#7700ff"]' );
+		await page.waitForXPath( '//button[text()="#0782f6"]' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	it.skip( 'should correctly apply named colors', async () => {
+	it( 'should correctly apply named colors', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '## Heading' );
 		const [ colorPanelToggle ] = await page.$x(
 			COLOR_PANEL_TOGGLE_X_SELECTOR
 		);
 		await colorPanelToggle.click();
 
+		const textColorButton = await page.waitForSelector(
+			COLOR_ITEM_SELECTOR
+		);
+		await textColorButton.click();
+
 		const colorButtonSelector = `//button[@aria-label='Color: Luminous vivid orange']`;
 		const [ colorButton ] = await page.$x( colorButtonSelector );
 		await colorButton.click();
-		await page.click( 'h2[data-type="core/heading"]' );
 		await page.waitForXPath(
 			`${ colorButtonSelector }[@aria-pressed='true']`
 		);
+		await page.click( 'h2[data-type="core/heading"]' );
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 } );