From 4e17af57340c7e0ce9fe44437297e573391cfe4a Mon Sep 17 00:00:00 2001 From: Sam Seay Date: Fri, 26 Mar 2021 10:54:24 +1300 Subject: [PATCH] Show management links when the task list is complete (even if its not hidden). (https://github.com/woocommerce/woocommerce-admin/pull/6657) --- .../client/homescreen/layout.js | 10 +- .../client/homescreen/test/index.js | 109 +++++++++--------- plugins/woocommerce-admin/readme.txt | 1 + 3 files changed, 63 insertions(+), 57 deletions(-) diff --git a/plugins/woocommerce-admin/client/homescreen/layout.js b/plugins/woocommerce-admin/client/homescreen/layout.js index 384856d3433..32ea9a36007 100644 --- a/plugins/woocommerce-admin/client/homescreen/layout.js +++ b/plugins/woocommerce-admin/client/homescreen/layout.js @@ -49,10 +49,11 @@ export const Layout = ( { isBatchUpdating, query, requestingTaskList, - isTaskListHidden, + taskListComplete, bothTaskListsHidden, shouldShowWelcomeModal, shouldShowWelcomeFromCalypsoModal, + isTaskListHidden, updateOptions, } ) => { const userPrefs = useUserPreferences(); @@ -83,6 +84,7 @@ export const Layout = ( { }, [ maybeToggleColumns ] ); const shouldStickColumns = isWideViewport.current && twoColumns; + const shouldShowStoreLinks = taskListComplete || isTaskListHidden; const renderColumns = () => { return ( @@ -102,7 +104,7 @@ export const Layout = ( { - { isTaskListHidden && } + { shouldShowStoreLinks && } ); @@ -244,6 +246,10 @@ export default compose( isResolving( 'getOption', [ 'woocommerce_extended_task_list_hidden', ] ), + taskListComplete: + ! isResolving( 'getOption', [ + 'woocommerce_task_list_complete', + ] ) && getOption( 'woocommerce_task_list_complete' ) === 'yes', }; } ), withDispatch( ( dispatch ) => ( { diff --git a/plugins/woocommerce-admin/client/homescreen/test/index.js b/plugins/woocommerce-admin/client/homescreen/test/index.js index 1574d6c09b8..62d65d881b4 100644 --- a/plugins/woocommerce-admin/client/homescreen/test/index.js +++ b/plugins/woocommerce-admin/client/homescreen/test/index.js @@ -9,19 +9,22 @@ import { useUserPreferences } from '@woocommerce/data'; */ import { Layout } from '../layout'; -// Rendering breaks tests. jest.mock( 'homescreen/stats-overview', () => - jest.fn().mockReturnValue( '[StatsOverview]' ) + jest.fn().mockReturnValue(
[StatsOverview]
) ); -// We aren't testing the component here. -jest.mock( 'task-list', () => jest.fn().mockReturnValue( '[TaskList]' ) ); - -// We aren't testing the component here. -jest.mock( 'inbox-panel', () => jest.fn().mockReturnValue( '[InboxPanel]' ) ); +jest.mock( '../../inbox-panel', () => + jest.fn().mockReturnValue(
[InboxPanel]
) +); jest.mock( '../../store-management-links', () => ( { - StoreManagementLinks: jest.fn().mockReturnValue( '[StoreManagementLinks]' ), + StoreManagementLinks: jest + .fn() + .mockReturnValue(
[StoreManagementLinks]
), +} ) ); + +jest.mock( '../activity-panel', () => ( { + ActivityPanel: jest.fn().mockReturnValue(
[ActivityPanel]
), } ) ); jest.mock( '@woocommerce/data', () => ( { @@ -29,10 +32,14 @@ jest.mock( '@woocommerce/data', () => ( { useUserPreferences: jest.fn().mockReturnValue( {} ), } ) ); -// We aren't testing the component here. -jest.mock( '../activity-panel', () => ( { - ActivityPanel: jest.fn().mockReturnValue( '[ActivityPanel]' ), -} ) ); +jest.mock( '@wordpress/element', () => { + return { + ...jest.requireActual( '@wordpress/element' ), + Suspense: ( { children } ) =>
{ children }
, + // It's not easy to mock a React.lazy component, since we only use one in this component, this mocks lazy to return a mocked + lazy: () => () =>
[TaskList]
, + }; +} ); describe( 'Homescreen Layout', () => { it( 'should show TaskList placeholder when loading', () => { @@ -48,13 +55,14 @@ describe( 'Homescreen Layout', () => { const placeholder = container.querySelector( '.woocommerce-task-card.is-loading' ); - expect( placeholder ).not.toBeNull(); + expect( placeholder ).toBeInTheDocument(); } ); it( 'should show TaskList inline', () => { const { container } = render( {} } @@ -65,11 +73,11 @@ describe( 'Homescreen Layout', () => { const columns = container.querySelector( '.woocommerce-homescreen-column' ); - expect( columns ).not.toBeNull(); + expect( columns ).toBeInTheDocument(); // Expect that the is there too. - const taskList = screen.queryByText( /\[TaskList\]/ ); - expect( taskList ).toBeDefined(); + const taskList = screen.getByText( '[TaskList]' ); + expect( taskList ).toBeInTheDocument(); } ); it( 'should render TaskList alone when on task', () => { @@ -88,11 +96,11 @@ describe( 'Homescreen Layout', () => { const columns = container.querySelector( '.woocommerce-homescreen-column' ); - expect( columns ).toBeNull(); + expect( columns ).not.toBeInTheDocument(); // Expect that the is there though. const taskList = screen.queryByText( '[TaskList]' ); - expect( taskList ).toBeDefined(); + expect( taskList ).toBeInTheDocument(); } ); it( 'should not show TaskList when user has hidden', () => { @@ -106,35 +114,24 @@ describe( 'Homescreen Layout', () => { ); const taskList = screen.queryByText( '[TaskList]' ); - expect( taskList ).toBeNull(); + expect( taskList ).not.toBeInTheDocument(); } ); - it( 'should show QuickLinks when user has hidden TaskList', () => { - render( - {} } - /> - ); - - const quickLinks = screen.queryByText( '[QuickLinks]' ); - expect( quickLinks ).toBeDefined(); - } ); - - it( 'should show QuickLinks when TaskList is complete', () => { + it( 'should show StoreManagementLinks when TaskList is complete, even if the task list is not hidden', () => { render( {} } /> ); - const quickLinks = screen.queryByText( '[QuickLinks]' ); - expect( quickLinks ).toBeDefined(); + const storeManagementLinks = screen.queryByText( + '[StoreManagementLinks]' + ); + expect( storeManagementLinks ).toBeInTheDocument(); } ); it( 'should default to layout option value', () => { @@ -212,6 +209,7 @@ describe( 'Homescreen Layout', () => { const { container } = render( {} } @@ -226,24 +224,24 @@ describe( 'Homescreen Layout', () => { const secondColumn = columns[ 1 ]; expect( - within( firstColumn ).getByText( /\[TaskList\]/ ) + within( firstColumn ).getByText( '[TaskList]' ) ).toBeInTheDocument(); expect( - within( firstColumn ).getByText( /\[InboxPanel\]/ ) + within( firstColumn ).getByText( '[InboxPanel]' ) ).toBeInTheDocument(); expect( - within( secondColumn ).queryByText( /\[TaskList\]/ ) - ).toBeNull(); + within( secondColumn ).queryByText( '[TaskList]' ) + ).not.toBeInTheDocument(); expect( - within( secondColumn ).queryByText( /\[InboxPanel\]/ ) - ).toBeNull(); + within( secondColumn ).queryByText( '[InboxPanel]' ) + ).not.toBeInTheDocument(); expect( - within( secondColumn ).getByText( /\[StatsOverview\]/ ) + within( secondColumn ).getByText( '[StatsOverview]' ) ).toBeInTheDocument(); expect( - within( firstColumn ).queryByText( /\[StatsOverview\]/ ) - ).toBeNull(); + within( firstColumn ).queryByText( '[StatsOverview]' ) + ).not.toBeInTheDocument(); } ); it( 'should display the correct blocks in each column when task list is hidden', () => { @@ -253,6 +251,7 @@ describe( 'Homescreen Layout', () => { const { container } = render( { const secondColumn = columns[ 1 ]; expect( - within( firstColumn ).getByText( /\[TaskList\]/ ) + within( firstColumn ).getByText( '[TaskList]' ) ).toBeInTheDocument(); expect( - within( firstColumn ).getByText( /\[InboxPanel\]/ ) + within( firstColumn ).getByText( '[InboxPanel]' ) ).toBeInTheDocument(); expect( - within( secondColumn ).queryByText( /\[TaskList\]/ ) - ).toBeNull(); + within( secondColumn ).queryByText( '[TaskList]' ) + ).not.toBeInTheDocument(); expect( - within( secondColumn ).queryByText( /\[InboxPanel\]/ ) - ).toBeNull(); + within( secondColumn ).queryByText( '[InboxPanel]' ) + ).not.toBeInTheDocument(); expect( - within( secondColumn ).getByText( /\[StatsOverview\]/ ) + within( secondColumn ).getByText( '[StatsOverview]' ) ).toBeInTheDocument(); expect( - within( secondColumn ).getByText( /\[StoreManagementLinks\]/ ) + within( secondColumn ).getByText( '[StoreManagementLinks]' ) ).toBeInTheDocument(); expect( - within( firstColumn ).queryByText( /\[StatsOverview\]/ ) - ).toBeNull(); + within( firstColumn ).queryByText( '[StatsOverview]' ) + ).not.toBeInTheDocument(); } ); } ); diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt index 52d84c0faab..2a7ac54c711 100644 --- a/plugins/woocommerce-admin/readme.txt +++ b/plugins/woocommerce-admin/readme.txt @@ -138,6 +138,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt - Add: Paystack payment provider to several african countries. #6579 - Dev: Payments task: include Mercado Pago #6572 - Dev: Ensure script asset.php files are included in builds #6635 +- Fix: Show management links when the task list is complete (even if its not hidden). #6657 - Fix: Adding New Zealand and Ireland to selective bundle option, previously missed. #6649 - Fix: Update the Mercado option used for enabling/disabling. #6677