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(); + } ); +} );