From 73e0d73c508c0a91183360bc3a328a7fa6c6571e Mon Sep 17 00:00:00 2001
From: Pranav Kakaraparti <pkakaraparti@ufl.edu>
Date: Thu, 17 Aug 2023 11:54:12 -0500
Subject: [PATCH] feat: updated tests partially

---
 src/pages/MyTransfers/TableFilters.test.js | 60 +++++++++++++++++-----
 1 file changed, 47 insertions(+), 13 deletions(-)

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 (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <TransfersProvider>
-        {props.children}
-      </TransfersProvider>
+      {props.children}
     </LocalizationProvider>
   );
 };
 
+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(
-      <TestWrapper>
-        <TransferSelectFilter getStatusColor={() => ''} />
-      </TestWrapper>,
+    const { rerender } = render(
+      <TransferSelectFilter filter={mockFilter} setFilter={setMockFilter} statusList={mockStatusList}
+                            getStatusColor={() => ''} />,
     );
 
     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(<TransferSelectFilter filter={mockFilter} setFilter={setMockFilter} statusList={mockStatusList}
+                                   getStatusColor={() => ''} />);
+
     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(
       <TestWrapper>
-        <DateRangeFilter />
+        <DateRangeFilter filter={mockFilter} setFilter={setMockFilter} />
       </TestWrapper>,
     );
 
@@ -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(<ResetButton setFilter={setMockFilter} defaultFilter={mockDefaultFilter} />);
+
+  });
 });
\ No newline at end of file