Skip to content
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

Jump to bottom

Migrate PaletteEdit and CircularOptionPicker tests from user-event to ariakit/test #57809

Merged
merged 4 commits into from
Jan 12, 2024
Merged

Migrate PaletteEdit and CircularOptionPicker tests from user-event to ariakit/test #57809

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f6e2ba8
Migrate ColorPalette tests from user-event to ariakit/test
ciampo Jan 12, 2024
c7b359e
Migrate CircularOptionPicker tests from user-event to ariakit/test
ciampo Jan 12, 2024
05eb00a
CHANGELOG
ciampo Jan 12, 2024
db5e254
Wait for focus to move
ciampo Jan 12, 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
26 changes: 10 additions & 16 deletions packages/components/src/circular-option-picker/test/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { press } from '@ariakit/test';

/**
* Internal dependencies
Expand Down Expand Up @@ -71,28 +71,24 @@ describe( 'CircularOptionPicker', () => {

describe( 'when `loop` is not set', () => {
it( 'should loop', async () => {
const user = userEvent.setup();

render(
<CircularOptionPicker
{ ...DEFAULT_PROPS }
options={ MULTIPLE_OPTIONS }
/>
);

await user.tab();
await press.Tab();
expect( getOption( 'Option One' ) ).toHaveFocus();
await user.keyboard( '[ArrowRight]' );
await press.ArrowRight();
expect( getOption( 'Option Two' ) ).toHaveFocus();
await user.keyboard( '[ArrowRight]' );
await press.ArrowRight();
expect( getOption( 'Option One' ) ).toHaveFocus();
} );
} );

describe( 'when `loop` is true', () => {
it( 'should loop', async () => {
const user = userEvent.setup();

render(
<CircularOptionPicker
{ ...DEFAULT_PROPS }
Expand All @@ -101,19 +97,17 @@ describe( 'CircularOptionPicker', () => {
/>
);

await user.tab();
await press.Tab();
expect( getOption( 'Option One' ) ).toHaveFocus();
await user.keyboard( '[ArrowRight]' );
await press.ArrowRight();
expect( getOption( 'Option Two' ) ).toHaveFocus();
await user.keyboard( '[ArrowRight]' );
await press.ArrowRight();
expect( getOption( 'Option One' ) ).toHaveFocus();
} );
} );

describe( 'when `loop` is false', () => {
it( 'should not loop', async () => {
const user = userEvent.setup();

render(
<CircularOptionPicker
{ ...DEFAULT_PROPS }
Expand All @@ -122,11 +116,11 @@ describe( 'CircularOptionPicker', () => {
/>
);

await user.tab();
await press.Tab();
expect( getOption( 'Option One' ) ).toHaveFocus();
await user.keyboard( '[ArrowRight]' );
await press.ArrowRight();
expect( getOption( 'Option Two' ) ).toHaveFocus();
await user.keyboard( '[ArrowRight]' );
await press.ArrowRight();
expect( getOption( 'Option Two' ) ).toHaveFocus();
} );
} );
Expand Down
71 changes: 39 additions & 32 deletions packages/components/src/palette-edit/test/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { click, type, press } from '@ariakit/test';

/**
* Internal dependencies
Expand All @@ -12,6 +12,15 @@ import type { PaletteElement } from '../types';

const noop = () => {};

async function clearInput( input: HTMLInputElement ) {
await click( input );

// Press backspace as many times as the input's current value
for ( const _ of Array( input.value.length ) ) {
await press.Backspace();
}
}

describe( 'getNameForPosition', () => {
test( 'should return 1 by default', () => {
const slugPrefix = 'test-';
Expand Down Expand Up @@ -149,10 +158,9 @@ describe( 'PaletteEdit', () => {
} );

it( 'shows an option to remove all colors', async () => {
const user = userEvent.setup();
render( <PaletteEdit { ...defaultProps } colors={ colors } /> );

await user.click(
await click(
screen.getByRole( 'button', {
name: 'Color options',
} )
Expand All @@ -166,12 +174,11 @@ describe( 'PaletteEdit', () => {
} );

it( 'shows a reset option when the `canReset` prop is enabled', async () => {
const user = userEvent.setup();
render(
<PaletteEdit { ...defaultProps } colors={ colors } canReset />
);

await user.click(
await click(
screen.getByRole( 'button', {
name: 'Color options',
} )
Expand All @@ -184,10 +191,9 @@ describe( 'PaletteEdit', () => {
} );

it( 'does not show a reset colors option when `canReset` is disabled', async () => {
const user = userEvent.setup();
render( <PaletteEdit { ...defaultProps } colors={ colors } /> );

await user.click(
await click(
screen.getByRole( 'button', {
name: 'Color options',
} )
Expand All @@ -200,7 +206,6 @@ describe( 'PaletteEdit', () => {
} );

it( 'calls the `onChange` with the new color appended', async () => {
const user = userEvent.setup();
const onChange = jest.fn();

render(
Expand All @@ -211,7 +216,7 @@ describe( 'PaletteEdit', () => {
/>
);

await user.click(
await click(
screen.getByRole( 'button', {
name: 'Add color',
} )
Expand All @@ -230,7 +235,6 @@ describe( 'PaletteEdit', () => {
} );

it( 'calls the `onChange` with the new gradient appended', async () => {
const user = userEvent.setup();
const onChange = jest.fn();

render(
Expand All @@ -241,7 +245,7 @@ describe( 'PaletteEdit', () => {
/>
);

await user.click(
await click(
screen.getByRole( 'button', {
name: 'Add gradient',
} )
Expand Down Expand Up @@ -271,7 +275,6 @@ describe( 'PaletteEdit', () => {
} );

it( 'can remove a color', async () => {
const user = userEvent.setup();
const onChange = jest.fn();

render(
Expand All @@ -282,18 +285,18 @@ describe( 'PaletteEdit', () => {
/>
);

await user.click(
await click(
screen.getByRole( 'button', {
name: 'Color options',
} )
);
await user.click(
await click(
screen.getByRole( 'button', {
name: 'Show details',
} )
);
await user.click( screen.getByText( 'Primary' ) );
await user.click(
await click( screen.getByText( 'Primary' ) );
await click(
screen.getByRole( 'button', {
name: 'Remove color',
} )
Expand All @@ -305,7 +308,6 @@ describe( 'PaletteEdit', () => {
} );

it( 'can update palette name', async () => {
const user = userEvent.setup();
const onChange = jest.fn();

render(
Expand All @@ -316,22 +318,24 @@ describe( 'PaletteEdit', () => {
/>
);

await user.click(
await click(
screen.getByRole( 'button', {
name: 'Color options',
} )
);
await user.click(
await click(
screen.getByRole( 'button', {
name: 'Show details',
} )
);
await user.click( screen.getByText( 'Primary' ) );
await click( screen.getByText( 'Primary' ) );
const nameInput = screen.getByRole( 'textbox', {
name: 'Color name',
} );
await user.clear( nameInput );
await user.type( nameInput, 'Primary Updated' );

await clearInput( nameInput as HTMLInputElement );

await type( 'Primary Updated' );

await waitFor( () => {
expect( onChange ).toHaveBeenCalledWith( [
Expand All @@ -346,7 +350,6 @@ describe( 'PaletteEdit', () => {
} );

it( 'can update color palette value', async () => {
const user = userEvent.setup();
const onChange = jest.fn();

render(
Expand All @@ -357,12 +360,14 @@ describe( 'PaletteEdit', () => {
/>
);

await user.click( screen.getByLabelText( 'Color: Primary' ) );
await click( screen.getByLabelText( 'Color: Primary' ) );
const hexInput = screen.getByRole( 'textbox', {
name: 'Hex color',
} );
await user.clear( hexInput );
await user.type( hexInput, '000000' );

await clearInput( hexInput as HTMLInputElement );

await type( '000000' );

await waitFor( () => {
expect( onChange ).toHaveBeenCalledWith( [
Expand All @@ -376,7 +381,6 @@ describe( 'PaletteEdit', () => {
} );

it( 'can update gradient palette value', async () => {
const user = userEvent.setup();
const onChange = jest.fn();

render(
Expand All @@ -387,12 +391,15 @@ describe( 'PaletteEdit', () => {
/>
);

await user.click( screen.getByLabelText( 'Gradient: Pale ocean' ) );
await click( screen.getByLabelText( 'Gradient: Pale ocean' ) );

const typeSelectElement = screen.getByRole( 'combobox', {
name: 'Type',
} );
await user.selectOptions( typeSelectElement, 'radial-gradient' );
// Select radial gradient option
await click(
screen.getByRole( 'combobox', {
name: 'Type',
} )
);
await click( screen.getByRole( 'option', { name: 'Radial' } ) );

await waitFor( () => {
expect( onChange ).toHaveBeenCalledWith( [
Expand Down
Loading