test: Fix Cover block HEX test assertions

Synchronous queries of user-facing text is generally preferred over test IDs or asynchronous queries. Additionally, the `react-native-hsv-color-picker` must be mocked to trigger the required interaction events. Lastly, selecting the white color results in a non-custom color, which does not appear to display the HEX value in the picker footer label.
WordPress · Jul 25, 2023 · be989b6 · be989b6
1 parent 7eaba51
commit be989b6
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 28 deletions.
diff --git a/packages/block-library/src/cover/test/edit.native.js b/packages/block-library/src/cover/test/edit.native.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Image } from 'react-native';
+import { Image, Pressable } from 'react-native';
 import {
 	getEditorHtml,
 	initializeEditor,
@@ -12,6 +12,7 @@ import {
 	getBlock,
 	openBlockSettings,
 } from 'test/helpers';
+import HsvColorPicker from 'react-native-hsv-color-picker';
 
 /**
  * WordPress dependencies
@@ -65,7 +66,6 @@ const COVER_BLOCK_CUSTOM_HEIGHT_HTML = `<!-- wp:cover {"url":"https://cldup.com/
 const COLOR_PINK = '#f78da7';
 const COLOR_RED = '#cf2e2e';
 const COLOR_GRAY = '#abb8c3';
-const COLOR_WHITE = '#ffffff';
 const GRADIENT_GREEN =
 	'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)';
 
@@ -533,38 +533,36 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'displays the hex color value in the custom color picker', async () => {
+		HsvColorPicker.mockImplementation( ( props ) => {
+			return <Pressable { ...props } testID="hsv-color-picker" />;
+		} );
 		const screen = await initializeEditor( {
 			initialHtml: COVER_BLOCK_PLACEHOLDER_HTML,
 		} );
 
-		const block = await screen.findByLabelText( 'Cover block. Empty' );
-		expect( block ).toBeDefined();
-
 		// Select a color from the placeholder palette.
-		const colorPalette = await screen.findByTestId( 'color-palette' );
-		const colorButton = within( colorPalette ).getByTestId(
-			'custom-color-picker'
+		const colorButton = screen.getByA11yHint(
+			'Navigates to custom color picker'
 		);
-
-		expect( colorButton ).toBeDefined();
 		fireEvent.press( colorButton );
 
 		// Wait for Block Settings to be visible.
 		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
 		await waitForModalVisible( blockSettingsModal );
 
-		// Assertion to check the text content of bottomLabelText before tapping color picker
-		const bottomLabelText = screen.getByTestId(
-			'color-picker-bottom-label-text'
-		);
-		expect( bottomLabelText ).toHaveTextContent( 'Select a color' );
+		// Assert label text before tapping color picker
+		expect( screen.getByText( 'Select a color' ) ).toBeVisible();
 
 		// Tap color picker
-		const colorPicker = screen.getByTestId( 'color-picker' );
-		fireEvent.press( colorPicker );
+		const colorPicker = screen.getByTestId( 'hsv-color-picker' );
+		fireEvent( colorPicker, 'onHuePickerPress', {
+			hue: 120,
+			saturation: 12,
+			value: 50,
+		} );
 
-		// Assertion to check the hex value in bottomLabelText
-		expect( bottomLabelText ).toHaveTextContent( COLOR_WHITE );
+		// Assert label hex value after tapping color picker
+		expect( screen.getByText( '#00FF00' ) ).toBeVisible();
 	} );
 } );
 

diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js
@@ -319,7 +319,6 @@ function ColorPalette( {
 								selected: isSelectedCustom(),
 							} }
 							accessibilityHint={ accessibilityHint }
-							testID={ 'custom-color-picker' }
 						>
 							<View style={ customIndicatorWrapperStyle }>
 								<ColorIndicator

diff --git a/packages/components/src/color-picker/index.native.js b/packages/components/src/color-picker/index.native.js
@@ -154,7 +154,6 @@ function ColorPicker( {
 				satValPickerSliderSize={ pickerPointerSize * 2 }
 				satValPickerBorderRadius={ borderRadius }
 				huePickerBorderRadius={ borderRadius }
-				testID="color-picker"
 			/>
 			<View style={ footerStyle }>
 				<TouchableWithoutFeedback
@@ -176,10 +175,7 @@ function ColorPicker( {
 					</View>
 				</TouchableWithoutFeedback>
 				{ bottomLabelText ? (
-					<Text
-						testID="color-picker-bottom-label-text"
-						style={ selectColorTextStyle }
-					>
+					<Text style={ selectColorTextStyle }>
 						{ bottomLabelText }
 					</Text>
 				) : (

diff --git a/test/native/setup.js b/test/native/setup.js
@@ -201,9 +201,11 @@ jest.mock( 'react-native-linear-gradient', () => () => 'LinearGradient', {
 	virtual: true,
 } );
 
-jest.mock( 'react-native-hsv-color-picker', () => () => 'HsvColorPicker', {
-	virtual: true,
-} );
+jest.mock(
+	'react-native-hsv-color-picker',
+	() => jest.fn( () => 'HsvColorPicker' ),
+	{ virtual: true }
+);
 
 jest.mock( '@react-native-community/blur', () => () => 'BlurView', {
 	virtual: true,