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