Editor: Use hooks instead of HoCs in PostTypeSupportCheck (#53235)

* Editor: Use hooks instead of HoCs in PostTypeSupportCheck * Mock useSelect in tests * Fix more tests
WordPress · Aug 1, 2023 · 52f2bc8 · 52f2bc8 · github-actions · Aug 1, 2023
1 parent 162e477
commit 52f2bc8
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 41 deletions.
diff --git a/packages/editor/src/components/post-author/test/check.js b/packages/editor/src/components/post-author/test/check.js
@@ -19,32 +19,38 @@ jest.mock( '@wordpress/data/src/components/use-select', () => {
 	return mock;
 } );
 
+function setupUseSelectMock( hasAssignAuthorAction, hasAuthors ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			getPostType: () => ( { supports: { author: true } } ),
+			getEditedPostAttribute: () => {},
+			getCurrentPost: () => ( {
+				_links: {
+					'wp:action-assign-author': hasAssignAuthorAction,
+				},
+			} ),
+			getUsers: () => Array( hasAuthors ? 1 : 0 ).fill( {} ),
+		} ) );
+	} );
+}
+
 describe( 'PostAuthorCheck', () => {
 	it( 'should not render anything if has no authors', () => {
-		useSelect.mockImplementation( () => ( {
-			hasAuthors: false,
-			hasAssignAuthorAction: true,
-		} ) );
+		setupUseSelectMock( false, true );
 
 		render( <PostAuthorCheck>authors</PostAuthorCheck> );
 		expect( screen.queryByText( 'authors' ) ).not.toBeInTheDocument();
 	} );
 
 	it( "should not render anything if doesn't have author action", () => {
-		useSelect.mockImplementation( () => ( {
-			hasAuthors: true,
-			hasAssignAuthorAction: false,
-		} ) );
+		setupUseSelectMock( true, false );
 
 		render( <PostAuthorCheck>authors</PostAuthorCheck> );
 		expect( screen.queryByText( 'authors' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should render control', () => {
-		useSelect.mockImplementation( () => ( {
-			hasAuthors: true,
-			hasAssignAuthorAction: true,
-		} ) );
+		setupUseSelectMock( true, true );
 
 		render( <PostAuthorCheck>authors</PostAuthorCheck> );
 		expect( screen.getByText( 'authors' ) ).toBeVisible();

diff --git a/packages/editor/src/components/post-type-support-check/index.js b/packages/editor/src/components/post-type-support-check/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -14,15 +14,19 @@ import { store as editorStore } from '../../store';
  * type supports one of the given `supportKeys` prop.
  *
  * @param {Object}            props             Props.
- * @param {string}            [props.postType]  Current post type.
  * @param {WPElement}         props.children    Children to be rendered if post
  *                                              type supports.
  * @param {(string|string[])} props.supportKeys String or string array of keys
  *                                              to test.
  *
  * @return {WPComponent} The component to be rendered.
  */
-export function PostTypeSupportCheck( { postType, children, supportKeys } ) {
+export function PostTypeSupportCheck( { children, supportKeys } ) {
+	const postType = useSelect( ( select ) => {
+		const { getEditedPostAttribute } = select( editorStore );
+		const { getPostType } = select( coreStore );
+		return getPostType( getEditedPostAttribute( 'type' ) );
+	}, [] );
 	let isSupported = true;
 	if ( postType ) {
 		isSupported = (
@@ -37,10 +41,4 @@ export function PostTypeSupportCheck( { postType, children, supportKeys } ) {
 	return children;
 }
 
-export default withSelect( ( select ) => {
-	const { getEditedPostAttribute } = select( editorStore );
-	const { getPostType } = select( coreStore );
-	return {
-		postType: getPostType( getEditedPostAttribute( 'type' ) ),
-	};
-} )( PostTypeSupportCheck );
+export default PostTypeSupportCheck;
diff --git a/packages/editor/src/components/post-type-support-check/test/index.js b/packages/editor/src/components/post-type-support-check/test/index.js
@@ -3,15 +3,37 @@
  */
 import { render } from '@testing-library/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
 import { PostTypeSupportCheck } from '../';
 
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+function setupUseSelectMock( postType ) {
+	useSelect.mockImplementation( ( cb ) => {
+		return cb( () => ( {
+			getPostType: () => postType,
+			getEditedPostAttribute: () => 'post',
+		} ) );
+	} );
+}
+
 describe( 'PostTypeSupportCheck', () => {
 	it( 'renders its children when post type is not known', () => {
+		setupUseSelectMock( undefined );
+
 		const { container } = render(
-			<PostTypeSupportCheck postType={ undefined } supportKeys="title">
+			<PostTypeSupportCheck supportKeys="title">
 				Supported
 			</PostTypeSupportCheck>
 		);
@@ -20,11 +42,11 @@ describe( 'PostTypeSupportCheck', () => {
 	} );
 
 	it( 'does not render its children when post type is known and not supports', () => {
-		const postType = {
+		setupUseSelectMock( {
 			supports: {},
-		};
+		} );
 		const { container } = render(
-			<PostTypeSupportCheck postType={ postType } supportKeys="title">
+			<PostTypeSupportCheck supportKeys="title">
 				Supported
 			</PostTypeSupportCheck>
 		);
@@ -33,13 +55,13 @@ describe( 'PostTypeSupportCheck', () => {
 	} );
 
 	it( 'renders its children when post type is known and supports', () => {
-		const postType = {
+		setupUseSelectMock( {
 			supports: {
 				title: true,
 			},
-		};
+		} );
 		const { container } = render(
-			<PostTypeSupportCheck postType={ postType } supportKeys="title">
+			<PostTypeSupportCheck supportKeys="title">
 				Supported
 			</PostTypeSupportCheck>
 		);
@@ -48,16 +70,13 @@ describe( 'PostTypeSupportCheck', () => {
 	} );
 
 	it( 'renders its children if some of keys supported', () => {
-		const postType = {
+		setupUseSelectMock( {
 			supports: {
 				title: true,
 			},
-		};
+		} );
 		const { container } = render(
-			<PostTypeSupportCheck
-				postType={ postType }
-				supportKeys={ [ 'title', 'thumbnail' ] }
-			>
+			<PostTypeSupportCheck supportKeys={ [ 'title', 'thumbnail' ] }>
 				Supported
 			</PostTypeSupportCheck>
 		);
@@ -66,14 +85,11 @@ describe( 'PostTypeSupportCheck', () => {
 	} );
 
 	it( 'does not render its children if none of keys supported', () => {
-		const postType = {
+		setupUseSelectMock( {
 			supports: {},
-		};
+		} );
 		const { container } = render(
-			<PostTypeSupportCheck
-				postType={ postType }
-				supportKeys={ [ 'title', 'thumbnail' ] }
-			>
+			<PostTypeSupportCheck supportKeys={ [ 'title', 'thumbnail' ] }>
 				Supported
 			</PostTypeSupportCheck>
 		);