Skip to content

Components: upgrade Ariakit to latest #62947

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
DaniGuardiola wants to merge 43 commits into from
Closed

Components: upgrade Ariakit to latest #62947

Changes from 1 commit
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
eb40b5f
Upgrade Ariakit to latest.
DaniGuardiola Apr 23, 2024
19a95b2
Revert.
DaniGuardiola Apr 23, 2024
e3cfd44
Upgrade in the right package and upgrade "test' too.
DaniGuardiola Apr 23, 2024
430522f
Merge branch 'trunk' of https://github.com/WordPress/gutenberg into u…
DaniGuardiola Jun 27, 2024
50258f0
Upgrade to latest.
DaniGuardiola Jul 1, 2024
79fa288
Pin on v0.3.13 for now.
DaniGuardiola Jul 2, 2024
179f374
Tweaks on two tests.
DaniGuardiola Jul 2, 2024
89f4f17
Merge branch 'trunk' of https://github.com/WordPress/gutenberg into u…
DaniGuardiola Jul 2, 2024
cf493d7
Merge branch 'trunk' of https://github.com/WordPress/gutenberg into u…
DaniGuardiola Jul 15, 2024
aebd132
Merge branch 'trunk' of https://github.com/WordPress/gutenberg into u…
DaniGuardiola Jul 25, 2024
0c64d63
Replace render method with Ariakit's in custom select control (v1).
DaniGuardiola Jul 25, 2024
3be0bc2
Replace render method with Ariakit's in tabs.
DaniGuardiola Jul 25, 2024
68afa3c
Temporarily copy render utility to repo to experiment with it.
DaniGuardiola Jul 25, 2024
bac4026
Add rerender support to `render`.
DaniGuardiola Jul 25, 2024
11a2492
Updated Tabs tests to use new re-render API.
DaniGuardiola Jul 25, 2024
f8ada30
Revert manual fixes and fix one of the test files.
DaniGuardiola Jul 25, 2024
375c5ca
Fix test file by switching to Ariakit's render utility.
DaniGuardiola Jul 25, 2024
3e8fa49
Remove accidentally pushed code (oops).
DaniGuardiola Jul 25, 2024
f4f5cb9
Fix remaining custom-select-control (v1) tests.
DaniGuardiola Jul 25, 2024
38383d1
Fix remaining font-size-picker tests.
DaniGuardiola Jul 25, 2024
ba36ad0
Upgrade `@ariakit/test` to latest.
DaniGuardiola Jul 25, 2024
b6627b1
Upgrade to 0.3.14
DaniGuardiola Jul 25, 2024
7e7cb32
Upgrade to 0.4.0
DaniGuardiola Jul 25, 2024
49a959f
Fix CustomSelectControl tests
tyxla Jul 26, 2024
4c022ed
Revert "Fix CustomSelectControl tests"
DaniGuardiola Jul 26, 2024
30a8c1f
Added TODO notes to Tooltip tests.
DaniGuardiola Jul 26, 2024
1637baa
Added TODO notes to CustomSelectControl v2 tests and styles.
DaniGuardiola Jul 26, 2024
28307fe
Added TODO notes to ToggleGroupControl tests.
DaniGuardiola Jul 26, 2024
ee85f1a
Added TODO notes to DropdownMenu v2 tests and styles.
DaniGuardiola Jul 26, 2024
246c6dd
Added TODO notes to CustomSelectControl tests.
DaniGuardiola Jul 26, 2024
114badd
Added TODO notes to Composite (legacy) tests.
DaniGuardiola Jul 26, 2024
6679cc6
Fixed all issues and updated snapshots.
DaniGuardiola Jul 26, 2024
d2e08e3
Upgrade to 0.4.1
DaniGuardiola Jul 26, 2024
31ad777
Undo temporary hack.
DaniGuardiola Jul 26, 2024
bbfb8b1
Upgrade to 0.4.2
DaniGuardiola Jul 26, 2024
2355a34
Upgrade to 0.4.3
DaniGuardiola Jul 26, 2024
91b4b66
Upgrade to 0.4.4
DaniGuardiola Jul 26, 2024
d1aab2c
Upgrade to 0.4.5
DaniGuardiola Jul 26, 2024
6ed775d
Upgrade to 0.4.6
DaniGuardiola Jul 26, 2024
3e90c1b
Temporarily revert all deps changes
DaniGuardiola Jul 26, 2024
bbd1f11
Merge branch 'trunk' of https://github.com/WordPress/gutenberg into u…
DaniGuardiola Jul 26, 2024
157479d
Restore from latest trunk
DaniGuardiola Jul 26, 2024
c32b9a0
Upgrade to 0.4.7 (and 0.3.16 for ariakit/test) cleanly
DaniGuardiola Jul 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix remaining font-size-picker tests.
  • Loading branch information
@DaniGuardiola
DaniGuardiola committed Jul 25, 2024
commit 38383d19af9fa12048e8c863e06bacd80a031396
93 changes: 50 additions & 43 deletions packages/components/src/font-size-picker/test/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { render, screen, fireEvent } from '@testing-library/react';
import { screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

/**
Expand All @@ -13,6 +13,7 @@ import type { FontSize } from '../types';
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
import { render } from '../../utils/tmp-ariakit-test-render-replacement';

const ControlledFontSizePicker = ( {
onChange,
Expand Down Expand Up @@ -44,7 +45,9 @@ describe( 'FontSizePicker', () => {
async ( { value, expectedValue } ) => {
const user = userEvent.setup();
const onChange = jest.fn();
render( <FontSizePicker value={ value } onChange={ onChange } /> );
await render(
<FontSizePicker value={ value } onChange={ onChange } />
);
const input = screen.getByLabelText( 'Custom' );
await user.clear( input );
await user.type( input, '80' );
Expand All @@ -63,7 +66,7 @@ describe( 'FontSizePicker', () => {
async ( { firstFontSize, expectedValue } ) => {
const user = userEvent.setup();
const onChange = jest.fn();
render(
await render(
<FontSizePicker
fontSizes={ [ { slug: 'slug', size: firstFontSize } ] }
onChange={ onChange }
Expand Down Expand Up @@ -115,7 +118,7 @@ describe( 'FontSizePicker', () => {

it( 'displays a select control', async () => {
const user = userEvent.setup();
render( <FontSizePicker fontSizes={ fontSizes } /> );
await render( <FontSizePicker fontSizes={ fontSizes } /> );
await user.click(
screen.getByRole( 'combobox', { name: 'Font size' } )
);
Expand All @@ -137,8 +140,8 @@ describe( 'FontSizePicker', () => {
{ value: '3px', expectedLabel: 'Size Custom' },
] )(
'displays $expectedLabel as label when value is $value',
( { value, expectedLabel } ) => {
render(
async ( { value, expectedLabel } ) => {
await render(
<FontSizePicker fontSizes={ fontSizes } value={ value } />
);
expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
Expand All @@ -161,7 +164,7 @@ describe( 'FontSizePicker', () => {
async ( { option, value, expectedArguments } ) => {
const user = userEvent.setup();
const onChange = jest.fn();
render(
await render(
<FontSizePicker
fontSizes={ fontSizes }
value={ value }
Expand Down Expand Up @@ -219,7 +222,7 @@ describe( 'FontSizePicker', () => {

it( 'displays a select control', async () => {
const user = userEvent.setup();
render( <FontSizePicker fontSizes={ fontSizes } /> );
await render( <FontSizePicker fontSizes={ fontSizes } /> );
await user.click(
screen.getByRole( 'combobox', { name: 'Font size' } )
);
Expand All @@ -241,8 +244,8 @@ describe( 'FontSizePicker', () => {
{ value: '8px', option: 'Tiny' },
] )(
'defaults to $option when value is $value',
( { value, option } ) => {
render(
async ( { value, option } ) => {
await render(
<FontSizePicker fontSizes={ fontSizes } value={ value } />
);
expect(
Expand All @@ -260,8 +263,8 @@ describe( 'FontSizePicker', () => {
{ value: '3px', expectedLabel: 'Size Custom' },
] )(
'displays $expectedLabel as label when value is $value',
( { value, expectedLabel } ) => {
render(
async ( { value, expectedLabel } ) => {
await render(
<FontSizePicker fontSizes={ fontSizes } value={ value } />
);
expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
Expand Down Expand Up @@ -302,7 +305,7 @@ describe( 'FontSizePicker', () => {
async ( { option, value, expectedArguments } ) => {
const user = userEvent.setup();
const onChange = jest.fn();
render(
await render(
<FontSizePicker
fontSizes={ fontSizes }
value={ value }
Expand Down Expand Up @@ -353,8 +356,8 @@ describe( 'FontSizePicker', () => {
},
];

it( 'displays a toggle group control with t-shirt sizes', () => {
render( <FontSizePicker fontSizes={ fontSizes } /> );
it( 'displays a toggle group control with t-shirt sizes', async () => {
await render( <FontSizePicker fontSizes={ fontSizes } /> );
const options = screen.getAllByRole( 'radio' );
expect( options ).toHaveLength( 5 );
expect( options[ 0 ] ).toHaveTextContent( 'S' );
Expand All @@ -375,8 +378,8 @@ describe( 'FontSizePicker', () => {
{ value: '40px', expectedLabel: 'Size Gigantosaurus' },
] )(
'displays $expectedLabel as label when value is $value',
( { value, expectedLabel } ) => {
render(
async ( { value, expectedLabel } ) => {
await render(
<FontSizePicker fontSizes={ fontSizes } value={ value } />
);
expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
Expand All @@ -386,7 +389,7 @@ describe( 'FontSizePicker', () => {
it( 'calls onChange when a font size is selected', async () => {
const user = userEvent.setup();
const onChange = jest.fn();
render(
await render(
<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
);
await user.click( screen.getByRole( 'radio', { name: 'Medium' } ) );
Expand Down Expand Up @@ -422,8 +425,8 @@ describe( 'FontSizePicker', () => {
},
];

it( 'displays a toggle group control with t-shirt sizes', () => {
render( <FontSizePicker fontSizes={ fontSizes } /> );
it( 'displays a toggle group control with t-shirt sizes', async () => {
await render( <FontSizePicker fontSizes={ fontSizes } /> );
const options = screen.getAllByRole( 'radio' );
expect( options ).toHaveLength( 4 );
expect( options[ 0 ] ).toHaveTextContent( 'S' );
Expand All @@ -447,8 +450,8 @@ describe( 'FontSizePicker', () => {
},
] )(
'displays $expectedLabel as label when value is $value',
( { value, expectedLabel } ) => {
render(
async ( { value, expectedLabel } ) => {
await render(
<FontSizePicker fontSizes={ fontSizes } value={ value } />
);
expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
Expand All @@ -471,7 +474,7 @@ describe( 'FontSizePicker', () => {
async ( { radio, expectedArguments } ) => {
const user = userEvent.setup();
const onChange = jest.fn();
render(
await render(
<FontSizePicker
fontSizes={ fontSizes }
onChange={ onChange }
Expand All @@ -490,8 +493,8 @@ describe( 'FontSizePicker', () => {
} );

function commonToggleGroupTests( fontSizes: FontSize[] ) {
it( 'defaults to M when value is 16px', () => {
render(
it( 'defaults to M when value is 16px', async () => {
await render(
<FontSizePicker
fontSizes={ fontSizes }
value={ fontSizes[ 0 ].size }
Expand All @@ -504,8 +507,8 @@ describe( 'FontSizePicker', () => {

test.each( [ undefined, '' ] )(
'has no selection when value is %p',
( value ) => {
render(
async ( value ) => {
await render(
<FontSizePicker fontSizes={ fontSizes } value={ value } />
);
expect( screen.getByRole( 'radiogroup' ) ).toBeVisible();
Expand All @@ -520,7 +523,7 @@ describe( 'FontSizePicker', () => {
it( 'shows custom input when Custom is selected', async () => {
const user = userEvent.setup();
const onChange = jest.fn();
render(
await render(
<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
);
await user.click(
Expand All @@ -535,13 +538,15 @@ describe( 'FontSizePicker', () => {
}

function commonTests( fontSizes: FontSize[] ) {
it( 'shows custom input when value is unknown', () => {
render( <FontSizePicker fontSizes={ fontSizes } value="3px" /> );
it( 'shows custom input when value is unknown', async () => {
await render(
<FontSizePicker fontSizes={ fontSizes } value="3px" />
);
expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
} );

it( 'hides custom input when disableCustomFontSizes is set to `true` with a custom font size', () => {
const { rerender } = render(
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();
Expand All @@ -558,8 +563,8 @@ describe( 'FontSizePicker', () => {
).not.toBeInTheDocument();
} );

it( "doesn't hide custom input when the selected font size is a predef", () => {
const { rerender } = render(
it( "doesn't hide custom input when the selected font size is a predef", async () => {
const { rerender } = await render(
<FontSizePicker fontSizes={ fontSizes } value="3px" />
);
expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
Expand All @@ -576,7 +581,7 @@ describe( 'FontSizePicker', () => {
it( 'allows custom values by default', async () => {
const user = userEvent.setup();
const onChange = jest.fn();
render(
await render(
<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
);
await user.click(
Expand All @@ -590,7 +595,9 @@ describe( 'FontSizePicker', () => {
it( 'allows switching between custom and predef inputs when pressing the dedicated toggle', async () => {
const user = userEvent.setup();

render( <ControlledFontSizePicker fontSizes={ fontSizes } /> );
await render(
<ControlledFontSizePicker fontSizes={ fontSizes } />
);

await user.click(
screen.getByRole( 'button', { name: 'Set custom size' } )
Expand All @@ -607,8 +614,8 @@ describe( 'FontSizePicker', () => {
).not.toBeInTheDocument();
} );

it( 'does not allow custom values when disableCustomFontSizes is set', () => {
render(
it( 'does not allow custom values when disableCustomFontSizes is set', async () => {
await render(
<FontSizePicker
fontSizes={ fontSizes }
disableCustomFontSizes
Expand All @@ -621,7 +628,7 @@ describe( 'FontSizePicker', () => {

it( 'does not display a slider by default', async () => {
const user = userEvent.setup();
render( <FontSizePicker fontSizes={ fontSizes } /> );
await render( <FontSizePicker fontSizes={ fontSizes } /> );
await user.click(
screen.getByRole( 'button', { name: 'Set custom size' } )
);
Expand All @@ -633,7 +640,7 @@ describe( 'FontSizePicker', () => {
it( 'allows a slider to be used when withSlider is set', async () => {
const user = userEvent.setup();
const onChange = jest.fn();
render(
await render(
<FontSizePicker
fontSizes={ fontSizes }
withSlider
Expand All @@ -654,7 +661,7 @@ describe( 'FontSizePicker', () => {
it( 'allows reset by default', async () => {
const user = userEvent.setup();
const onChange = jest.fn();
render(
await render(
<FontSizePicker
fontSizes={ fontSizes }
value={ fontSizes[ 0 ].size }
Expand All @@ -671,7 +678,7 @@ describe( 'FontSizePicker', () => {

it( 'does not allow reset when withReset is false', async () => {
const user = userEvent.setup();
render(
await render(
<FontSizePicker
fontSizes={ fontSizes }
value={ fontSizes[ 0 ].size }
Expand All @@ -689,7 +696,7 @@ describe( 'FontSizePicker', () => {
it( 'applies custom units to custom font size control', async () => {
const user = userEvent.setup();

render(
await render(
<FontSizePicker
fontSizes={ fontSizes }
value={ fontSizes[ 0 ].size }
Expand Down