From 81abcec6c5248dd048df5a35d01cefcab1e83247 Mon Sep 17 00:00:00 2001
From: David Calhoun <github@davidcalhoun.me>
Date: Wed, 26 Jul 2023 20:01:13 -0400
Subject: [PATCH] test: Fix Cover block color picker test (#52943)

* test: Mock required styles for Cover block tests

JavaScript logic fails due to undefined references from mocked Sass
files.

* 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.
---
 .../src/cover/test/edit.native.js             | 36 +++++++++----------
 .../src/color-palette/index.native.js         |  1 -
 .../src/color-picker/index.native.js          |  6 +---
 test/native/__mocks__/styleMock.js            |  2 ++
 test/native/setup.js                          |  8 +++--
 5 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/packages/block-library/src/cover/test/edit.native.js b/packages/block-library/src/cover/test/edit.native.js
index 190570efff0f9..e742a4052d0b0 100644
--- 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
index 019ee71c1eb90..51a61785df9af 100644
--- 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
index 2ccd35441abb2..1dfd2353cad1c 100644
--- 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/__mocks__/styleMock.js b/test/native/__mocks__/styleMock.js
index e06c41cf1f95e..e0c690b628234 100644
--- a/test/native/__mocks__/styleMock.js
+++ b/test/native/__mocks__/styleMock.js
@@ -202,4 +202,6 @@ module.exports = {
 	embed__icon: {
 		fill: 'black',
 	},
+	picker: {},
+	pickerPointer: {},
 };
diff --git a/test/native/setup.js b/test/native/setup.js
index ece2e289e6c09..ae1388864cb20 100644
--- 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,