Skip to content

Commit

Permalink
Adjust unit tests.
Browse files Browse the repository at this point in the history
  • Loading branch information
@afercia
afercia committed Feb 4, 2025
1 parent 73acff5 commit ca444b0
Showing 1 changed file with 39 additions and 81 deletions.
120 changes: 39 additions & 81 deletions packages/components/src/font-size-picker/test/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,9 @@ describe( 'FontSizePicker', () => {
await render(
<FontSizePicker value={ value } onChange={ onChange } />
);
const input = screen.getByLabelText( 'Custom' );
const input = screen.getByRole( 'spinbutton', {
name: 'Font size',
} );
await user.clear( input );
await user.type( input, '80' );
expect( onChange ).toHaveBeenCalledTimes( 3 ); // Once for the clear, then once per keystroke.
Expand All @@ -79,7 +81,9 @@ describe( 'FontSizePicker', () => {
await user.click(
screen.getByRole( 'button', { name: 'Set custom size' } )
);
const input = screen.getByLabelText( 'Custom' );
const input = screen.getByRole( 'spinbutton', {
name: 'Font size',
} );
await user.type( input, '80' );
expect( onChange ).toHaveBeenCalledTimes( 2 ); // Once per keystroke.
expect( onChange ).toHaveBeenCalledWith( expectedValue );
Expand Down Expand Up @@ -129,37 +133,23 @@ describe( 'FontSizePicker', () => {
const options = screen.getAllByRole( 'option' );
expect( options ).toHaveLength( 8 );
expect( options[ 0 ] ).toHaveAccessibleName( 'Default' );
expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8' );
expect( options[ 2 ] ).toHaveAccessibleName( 'Small 12' );
expect( options[ 3 ] ).toHaveAccessibleName( 'Medium 16' );
expect( options[ 4 ] ).toHaveAccessibleName( 'Large 20' );
expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30' );
expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40' );
expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8px' );
expect( options[ 2 ] ).toHaveAccessibleName( 'Small 12px' );
expect( options[ 3 ] ).toHaveAccessibleName( 'Medium 16px' );
expect( options[ 4 ] ).toHaveAccessibleName( 'Large 20px' );
expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30px' );
expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40px' );
expect( options[ 7 ] ).toHaveAccessibleName( 'Custom' );
} );

test.each( [
{ value: undefined, expectedLabel: 'Size (px)' },
{ value: '8px', expectedLabel: 'Size (px)' },
{ value: '3px', expectedLabel: 'Size Custom' },
] )(
'displays $expectedLabel as label when value is $value',
async ( { value, expectedLabel } ) => {
await render(
<FontSizePicker fontSizes={ fontSizes } value={ value } />
);
expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
}
);

test.each( [
{
option: 'Default',
value: '8px',
expectedArguments: [ undefined ],
},
{
option: 'Tiny 8',
option: 'Tiny 8px',
value: undefined,
expectedArguments: [ '8px', fontSizes[ 0 ] ],
},
Expand Down Expand Up @@ -258,23 +248,6 @@ describe( 'FontSizePicker', () => {
}
);

test.each( [
{ value: undefined, expectedLabel: 'Size' },
{ value: '8px', expectedLabel: 'Size' },
{ value: '1em', expectedLabel: 'Size' },
{ value: '2rem', expectedLabel: 'Size' },
{ value: 'clamp(1.75rem, 3vw, 2.25rem)', expectedLabel: 'Size' },
{ value: '3px', expectedLabel: 'Size Custom' },
] )(
'displays $expectedLabel as label when value is $value',
async ( { value, expectedLabel } ) => {
await render(
<FontSizePicker fontSizes={ fontSizes } value={ value } />
);
expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
}
);

test.each( [
{
option: 'Default',
Expand Down Expand Up @@ -376,20 +349,6 @@ describe( 'FontSizePicker', () => {
expect( options[ 4 ] ).toHaveAccessibleName( 'Gigantosaurus' );
} );

test.each( [
{ value: undefined, expectedLabel: 'Size' },
{ value: '12px', expectedLabel: 'Size Small' },
{ value: '40px', expectedLabel: 'Size Gigantosaurus' },
] )(
'displays $expectedLabel as label when value is $value',
async ( { value, expectedLabel } ) => {
await render(
<FontSizePicker fontSizes={ fontSizes } value={ value } />
);
expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
}
);

it( 'calls onChange when a font size is selected', async () => {
const user = userEvent.setup();
const onChange = jest.fn();
Expand Down Expand Up @@ -443,25 +402,6 @@ describe( 'FontSizePicker', () => {
expect( options[ 3 ] ).toHaveAccessibleName( 'Extra Large' );
} );

test.each( [
{ value: undefined, expectedLabel: 'Size' },
{ value: '12px', expectedLabel: 'Size Small' },
{ value: '1em', expectedLabel: 'Size Medium' },
{ value: '2rem', expectedLabel: 'Size Large' },
{
value: 'clamp(1.75rem, 3vw, 2.25rem)',
expectedLabel: 'Size Extra Large',
},
] )(
'displays $expectedLabel as label when value is $value',
async ( { value, expectedLabel } ) => {
await render(
<FontSizePicker fontSizes={ fontSizes } value={ value } />
);
expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
}
);

test.each( [
{ radio: 'Small', expectedArguments: [ '12px', fontSizes[ 0 ] ] },
{ radio: 'Medium', expectedArguments: [ '1em', fontSizes[ 1 ] ] },
Expand Down Expand Up @@ -536,7 +476,9 @@ describe( 'FontSizePicker', () => {
await user.click(
screen.getByRole( 'option', { name: 'Custom' } )
);
expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
expect(
screen.getByRole( 'spinbutton', { name: 'Font size' } )
).toBeVisible();
expect( onChange ).not.toHaveBeenCalled();
} );
}
Expand All @@ -546,14 +488,18 @@ describe( 'FontSizePicker', () => {
await render(
<FontSizePicker fontSizes={ fontSizes } value="3px" />
);
expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
expect(
screen.getByRole( 'spinbutton', { name: 'Font size' } )
).toBeVisible();
} );

it( 'hides custom input when disableCustomFontSizes is set to `true` with a custom font size', async () => {
const { rerender } = await render(
<FontSizePicker fontSizes={ fontSizes } value="3px" />
);
expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
expect(
screen.getByRole( 'spinbutton', { name: 'Font size' } )
).toBeVisible();

rerender(
<FontSizePicker
Expand All @@ -571,15 +517,19 @@ describe( 'FontSizePicker', () => {
const { rerender } = await render(
<FontSizePicker fontSizes={ fontSizes } value="3px" />
);
expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
expect(
screen.getByRole( 'spinbutton', { name: 'Font size' } )
).toBeVisible();

rerender(
<FontSizePicker
fontSizes={ fontSizes }
value={ fontSizes[ 0 ].size }
/>
);
expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
expect(
screen.getByRole( 'spinbutton', { name: 'Font size' } )
).toBeVisible();
} );

it( 'allows custom values by default', async () => {
Expand All @@ -591,7 +541,10 @@ describe( 'FontSizePicker', () => {
await user.click(
screen.getByRole( 'button', { name: 'Set custom size' } )
);
await user.type( screen.getByLabelText( 'Custom' ), '80' );
await user.type(
screen.getByRole( 'spinbutton', { name: 'Font size' } ),
'80'
);
expect( onChange ).toHaveBeenCalledTimes( 2 ); // Once per keystroke.
expect( onChange ).toHaveBeenCalledWith( '80px' );
} );
Expand All @@ -607,7 +560,10 @@ describe( 'FontSizePicker', () => {
screen.getByRole( 'button', { name: 'Set custom size' } )
);

await user.type( screen.getByLabelText( 'Custom' ), '80' );
await user.type(
screen.getByRole( 'spinbutton', { name: 'Font size' } ),
'80'
);

await user.click(
screen.getByRole( 'button', { name: 'Use size preset' } )
Expand Down Expand Up @@ -654,7 +610,9 @@ describe( 'FontSizePicker', () => {
await user.click(
screen.getByRole( 'button', { name: 'Set custom size' } )
);
const sliderInput = screen.getByLabelText( 'Custom Size' );
const sliderInput = screen.getByRole( 'slider', {
name: 'Font size',
} );
fireEvent.change( sliderInput, {
target: { value: 80 },
} );
Expand Down

0 comments on commit ca444b0

Please sign in to comment.