Add new test case to make sure initial passed value is selected upon mount + fix other tests

Author: fullofcaffeine

packages/components/src/custom-select-control-v2/legacy-component/index.tsx

@@ -34,12 +34,10 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 				return;
 			}
 
-			// @todo add test to verify that a value passed programmatically is
-			// selected
-
 			// Executes the logic in a microtask after the popup is closed.
 			// This is simply to ensure the isOpen state matches that in Downshift.
 			await Promise.resolve();
+
 			const state = store.getState();
 
 			const option = options.find( ( item ) => item.name === nextValue );
@@ -60,7 +58,10 @@ function CustomSelectControl( props: LegacyCustomSelectProps ) {
 
 	useEffect( () => {
 		// This is a workaround for selecting the right item upon mount
-		store.setValue( value?.name! );
+		if ( value ) {
+			store.setValue( value.name );
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	} );
 
 	const children = options.map(

packages/components/src/custom-select-control-v2/legacy-component/test/index.tsx

@@ -60,7 +60,9 @@ const ControlledCustomSelectControl = ( {
 	onChange,
 	...restProps
 }: React.ComponentProps< typeof UncontrolledCustomSelectControl > ) => {
+	const { value: overrideValue } = restProps;
 	const [ value, setValue ] = useState( options[ 0 ] );
+	const initialValue = overrideValue ?? value;
 	return (
 		<UncontrolledCustomSelectControl
 			{ ...restProps }
@@ -70,7 +72,7 @@ const ControlledCustomSelectControl = ( {
 				setValue( args.selectedItem );
 			} }
 			value={ options.find(
-				( option: any ) => option.key === value.key
+				( option: any ) => option.key === initialValue.key
 			) }
 		/>
 	);
@@ -500,4 +502,22 @@ describe.each( [
 			} )
 		);
 	} );
+
+	it( 'Should display the initial value passed as the selected value', async () => {
+		const initialSelectedItem = legacyProps.options[ 5 ];
+
+		const testProps = {
+			...legacyProps,
+			value: initialSelectedItem,
+		};
+
+		render( <Component { ...testProps } /> );
+
+		const currentSelectedItem = await screen.findByRole( 'combobox', {
+			expanded: false,
+		} );
+
+		// Verify the initial selected value
+		expect( currentSelectedItem ).toHaveTextContent( 'aquarela' );
+	} );
 } );