Skip to content

Commit

Permalink
withFilters tests: more precise act() calls
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsnajdr
jsnajdr committed Dec 18, 2022
1 parent 8690500 commit 1c361aa
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 1c361aa

@github-actions
Copy link

@github-actions github-actions bot commented on 1c361aa Dec 18, 2022 •
edited
Loading

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/3723908950
📝 Reported issues:

Please sign in to comment.