Refactor unit tests

Author: t-hamano

packages/components/src/color-palette/test/index.tsx

@@ -16,16 +16,6 @@ const EXAMPLE_COLORS = [
 ];
 const INITIAL_COLOR = EXAMPLE_COLORS[ 0 ].color;
 
-const CSS_VARIABLE_COLORS = [
-	{ name: 'red', color: 'var(--red)' },
-	{ name: 'blue', color: 'var(--blue)' },
-];
-
-const CSS_VARS_STYLE_PROPS = {
-	'--red': '#f00',
-	'--blue': '#00f',
-} as React.CSSProperties;
-
 function getWrappingPopoverElement( element: HTMLElement ) {
 	return element.closest( '.components-popover' );
 }
@@ -211,52 +201,4 @@ describe( 'ColorPalette', () => {
 			screen.getByRole( 'button', { name: 'Clear' } )
 		).toBeInTheDocument();
 	} );
-
-	it( 'should show the readable text label even when the background color has a CSS variable.', async () => {
-		// const user = userEvent.setup();
-		const onChange = jest.fn();
-
-		render(
-			<div style={ CSS_VARS_STYLE_PROPS }>
-				<ColorPalette
-					colors={ CSS_VARIABLE_COLORS }
-					value={ CSS_VARIABLE_COLORS[ 0 ].color }
-					onChange={ onChange }
-				/>
-			</div>
-		);
-
-		const dropdownButton = screen.getByRole( 'button', {
-			name: /^Custom color picker/,
-			expanded: false,
-		} );
-
-		const dropdownButtonStyles = window.getComputedStyle( dropdownButton );
-		expect( dropdownButtonStyles.color ).toBe( 'rgb(0, 0, 0)' );
-	} );
-
-	it( 'should render dropdown with Hex value transformed from CSS a variable to actual color', async () => {
-		const user = userEvent.setup();
-		const onChange = jest.fn();
-
-		render(
-			<div style={ CSS_VARS_STYLE_PROPS }>
-				<ColorPalette
-					colors={ CSS_VARIABLE_COLORS }
-					value={ CSS_VARIABLE_COLORS[ 0 ].color }
-					onChange={ onChange }
-				/>
-			</div>
-		);
-
-		const dropdownButton = screen.getByRole( 'button', {
-			name: /^Custom color picker/,
-			expanded: false,
-		} );
-
-		await user.click( dropdownButton );
-
-		const dropdownColorInput = screen.getByLabelText( 'Hex color' );
-		expect( dropdownColorInput ).toHaveValue( 'FF0000' );
-	} );
 } );

packages/components/src/color-palette/test/utils.ts

@@ -4,6 +4,7 @@
 import {
 	extractColorNameFromCurrentValue,
 	showTransparentBackground,
+	normalizeColorValue,
 } from '../utils';
 
 describe( 'ColorPalette: Utils', () => {
@@ -38,4 +39,25 @@ describe( 'ColorPalette: Utils', () => {
 			expect( showTransparentBackground( '#f5f5f524' ) ).toBe( false ); // 0.14 alpha.
 		} );
 	} );
+
+	describe( 'normalizeColorValue', () => {
+		test( 'should return the value as is if the color value is not a CSS variable', () => {
+			const element = document.createElement( 'div' );
+			expect( normalizeColorValue( '#ff0000', element ) ).toBe(
+				'#ff0000'
+			);
+		} );
+		test( 'should return the background color computed from a element if the color value is a CSS variable', () => {
+			const element = document.createElement( 'div' );
+			const { ownerDocument } = element;
+			const { defaultView } = ownerDocument;
+			// @ts-ignore
+			defaultView.getComputedStyle = () => ( {
+				backgroundColor: '#ff0000',
+			} );
+			expect( normalizeColorValue( 'var(--red)', element ) ).toBe(
+				'#ff0000'
+			);
+		} );
+	} );
 } );