From e019e2f570c66c1c5dfee6a11333bb4ab738e4d0 Mon Sep 17 00:00:00 2001
From: Marcelo Serpa <boss@fullofcaffeine.com>
Date: Fri, 10 May 2024 13:15:00 -0600
Subject: [PATCH] Fix option handling logic for legacy adater and update test
 to reflect the option with custom property scenario

---
 .../legacy-component/index.tsx                      |  2 +-
 .../legacy-component/test/index.tsx                 | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
index 2e35965e86e982..fb6268522c7ba1 100644
--- a/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
+++ b/packages/components/src/custom-select-control-v2/legacy-component/index.tsx
@@ -48,6 +48,7 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 				selectedItem: option!,
 				type: '',
 			};
+			debugger;
 			onChange( changeObject );
 		},
 	} );
@@ -131,7 +132,6 @@ export default CustomSelectControl;
 
 // for backwards compatibility
 export function ClassicCustomSelectControl( props: LegacyCustomSelectProps ) {
-	console.debug( props );
 	return (
 		<CustomSelectControl
 			{ ...props }
diff --git a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx
index 825a9b63464ca4..c1b83984b305f0 100644
--- a/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx
+++ b/packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx
@@ -286,7 +286,7 @@ describe.each( [
 			expect.objectContaining( {
 				inputValue: '',
 				isOpen: false,
-				selectedItem: { key: 'violets', name: 'violets' },
+				selectedItem: { key: 'flower1', name: 'violets' },
 				type: '',
 			} )
 		);
@@ -302,8 +302,17 @@ describe.each( [
 			expect.objectContaining( {
 				inputValue: '',
 				isOpen: false,
+				// Some consumers don't use the value but expect the whole option object to be available and will access
+				// custom properties on it. Here's an example of such a consumer:
+				// - https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/components/font-appearance-control/index.js#L216
+				// This should only be supported for the legacy adapter, and when we change the implementation with the new V2 one, we will (ideally)
+				// also refactor consumers to not rely on custom properties, but only on the pre-defined key,value structure.
 				selectedItem: expect.objectContaining( {
 					name: 'aquamarine',
+					style: {
+						backgroundColor: 'rgb(127, 255, 212)',
+						rotate: '13deg',
+					},
 				} ),
 				type: '',
 			} )
@@ -328,7 +337,7 @@ describe.each( [
 		await type( 'p' );
 		await press.Enter();
 
-		expect( mockOnChange ).toHaveReturnedWith( 'poppy' );
+		expect( mockOnChange ).toHaveReturnedWith( 'flower1' );
 	} );
 
 	describe( 'Keyboard behavior and accessibility', () => {