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

Components: Refactor withFilters tests to @testing-library/react #44017

Merged
merged 2 commits into from
Sep 9, 2022
Merged

Components: Refactor withFilters tests to @testing-library/react #44017

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67c643b
Components: Refactor withFilters tests to @testing-library/react
tyxla Sep 9, 2022
2fe6c3d
Add CHANGELOG
tyxla Sep 9, 2022
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
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@
- `Popover`: refactor to TypeScript ([#43823](https://github.com/WordPress/gutenberg/pull/43823/)).
- `BorderControl` and `BorderBoxControl`: replace temporary types with `Popover`'s types ([#43823](https://github.com/WordPress/gutenberg/pull/43823/)).
- `DimensionControl`: Refactor tests to `@testing-library/react` ([#43916](https://github.com/WordPress/gutenberg/pull/43916)).
- `withFilters`: Refactor tests to `@testing-library/react` ([#44017](https://github.com/WordPress/gutenberg/pull/44017)).

## 20.0.0 (2022-08-24)

Expand Down
87 changes: 87 additions & 0 deletions packages/components/src/higher-order/with-filters/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`withFilters should display a component overridden by the filter 1`] = `
<div>
<div>
Overridden component
</div>
</div>
`;

exports[`withFilters should display original component when no filters applied 1`] = `
<div>
<div>
My component
</div>
</div>
`;

exports[`withFilters should display two components composed by the filter 1`] = `
<div>
<div>
<div>
My component
</div>
<div>
Composed component
</div>
</div>
</div>
`;

exports[`withFilters should not re-render component when new filter added before component was mounted 1`] = `
<div>
<blockquote>
<div>
Spied component
</div>
</blockquote>
</div>
`;

exports[`withFilters should re-render both components once each when one filter added 1`] = `
<div>
<section>
<blockquote>
<div>
Spied component
</div>
</blockquote>
<blockquote>
<div>
Spied component
</div>
</blockquote>
</section>
</div>
`;

exports[`withFilters should re-render component once when new filter added after component was mounted 1`] = `
<div>
<blockquote>
<div>
Spied component
</div>
</blockquote>
</div>
`;

exports[`withFilters should re-render component once when two filters added in the same animation frame 1`] = `
<div>
<section>
<blockquote>
<div>
Spied component
</div>
</blockquote>
</section>
</div>
`;

exports[`withFilters should re-render component twice when new filter added and removed in two different animation frames 1`] = `
<div>
<div>
Spied component
</div>
</div>
`;
94 changes: 20 additions & 74 deletions packages/components/src/higher-order/with-filters/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,32 @@
/**
* External dependencies
*/
import { shallow } from 'enzyme';
import TestUtils from 'react-dom/test-utils';
import ReactDOM from 'react-dom';
import { render } from '@testing-library/react';

/**
* WordPress dependencies
*/
import { addFilter, removeAllFilters, removeFilter } from '@wordpress/hooks';
import { Component } from '@wordpress/element';

/**
* Internal dependencies
*/
import withFilters from '..';

const assertExpectedHtml = ( wrapper, expectedHTML ) => {
// eslint-disable-next-line react/no-find-dom-node
const element = ReactDOM.findDOMNode( wrapper );
expect( element.outerHTML ).toBe( expectedHTML );
};

// This is needed because TestUtils does not accept a stateless component.
// anything run through a HOC ends up as a stateless component.
const getTestComponent = ( WrappedComponent ) => {
class TestComponent extends Component {
render() {
return <WrappedComponent { ...this.props } />;
}
}
return <TestComponent />;
};

describe( 'withFilters', () => {
let shallowWrapper, wrapper;

const hookName = 'EnhancedComponent';
const MyComponent = () => <div>My component</div>;

afterEach( () => {
if ( wrapper ) {
ReactDOM.unmountComponentAtNode(
// eslint-disable-next-line react/no-find-dom-node
ReactDOM.findDOMNode( wrapper ).parentNode
);
}
if ( shallowWrapper ) {
shallowWrapper.unmount();
}
removeAllFilters( hookName );
} );

it( 'should display original component when no filters applied', () => {
const EnhancedComponent = withFilters( hookName )( MyComponent );

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

expect( shallowWrapper.html() ).toBe( '<div>My component</div>' );
expect( container ).toMatchSnapshot();
} );

it( 'should display a component overridden by the filter', () => {
Expand All @@ -69,11 +38,9 @@ describe( 'withFilters', () => {
);
const EnhancedComponent = withFilters( hookName )( MyComponent );

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

expect( shallowWrapper.html() ).toBe(
'<div>Overridden component</div>'
);
expect( container ).toMatchSnapshot();
} );

it( 'should display two components composed by the filter', () => {
Expand All @@ -91,11 +58,9 @@ describe( 'withFilters', () => {
);
const EnhancedComponent = withFilters( hookName )( MyComponent );

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

expect( shallowWrapper.html() ).toBe(
'<div><div>My component</div><div>Composed component</div></div>'
);
expect( container ).toMatchSnapshot();
} );

it( 'should not re-render component when new filter added before component was mounted', () => {
Expand All @@ -116,17 +81,13 @@ describe( 'withFilters', () => {
);
const EnhancedComponent = withFilters( hookName )( SpiedComponent );

wrapper = TestUtils.renderIntoDocument(
getTestComponent( EnhancedComponent )
);
const { container } = render( <EnhancedComponent /> );

expect( container ).toMatchSnapshot();

jest.runAllTimers();

expect( spy ).toHaveBeenCalledTimes( 1 );
assertExpectedHtml(
wrapper,
'<blockquote><div>Spied component</div></blockquote>'
);
} );

it( 'should re-render component once when new filter added after component was mounted', () => {
Expand All @@ -137,9 +98,7 @@ describe( 'withFilters', () => {
};
const EnhancedComponent = withFilters( hookName )( SpiedComponent );

wrapper = TestUtils.renderIntoDocument(
getTestComponent( EnhancedComponent )
);
const { container } = render( <EnhancedComponent /> );

spy.mockClear();
addFilter(
Expand All @@ -155,10 +114,7 @@ describe( 'withFilters', () => {
jest.runAllTimers();

expect( spy ).toHaveBeenCalledTimes( 1 );
assertExpectedHtml(
wrapper,
'<blockquote><div>Spied component</div></blockquote>'
);
expect( container ).toMatchSnapshot();
} );

it( 'should re-render component once when two filters added in the same animation frame', () => {
Expand All @@ -168,9 +124,8 @@ describe( 'withFilters', () => {
return <div>Spied component</div>;
};
const EnhancedComponent = withFilters( hookName )( SpiedComponent );
wrapper = TestUtils.renderIntoDocument(
getTestComponent( EnhancedComponent )
);

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

spy.mockClear();

Expand All @@ -197,10 +152,7 @@ describe( 'withFilters', () => {
jest.runAllTimers();

expect( spy ).toHaveBeenCalledTimes( 1 );
assertExpectedHtml(
wrapper,
'<section><blockquote><div>Spied component</div></blockquote></section>'
);
expect( container ).toMatchSnapshot();
} );

it( 'should re-render component twice when new filter added and removed in two different animation frames', () => {
Expand All @@ -210,9 +162,7 @@ describe( 'withFilters', () => {
return <div>Spied component</div>;
};
const EnhancedComponent = withFilters( hookName )( SpiedComponent );
wrapper = TestUtils.renderIntoDocument(
getTestComponent( EnhancedComponent )
);
const { container } = render( <EnhancedComponent /> );

spy.mockClear();
addFilter(
Expand All @@ -231,7 +181,7 @@ describe( 'withFilters', () => {
jest.runAllTimers();

expect( spy ).toHaveBeenCalledTimes( 2 );
assertExpectedHtml( wrapper, '<div>Spied component</div>' );
expect( container ).toMatchSnapshot();
} );

it( 'should re-render both components once each when one filter added', () => {
Expand All @@ -241,15 +191,14 @@ describe( 'withFilters', () => {
return <div>Spied component</div>;
};
const EnhancedComponent = withFilters( hookName )( SpiedComponent );

const CombinedComponents = () => (
<section>
<EnhancedComponent />
<EnhancedComponent />
</section>
);
wrapper = TestUtils.renderIntoDocument(
getTestComponent( CombinedComponents )
);
const { container } = render( <CombinedComponents /> );

spy.mockClear();
addFilter(
Expand All @@ -265,9 +214,6 @@ describe( 'withFilters', () => {
jest.runAllTimers();

expect( spy ).toHaveBeenCalledTimes( 2 );
assertExpectedHtml(
wrapper,
'<section><blockquote><div>Spied component</div></blockquote><blockquote><div>Spied component</div></blockquote></section>'
);
expect( container ).toMatchSnapshot();
} );
} );