From f7179949a5d4bb40cc5733a0270d7ac7dfc1fab1 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 25 May 2020 19:30:54 -0400 Subject: [PATCH] Block Directory: Store refactor (#22388) * Pass along action parameter * Fix up comments * Use shared package `data-controls` * Remove `uninstallBlock`, `removeInstalledBlockType` * Update controls to return promises Includes very basic testing, since I'm having trouble with both promises and document mocking * Update response format from API * Refactor install & download into one single, multi-step action generator This walks through each step, and removes the need for onError & onSuccess * Switch to new action generator for installation * Update Notice reducer to store the notice text This will let us return more descriptive error messages for each kind of error, instead of generic install/download failed messages * Bring `onSelect` functionality back * Fix notice description * Switch to `useDispatch` hook * Update packages/block-directory/src/store/controls.js Co-authored-by: Steven Dufresne * Remove extra export * Remove unnecessary resets * Update variable name to reflect value * Add test to block list item * Remove unused props * Remove behavior test, update to use snapshot testing Behavior is tested in DownloadableBlockListItem tests * Update notice block to use `useSelect` * Update package-lock * Check file extension before trying to load scripts & styles * Fix class name * Bring back `setIsInstalling` * Add i18n & punctuation to error messages * Add a default error message * Return a success/failure indicator for installation This prevents an error where `onSelect` tries to run on a block that fails to install * Remove unused state property, update tests * Add selector tests for `getDownloadableBlocks` * Update mocked API response * Add default message for installation failures Co-authored-by: Steven Dufresne --- ...ass-wp-rest-block-directory-controller.php | 2 +- package-lock.json | 1 + packages/block-directory/package.json | 1 + .../test/__snapshots__/index.js.snap | 59 +++++ .../test/fixtures/index.js | 19 ++ .../test/index.js | 34 +++ .../downloadable-block-notice/index.js | 36 +-- .../downloadable-block-notice/style.scss | 4 +- .../test/__snapshots__/index.js.snap | 22 ++ .../downloadable-block-notice/test/index.js | 51 ++-- .../downloadable-blocks-list/index.js | 92 +------ .../test/__snapshots__/index.js.snap | 57 ++++ .../downloadable-blocks-list/test/index.js | 65 ++--- packages/block-directory/src/store/actions.js | 138 ++++------ .../block-directory/src/store/constants.js | 13 - .../block-directory/src/store/controls.js | 162 +++--------- packages/block-directory/src/store/index.js | 3 +- packages/block-directory/src/store/reducer.js | 15 +- .../block-directory/src/store/resolvers.js | 6 +- .../block-directory/src/store/selectors.js | 16 +- .../block-directory/src/store/test/actions.js | 245 ++++++++---------- .../src/store/test/controls.js | 45 ++++ .../block-directory/src/store/test/reducer.js | 88 ++++++- .../src/store/test/selectors.js | 68 ++++- .../experiments/block-directory-add.test.js | 2 +- 25 files changed, 678 insertions(+), 566 deletions(-) create mode 100644 packages/block-directory/src/components/downloadable-block-list-item/test/__snapshots__/index.js.snap create mode 100644 packages/block-directory/src/components/downloadable-block-list-item/test/fixtures/index.js create mode 100644 packages/block-directory/src/components/downloadable-block-list-item/test/index.js create mode 100644 packages/block-directory/src/components/downloadable-block-notice/test/__snapshots__/index.js.snap create mode 100644 packages/block-directory/src/components/downloadable-blocks-list/test/__snapshots__/index.js.snap delete mode 100644 packages/block-directory/src/store/constants.js create mode 100644 packages/block-directory/src/store/test/controls.js diff --git a/lib/class-wp-rest-block-directory-controller.php b/lib/class-wp-rest-block-directory-controller.php index 3f7168b9057e9c..abc7a2c6c9ae7a 100644 --- a/lib/class-wp-rest-block-directory-controller.php +++ b/lib/class-wp-rest-block-directory-controller.php @@ -159,7 +159,7 @@ public function install_block( $request ) { return WP_Error( $activate_result->get_error_code(), $activate_result->get_error_message() ); } - return rest_ensure_response( true ); + return rest_ensure_response( array( 'success' => true ) ); } /** diff --git a/package-lock.json b/package-lock.json index d0ec3d79b9c2d1..ca086f8999dafb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9846,6 +9846,7 @@ "@wordpress/components": "file:packages/components", "@wordpress/compose": "file:packages/compose", "@wordpress/data": "file:packages/data", + "@wordpress/data-controls": "file:packages/data-controls", "@wordpress/element": "file:packages/element", "@wordpress/i18n": "file:packages/i18n", "@wordpress/icons": "file:packages/icons", diff --git a/packages/block-directory/package.json b/packages/block-directory/package.json index 28b3c640d23426..6c341aa979f0a8 100644 --- a/packages/block-directory/package.json +++ b/packages/block-directory/package.json @@ -31,6 +31,7 @@ "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", "@wordpress/data": "file:../data", + "@wordpress/data-controls": "file:../data-controls", "@wordpress/element": "file:../element", "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", diff --git a/packages/block-directory/src/components/downloadable-block-list-item/test/__snapshots__/index.js.snap b/packages/block-directory/src/components/downloadable-block-list-item/test/__snapshots__/index.js.snap new file mode 100644 index 00000000000000..da694eaa4f7ef3 --- /dev/null +++ b/packages/block-directory/src/components/downloadable-block-list-item/test/__snapshots__/index.js.snap @@ -0,0 +1,59 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DownloadableBlockListItem should render a block item 1`] = ` +
  • +
    +
    + +
    +
    + + +
    +
    + +
    +
    +
    • +`; diff --git a/packages/block-directory/src/components/downloadable-block-list-item/test/fixtures/index.js b/packages/block-directory/src/components/downloadable-block-list-item/test/fixtures/index.js new file mode 100644 index 00000000000000..f54e9e81b1bc2c --- /dev/null +++ b/packages/block-directory/src/components/downloadable-block-list-item/test/fixtures/index.js @@ -0,0 +1,19 @@ +export const item = { + name: 'boxer/boxer', + title: 'Boxer', + description: + 'Boxer is a Block that puts your WordPress posts into boxes on a page.', + id: 'boxer-block', + icon: 'block-default', + rating: 5, + rating_count: 1, + active_installs: 0, + author_block_rating: 5, + author_block_count: '1', + author: 'CK Lee', + assets: [ + 'http://plugins.svn.wordpress.org/boxer-block/trunk/build/index.js', + 'http://plugins.svn.wordpress.org/boxer-block/trunk/build/view.js', + ], + humanized_updated: '3 months ago', +}; diff --git a/packages/block-directory/src/components/downloadable-block-list-item/test/index.js b/packages/block-directory/src/components/downloadable-block-list-item/test/index.js new file mode 100644 index 00000000000000..56518aae9bacbb --- /dev/null +++ b/packages/block-directory/src/components/downloadable-block-list-item/test/index.js @@ -0,0 +1,34 @@ +/** + * External dependencies + */ +import { shallow } from 'enzyme'; + +/** + * Internal dependencies + */ +import DownloadableBlockListItem from '../index'; +import DownloadableBlockHeader from '../../downloadable-block-header'; +import { item } from './fixtures'; + +describe( 'DownloadableBlockListItem', () => { + it( 'should render a block item', () => { + const wrapper = shallow( + + ); + + expect( wrapper ).toMatchSnapshot(); + } ); + + it( 'should try to install the block plugin', () => { + const onClick = jest.fn(); + const wrapper = shallow( + + ); + + wrapper + .find( DownloadableBlockHeader ) + .simulate( 'click', { event: {} } ); + + expect( onClick ).toHaveBeenCalledTimes( 1 ); + } ); +} ); diff --git a/packages/block-directory/src/components/downloadable-block-notice/index.js b/packages/block-directory/src/components/downloadable-block-notice/index.js index 487beb963f9cb9..61f04196ed79a4 100644 --- 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 ( -
    - { copy } +
    + { errorNotice }