diff --git a/src/pages/MyTransfers/TableFilters.test.js b/src/pages/MyTransfers/TableFilters.test.js index c44f273..fcded14 100644 --- a/src/pages/MyTransfers/TableFilters.test.js +++ b/src/pages/MyTransfers/TableFilters.test.js @@ -1,26 +1,51 @@ -import { TransfersProvider } from '../../store/TransfersContext'; import { render, screen } from '@testing-library/react'; -import { DateRangeFilter, TransferSelectFilter } from './TableFilters'; +import { DateRangeFilter, ResetButton, TransferSelectFilter } from './TableFilters'; import userEvent from '@testing-library/user-event'; import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; import { LocalizationProvider } from '@mui/x-date-pickers'; +import TransferFilter from '../../models/TransferFilter'; const TestWrapper = (props) => { return ( - - {props.children} - + {props.children} ); }; +const mockStatusList = [{ + label: 'Requested', + value: 'requested', + color: 'black', +}, + { + label: 'Pending', + value: 'pending', + color: 'black', + }]; + +const mockDefaultFilter = new TransferFilter({ + state: '', + before: null, + after: null, + wallet: null, +}); + +let mockFilter = mockDefaultFilter; +const setMockFilter = (newValue) => { + mockFilter = newValue; +}; + +beforeEach(() => { + setMockFilter(mockDefaultFilter); +}); + describe('Transfers table header', () => { + it('Transfer filter renders correctly', () => { - render( - - ''} /> - , + const { rerender } = render( + ''} />, ); expect(screen.getByTestId('transfer-status-filter')).toBeInTheDocument(); @@ -34,22 +59,26 @@ describe('Transfers table header', () => { expect(screen.getByRole('listbox')).toBeInTheDocument(); expect(screen.getByRole('presentation')).toBeInTheDocument(); - expect(screen.getAllByRole('option')).toHaveLength(6); + expect(screen.getAllByRole('option')).toHaveLength(3); // click an option to test select value changes - const option = screen.getByRole('option', { name: 'Completed' }); + const option = screen.getByRole('option', { name: 'Pending' }); userEvent.click(option); + // force re-render to update the select component, as we are using mocked state + rerender( ''} />); + expect(screen.queryByRole('presentation')).toBeNull(); expect(screen.queryByRole('listbox')).toBeNull(); expect(screen.queryAllByRole('option')).toHaveLength(0); - expect(screen.getByRole('button', { name: 'Completed' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Pending' })).toBeInTheDocument(); }); it('Date range filter renders correctly', async () => { render( - + , ); @@ -90,4 +119,9 @@ describe('Transfers table header', () => { expect(dateTextbox.value).toBe('08/10/1993'); await screen.findByRole('dialog', { hidden: true }); }); + + it('Reset filters button renders correctly', () => { + render(); + + }); }); \ No newline at end of file