Skip to content

Commit

Permalink
withFilters tests: more precise act() calls (#46630)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsnajdr
jsnajdr authored Dec 19, 2022
1 parent 967cba4 commit 1b5994a
Showing 1 changed file with 70 additions and 74 deletions.
144 changes: 70 additions & 74 deletions packages/components/src/higher-order/with-filters/test/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import { addFilter, removeAllFilters, removeFilter } from '@wordpress/hooks';
*/
import withFilters from '..';

jest.useFakeTimers();

describe( 'withFilters', () => {
const hookName = 'EnhancedComponent';
const MyComponent = () => <div>My component</div>;
Expand Down Expand Up @@ -79,106 +81,101 @@ describe( 'withFilters', () => {

const { container } = render( <EnhancedComponent /> );

expect( container ).toMatchSnapshot();

jest.runAllTimers();
act( () => jest.runAllTimers() );

expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
expect( container ).toMatchSnapshot();
} );

it( 'should re-render component once when new filter added after component was mounted', async () => {
it( 'should re-render component once when new filter added after component was mounted', () => {
const SpiedComponent = jest.fn( () => <div>Spied component</div> );
const EnhancedComponent = withFilters( hookName )( SpiedComponent );

const { container } = render( <EnhancedComponent /> );

SpiedComponent.mockClear();

await act( () => {
addFilter(
hookName,
'test/enhanced-component-spy-1',
( FilteredComponent ) => () =>
(
<blockquote>
<FilteredComponent />
</blockquote>
)
);
jest.runAllTimers();
} );
addFilter(
hookName,
'test/enhanced-component-spy-1',
( FilteredComponent ) => () =>
(
<blockquote>
<FilteredComponent />
</blockquote>
)
);

act( () => jest.runAllTimers() );

expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
expect( container ).toMatchSnapshot();
} );

it( 'should re-render component once when two filters added in the same animation frame', async () => {
it( 'should re-render component once when two filters added in the same animation frame', () => {
const SpiedComponent = jest.fn( () => <div>Spied component</div> );
const EnhancedComponent = withFilters( hookName )( SpiedComponent );

const { container } = render( <EnhancedComponent /> );

SpiedComponent.mockClear();

await act( () => {
addFilter(
hookName,
'test/enhanced-component-spy-1',
( FilteredComponent ) => () =>
(
<blockquote>
<FilteredComponent />
</blockquote>
)
);
addFilter(
hookName,
'test/enhanced-component-spy-2',
( FilteredComponent ) => () =>
(
<section>
<FilteredComponent />
</section>
)
);
jest.runAllTimers();
} );
addFilter(
hookName,
'test/enhanced-component-spy-1',
( FilteredComponent ) => () =>
(
<blockquote>
<FilteredComponent />
</blockquote>
)
);
addFilter(
hookName,
'test/enhanced-component-spy-2',
( FilteredComponent ) => () =>
(
<section>
<FilteredComponent />
</section>
)
);

act( () => jest.runAllTimers() );

expect( SpiedComponent ).toHaveBeenCalledTimes( 1 );
expect( container ).toMatchSnapshot();
} );

it( 'should re-render component twice when new filter added and removed in two different animation frames', async () => {
it( 'should re-render component twice when new filter added and removed in two different animation frames', () => {
const SpiedComponent = jest.fn( () => <div>Spied component</div> );
const EnhancedComponent = withFilters( hookName )( SpiedComponent );
const { container } = render( <EnhancedComponent /> );

SpiedComponent.mockClear();

await act( () => {
addFilter(
hookName,
'test/enhanced-component-spy',
( FilteredComponent ) => () =>
(
<div>
<FilteredComponent />
</div>
)
);
jest.runAllTimers();
} );

await act( () => {
removeFilter( hookName, 'test/enhanced-component-spy' );
jest.runAllTimers();
} );
addFilter(
hookName,
'test/enhanced-component-spy',
( FilteredComponent ) => () =>
(
<div>
<FilteredComponent />
</div>
)
);

act( () => jest.runAllTimers() );

removeFilter( hookName, 'test/enhanced-component-spy' );

act( () => jest.runAllTimers() );

expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
expect( container ).toMatchSnapshot();
} );

it( 'should re-render both components once each when one filter added', async () => {
it( 'should re-render both components once each when one filter added', () => {
const SpiedComponent = jest.fn( () => <div>Spied component</div> );
const EnhancedComponent = withFilters( hookName )( SpiedComponent );

Expand All @@ -192,19 +189,18 @@ describe( 'withFilters', () => {

SpiedComponent.mockClear();

await act( () => {
addFilter(
hookName,
'test/enhanced-component-spy-1',
( FilteredComponent ) => () =>
(
<blockquote>
<FilteredComponent />
</blockquote>
)
);
jest.runAllTimers();
} );
addFilter(
hookName,
'test/enhanced-component-spy-1',
( FilteredComponent ) => () =>
(
<blockquote>
<FilteredComponent />
</blockquote>
)
);

act( () => jest.runAllTimers() );

expect( SpiedComponent ).toHaveBeenCalledTimes( 2 );
expect( container ).toMatchSnapshot();
Expand Down

1 comment on commit 1b5994a

@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.
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/3731699291
📝 Reported issues:

Please sign in to comment.