From b74600593e5339c630522de37d6eae0923dfec3b Mon Sep 17 00:00:00 2001 From: Fernando Date: Wed, 19 Jan 2022 13:45:17 -0300 Subject: [PATCH] Change the reviews empty state panels logic (https://github.com/woocommerce/woocommerce-admin/pull/8147) * Add unapproved reviews check * Add tests * Add changelog * Create a review e2e test * Fix lint * Rename some constants (https://github.com/woocommerce/woocommerce-admin/pull/8178) * Renamed `countUnapprovedReviews` * Renamed `lowStockProductsCount` * Renamed `unreadOrdersCount` Co-authored-by: Fernando Marichal Co-authored-by: Fernando Marichal --- plugins/woocommerce-admin/changelogs/add-8074 | 4 +++ .../client/homescreen/activity-panel/index.js | 12 +++---- .../homescreen/activity-panel/orders/index.js | 8 ++--- .../activity-panel/orders/test/index.js | 2 +- .../homescreen/activity-panel/panels.js | 23 ++++++------- .../homescreen/activity-panel/stock/index.js | 6 ++-- .../activity-panel/stock/test/index.js | 4 +-- .../homescreen/activity-panel/test/panels.js | 27 +++++++++++---- .../src/specs/homescreen/activity-panel.ts | 13 +++++--- .../admin-e2e-tests/src/utils/actions.ts | 33 +++++++++++++++++++ 10 files changed, 94 insertions(+), 38 deletions(-) create mode 100644 plugins/woocommerce-admin/changelogs/add-8074 diff --git a/plugins/woocommerce-admin/changelogs/add-8074 b/plugins/woocommerce-admin/changelogs/add-8074 new file mode 100644 index 00000000000..170a3890ff7 --- /dev/null +++ b/plugins/woocommerce-admin/changelogs/add-8074 @@ -0,0 +1,4 @@ +Significance: minor +Type: Add + +Change the reviews empty state panels logic #8147 diff --git a/plugins/woocommerce-admin/client/homescreen/activity-panel/index.js b/plugins/woocommerce-admin/client/homescreen/activity-panel/index.js index 6ee30f4e2ea..a1f1632b0db 100644 --- a/plugins/woocommerce-admin/client/homescreen/activity-panel/index.js +++ b/plugins/woocommerce-admin/client/homescreen/activity-panel/index.js @@ -34,10 +34,10 @@ export const ActivityPanel = () => { const totalOrderCount = getAdminSetting( 'orderCount', 0 ); const orderStatuses = getOrderStatuses( select ); const reviewsEnabled = getAdminSetting( 'reviewsEnabled', 'no' ); - const countUnreadOrders = getUnreadOrders( select, orderStatuses ); + const unreadOrdersCount = getUnreadOrders( select, orderStatuses ); const manageStock = getAdminSetting( 'manageStock', 'no' ); - const countLowStockProducts = getLowStockCount( select ); - const countUnapprovedReviews = getUnapprovedReviews( select ); + const lowStockProductsCount = getLowStockCount( select ); + const unapprovedReviewsCount = getUnapprovedReviews( select ); const publishedProductCount = getAdminSetting( 'publishedProductCount', 0 @@ -45,9 +45,9 @@ export const ActivityPanel = () => { const taskList = select( ONBOARDING_STORE_NAME ).getTaskList( 'setup' ); return { - countLowStockProducts, - countUnapprovedReviews, - countUnreadOrders, + lowStockProductsCount, + unapprovedReviewsCount, + unreadOrdersCount, manageStock, isTaskListHidden: taskList?.isHidden, publishedProductCount, diff --git a/plugins/woocommerce-admin/client/homescreen/activity-panel/orders/index.js b/plugins/woocommerce-admin/client/homescreen/activity-panel/orders/index.js index ff1016506ec..98c1f6acc80 100644 --- a/plugins/woocommerce-admin/client/homescreen/activity-panel/orders/index.js +++ b/plugins/woocommerce-admin/client/homescreen/activity-panel/orders/index.js @@ -209,7 +209,7 @@ function renderOrders( orders ) { ); } -function OrdersPanel( { countUnreadOrders, orderStatuses } ) { +function OrdersPanel( { unreadOrdersCount, orderStatuses } ) { const actionableOrdersQuery = useMemo( () => ( { page: 1, @@ -233,7 +233,7 @@ function OrdersPanel( { countUnreadOrders, orderStatuses } ) { ITEMS_STORE_NAME ); - if ( ! orderStatuses.length && countUnreadOrders === 0 ) { + if ( ! orderStatuses.length && unreadOrdersCount === 0 ) { return { isRequesting: false }; } @@ -247,7 +247,7 @@ function OrdersPanel( { countUnreadOrders, orderStatuses } ) { if ( isRequestingActionable || - countUnreadOrders === null || + unreadOrdersCount === null || orderItems === null ) { return { @@ -331,7 +331,7 @@ function OrdersPanel( { countUnreadOrders, orderStatuses } ) { OrdersPanel.propTypes = { isError: PropTypes.bool, isRequesting: PropTypes.bool, - countUnreadOrders: PropTypes.number, + unreadOrdersCount: PropTypes.number, orders: PropTypes.array.isRequired, orderStatuses: PropTypes.array, }; diff --git a/plugins/woocommerce-admin/client/homescreen/activity-panel/orders/test/index.js b/plugins/woocommerce-admin/client/homescreen/activity-panel/orders/test/index.js index e3f70209680..400fd32742e 100644 --- a/plugins/woocommerce-admin/client/homescreen/activity-panel/orders/test/index.js +++ b/plugins/woocommerce-admin/client/homescreen/activity-panel/orders/test/index.js @@ -27,7 +27,7 @@ describe( 'OrdersPanel', () => { isError: false, isRequesting: false, } ); - render( ); + render( ); expect( screen.queryByText( 'You’ve fulfilled all your orders' ) ).toBeInTheDocument(); diff --git a/plugins/woocommerce-admin/client/homescreen/activity-panel/panels.js b/plugins/woocommerce-admin/client/homescreen/activity-panel/panels.js index e80ee259bf5..0a0d14a028d 100644 --- a/plugins/woocommerce-admin/client/homescreen/activity-panel/panels.js +++ b/plugins/woocommerce-admin/client/homescreen/activity-panel/panels.js @@ -11,9 +11,9 @@ import StockPanel from './stock'; import ReviewsPanel from './reviews'; export function getAllPanels( { - countLowStockProducts, - countUnapprovedReviews, - countUnreadOrders, + lowStockProductsCount, + unapprovedReviewsCount, + unreadOrdersCount, manageStock, isTaskListHidden, orderStatuses, @@ -28,13 +28,13 @@ export function getAllPanels( { return [ totalOrderCount > 0 && { className: 'woocommerce-homescreen-card', - count: countUnreadOrders, + count: unreadOrdersCount, collapsible: true, id: 'orders-panel', initialOpen: false, panel: ( ), @@ -44,27 +44,28 @@ export function getAllPanels( { publishedProductCount > 0 && manageStock === 'yes' && { className: 'woocommerce-homescreen-card', - count: countLowStockProducts, + count: lowStockProductsCount, id: 'stock-panel', initialOpen: false, - collapsible: countLowStockProducts !== 0, + collapsible: lowStockProductsCount !== 0, panel: ( ), title: __( 'Stock', 'woocommerce-admin' ), }, publishedProductCount > 0 && + unapprovedReviewsCount > 0 && reviewsEnabled === 'yes' && { className: 'woocommerce-homescreen-card', id: 'reviews-panel', - count: countUnapprovedReviews, + count: unapprovedReviewsCount, initialOpen: false, - collapsible: countUnapprovedReviews !== 0, + collapsible: unapprovedReviewsCount !== 0, panel: ( 0 } + hasUnapprovedReviews={ unapprovedReviewsCount > 0 } /> ), title: __( 'Reviews', 'woocommerce-admin' ), diff --git a/plugins/woocommerce-admin/client/homescreen/activity-panel/stock/index.js b/plugins/woocommerce-admin/client/homescreen/activity-panel/stock/index.js index b9829e83f63..0a6ea7fa0cf 100644 --- a/plugins/woocommerce-admin/client/homescreen/activity-panel/stock/index.js +++ b/plugins/woocommerce-admin/client/homescreen/activity-panel/stock/index.js @@ -81,7 +81,7 @@ export class StockPanel extends Component { render() { const { - countLowStockProducts, + lowStockProductsCount, isError, isRequesting, products, @@ -110,7 +110,7 @@ export class StockPanel extends Component { // Show placeholders only for the first products fetch. if ( isRequesting || ! products.length ) { - const numPlaceholders = Math.min( 5, countLowStockProducts ?? 1 ); + const numPlaceholders = Math.min( 5, lowStockProductsCount ?? 1 ); const placeholders = Array.from( new Array( numPlaceholders ) ).map( ( v, idx ) => ( @@ -130,7 +130,7 @@ export class StockPanel extends Component { } StockPanel.propTypes = { - countLowStockProducts: PropTypes.number, + lowStockProductsCount: PropTypes.number, products: PropTypes.array.isRequired, isError: PropTypes.bool, isRequesting: PropTypes.bool, diff --git a/plugins/woocommerce-admin/client/homescreen/activity-panel/stock/test/index.js b/plugins/woocommerce-admin/client/homescreen/activity-panel/stock/test/index.js index 9f6b9ccc9b4..cde5e2b2939 100644 --- a/plugins/woocommerce-admin/client/homescreen/activity-panel/stock/test/index.js +++ b/plugins/woocommerce-admin/client/homescreen/activity-panel/stock/test/index.js @@ -14,7 +14,7 @@ describe( 'StockPanel', () => { it( 'should the correct number of placeholders', () => { const { container } = render( { const { getByRole } = render( { it( 'should exclude the orders and stock panels when there are no orders', () => { const panels = getAllPanels( { - countUnreadOrders: 0, + unreadOrdersCount: 0, orderStatuses: [], totalOrderCount: 0, publishedProductCount: 1, @@ -28,7 +28,7 @@ describe( 'ActivityPanel', () => { it( 'should exclude the reviews and stock panels when there are no published products', () => { const panels = getAllPanels( { - countUnreadOrders: 0, + unreadOrdersCount: 0, orderStatuses: [], totalOrderCount: 1, // Yes, I realize this isn't "possible". publishedProductCount: 0, @@ -51,7 +51,7 @@ describe( 'ActivityPanel', () => { it( 'should exclude any panel when the setup task list is visible', () => { const panels = getAllPanels( { - countUnreadOrders: 0, + unreadOrdersCount: 0, orderStatuses: [], totalOrderCount: 1, publishedProductCount: 0, @@ -79,7 +79,7 @@ describe( 'ActivityPanel', () => { it( 'should include the orders panel when there are orders', () => { const panels = getAllPanels( { - countUnreadOrders: 1, + unreadOrdersCount: 1, orderStatuses: [], totalOrderCount: 10, isTaskListHidden: 'yes', @@ -94,7 +94,7 @@ describe( 'ActivityPanel', () => { it( 'should include the stock panel when there are orders, products, and inventory management is enabled', () => { const panels = getAllPanels( { - countUnreadOrders: 1, + unreadOrdersCount: 1, orderStatuses: [], totalOrderCount: 10, publishedProductCount: 2, @@ -109,13 +109,28 @@ describe( 'ActivityPanel', () => { ); } ); - it( 'should include the reviews panel when there are products and reviews are enabled', () => { + it( 'should exclude the reviews panel when there are no reviews', () => { const panels = getAllPanels( { publishedProductCount: 5, reviewsEnabled: 'yes', isTaskListHidden: 'yes', } ); + expect( panels ).toEqual( + expect.not.arrayContaining( [ + expect.objectContaining( { id: 'reviews-panel' } ), + ] ) + ); + } ); + + it( 'should include the reviews panel when they are enabled, there are products and reviews', () => { + const panels = getAllPanels( { + publishedProductCount: 5, + reviewsEnabled: 'yes', + isTaskListHidden: 'yes', + unapprovedReviewsCount: 3, + } ); + expect( panels ).toEqual( expect.arrayContaining( [ expect.objectContaining( { id: 'reviews-panel' } ), diff --git a/plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/homescreen/activity-panel.ts b/plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/homescreen/activity-panel.ts index a093795d25f..7dcbe9b7124 100644 --- a/plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/homescreen/activity-panel.ts +++ b/plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/homescreen/activity-panel.ts @@ -11,7 +11,7 @@ import { OnboardingWizard } from '../../pages/OnboardingWizard'; import { WcHomescreen } from '../../pages/WcHomescreen'; import { createOrder, removeAllOrders, unhideTaskList } from '../../fixtures'; import { OrdersActivityPanel } from '../../elements/OrdersActivityPanel'; -import { waitForElementByText } from '../../utils/actions'; +import { addReviewToProduct, waitForElementByText } from '../../utils/actions'; /* eslint-disable @typescript-eslint/no-var-requires */ const { afterAll, beforeAll, describe, it } = require( '@jest/globals' ); @@ -65,10 +65,13 @@ const testAdminHomescreenActivityPanel = () => { } ); it( 'should show Reviews panel when we have at-least one product', async () => { - await createSimpleProduct( simpleProductName, '9.99' ); - await page.reload( { - waitUntil: [ 'networkidle0', 'domcontentloaded' ], - } ); + const productId = await createSimpleProduct( + simpleProductName, + '9.99' + ); + await addReviewToProduct( productId, simpleProductName ); + await homeScreen.navigate(); + await homeScreen.isDisplayed(); const activityPanels = await homeScreen.getActivityPanels(); expect( activityPanels ).toHaveLength( 1 ); expect( activityPanels ).toEqual( diff --git a/plugins/woocommerce-admin/packages/admin-e2e-tests/src/utils/actions.ts b/plugins/woocommerce-admin/packages/admin-e2e-tests/src/utils/actions.ts index 7131ba0e270..bcdb270b876 100644 --- a/plugins/woocommerce-admin/packages/admin-e2e-tests/src/utils/actions.ts +++ b/plugins/woocommerce-admin/packages/admin-e2e-tests/src/utils/actions.ts @@ -7,6 +7,7 @@ import { ElementHandle } from 'puppeteer'; * Internal dependencies */ import { NewOrder } from '../pages/NewOrder'; +import { Login } from '../pages/Login'; /* eslint-disable @typescript-eslint/no-var-requires */ const { expect } = require( '@jest/globals' ); @@ -185,6 +186,37 @@ const deactivateAndDeleteExtension = async ( extension: string ) => { await deleteExtension?.click(); }; +const addReviewToProduct = async ( productId: number, productName: string ) => { + // we need a guest user + const login = new Login( page ); + await login.logout(); + + const baseUrl = config.get( 'url' ); + const productUrl = `/?p=${ productId }`; + await page.goto( baseUrl + productUrl, { + waitUntil: 'networkidle0', + timeout: 10000, + } ); + await waitForElementByText( 'h1', productName ); + + // Reviews tab + const reviewTab = await page.$( '#tab-title-reviews' ); + await reviewTab?.click(); + const fiveStars = await page.$( '.star-5' ); + await fiveStars?.click(); + + // write a comment + await page.type( '#comment', 'My comment' ); + await page.type( '#author', 'John Doe' ); + await page.type( '#email', 'john.doe@john.doe' ); + + const submit = await page.$( '#submit' ); + await submit?.click(); + // the comment was published + await waitForElementByText( 'p', 'My comment' ); + await login.login(); +}; + export { uiUnblocked, verifyPublishAndTrash, @@ -196,4 +228,5 @@ export { hasClass, waitForTimeout, deactivateAndDeleteExtension, + addReviewToProduct, };