Update unit tests and snapshots

WordPress · Feb 20, 2025 · 6c5679b · 6c5679b
1 parent 605f706
commit 6c5679b
Show file tree

Hide file tree

Showing 2 changed files with 124 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -190,9 +190,12 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                       red
                     </span>
                     <span
-                      class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex emotion-14 emotion-5"
+                      aria-label="Click to edit hex value"
+                      class="components-truncate components-color-palette__custom-color-value components-color-palette__custom-color-value--is-hex components-color-palette__custom-color-value--is-editable emotion-14 emotion-5"
                       data-wp-c16t="true"
                       data-wp-component="Truncate"
+                      role="button"
+                      tabindex="0"
                     >
                       #f00
                     </span>

diff --git a/packages/block-editor/src/components/color-palette/test/control.js b/packages/block-editor/src/components/color-palette/test/control.js
@@ -1,7 +1,14 @@
 /**
  * External dependencies
  */
-import { render, waitFor, queryByAttribute } from '@testing-library/react';
+import {
+	render,
+	waitFor,
+	queryByAttribute,
+	fireEvent,
+	screen,
+} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -37,4 +44,116 @@ describe( 'ColorPaletteControl', () => {
 
 		expect( container ).toMatchSnapshot();
 	} );
+
+	it( 'allows editing hex value on click', async () => {
+		await renderAndValidate(
+			<ColorPaletteControl
+				label="Test Color"
+				value="#f00"
+				colors={ [ { color: '#f00', name: 'red' } ] }
+				disableCustomColors={ false }
+				onChange={ noop }
+			/>
+		);
+
+		const hexValue = screen.getByRole( 'button', {
+			name: /click to edit hex value/i,
+		} );
+		await userEvent.click( hexValue );
+
+		const input = screen.getByRole( 'textbox', {
+			name: /edit color hex value/i,
+		} );
+		expect( input ).toBeInTheDocument();
+		expect( input ).toHaveValue( '#f00' );
+	} );
+
+	it( 'validates hex input on blur', async () => {
+		const onChange = jest.fn();
+		await renderAndValidate(
+			<ColorPaletteControl
+				label="Test Color"
+				value="#f00"
+				colors={ [ { color: '#f00', name: 'red' } ] }
+				disableCustomColors={ false }
+				onChange={ onChange }
+			/>
+		);
+
+		const hexValue = screen.getByRole( 'button', {
+			name: /click to edit hex value/i,
+		} );
+		await userEvent.click( hexValue );
+
+		const input = screen.getByRole( 'textbox', {
+			name: /edit color hex value/i,
+		} );
+		await userEvent.clear( input );
+		await userEvent.type( input, '#ff0000' );
+		fireEvent.blur( input );
+
+		expect( onChange ).toHaveBeenCalledWith( '#ff0000' );
+	} );
+
+	it( 'reverts to previous value on invalid hex', async () => {
+		const onChange = jest.fn();
+		await renderAndValidate(
+			<ColorPaletteControl
+				label="Test Color"
+				value="#f00"
+				colors={ [ { color: '#f00', name: 'red' } ] }
+				disableCustomColors={ false }
+				onChange={ onChange }
+			/>
+		);
+
+		const hexValue = screen.getByRole( 'button', {
+			name: /click to edit hex value/i,
+		} );
+		await userEvent.click( hexValue );
+
+		const input = screen.getByRole( 'textbox', {
+			name: /edit color hex value/i,
+		} );
+		await userEvent.clear( input );
+		await userEvent.type( input, 'invalid' );
+		fireEvent.blur( input );
+
+		expect( onChange ).not.toHaveBeenCalled();
+		expect(
+			screen.getByRole( 'button', { name: /click to edit hex value/i } )
+		).toHaveTextContent( '#f00' );
+	} );
+
+	it( 'handles keyboard interaction', async () => {
+		const onChange = jest.fn();
+		await renderAndValidate(
+			<ColorPaletteControl
+				label="Test Color"
+				value="#f00"
+				colors={ [ { color: '#f00', name: 'red' } ] }
+				disableCustomColors={ false }
+				onChange={ onChange }
+			/>
+		);
+
+		const hexValue = screen.getByRole( 'button', {
+			name: /click to edit hex value/i,
+		} );
+
+		fireEvent.keyDown( hexValue, { key: 'Enter' } );
+		const input = screen.getByRole( 'textbox', {
+			name: /edit color hex value/i,
+		} );
+		expect( input ).toBeInTheDocument();
+
+		await userEvent.clear( input );
+		await userEvent.type( input, '#00f' );
+		fireEvent.keyDown( input, { key: 'Escape' } );
+
+		expect( onChange ).not.toHaveBeenCalled();
+		expect(
+			screen.getByRole( 'button', { name: /click to edit hex value/i } )
+		).toHaveTextContent( '#f00' );
+	} );
 } );