Use find as an alternative to the deleted getSelectedFontSize metho…

…d to pass the immediate, currently-selected font size object containing preset slug information to the consuming parent component. Updated tests. General post-rebase chicanery
WordPress · Nov 3, 2022 · 3a574fd · 3a574fd
1 parent e87f5ed
commit 3a574fd
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 12 deletions.
diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
@@ -173,8 +173,13 @@ const UnforwardedFontSizePicker = (
 									onChange?.( undefined );
 								} else {
 									onChange?.(
-										hasUnits ? newValue : Number( newValue ),
-										selectedFontSize
+										hasUnits
+											? newValue
+											: Number( newValue ),
+										fontSizes.find(
+											( fontSize ) =>
+												fontSize.size === newValue
+										)
 									);
 								}
 							} }
@@ -195,7 +200,10 @@ const UnforwardedFontSizePicker = (
 							} else {
 								onChange?.(
 									hasUnits ? newValue : Number( newValue ),
-									selectedFontSize
+									fontSizes.find(
+										( fontSize ) =>
+											fontSize.size === newValue
+									)
 								);
 							}
 						} }

diff --git a/packages/components/src/font-size-picker/test/index.tsx b/packages/components/src/font-size-picker/test/index.tsx
@@ -290,18 +290,37 @@ describe( 'FontSizePicker', () => {
 		);
 
 		test.each( [
-			{ option: 'Default', value: '8px', expectedValue: undefined },
-			{ option: 'Tiny 8px', value: undefined, expectedValue: '8px' },
-			{ option: 'Small 1em', value: '8px', expectedValue: '1em' },
-			{ option: 'Medium 2rem', value: '8px', expectedValue: '2rem' },
+			{
+				option: 'Default',
+				value: '8px',
+				expectedArguments: [ undefined ],
+			},
+			{
+				option: 'Tiny 8px',
+				value: undefined,
+				expectedArguments: [ '8px', fontSizes[ 0 ] ],
+			},
+			{
+				option: 'Small 1em',
+				value: '8px',
+				expectedArguments: [ '1em', fontSizes[ 1 ] ],
+			},
+			{
+				option: 'Medium 2rem',
+				value: '8px',
+				expectedArguments: [ '2rem', fontSizes[ 2 ] ],
+			},
 			{
 				option: 'Large',
 				value: '8px',
-				expectedValue: 'clamp(1.75rem, 3vw, 2.25rem)',
+				expectedArguments: [
+					'clamp(1.75rem, 3vw, 2.25rem)',
+					fontSizes[ 3 ],
+				],
 			},
 		] )(
 			'calls onChange( $expectedValue ) when $option is selected',
-			async ( { option, value, expectedValue } ) => {
+			async ( { option, value, expectedArguments } ) => {
 				const user = userEvent.setup( {
 					advanceTimers: jest.advanceTimersByTime,
 				} );
@@ -321,7 +340,7 @@ describe( 'FontSizePicker', () => {
 					screen.getByRole( 'option', { name: option } )
 				);
 				expect( onChange ).toHaveBeenCalledTimes( 1 );
-				expect( onChange ).toHaveBeenCalledWith( expectedValue );
+				expect( onChange ).toHaveBeenCalledWith( ...expectedArguments );
 			}
 		);
 
@@ -491,7 +510,7 @@ describe( 'FontSizePicker', () => {
 		test.each( [
 			{ radio: 'Small', expectedArguments: [ '12px', fontSizes[ 0 ] ] },
 			{ radio: 'Medium', expectedArguments: [ '1em', fontSizes[ 1 ] ] },
-			{ radio: 'Large', expectedArguments: [ '2em', fontSizes[ 2 ] ] },
+			{ radio: 'Large', expectedArguments: [ '2rem', fontSizes[ 2 ] ] },
 			{
 				radio: 'Extra Large',
 				expectedArguments: [

diff --git a/packages/components/src/font-size-picker/types.ts b/packages/components/src/font-size-picker/types.ts
@@ -24,7 +24,7 @@ export type FontSizePickerProps = {
 	 */
 	onChange?: (
 		value: number | string | undefined,
-		selectedItem?: FontSizeOption
+		selectedItem?: FontSize
 	) => void;
 	/**
 	 * The current font size value.