/** * External dependencies */ import { render } from '@testing-library/react'; import { recordEvent } from '@woocommerce/tracks'; /** * Internal dependencies */ import { TaskList } from '../task-list'; jest.mock( '@woocommerce/tracks', () => ( { recordEvent: jest.fn(), } ) ); jest.mock( '../task-list-item', () => ( { TaskListItem: ( props ) =>
{ props.task.title }
, } ) ); jest.mock( '../task-list-menu', () => ( { TaskListMenu: jest .fn() .mockImplementation( () =>
task_list_menu
), } ) ); jest.mock( '@woocommerce/components', () => ( { Badge: jest .fn() .mockImplementation( ( { count } ) =>
Count:{ count }
), } ) ); const tasks = { setup: [ { id: 'optional', title: 'This task is optional', isComplete: false, visible: true, time: '1 minute', isDismissable: true, type: 'setup', action: 'CTA (optional)', content: 'This is the optional task content', additionalInfo: 'This is the task additional info', expandable: true, expanded: true, }, { id: 'required', title: 'This task is required', container: null, isComplete: false, visible: true, time: '1 minute', isDismissable: false, type: 'setup', action: 'CTA (required)', actionLabel: 'This is the action label', content: 'This is the required task content', expandable: false, }, { id: 'completed', title: 'This task is completed', container: null, isComplete: true, visible: true, time: '1 minute', isDismissable: true, type: 'setup', }, ], extension: [ { id: 'extension', title: 'This task is an extension', container: null, isComplete: false, visible: true, time: '1 minute', isDismissable: true, type: 'extension', action: 'CTA (extension)', content: 'This is the extension task content', }, ], }; describe( 'TaskList', () => { beforeEach( () => { jest.clearAllMocks(); } ); it( 'should trigger tasklist_view event on initial render for setup task list', () => { render( ); expect( recordEvent ).toHaveBeenCalledTimes( 1 ); expect( recordEvent ).toHaveBeenCalledWith( 'tasklist_view', { number_tasks: 0, store_connected: null, } ); } ); it( 'should trigger {id}_tasklist_view event on initial render for setup task list if id is not setup', () => { render( ); expect( recordEvent ).toHaveBeenCalledTimes( 1 ); expect( recordEvent ).toHaveBeenCalledWith( 'extended_tasklist_view', { number_tasks: 0, store_connected: null, } ); } ); it( 'should render the task title and incomplete task number', () => { const { queryByText } = render( ); const incompleteCount = tasks.setup.filter( ( task ) => ! task.isComplete ).length; expect( queryByText( 'List title' ) ).toBeInTheDocument(); expect( queryByText( 'Count:' + incompleteCount ) ).toBeInTheDocument(); } ); it( 'should render all tasks', () => { const { queryByText } = render( ); for ( const task of tasks.setup ) { expect( queryByText( task.title ) ).toBeInTheDocument(); } } ); it( 'should not display isDismissed tasks', () => { const dismissedTask = [ { ...tasks.setup[ 0 ], isDismissed: true } ]; const { queryByText } = render( ); expect( queryByText( dismissedTask[ 0 ].title ) ).not.toBeInTheDocument(); } ); it( 'should not display isSnoozed tasks', () => { const dismissedTask = [ { ...tasks.setup[ 0 ], isSnoozed: true, snoozedUntil: Date.now() + 10000, }, ]; const { queryByText } = render( ); expect( queryByText( dismissedTask[ 0 ].title ) ).not.toBeInTheDocument(); } ); it( 'should display a snoozed task if snoozedUntil passed the current timestamp', () => { const dismissedTask = [ { ...tasks.setup[ 0 ], isSnoozed: true, snoozedUntil: Date.now() - 1000, }, ]; const { queryByText } = render( ); expect( queryByText( dismissedTask[ 0 ].title ) ).toBeInTheDocument(); } ); } );