diff --git a/plugins/woocommerce-admin/client/task-list/index.js b/plugins/woocommerce-admin/client/task-list/index.js
index e705bf095f7..8082fcf6baa 100644
--- a/plugins/woocommerce-admin/client/task-list/index.js
+++ b/plugins/woocommerce-admin/client/task-list/index.js
@@ -13,7 +13,7 @@ import {
__experimentalText as Text,
} from '@wordpress/components';
import { withDispatch, withSelect } from '@wordpress/data';
-import { Icon, check, chevronRight } from '@wordpress/icons';
+import { Icon, check } from '@wordpress/icons';
import { xor } from 'lodash';
import { List, EllipsisMenu } from '@woocommerce/components';
import { updateQueryString } from '@woocommerce/navigation';
@@ -298,9 +298,10 @@ class TaskDashboard extends Component {
);
- if ( ! task.completed ) {
- task.after = task.isDismissable ? (
+ if ( ! task.completed && task.isDismissable ) {
+ task.after = (
- ) : (
-
);
}
diff --git a/plugins/woocommerce-admin/client/task-list/test/index.js b/plugins/woocommerce-admin/client/task-list/test/index.js
new file mode 100644
index 00000000000..96855689496
--- /dev/null
+++ b/plugins/woocommerce-admin/client/task-list/test/index.js
@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import { render, findByText, queryByTestId } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import TaskDashboard from '../index.js';
+
+jest.mock( '@wordpress/api-fetch' );
+
+// Mock the tasks.
+jest.mock( '../tasks', () => {
+ return {
+ getAllTasks: jest.fn().mockImplementation( () => [
+ {
+ key: 'optional',
+ title: 'This task is optional',
+ container: null,
+ completed: false,
+ visible: true,
+ time: '1 minute',
+ isDismissable: true,
+ },
+ {
+ key: 'required',
+ title: 'This task is required',
+ container: null,
+ completed: false,
+ visible: true,
+ time: '1 minute',
+ isDismissable: false,
+ },
+ {
+ key: 'completed',
+ title: 'This task is completed',
+ container: null,
+ completed: true,
+ visible: true,
+ time: '1 minute',
+ isDismissable: true,
+ },
+ ] ),
+ };
+} );
+
+describe( 'TaskDashboard', () => {
+ afterEach( () => jest.clearAllMocks() );
+
+ it( 'renders a dismiss button for tasks that are optional and incomplete', async () => {
+ apiFetch.mockResolvedValue( {} );
+
+ const { container } = render( );
+
+ // Wait for the task list to render.
+ expect( await findByText( container, 'Finish setup' ) ).toBeDefined();
+
+ // The `optional` task has a dismiss button.
+ expect(
+ queryByTestId( container, 'optional-dismiss-button' )
+ ).toBeDefined();
+
+ // The `required` task does not have a dismiss button.
+ expect(
+ queryByTestId( container, 'required-dismiss-button' )
+ ).toBeNull();
+
+ // The `completed` task does not have a dismiss button.
+ expect(
+ queryByTestId( container, 'completed-dismiss-button' )
+ ).toBeNull();
+ } );
+} );