Remove the chevron icons from the “Finish setup” task list (https://github.com/woocommerce/woocommerce-admin/pull/5114)

* Remove the chevron icons from the “Finish setup” task list

* Add a data-testid attribute to the TaskDashboard dismiss button for testing

* Add test for dismiss button in TaskDashboard component

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 {
 				</Text>
 			);
 
-			if ( ! task.completed ) {
+			if ( ! task.completed && task.isDismissable ) {
-				task.after = task.isDismissable ? (
+				task.after = (
 					<Button
+						data-testid={ `${ task.key }-dismiss-button` }
 						isTertiary
 						onClick={ ( event ) => {
 							event.stopPropagation();
@@ -309,8 +310,6 @@ class TaskDashboard extends Component {
 					>
 						{ __( 'Dismiss', 'woocommerce-admin' ) }
 					</Button>
-				) : (
-					<Icon icon={ chevronRight } />
 				);
 			}
 

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( <TaskDashboard query={ {} } /> );
+
+		// 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();
+	} );
+} );