Component: Update withFilter HOC to support more advanced use cases

WordPress · Dec 6, 2017 · e11cba0 · e11cba0
1 parent 0e60bd7
commit e11cba0
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/components/higher-order/with-filters/index.js b/components/higher-order/with-filters/index.js
@@ -13,7 +13,9 @@ import { applyFilters } from '@wordpress/hooks';
 export default function withFilters( hookName ) {
 	return ( WrappedComponent ) => {
 		const FiltersComponent = ( props ) => {
-			return applyFilters( hookName, <WrappedComponent { ...props } />, props );
+			const EnhancedComponent = applyFilters( hookName, WrappedComponent, props );
+
+			return <EnhancedComponent { ...props } />;
 		};
 		FiltersComponent.displayName = getWrapperDisplayName( WrappedComponent, 'filters' );
 

diff --git a/components/higher-order/with-filters/test/index.js b/components/higher-order/with-filters/test/index.js
@@ -1,12 +1,11 @@
 /**
  * External dependencies
  */
-import { mount, shallow } from 'enzyme';
+import { shallow } from 'enzyme';
 
 /**
  * WordPress dependencies
  */
-import { concatChildren } from '@wordpress/element';
 import { addFilter, removeAllFilters } from '@wordpress/hooks';
 
 /**
@@ -30,10 +29,11 @@ describe( 'withFilters', () => {
 	} );
 
 	it( 'should display a component overridden by the filter', () => {
+		const OverriddenComponent = () => <div>Overridden component</div>;
 		addFilter(
 			'EnhancedComponent',
-			'test\enhanced-component-override',
-			() => <div>Overridden component</div>
+			'test/enhanced-component-override',
+			() => OverriddenComponent
 		);
 
 		const wrapper = shallow( <EnhancedComponent /> );
@@ -45,13 +45,17 @@ describe( 'withFilters', () => {
 		const ComposedComponent = () => <div>Composed component</div>;
 		addFilter(
 			hookName,
-			'test\enhanced-component-compose',
-			( element ) => concatChildren( element, <ComposedComponent /> )
+			'test/enhanced-component-compose',
+			( FilteredComponent ) => () => (
+				<div>
+					<FilteredComponent />
+					<ComposedComponent />
+				</div>
+			)
 		);
 
-		const wrapper = mount( <EnhancedComponent /> );
+		const wrapper = shallow( <EnhancedComponent /> );
 
-		expect( wrapper.find( MyComponent ) ).toBePresent();
-		expect( wrapper.find( ComposedComponent ) ).toBePresent();
+		expect( wrapper.html() ).toBe( '<div><div>My component</div><div>Composed component</div></div>' );
 	} );
 } );