Update notice block to use useSelect

WordPress · May 19, 2020 · 2417257 · 2417257
1 parent 56e25fd
commit 2417257
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 50 deletions.
diff --git a/packages/block-directory/src/components/downloadable-block-notice/index.js b/packages/block-directory/src/components/downloadable-block-notice/index.js
@@ -3,35 +3,27 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Button, Notice } from '@wordpress/components';
-import { withSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import { DOWNLOAD_ERROR_NOTICE_ID } from '../../store/constants';
+export const DownloadableBlockNotice = ( { block, onClick } ) => {
+	const errorNotice = useSelect(
+		( select ) =>
+			select( 'core/block-directory' ).getErrorNoticeForBlock( block.id ),
+		[ block ]
+	);
 
-export const DownloadableBlockNotice = ( { block, errorNotices, onClick } ) => {
-	if ( ! errorNotices[ block.id ] ) {
+	if ( ! errorNotice ) {
 		return null;
 	}
 
-	// A Failed install is the default error as its the first step
-	let copy = __( 'Block could not be added.' );
-
-	if ( errorNotices[ block.id ] === DOWNLOAD_ERROR_NOTICE_ID ) {
-		copy = __(
-			'Block could not be added. There is a problem with the block.'
-		);
-	}
-
 	return (
 		<Notice
 			status="error"
 			isDismissible={ false }
-			className="block-directory-downloadable-blocks__notice"
+			className="block-directory-downloadable-block-notice"
 		>
-			<div className="block-directory-downloadable-blocks__notice-content">
-				{ copy }
+			<div className="block-directory-downloadable-block-notice__content">
+				{ errorNotice }
 			</div>
 			<Button
 				isSmall
@@ -46,8 +38,4 @@ export const DownloadableBlockNotice = ( { block, errorNotices, onClick } ) => {
 	);
 };
 
-export default withSelect( ( select ) => {
-	return {
-		errorNotices: select( 'core/block-directory' ).getErrorNotices(),
-	};
-} )( DownloadableBlockNotice );
+export default DownloadableBlockNotice;
diff --git a/...block-directory/src/components/downloadable-block-notice/test/__snapshots__/index.js.snap b/...block-directory/src/components/downloadable-block-notice/test/__snapshots__/index.js.snap
@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DownloadableBlockNotice Rendering should return something when there are error notices 1`] = `
+<Notice
+  className="block-directory-downloadable-block-notice"
+  isDismissible={false}
+  status="error"
+>
+  <div
+    className="block-directory-downloadable-block-notice__content"
+  >
+    Plugin not found.
+  </div>
+  <ForwardRef(Button)
+    isPrimary={true}
+    isSmall={true}
+    onClick={[Function]}
+  >
+    Retry
+  </ForwardRef(Button)>
+</Notice>
+`;
diff --git a/packages/block-directory/src/components/downloadable-block-notice/test/index.js b/packages/block-directory/src/components/downloadable-block-notice/test/index.js
@@ -7,53 +7,52 @@ import { shallow } from 'enzyme';
  * WordPress dependencies
  */
 import { Button } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import { DownloadableBlockNotice } from '../index';
 import { plugin } from './fixtures';
 
-import { INSTALL_ERROR_NOTICE_ID } from '../../../store/constants';
-
-const getContainer = ( { block, onClick = jest.fn(), errorNotices = {} } ) => {
-	return shallow(
-		<DownloadableBlockNotice
-			block={ block }
-			onClick={ onClick }
-			errorNotices={ errorNotices }
-		/>
-	);
-};
+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;
+} );
 
 describe( 'DownloadableBlockNotice', () => {
 	describe( 'Rendering', () => {
 		it( 'should return null when there are no error notices', () => {
-			const wrapper = getContainer( { block: plugin } );
+			useSelect.mockImplementation( () => false );
+			const wrapper = shallow(
+				<DownloadableBlockNotice
+					block={ plugin }
+					onClick={ jest.fn() }
+				/>
+			);
 			expect( wrapper.isEmptyRender() ).toBe( true );
 		} );
 
 		it( 'should return something when there are error notices', () => {
-			const errorNotices = {
-				[ plugin.id ]: INSTALL_ERROR_NOTICE_ID,
-			};
-			const wrapper = getContainer( { block: plugin, errorNotices } );
-			expect( wrapper.length ).toBeGreaterThan( 0 );
+			useSelect.mockImplementation( () => 'Plugin not found.' );
+			const wrapper = shallow(
+				<DownloadableBlockNotice
+					block={ plugin }
+					onClick={ jest.fn() }
+				/>
+			);
+			expect( wrapper ).toMatchSnapshot();
 		} );
 	} );
 
 	describe( 'Behavior', () => {
 		it( 'should trigger the callback on button click', () => {
-			const errorNotices = {
-				[ plugin.id ]: INSTALL_ERROR_NOTICE_ID,
-			};
-
+			useSelect.mockImplementation( () => 'Plugin not found.' );
 			const onClick = jest.fn();
-			const wrapper = getContainer( {
-				block: plugin,
-				onClick,
-				errorNotices,
-			} );
+			const wrapper = shallow(
+				<DownloadableBlockNotice block={ plugin } onClick={ onClick } />
+			);
 
 			wrapper.find( Button ).simulate( 'click', { event: {} } );