Fixup - remove useDebounce from search and fix tests

openmrs · Mar 5, 2024 · 0910c7c · 0910c7c
1 parent ab6e286
commit 0910c7c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 55 deletions.
diff --git a/packages/esm-patient-list-management-app/src/lists-table/lists-table.component.tsx b/packages/esm-patient-list-management-app/src/lists-table/lists-table.component.tsx
@@ -25,7 +25,6 @@ import {
   isDesktop,
   showSnackbar,
   useConfig,
-  useDebounce,
   useLayoutType,
   usePagination,
   useSession,
@@ -66,7 +65,6 @@ const ListsTable: React.FC<PatientListTableProps> = ({
   isValidating,
   listType,
   patientLists = [],
-  refetch,
   style,
 }) => {
   const { t } = useTranslation();
@@ -77,7 +75,6 @@ const ListsTable: React.FC<PatientListTableProps> = ({
   const [sortParams, setSortParams] = useState({ key: '', order: 'none' });
   const [searchTerm, setSearchTerm] = useState('');
   const responsiveSize = layout === 'tablet' ? 'lg' : 'sm';
-  const debouncedSearchTerm = useDebounce(searchTerm);
 
   const { toggleStarredList, starredLists } = useStarredLists();
 
@@ -87,15 +84,15 @@ const ListsTable: React.FC<PatientListTableProps> = ({
   }
 
   const filteredLists: Array<PatientList> = useMemo(() => {
-    if (!debouncedSearchTerm) {
+    if (!searchTerm) {
       return patientLists;
     }
 
     return fuzzy
-      .filter(debouncedSearchTerm, patientLists, { extract: (list) => `${list.display} ${list.type}` })
+      .filter(searchTerm, patientLists, { extract: (list) => `${list.display} ${list.type}` })
       .sort((r1, r2) => r1.score - r2.score)
       .map((result) => result.original);
-  }, [patientLists, debouncedSearchTerm]);
+  }, [patientLists, searchTerm]);
 
   const { key, order } = sortParams;
   const sortedData =

diff --git a/packages/esm-patient-list-management-app/src/lists-table/lists-table.test.tsx b/packages/esm-patient-list-management-app/src/lists-table/lists-table.test.tsx
@@ -1,35 +1,22 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen, within } from '@testing-library/react';
-import { usePagination, useSession } from '@openmrs/esm-framework';
+import { useSession } from '@openmrs/esm-framework';
 import { mockSession } from '__mocks__';
 import type { PatientList } from '../api/types';
 import ListsTable from './lists-table.component';
 
-type PaginationData = {
-  currentPage: number;
-  goTo: (page: number) => void;
-  results: unknown[];
-  totalPages: number;
-  paginated: boolean;
-  showNextButton: boolean;
-  showPreviousButton: boolean;
-  goToNext: () => void;
-  goToPrevious: () => void;
-};
-
 const mockedUseSession = jest.mocked(useSession);
-const mockedUsePagination = jest.mocked(usePagination);
 
 jest.mock('@openmrs/esm-framework', () => ({
   ...jest.requireActual('@openmrs/esm-framework'),
   useConfig: jest.fn(() => ({
     patientListsToShow: 10,
   })),
-  usePagination: jest.fn().mockImplementation(() => ({
+  usePagination: jest.fn().mockImplementation((data, pageSize) => ({
     currentPage: 1,
     goTo: () => {},
-    results: [],
+    results: data.slice(0, pageSize),
     paginated: true,
   })),
   isDesktop: jest.fn(() => true),
@@ -137,16 +124,6 @@ describe('ListsTable', () => {
   it('renders the available patient lists in a datatable', () => {
     const pageSize = 5;
 
-    mockedUsePagination.mockImplementation(
-      () =>
-        ({
-          currentPage: 1,
-          goTo: () => {},
-          results: patientLists.slice(0, pageSize),
-          paginated: true,
-        }) as unknown as PaginationData,
-    );
-
     render(<ListsTable patientLists={patientLists} listType={''} headers={tableHeaders} isLoading={false} />);
 
     const columnHeaders = [/List name/, /List type/, /No. of patients/, /Starred/];
@@ -165,22 +142,10 @@ describe('ListsTable', () => {
     });
   });
 
-  // disabled because testing search filtering requires a non-mocked
-  // usePagination hook
-  xit('searches for patient lists by the list name or type', async () => {
+  it('searches for patient lists by the list name or type', async () => {
     const user = userEvent.setup();
     const pageSize = 5;
 
-    mockedUsePagination.mockImplementation(
-      () =>
-        ({
-          currentPage: 1,
-          goTo: () => {},
-          results: patientLists.slice(0, pageSize),
-          paginated: true,
-        }) as unknown as PaginationData,
-    );
-
     render(<ListsTable patientLists={patientLists} listType={''} headers={tableHeaders} isLoading={false} />);
 
     patientLists.slice(0, pageSize).forEach((list) => {
@@ -215,16 +180,6 @@ describe('ListsTable', () => {
     const user = userEvent.setup();
     const pageSize = 5;
 
-    mockedUsePagination.mockImplementation(
-      () =>
-        ({
-          currentPage: 1,
-          goTo: () => {},
-          results: patientLists.slice(0, pageSize),
-          paginated: true,
-        }) as unknown as PaginationData,
-    );
-
     render(<ListsTable patientLists={patientLists} listType={''} headers={tableHeaders} isLoading={false} />);
 
     const cobaltCohortRow = screen.getByRole('row', { name: /cobalt cohort my list 200/i });