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