From 920348e578cfc618a3506ef7eddb9d2d787eaebd Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Thu, 14 Nov 2024 22:15:35 +0300
Subject: [PATCH] (test) Reuse renderWithRouter wrapper

---
 .../compact-patient-search.test.tsx           | 58 +++++++------------
 tools/test-utils.tsx                          |  2 +-
 2 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/packages/esm-patient-search-app/src/compact-patient-search/compact-patient-search.test.tsx b/packages/esm-patient-search-app/src/compact-patient-search/compact-patient-search.test.tsx
index 11c28ac7c..d7f8314db 100644
--- a/packages/esm-patient-search-app/src/compact-patient-search/compact-patient-search.test.tsx
+++ b/packages/esm-patient-search-app/src/compact-patient-search/compact-patient-search.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, navigate, useConfig, useSession } from '@openmrs/esm-framework';
+import { renderWithRouter } from 'tools';
 import { mockSession } from '__mocks__';
 import { configSchema, type PatientSearchConfig } from '../config-schema';
 import CompactPatientSearchComponent from './compact-patient-search.component';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 const mockUseConfig = jest.mocked(useConfig<PatientSearchConfig>);
 const mockUseSession = jest.mocked(useSession);
@@ -18,27 +18,20 @@ describe('CompactPatientSearchComponent', () => {
   });
 
   it('renders a compact search bar', () => {
-    render(
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<CompactPatientSearchComponent isSearchPage initialSearchTerm="" />} />
-        </Routes>
-      </BrowserRouter>,
-    );
+    renderWithRouter(<CompactPatientSearchComponent isSearchPage={false} initialSearchTerm="" />);
+
     expect(screen.getByPlaceholderText(/Search for a patient by name or identifier number/i)).toBeInTheDocument();
   });
 
   it('renders search results when search term is not empty', async () => {
     const user = userEvent.setup();
-    render(
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<CompactPatientSearchComponent isSearchPage={false} initialSearchTerm="" />} />
-        </Routes>
-      </BrowserRouter>,
-    );
+
+    renderWithRouter(<CompactPatientSearchComponent isSearchPage={false} initialSearchTerm="" />);
+
     const searchbox = screen.getByPlaceholderText(/Search for a patient by name or identifier number/i);
+
     await user.type(searchbox, 'John');
+
     const searchResultsContainer = screen.getByTestId('floatingSearchResultsContainer');
     expect(searchResultsContainer).toBeInTheDocument();
   });
@@ -51,39 +44,28 @@ describe('CompactPatientSearchComponent', () => {
         disableTabletSearchOnKeyUp: true,
       } as PatientSearchConfig['search'],
     });
-    render(
-      <BrowserRouter>
-        <Routes>
-          <Route path="/" element={<CompactPatientSearchComponent isSearchPage={false} initialSearchTerm="" />} />
-        </Routes>
-      </BrowserRouter>,
-    );
+
+    renderWithRouter(<CompactPatientSearchComponent isSearchPage={false} initialSearchTerm="" />);
+
     const searchResultsContainer = screen.getByTestId('floatingSearchResultsContainer');
     expect(searchResultsContainer).toBeInTheDocument();
   });
 
   it('navigates to the advanced search page with the correct query string when the Search button is clicked', async () => {
     const user = userEvent.setup();
-    render(
-      <BrowserRouter>
-        <Routes>
-          <Route
-            path="/"
-            element={
-              <CompactPatientSearchComponent
-                isSearchPage={false}
-                initialSearchTerm=""
-                shouldNavigateToPatientSearchPage
-              />
-            }
-          />
-        </Routes>
-      </BrowserRouter>,
+
+    renderWithRouter(
+      <CompactPatientSearchComponent isSearchPage={false} initialSearchTerm="" shouldNavigateToPatientSearchPage />,
     );
+
     const searchbox = screen.getByRole('searchbox');
+
     await user.type(searchbox, 'John');
+
     const searchButton = screen.getByRole('button', { name: /search/i });
+
     await user.click(searchButton);
+
     expect(mockNavigate).toHaveBeenCalledWith({ to: expect.stringMatching(/.*\/search\?query=John/) });
   });
 });
diff --git a/tools/test-utils.tsx b/tools/test-utils.tsx
index 426943fea..dbebe233c 100644
--- a/tools/test-utils.tsx
+++ b/tools/test-utils.tsx
@@ -1,5 +1,5 @@
-import { Route, Routes, MemoryRouter } from 'react-router-dom';
 import React, { type ReactElement } from 'react';
+import { Route, Routes, MemoryRouter } from 'react-router-dom';
 import { SWRConfig } from 'swr';
 import { type RenderOptions, render, screen, waitForElementToBeRemoved } from '@testing-library/react';