@wordpress/components 30.6.1-next.ff1cebbba.0 → 30.6.1

package/src/font-size-picker/test/font-size-picker-select.tsx

@@ -0,0 +1,221 @@
+/**
+ * External dependencies
+ */
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render } from '@ariakit/test/react';
+
+/**
+ * Internal dependencies
+ */
+import FontSizePickerSelect from '../font-size-picker-select';
+import type { FontSize } from '../types';
+
+describe( 'FontSizePickerSelect', () => {
+	const fontSizes: FontSize[] = [
+		{
+			slug: 'small',
+			name: 'Small',
+			size: '12px',
+		},
+		{
+			slug: 'medium',
+			name: 'Medium',
+			size: '16px',
+		},
+		{
+			slug: 'large',
+			name: 'Large',
+			size: '20px',
+		},
+	];
+
+	describe( 'valueMode prop', () => {
+		it( 'should find font size by size value when valueMode is literal', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizes }
+					value="16px"
+					valueMode="literal"
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the medium option (16px)
+			expect(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			).toHaveTextContent( 'Medium' );
+		} );
+
+		it( 'should find font size by slug when valueMode is slug', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizes }
+					value="medium"
+					valueMode="slug"
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the medium option
+			expect(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			).toHaveTextContent( 'Medium' );
+		} );
+
+		it( 'should handle undefined value', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizes }
+					value={ undefined }
+					valueMode="literal"
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should show default option
+			expect(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			).toHaveTextContent( 'Default' );
+		} );
+
+		it( 'should handle empty string value', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizes }
+					value=""
+					valueMode="literal"
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should show default option
+			expect(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			).toHaveTextContent( 'Default' );
+		} );
+	} );
+
+	describe( 'onChange callback', () => {
+		it( 'should call onChange with FontSize object as second parameter', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizes }
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			await user.click(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			);
+			await user.click(
+				screen.getByRole( 'option', { name: 'Small 12px' } )
+			);
+			expect( onChange ).toHaveBeenCalledWith( '12px', fontSizes[ 0 ] );
+		} );
+
+		it( 'should call onChange with undefined as second parameter for default option', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizes }
+					value="16px" // Start with a selected value
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			await user.click(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			);
+			await user.click(
+				screen.getByRole( 'option', { name: 'Default' } )
+			);
+			expect( onChange ).toHaveBeenCalledWith( undefined, undefined );
+		} );
+	} );
+
+	describe( 'edge cases', () => {
+		const fontSizesWithDuplicates: FontSize[] = [
+			{
+				slug: 'small-1',
+				name: 'Small 1',
+				size: '12px',
+			},
+			{
+				slug: 'small-2',
+				name: 'Small 2',
+				size: '12px',
+			},
+			{
+				slug: 'medium',
+				name: 'Medium',
+				size: '16px',
+			},
+		];
+
+		it( 'should handle multiple font sizes with same value in literal mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizesWithDuplicates }
+					value="12px"
+					valueMode="literal"
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should show the first matching font size when there are multiple matches
+			expect(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			).toHaveTextContent( 'Small 1' );
+		} );
+
+		it( 'should handle multiple font sizes with same value in slug mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerSelect
+					fontSizes={ fontSizesWithDuplicates }
+					value="small-1"
+					valueMode="slug"
+					onChange={ onChange }
+					onSelectCustom={ jest.fn() }
+					disableCustomFontSizes={ false }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the specific font size by slug
+			expect(
+				screen.getByRole( 'combobox', { name: 'Font size' } )
+			).toHaveTextContent( 'Small 1' );
+		} );
+	} );
+} );

package/src/font-size-picker/test/font-size-picker-toggle-group.tsx

@@ -0,0 +1,275 @@
+/**
+ * External dependencies
+ */
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render } from '@ariakit/test/react';
+
+/**
+ * Internal dependencies
+ */
+import FontSizePickerToggleGroup from '../font-size-picker-toggle-group';
+import type { FontSize } from '../types';
+
+describe( 'FontSizePickerToggleGroup', () => {
+	const fontSizes: FontSize[] = [
+		{
+			slug: 'small',
+			name: 'Small',
+			size: '12px',
+		},
+		{
+			slug: 'medium',
+			name: 'Medium',
+			size: '16px',
+		},
+		{
+			slug: 'large',
+			name: 'Large',
+			size: '20px',
+		},
+	];
+
+	describe( 'valueMode prop', () => {
+		it( 'should find font size by size value when valueMode is literal', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizes }
+					value="16px"
+					valueMode="literal"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the medium option (16px)
+			expect(
+				screen.getByRole( 'radio', { checked: true } )
+			).toHaveAccessibleName( 'Medium' );
+		} );
+
+		it( 'should find font size by slug when valueMode is slug', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizes }
+					value="medium"
+					valueMode="slug"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the medium option
+			expect(
+				screen.getByRole( 'radio', { checked: true } )
+			).toHaveAccessibleName( 'Medium' );
+		} );
+
+		it( 'should handle undefined value', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizes }
+					value={ undefined }
+					valueMode="literal"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should have no selection
+			expect(
+				screen.queryByRole( 'radio', { checked: true } )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should handle empty string value', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizes }
+					value=""
+					valueMode="literal"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should have no selection
+			expect(
+				screen.queryByRole( 'radio', { checked: true } )
+			).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'onChange callback', () => {
+		it( 'should call onChange with FontSize object as second parameter', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizes }
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			await user.click( screen.getByRole( 'radio', { name: 'Small' } ) );
+			expect( onChange ).toHaveBeenCalledWith( '12px', fontSizes[ 0 ] );
+		} );
+
+		it( 'should call onChange with FontSize object when selecting a different option', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizes }
+					value="medium"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Click a different option
+			await user.click( screen.getByRole( 'radio', { name: 'Small' } ) );
+			expect( onChange ).toHaveBeenCalledWith( '12px', fontSizes[ 0 ] );
+		} );
+	} );
+
+	describe( 'edge cases', () => {
+		const fontSizesWithDuplicates: FontSize[] = [
+			{
+				slug: 'small-1',
+				name: 'Small 1',
+				size: '12px',
+			},
+			{
+				slug: 'small-2',
+				name: 'Small 2',
+				size: '12px',
+			},
+			{
+				slug: 'medium',
+				name: 'Medium',
+				size: '16px',
+			},
+		];
+
+		it( 'should handle multiple font sizes with same value in literal mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizesWithDuplicates }
+					value="12px"
+					valueMode="literal"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should have no selection when there are multiple matches
+			expect(
+				screen.queryByRole( 'radio', { checked: true } )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should handle multiple font sizes with same value in slug mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ fontSizesWithDuplicates }
+					value="small-1"
+					valueMode="slug"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the specific font size by slug
+			expect(
+				screen.getByRole( 'radio', { checked: true } )
+			).toHaveAccessibleName( 'Small 1' );
+		} );
+	} );
+
+	describe( 'heterogeneous font sizes', () => {
+		const heterogeneousFontSizes: FontSize[] = [
+			{
+				slug: 'small',
+				name: 'Small',
+				size: '12px',
+			},
+			{
+				slug: 'medium',
+				name: 'Medium',
+				size: '1em',
+			},
+			{
+				slug: 'large',
+				name: 'Large',
+				size: '2rem',
+			},
+			{
+				slug: 'x-large',
+				name: 'Extra Large',
+				size: 'clamp(1.75rem, 3vw, 2.25rem)',
+			},
+		];
+
+		it( 'should handle different units in literal mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ heterogeneousFontSizes }
+					value="1em"
+					valueMode="literal"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the medium option (1em)
+			expect(
+				screen.getByRole( 'radio', { checked: true } )
+			).toHaveAccessibleName( 'Medium' );
+		} );
+
+		it( 'should handle complex font size values in literal mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ heterogeneousFontSizes }
+					value="clamp(1.75rem, 3vw, 2.25rem)"
+					valueMode="literal"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the extra large option
+			expect(
+				screen.getByRole( 'radio', { checked: true } )
+			).toHaveAccessibleName( 'Extra Large' );
+		} );
+
+		it( 'should handle different units in slug mode', async () => {
+			const onChange = jest.fn();
+			await render(
+				<FontSizePickerToggleGroup
+					fontSizes={ heterogeneousFontSizes }
+					value="medium"
+					valueMode="slug"
+					onChange={ onChange }
+					__next40pxDefaultSize={ false }
+					size="default"
+				/>
+			);
+			// Should select the medium option
+			expect(
+				screen.getByRole( 'radio', { checked: true } )
+			).toHaveAccessibleName( 'Medium' );
+		} );
+	} );
+} );