@wordpress/block-editor 15.9.1-next.738bb1424.0 → 15.10.0

package/src/components/spacing-sizes-control/test/index.js

@@ -1,1128 +0,0 @@
-/**
- * Comprehensive test suite for SpacingSizesControl component
- *
- * This test file provides extensive coverage of the SpacingSizesControl component's
- * user-facing functionality, including:
- *
- * - Basic rendering with different value types and configurations
- * - Linked vs custom view behavior and toggling
- * - Value changes in both linked and custom modes
- * - Single side, axial, and custom side configurations
- * - Preset functionality (range controls, custom toggles, preset recognition)
- * - Large preset set handling (select dropdown vs range)
- * - Edge cases (undefined values, mixed values, complex CSS values)
- * - Accessibility features (proper ARIA labels, focus management)
- * - Integration with spacing preset system
- *
- * Total coverage: Comprehensive test suite across all view modes and configurations.
- *
- * The tests ensure that when the SpacingSizesControl is refactored to use
- * PresetInputControl, the existing user experience and behavior is preserved.
- */
-
-/**
- * External dependencies
- */
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import SpacingSizesControl from '../index';
-
-// Mock useSelect
-jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
-
-// Mock useSpacingSizes hook
-jest.mock( '../hooks/use-spacing-sizes', () => ( {
-	__esModule: true,
-	default: jest.fn( () => [
-		{ name: 'None', slug: '0', size: 0 },
-		{ name: 'Small', slug: '20', size: '0.5rem' },
-		{ name: 'Medium', slug: '40', size: '1rem' },
-		{ name: 'Large', slug: '60', size: '1.5rem' },
-		{ name: 'X-Large', slug: '80', size: '2rem' },
-	] ),
-} ) );
-
-// Mock useSettings hook
-jest.mock( '../../use-settings', () => ( {
-	useSettings: jest.fn( ( ...keys ) => {
-		const defaults = {
-			'spacing.units': [ 'px', 'em', 'rem' ],
-			'spacing.spacingSizes.custom': [],
-			'spacing.spacingSizes.theme': [],
-			'spacing.spacingSizes.default': [],
-			'spacing.defaultSpacingSizes': true,
-		};
-		return keys.map( ( key ) => defaults[ key ] );
-	} ),
-} ) );
-
-describe( 'SpacingSizesControl', () => {
-	const mockOnChange = jest.fn();
-	const defaultProps = {
-		label: 'Padding',
-		onChange: mockOnChange,
-	};
-
-	beforeEach( () => {
-		mockOnChange.mockClear();
-		useSelect.mockReturnValue( false ); // disableCustomSpacingSizes = false
-	} );
-
-	describe( 'Basic Rendering', () => {
-		it( 'renders with default props', () => {
-			render( <SpacingSizesControl { ...defaultProps } /> );
-
-			expect( screen.getByText( 'Padding' ) ).toBeInTheDocument();
-			expect(
-				screen.getByLabelText( 'Unlink sides' )
-			).toBeInTheDocument();
-		} );
-
-		it( 'renders with undefined values in axial view', () => {
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			// Should default to axial view when no values
-			expect(
-				screen.getByLabelText( 'Unlink sides' )
-			).toBeInTheDocument();
-		} );
-
-		it( 'renders with axial values', () => {
-			const values = {
-				top: '1rem',
-				right: '2rem',
-				bottom: '1rem',
-				left: '2rem',
-			};
-
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ values } />
-			);
-
-			// Should be in axial view due to matching vertical/horizontal values
-			expect(
-				screen.getByLabelText( 'Unlink sides' )
-			).toBeInTheDocument();
-		} );
-
-		it( 'renders with mixed values in custom view', () => {
-			const values = {
-				top: '1rem',
-				right: '2rem',
-				bottom: '1.5rem',
-				left: '2rem',
-			};
-
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ values } />
-			);
-
-			// Should be in custom view due to mixed values
-			expect( screen.getByLabelText( 'Link sides' ) ).toBeInTheDocument();
-		} );
-
-		it( 'renders with single side configuration', () => {
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					sides={ [ 'top' ] }
-					values={ { top: '1rem' } }
-				/>
-			);
-
-			// Should show single side control
-			expect(
-				screen.getByLabelText( 'Top padding' )
-			).toBeInTheDocument();
-			// Should not show link button for single side
-			expect(
-				screen.queryByLabelText( 'Unlink sides' )
-			).not.toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'View Toggle Behavior', () => {
-		it( 'toggles between axial and custom views', async () => {
-			const user = userEvent.setup();
-			const values = {
-				top: '1rem',
-				right: '2rem',
-				bottom: '1rem',
-				left: '2rem',
-			};
-
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ values } />
-			);
-
-			const linkButton = screen.getByLabelText( 'Unlink sides' );
-
-			// Click to switch to custom view
-			await user.click( linkButton );
-			expect( screen.getByLabelText( 'Link sides' ) ).toBeInTheDocument();
-
-			// Click to switch back to axial view
-			const unlinkButton = screen.getByLabelText( 'Link sides' );
-			await user.click( unlinkButton );
-			expect(
-				screen.getByLabelText( 'Unlink sides' )
-			).toBeInTheDocument();
-		} );
-
-		it( 'starts in custom view when values are mixed', () => {
-			const mixedValues = {
-				top: '1rem',
-				right: '2rem',
-				bottom: '1.5rem',
-				left: '2rem',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ mixedValues }
-				/>
-			);
-
-			expect( screen.getByLabelText( 'Link sides' ) ).toBeInTheDocument();
-		} );
-
-		it( 'starts in axial view when no values are defined', () => {
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			expect(
-				screen.getByLabelText( 'Unlink sides' )
-			).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'Value Changes - Axial View', () => {
-		it( 'renders in axial view with matching values', () => {
-			const axialValues = {
-				top: '1rem',
-				right: '2rem',
-				bottom: '1rem',
-				left: '2rem',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ axialValues }
-				/>
-			);
-
-			// In axial view, should show 2 sliders for vertical and horizontal
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 2 );
-
-			// Should show linked button since we're in axial mode
-			expect(
-				screen.getByRole( 'button', { name: 'Unlink sides' } )
-			).toBeInTheDocument();
-		} );
-
-		it( 'renders in axial view when no values are set and sides are balanced', () => {
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			// Should default to axial view for balanced sides
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 2 );
-
-			// Should show linked button since we're in axial mode
-			expect(
-				screen.getByRole( 'button', { name: 'Unlink sides' } )
-			).toBeInTheDocument();
-		} );
-
-		it( 'applies horizontal value to left and right sides in axial view', async () => {
-			const user = userEvent.setup();
-			const axialValues = {
-				top: '1rem',
-				right: '2rem',
-				bottom: '1rem',
-				left: '2rem',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ axialValues }
-				/>
-			);
-
-			// Should be in axial view - find horizontal slider and interact with it
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 2 );
-
-			// First slider should be vertical, second should be horizontal
-			const horizontalSlider = sliders[ 1 ];
-
-			// Move slider to position that corresponds to a preset value
-			await user.click( horizontalSlider );
-			fireEvent.change( horizontalSlider, { target: { value: '2' } } );
-
-			// Should have called onChange with left and right values updated
-			expect( mockOnChange ).toHaveBeenCalled();
-			const lastCall =
-				mockOnChange.mock.calls[ mockOnChange.mock.calls.length - 1 ];
-			const [ changedValues ] = lastCall;
-
-			// Both left and right should be updated to the same value
-			expect( changedValues.left ).toBe( changedValues.right );
-		} );
-
-		it( 'applies vertical value to top and bottom sides in axial view', async () => {
-			const user = userEvent.setup();
-			const axialValues = {
-				top: '1rem',
-				right: '2rem',
-				bottom: '1rem',
-				left: '2rem',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ axialValues }
-				/>
-			);
-
-			// Should be in axial view - find vertical slider
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 2 );
-
-			// First slider should be vertical
-			const verticalSlider = sliders[ 0 ];
-
-			// Move slider to position that corresponds to a preset value
-			await user.click( verticalSlider );
-			fireEvent.change( verticalSlider, { target: { value: '3' } } );
-
-			// Should have called onChange with top and bottom values updated
-			expect( mockOnChange ).toHaveBeenCalled();
-			const lastCall =
-				mockOnChange.mock.calls[ mockOnChange.mock.calls.length - 1 ];
-			const [ changedValues ] = lastCall;
-
-			// Both top and bottom should be updated to the same value
-			expect( changedValues.top ).toBe( changedValues.bottom );
-		} );
-
-		it( 'switches from axial to custom view when unlink button is clicked', async () => {
-			const user = userEvent.setup();
-			const axialValues = {
-				top: '1rem',
-				right: '2rem',
-				bottom: '1rem',
-				left: '2rem',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ axialValues }
-				/>
-			);
-
-			// Initially in axial view with 2 sliders
-			expect( screen.getAllByRole( 'slider' ) ).toHaveLength( 2 );
-
-			// Click unlink button to switch to custom view
-			const unlinkButton = screen.getByRole( 'button', {
-				name: 'Unlink sides',
-			} );
-			await user.click( unlinkButton );
-
-			// Now should be in custom view with 4 sliders (one per side)
-			expect( screen.getAllByRole( 'slider' ) ).toHaveLength( 4 );
-
-			// Button should now say "Link sides"
-			expect(
-				screen.getByRole( 'button', { name: 'Link sides' } )
-			).toBeInTheDocument();
-		} );
-
-		it( 'maintains axial values when toggling views', async () => {
-			const user = userEvent.setup();
-			const axialValues = {
-				top: '1rem',
-				right: '2rem',
-				bottom: '1rem',
-				left: '2rem',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ axialValues }
-				/>
-			);
-
-			// Switch to custom view
-			const unlinkButton = screen.getByRole( 'button', {
-				name: 'Unlink sides',
-			} );
-			await user.click( unlinkButton );
-
-			// Then switch back to axial view
-			const linkButton = screen.getByRole( 'button', {
-				name: 'Link sides',
-			} );
-			await user.click( linkButton );
-
-			// Should be back to axial view with 2 sliders
-			expect( screen.getAllByRole( 'slider' ) ).toHaveLength( 2 );
-		} );
-
-		it( 'shows correct labels for axial controls without sides in label', () => {
-			const axialValues = {
-				top: '1rem',
-				right: '2rem',
-				bottom: '1rem',
-				left: '2rem',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ axialValues }
-					label="margin"
-				/>
-			);
-
-			// The main fieldset legend should show just the type without sides
-			const fieldset = screen.getByRole( 'group' );
-			expect( fieldset ).toBeInTheDocument();
-
-			// Check that the fieldset contains the margin label in its accessible name or content
-			expect( fieldset ).toHaveTextContent( 'margin' );
-
-			// In axial view, we should have sliders for vertical and horizontal
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 2 );
-		} );
-
-		it( 'handles preset values correctly in axial view', () => {
-			const presetValues = {
-				top: 'var:preset|spacing|40',
-				right: 'var:preset|spacing|20',
-				bottom: 'var:preset|spacing|40',
-				left: 'var:preset|spacing|20',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ presetValues }
-				/>
-			);
-
-			// Should be in axial view since top/bottom match and left/right match
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 2 );
-
-			// Sliders should show preset positions (index 2 for '40', index 1 for '20')
-			expect( sliders[ 0 ] ).toHaveValue( '2' ); // vertical (top/bottom)
-			expect( sliders[ 1 ] ).toHaveValue( '1' ); // horizontal (left/right)
-		} );
-
-		it( 'handles zero values in axial view', () => {
-			const zeroValues = {
-				top: '0',
-				right: '1rem',
-				bottom: '0',
-				left: '1rem',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ zeroValues }
-				/>
-			);
-
-			// Should be in axial view
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 2 );
-
-			// Vertical should be at position 0 (zero value)
-			expect( sliders[ 0 ] ).toHaveValue( '0' );
-		} );
-
-		it( 'properly initializes in axial view for horizontal/vertical sides configuration', () => {
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					sides={ [ 'horizontal', 'vertical' ] }
-					values={ {
-						top: '1rem',
-						right: '2rem',
-						bottom: '1rem',
-						left: '2rem',
-					} }
-				/>
-			);
-
-			// Should be in axial view with no link/unlink button for this configuration
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 2 );
-
-			// Should not show link/unlink button for horizontal/vertical only sides
-			expect(
-				screen.queryByRole( 'button', { name: 'Unlink sides' } )
-			).not.toBeInTheDocument();
-		} );
-
-		it( 'handles mixed unit values in axial view', () => {
-			const mixedUnits = {
-				top: '1rem',
-				right: '16px',
-				bottom: '1rem',
-				left: '16px',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ mixedUnits }
-				/>
-			);
-
-			// Should be in axial view since the values match per axis
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 2 );
-
-			// Should show linked button
-			expect(
-				screen.getByRole( 'button', { name: 'Unlink sides' } )
-			).toBeInTheDocument();
-		} );
-
-		it( 'handles undefined values gracefully in axial view', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			// Should start in axial view for undefined values with balanced sides
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 2 );
-
-			// Both sliders should be at 0 position for undefined values
-			expect( sliders[ 0 ] ).toHaveValue( '0' );
-			expect( sliders[ 1 ] ).toHaveValue( '0' );
-
-			// Should be able to interact with sliders
-			await user.click( sliders[ 0 ] );
-			fireEvent.change( sliders[ 0 ], { target: { value: '1' } } );
-
-			expect( mockOnChange ).toHaveBeenCalled();
-		} );
-	} );
-
-	describe( 'Value Changes - Custom View', () => {
-		it( 'changes individual side values when in custom view', async () => {
-			const user = userEvent.setup();
-			const initialValues = {
-				top: '1rem',
-				right: '2rem',
-				bottom: '1.5rem',
-				left: '2rem',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ initialValues }
-				/>
-			);
-
-			// Should start in custom view due to mixed values
-			expect( screen.getByLabelText( 'Link sides' ) ).toBeInTheDocument();
-
-			// Switch to custom mode to access inputs
-			const customToggles =
-				screen.getAllByLabelText( 'Set custom value' );
-			await user.click( customToggles[ 0 ] ); // Click first side's custom toggle
-
-			// Find and change the top input
-			const topInput = screen.getByRole( 'spinbutton', {
-				name: 'Top padding',
-			} );
-			await user.clear( topInput );
-			await user.type( topInput, '24' );
-
-			// The component may convert values to preset format or handle them differently
-			// Just ensure onChange was called
-			expect( mockOnChange ).toHaveBeenCalled();
-		} );
-
-		it( 'handles different units for different sides', () => {
-			const mixedValues = {
-				top: '1rem',
-				right: '16px',
-				bottom: '2em',
-				left: '20px',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ mixedValues }
-				/>
-			);
-
-			// Should start in custom view due to mixed units
-			expect( screen.getByLabelText( 'Link sides' ) ).toBeInTheDocument();
-
-			// Should show all four individual side controls
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders.length ).toBeGreaterThanOrEqual( 4 );
-		} );
-	} );
-
-	describe( 'Single Side Configuration', () => {
-		it( 'handles single top side', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					sides={ [ 'top' ] }
-					values={ { top: '1rem' } }
-				/>
-			);
-
-			// Should show single control for top
-			expect(
-				screen.getByLabelText( 'Top padding' )
-			).toBeInTheDocument();
-
-			// Switch to custom mode and change value
-			const customToggle = screen.getByLabelText( 'Set custom value' );
-			await user.click( customToggle );
-
-			const input = screen.getByRole( 'spinbutton', {
-				name: 'Top padding',
-			} );
-			await user.clear( input );
-			await user.type( input, '32' );
-
-			// The component may convert values to preset format
-			// Just ensure onChange was called
-			expect( mockOnChange ).toHaveBeenCalled();
-		} );
-
-		it( 'handles axial configuration (horizontal and vertical)', () => {
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					sides={ [ 'horizontal', 'vertical' ] }
-					values={ { top: '1rem', left: '2rem' } }
-				/>
-			);
-
-			// Should render the component without error
-			expect( screen.getByRole( 'group' ) ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'Preset Functionality', () => {
-		it( 'uses range control when presets are available and count is small', () => {
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			// Should show range control for presets (axial view)
-			expect( screen.getAllByRole( 'slider' ) ).toHaveLength( 2 ); // Vertical and Horizontal
-		} );
-
-		it( 'applies preset values via range control', async () => {
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			const slider = screen.getAllByRole( 'slider' )[ 0 ]; // Get first slider (vertical)
-
-			// Move slider to select preset
-			fireEvent.change( slider, { target: { value: '2' } } );
-
-			expect( mockOnChange ).toHaveBeenCalledWith(
-				expect.objectContaining( {
-					top: 'var:preset|spacing|40',
-					bottom: 'var:preset|spacing|40',
-				} )
-			);
-		} );
-
-		it( 'shows custom value toggle when presets are available', () => {
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			// Should show the settings/custom toggle button
-			const customToggle =
-				screen.getAllByLabelText( 'Set custom value' )[ 0 ];
-			expect( customToggle ).toBeInTheDocument();
-		} );
-
-		it( 'toggles between preset and custom modes', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			const customToggle =
-				screen.getAllByLabelText( 'Set custom value' )[ 0 ];
-
-			// Initially should show preset controls (range slider)
-			expect( screen.getAllByRole( 'slider' ) ).toHaveLength( 2 );
-
-			// Click to switch to custom mode
-			await user.click( customToggle );
-
-			// Should now show custom input controls
-			expect(
-				screen.getAllByRole( 'spinbutton' ).length
-			).toBeGreaterThanOrEqual( 1 );
-		} );
-
-		it( 'recognizes preset values and shows them correctly', () => {
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ {
-						top: 'var:preset|spacing|40',
-						right: 'var:preset|spacing|60',
-						bottom: 'var:preset|spacing|40',
-						left: 'var:preset|spacing|60',
-					} }
-				/>
-			);
-
-			// Should show the preset range controls at correct positions
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 2 ); // Vertical and Horizontal in axial view
-		} );
-	} );
-
-	describe( 'Large Preset Sets', () => {
-		const largeSpacingSizes = Array.from( { length: 15 }, ( _, i ) => ( {
-			name: `Size ${ i }`,
-			slug: `${ i * 10 }`,
-			size: `${ i * 0.5 }rem`,
-		} ) );
-
-		// Mock the large preset set
-		beforeEach( () => {
-			jest.requireMock(
-				'../hooks/use-spacing-sizes'
-			).default.mockReturnValue( largeSpacingSizes );
-		} );
-
-		afterEach( () => {
-			jest.requireMock(
-				'../hooks/use-spacing-sizes'
-			).default.mockReturnValue( [
-				{ name: 'None', slug: '0', size: 0 },
-				{ name: 'Small', slug: '20', size: '0.5rem' },
-				{ name: 'Medium', slug: '40', size: '1rem' },
-				{ name: 'Large', slug: '60', size: '1.5rem' },
-				{ name: 'X-Large', slug: '80', size: '2rem' },
-			] );
-		} );
-
-		it( 'uses select dropdown for large preset sets', async () => {
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			// Should use CustomSelectControl instead of range
-			await waitFor( () => {
-				expect(
-					screen.queryByRole( 'slider' )
-				).not.toBeInTheDocument();
-			} );
-
-			await waitFor( () => {
-				expect( screen.getAllByRole( 'combobox' ) ).toHaveLength( 2 ); // Vertical and Horizontal
-			} );
-		} );
-
-		it( 'can interact with select dropdown options', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			// With large preset sets, should use select dropdowns instead of sliders
-			await waitFor( () => {
-				expect( screen.getAllByRole( 'combobox' ) ).toHaveLength( 2 );
-			} );
-
-			// Click on the first combobox to open dropdown
-			const comboboxes = screen.getAllByRole( 'combobox' );
-			await user.click( comboboxes[ 0 ] );
-
-			// Should be able to interact with the dropdown
-			expect( comboboxes[ 0 ] ).toHaveAttribute( 'aria-expanded' );
-		} );
-	} );
-
-	describe( 'Edge Cases and Error Handling', () => {
-		it( 'handles undefined values gracefully', () => {
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			expect( screen.getByText( 'Padding' ) ).toBeInTheDocument();
-			expect(
-				screen.getByLabelText( 'Unlink sides' )
-			).toBeInTheDocument();
-		} );
-
-		it( 'handles empty object values', () => {
-			render( <SpacingSizesControl { ...defaultProps } values={ {} } /> );
-
-			expect( screen.getByText( 'Padding' ) ).toBeInTheDocument();
-			expect(
-				screen.getByLabelText( 'Unlink sides' )
-			).toBeInTheDocument();
-		} );
-
-		it( 'handles partial object values', () => {
-			const partialValues = {
-				top: '1rem',
-				right: '2rem',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ partialValues }
-				/>
-			);
-
-			// Should start in custom view due to partial values
-			expect( screen.getByLabelText( 'Link sides' ) ).toBeInTheDocument();
-		} );
-
-		it( 'handles complex CSS values', () => {
-			const complexValues = {
-				top: 'clamp(1rem, 2vw, 3rem)',
-				right: 'clamp(1rem, 2vw, 3rem)',
-				bottom: 'clamp(1rem, 2vw, 3rem)',
-				left: 'clamp(1rem, 2vw, 3rem)',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ complexValues }
-				/>
-			);
-
-			// Complex values should be handled gracefully
-			expect( screen.getByText( 'Padding' ) ).toBeInTheDocument();
-		} );
-
-		it( 'handles zero values correctly', () => {
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ { top: '0', right: '0', bottom: '0', left: '0' } }
-				/>
-			);
-
-			// Zero should be recognized as a valid preset
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders[ 0 ] ).toHaveValue( '0' ); // Should be at "None" preset position
-		} );
-
-		it( 'handles invalid numeric values', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			// Switch to custom mode to access input
-			const customToggle =
-				screen.getAllByLabelText( 'Set custom value' )[ 0 ];
-			await user.click( customToggle );
-
-			const input = screen.getAllByRole( 'spinbutton' )[ 0 ];
-			await user.clear( input );
-			await user.type( input, 'invalid' );
-
-			// Should not crash and maintain component stability
-			expect( input ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'Additional Props', () => {
-		it( 'respects minimumCustomValue prop', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					minimumCustomValue={ 10 }
-					values={ undefined }
-				/>
-			);
-
-			// Switch to custom mode to access input
-			const customToggle =
-				screen.getAllByLabelText( 'Set custom value' )[ 0 ];
-			await user.click( customToggle );
-
-			const input = screen.getAllByRole( 'spinbutton' )[ 0 ];
-
-			// Should respect minimum value constraint
-			expect( input ).toHaveAttribute( 'min', '10' );
-		} );
-
-		it( 'calls onMouseOver and onMouseOut callbacks', async () => {
-			const mockOnMouseOver = jest.fn();
-			const mockOnMouseOut = jest.fn();
-			const user = userEvent.setup();
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					onMouseOver={ mockOnMouseOver }
-					onMouseOut={ mockOnMouseOut }
-					values={ undefined }
-				/>
-			);
-
-			const slider = screen.getAllByRole( 'slider' )[ 0 ];
-
-			await user.hover( slider );
-			expect( mockOnMouseOver ).toHaveBeenCalled();
-
-			await user.unhover( slider );
-			expect( mockOnMouseOut ).toHaveBeenCalled();
-		} );
-
-		it( 'forwards inputProps to input controls', () => {
-			const customInputProps = {
-				'data-testid': 'custom-input',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					inputProps={ customInputProps }
-					values={ { top: '1rem' } }
-				/>
-			);
-
-			// The component should render properly with inputProps
-			// Since the exact implementation of how inputProps are forwarded may vary,
-			// we'll just verify the component renders
-			expect( screen.getByRole( 'group' ) ).toBeInTheDocument();
-		} );
-
-		it( 'handles useSelect prop for custom preset behavior', () => {
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					useSelect
-					values={ undefined }
-				/>
-			);
-
-			// When useSelect is true, should force select dropdown usage
-			// This is tested implicitly through the component not crashing
-			expect( screen.getByText( 'Padding' ) ).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'Integration Scenarios', () => {
-		it( 'works with different spacing preset configurations', () => {
-			// Mock different spacing sizes configuration
-			const customSpacingSizes = [
-				{ name: 'Tiny', slug: '10', size: '0.25rem' },
-				{ name: 'Huge', slug: '100', size: '5rem' },
-			];
-
-			jest.requireMock(
-				'../hooks/use-spacing-sizes'
-			).default.mockReturnValueOnce( customSpacingSizes );
-
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			// Should work with custom spacing configuration
-			expect( screen.getAllByRole( 'slider' ) ).toHaveLength( 2 );
-		} );
-
-		it( 'handles theme spacing integration', () => {
-			const themeSpacingSizes = [
-				{ name: 'Theme Small', slug: 'theme-sm', size: '0.75rem' },
-				{ name: 'Theme Large', slug: 'theme-lg', size: '2.25rem' },
-			];
-
-			jest.requireMock(
-				'../hooks/use-spacing-sizes'
-			).default.mockReturnValueOnce( themeSpacingSizes );
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ {
-						top: 'var:preset|spacing|theme-sm',
-						right: 'var:preset|spacing|theme-lg',
-						bottom: 'var:preset|spacing|theme-sm',
-						left: 'var:preset|spacing|theme-lg',
-					} }
-				/>
-			);
-
-			// Should properly handle theme-based spacing presets
-			expect( screen.getAllByRole( 'slider' ) ).toHaveLength( 2 );
-		} );
-	} );
-
-	describe( 'Accessibility', () => {
-		it( 'has proper ARIA labels for side controls', () => {
-			const mixedValues = {
-				top: '1rem',
-				right: '2rem',
-				bottom: '1.5rem',
-				left: '2rem',
-			};
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ mixedValues }
-				/>
-			);
-
-			// Check that individual side controls have proper labels
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 4 );
-		} );
-
-		it( 'has proper ARIA labels for axial controls', () => {
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ {
-						top: '1rem',
-						right: '2rem',
-						bottom: '1rem',
-						left: '2rem',
-					} }
-				/>
-			);
-
-			// In axial view, should show vertical and horizontal labels
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 2 );
-		} );
-
-		it( 'maintains focus management when toggling views', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					values={ {
-						top: '1rem',
-						right: '2rem',
-						bottom: '1rem',
-						left: '2rem',
-					} }
-				/>
-			);
-
-			const linkButton = screen.getByLabelText( 'Unlink sides' );
-			await user.click( linkButton );
-
-			// After unlinking, should show individual side controls
-			const sliders = screen.getAllByRole( 'slider' );
-			expect( sliders ).toHaveLength( 4 );
-		} );
-	} );
-
-	describe( 'Integration with Settings', () => {
-		it( 'respects disableCustomSpacingSizes setting', () => {
-			useSelect.mockReturnValue( true ); // disableCustomSpacingSizes = true
-
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			// Should not show custom toggle when custom sizes are disabled
-			expect(
-				screen.queryByLabelText( 'Set custom value' )
-			).not.toBeInTheDocument();
-		} );
-
-		it( 'shows custom toggle when custom sizes are enabled', () => {
-			useSelect.mockReturnValue( false ); // disableCustomSpacingSizes = false
-
-			render(
-				<SpacingSizesControl { ...defaultProps } values={ undefined } />
-			);
-
-			// Should show custom toggle when custom sizes are enabled
-			expect(
-				screen.getAllByLabelText( 'Set custom value' )[ 0 ]
-			).toBeInTheDocument();
-		} );
-	} );
-
-	describe( 'Label Customization', () => {
-		it( 'uses custom label', () => {
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					label="Margin"
-					values={ { top: '1rem' } }
-					sides={ [ 'top' ] }
-				/>
-			);
-
-			expect( screen.getByRole( 'slider' ) ).toBeInTheDocument();
-		} );
-
-		it( 'handles showSideInLabel prop', () => {
-			render(
-				<SpacingSizesControl
-					{ ...defaultProps }
-					label="Spacing"
-					showSideInLabel={ false }
-					values={ { top: '1rem' } }
-					sides={ [ 'top' ] }
-				/>
-			);
-
-			expect( screen.getByRole( 'slider' ) ).toBeInTheDocument();
-		} );
-	} );
-} );