Skip to content

Commit

Permalink
Components: Remove unnecessary act() from Button tests (#47687)
Browse files Browse the repository at this point in the history
  • Loading branch information
tyxla authored Feb 2, 2023
1 parent 2f24c67 commit f3905b2
Showing 1 changed file with 38 additions and 30 deletions.
68 changes: 38 additions & 30 deletions packages/components/src/button/test/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/**
* External dependencies
*/
import { act, render, screen } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

/**
* WordPress dependencies
Expand Down Expand Up @@ -76,9 +77,14 @@ describe( 'Button', () => {
expect( screen.getByRole( 'button' ) ).toHaveClass( 'is-pressed' );
} );

it( 'should render a button element with has-text when children are passed', () => {
it( 'should render a button element with has-text when children are passed', async () => {
const user = userEvent.setup();

render( <Button icon={ plusCircle }>Children</Button> );
act( () => screen.getByRole( 'button' ).focus() );

// Move focus to the button
await user.tab();

expect( screen.getByRole( 'button' ) ).toHaveClass( 'has-text' );
} );

Expand Down Expand Up @@ -183,16 +189,14 @@ describe( 'Button', () => {
} );

it( 'should add an aria-label when the label property is used, with Tooltip wrapper', async () => {
const user = userEvent.setup();

render( <Button icon={ plusCircle } label="WordPress" /> );
// Wait for the `floating-ui` effects in `Tooltip`/`Popover` to finish running
// See also: https://floating-ui.com/docs/react-dom#testing
await act( () => Promise.resolve() );

expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();

await act( () => {
screen.getByRole( 'button', { name: 'WordPress' } ).focus();
} );
// Move focus to the button
await user.tab();

expect( screen.getByText( 'WordPress' ) ).toBeVisible();
} );
Expand All @@ -216,20 +220,20 @@ describe( 'Button', () => {
} );

it( 'should populate tooltip with label content for buttons without visible labels (no children)', async () => {
const user = userEvent.setup();

render(
<Button
describedBy="Description text"
label="Label"
icon={ plusCircle }
/>
);
await act( () => Promise.resolve() );

expect( screen.queryByText( 'Label' ) ).not.toBeInTheDocument();

await act( async () => {
screen.getByRole( 'button', { name: 'Label' } ).focus();
} );
// Move focus to the button
await user.tab();

expect( screen.getByText( 'Label' ) ).toBeVisible();
} );
Expand All @@ -245,7 +249,6 @@ describe( 'Button', () => {
Children
</Button>
);
await act( () => Promise.resolve() );

expect(
screen.getByRole( 'button', {
Expand All @@ -254,41 +257,47 @@ describe( 'Button', () => {
).toBeVisible();
} );

it( 'should allow tooltip disable', () => {
it( 'should allow tooltip disable', async () => {
const user = userEvent.setup();

render(
<Button
icon={ plusCircle }
label="WordPress"
showTooltip={ false }
/>
);
const button = screen.getByRole( 'button', { name: 'WordPress' } );

expect( button ).toHaveAttribute( 'aria-label', 'WordPress' );
expect(
screen.getByRole( 'button', { name: 'WordPress' } )
).toHaveAttribute( 'aria-label', 'WordPress' );

expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();

act( () => button.focus() );
// Move focus to the button
await user.tab();

expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
} );

it( 'should show the tooltip for empty children', async () => {
const user = userEvent.setup();

render(
<Button icon={ plusCircle } label="WordPress" children={ [] } />
);
await act( () => Promise.resolve() );

expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();

await act( async () => {
screen.getByRole( 'button', { name: 'WordPress' } ).focus();
} );
// Move focus to the button
await user.tab();

expect( screen.getByText( 'WordPress' ) ).toBeVisible();
} );

it( 'should not show the tooltip when icon and children defined', () => {
it( 'should not show the tooltip when icon and children defined', async () => {
const user = userEvent.setup();

render(
<Button icon={ plusCircle } label="WordPress">
Children
Expand All @@ -297,26 +306,25 @@ describe( 'Button', () => {

expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();

act( () => {
screen.getByRole( 'button', { name: 'WordPress' } ).focus();
} );
// Move focus to the button
await user.tab();

expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();
} );

it( 'should force showing the tooltip even if icon and children defined', async () => {
const user = userEvent.setup();

render(
<Button icon={ plusCircle } label="WordPress" showTooltip>
Children
</Button>
);
await act( () => Promise.resolve() );

expect( screen.queryByText( 'WordPress' ) ).not.toBeInTheDocument();

await act( async () => {
screen.getByRole( 'button', { name: 'WordPress' } ).focus();
} );
// Move focus to the button
await user.tab();

expect( screen.getByText( 'WordPress' ) ).toBeVisible();
} );
Expand Down

1 comment on commit f3905b2

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in f3905b2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4074929800
📝 Reported issues:

Please sign in to comment.