From 1e432c3bb7e987604248c0a3f4433afc60a3bf17 Mon Sep 17 00:00:00 2001
From: hbhalodia <hit.bhalodia@rtcamp.com>
Date: Fri, 29 Nov 2024 11:15:15 +0530
Subject: [PATCH] Refactor the test for NumberControl component to reduce
 changes

---
 .../src/number-control/test/index.tsx         | 48 +++++++------------
 1 file changed, 18 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/number-control/test/index.tsx b/packages/components/src/number-control/test/index.tsx
index cdcf39a1bbbc7d..bf97b520673ea4 100644
--- a/packages/components/src/number-control/test/index.tsx
+++ b/packages/components/src/number-control/test/index.tsx
@@ -12,9 +12,13 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import NumberControl from '..';
+import _NumberControl from '..';
 import type { NumberControlProps } from '../types';
 
+const NumberControl = (
+	props: React.ComponentProps< typeof _NumberControl >
+) => <_NumberControl __next40pxDefaultSize { ...props } />;
+
 function StatefulNumberControl( props: NumberControlProps ) {
 	const [ value, setValue ] = useState( props.value );
 	const handleOnChange = ( v: string | undefined ) => setValue( v );
@@ -22,26 +26,21 @@ function StatefulNumberControl( props: NumberControlProps ) {
 	return (
 		<NumberControl
 			{ ...props }
-			__next40pxDefaultSize
 			value={ value }
 			onChange={ handleOnChange }
 		/>
 	);
 }
 
-const ControlledNumberControl = ( props: NumberControlProps ) => {
-	return <NumberControl __next40pxDefaultSize { ...props } />;
-};
-
 describe( 'NumberControl', () => {
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
-			render( <ControlledNumberControl /> );
+			render( <NumberControl /> );
 			expect( screen.getByRole( 'spinbutton' ) ).toBeVisible();
 		} );
 
 		it( 'should render custom className', () => {
-			render( <ControlledNumberControl className="hello" /> );
+			render( <NumberControl className="hello" /> );
 			expect( screen.getByRole( 'spinbutton' ) ).toBeVisible();
 		} );
 	} );
@@ -52,10 +51,7 @@ describe( 'NumberControl', () => {
 			const spy = jest.fn();
 
 			render(
-				<ControlledNumberControl
-					value={ 5 }
-					onChange={ ( v ) => spy( v ) }
-				/>
+				<NumberControl value={ 5 } onChange={ ( v ) => spy( v ) } />
 			);
 
 			const input = screen.getByRole( 'spinbutton' );
@@ -70,7 +66,7 @@ describe( 'NumberControl', () => {
 			const onChangeSpy = jest.fn();
 
 			render(
-				<ControlledNumberControl
+				<NumberControl
 					value={ 5 }
 					min={ 4 }
 					max={ 10 }
@@ -113,7 +109,7 @@ describe( 'NumberControl', () => {
 			const onChangeSpy = jest.fn();
 
 			render(
-				<ControlledNumberControl
+				<NumberControl
 					value={ 5 }
 					min={ 1 }
 					max={ 10 }
@@ -155,9 +151,7 @@ describe( 'NumberControl', () => {
 		it( 'should clamp value within range on ENTER keypress', async () => {
 			const user = userEvent.setup();
 
-			render(
-				<ControlledNumberControl value={ 5 } min={ 0 } max={ 10 } />
-			);
+			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
 
 			const input = screen.getByRole( 'spinbutton' );
 
@@ -175,9 +169,7 @@ describe( 'NumberControl', () => {
 		it( 'should clamp value within range on blur', async () => {
 			const user = userEvent.setup();
 
-			render(
-				<ControlledNumberControl value={ 5 } min={ 0 } max={ 10 } />
-			);
+			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
 
 			const input = screen.getByRole( 'spinbutton' );
 			await user.clear( input );
@@ -196,7 +188,7 @@ describe( 'NumberControl', () => {
 		it( 'should parse non-numeric values to a number on ENTER keypress when required', async () => {
 			const user = userEvent.setup();
 
-			render( <ControlledNumberControl value={ 5 } required /> );
+			render( <NumberControl value={ 5 } required /> );
 
 			const input = screen.getByRole( 'spinbutton' );
 			await user.clear( input );
@@ -209,9 +201,7 @@ describe( 'NumberControl', () => {
 		it( 'should parse non-numeric values to empty string on ENTER keypress when not required', async () => {
 			const user = userEvent.setup();
 
-			render(
-				<ControlledNumberControl value={ 5 } required={ false } />
-			);
+			render( <NumberControl value={ 5 } required={ false } /> );
 
 			const input = screen.getByRole( 'spinbutton' );
 			await user.clear( input );
@@ -230,7 +220,7 @@ describe( 'NumberControl', () => {
 		it( 'should not enforce numerical value for empty string when required is omitted', async () => {
 			const user = userEvent.setup();
 
-			render( <ControlledNumberControl value={ 5 } /> );
+			render( <NumberControl value={ 5 } /> );
 
 			const input = screen.getByRole( 'spinbutton' );
 			await user.clear( input );
@@ -245,7 +235,7 @@ describe( 'NumberControl', () => {
 		it( 'should enforce numerical value for empty string when required', async () => {
 			const user = userEvent.setup();
 
-			render( <ControlledNumberControl value={ 5 } required /> );
+			render( <NumberControl value={ 5 } required /> );
 
 			const input = screen.getByRole( 'spinbutton' );
 			await user.clear( input );
@@ -570,9 +560,7 @@ describe( 'NumberControl', () => {
 		] as NumberControlProps[ 'spinControls' ][] )(
 			'should not appear when spinControls = %s',
 			( spinControls ) => {
-				render(
-					<ControlledNumberControl spinControls={ spinControls } />
-				);
+				render( <NumberControl spinControls={ spinControls } /> );
 				expect(
 					screen.queryByLabelText( 'Increment' )
 				).not.toBeInTheDocument();
@@ -599,7 +587,7 @@ describe( 'NumberControl', () => {
 				const user = userEvent.setup();
 				const onChange = jest.fn();
 				render(
-					<ControlledNumberControl
+					<NumberControl
 						{ ...props }
 						spinControls="custom"
 						onChange={ onChange }