From 5861549716da480a5821039af414c18819b97aa0 Mon Sep 17 00:00:00 2001
From: Nathan Franklin <nathan.franklin@gmail.com>
Date: Mon, 11 Nov 2024 20:49:36 -0600
Subject: [PATCH] Rework tests to use msw and renderInTest

---
 react/src/AppRouter.tsx                       |  5 +-
 .../FeatureFileTree/FeatureFileTree.test.tsx  | 69 ++++++++-----------
 .../MapProjectNavBar/MapProjectNavBar.tsx     |  4 +-
 react/src/pages/MapProject/MapProject.tsx     |  7 +-
 react/src/test/testUtil.tsx                   |  3 +
 5 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/react/src/AppRouter.tsx b/react/src/AppRouter.tsx
index 5fe9e83b..5a16e3c1 100644
--- a/react/src/AppRouter.tsx
+++ b/react/src/AppRouter.tsx
@@ -65,7 +65,10 @@ function AppRouter() {
             </ProtectedRoute>
           }
         />
-        <Route path={ROUTES.PUBLIC_PROJECT} element={<MapProject isPublicView />} />
+        <Route
+          path={ROUTES.PUBLIC_PROJECT}
+          element={<MapProject isPublicView />}
+        />
         <Route path={ROUTES.CALLBACK} element={<Callback />} />
         <Route
           path={ROUTES.STREETVIEW_CALLBACK}
diff --git a/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx b/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx
index 9f9b40f1..d1640b57 100644
--- a/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx
+++ b/react/src/components/FeatureFileTree/FeatureFileTree.test.tsx
@@ -1,14 +1,10 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { fireEvent, waitFor } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
 import FeatureFileTree from './FeatureFileTree';
+import { server, renderInTest } from '@hazmapper/test/testUtil';
 import { featureCollection } from '@hazmapper/__fixtures__/featuresFixture';
-import { useDeleteFeature } from '@hazmapper/hooks';
-
-// Mock the hooks
-jest.mock('@hazmapper/hooks', () => ({
-  useDeleteFeature: jest.fn(),
-}));
+import { testDevConfiguration } from '@hazmapper/__fixtures__/appConfigurationFixture';
 
 jest.mock('react-resize-detector', () => ({
   useResizeDetector: () => ({
@@ -17,14 +13,8 @@ jest.mock('react-resize-detector', () => ({
   }),
 }));
 
-const renderWithRouter = (ui: React.ReactElement, { route = '/' } = {}) => {
-  return {
-    ...render(<MemoryRouter initialEntries={[route]}>{ui}</MemoryRouter>),
-  };
-};
-
 describe('FeatureFileTree', () => {
-  const defaultProps = {
+  const defaultTreeProps = {
     featureCollection: featureCollection,
     isPublicView: false,
     projectId: 1,
@@ -32,16 +22,11 @@ describe('FeatureFileTree', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-
-    (useDeleteFeature as jest.Mock).mockImplementation(() => ({
-      mutate: jest.fn(),
-      isLoading: false,
-    }));
   });
 
   it('renders feature list correctly', () => {
-    const { getByText } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} />
+    const { getByText } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} />
     );
 
     expect(getByText('foo')).toBeDefined();
@@ -49,32 +34,38 @@ describe('FeatureFileTree', () => {
     expect(getByText('image2.JPG')).toBeDefined();
   });
 
-  it('handles feature deletion for non-public projects', () => {
-    const deleteFeatureMock = jest.fn();
-    (useDeleteFeature as jest.Mock).mockImplementation(() => ({
-      mutate: deleteFeatureMock,
-      isLoading: false,
-    }));
+  it('handles feature deletion for non-public projects', async () => {
+    const featureId = 1;
+    let wasDeleted = false;
+
+    server.use(
+      http.delete(
+        `${testDevConfiguration.geoapiUrl}/projects/${defaultTreeProps.projectId}/features/${featureId}/`,
+        () => {
+          wasDeleted = true;
+          return HttpResponse.json({}, { status: 200 });
+        }
+      )
+    );
 
-    const { getByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} />,
-      { route: '/?selectedFeature=1' }
+    const { getByTestId } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} />,
+      `/?selectedFeature=${featureId}`
     );
 
     // Find and click delete button (as featured is selected)
     const deleteButton = getByTestId('delete-feature-button');
     fireEvent.click(deleteButton);
 
-    expect(deleteFeatureMock).toHaveBeenCalledWith({
-      projectId: 1,
-      featureId: 1,
+    await waitFor(() => {
+      expect(wasDeleted).toBeTruthy();
     });
   });
 
   it('does not show delete button for public projects', () => {
-    const { queryByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} isPublicView={true} />,
-      { route: '/?selectedFeature=1' }
+    const { queryByTestId } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} isPublicView={true} />,
+      '/?selectedFeature=1'
     );
 
     // Verify delete button is not present
@@ -83,8 +74,8 @@ describe('FeatureFileTree', () => {
   });
 
   it('does not show delete button when no feature is selected', () => {
-    const { queryByTestId } = renderWithRouter(
-      <FeatureFileTree {...defaultProps} isPublicView={false} />
+    const { queryByTestId } = renderInTest(
+      <FeatureFileTree {...defaultTreeProps} isPublicView={false} />
     );
 
     // Verify delete button is not present
diff --git a/react/src/components/MapProjectNavBar/MapProjectNavBar.tsx b/react/src/components/MapProjectNavBar/MapProjectNavBar.tsx
index 6d8cdd19..9f78fc65 100644
--- a/react/src/components/MapProjectNavBar/MapProjectNavBar.tsx
+++ b/react/src/components/MapProjectNavBar/MapProjectNavBar.tsx
@@ -62,7 +62,9 @@ interface NavBarPanelProps {
   isPublicView?: boolean;
 }
 
-const MapProjectNavBar: React.FC<NavBarPanelProps> = ({ isPublicView = false }) => {
+const MapProjectNavBar: React.FC<NavBarPanelProps> = ({
+  isPublicView = false,
+}) => {
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const activePanel = queryParams.get(queryPanelKey);
diff --git a/react/src/pages/MapProject/MapProject.tsx b/react/src/pages/MapProject/MapProject.tsx
index 8cf18dc3..5220149c 100644
--- a/react/src/pages/MapProject/MapProject.tsx
+++ b/react/src/pages/MapProject/MapProject.tsx
@@ -61,7 +61,12 @@ const MapProject: React.FC<MapProjectProps> = ({ isPublicView = false }) => {
     );
   }
 
-  return <LoadedMapProject isPublicView={isPublicView} activeProject={activeProject} />;
+  return (
+    <LoadedMapProject
+      isPublicView={isPublicView}
+      activeProject={activeProject}
+    />
+  );
 };
 
 interface LoadedMapProject {
diff --git a/react/src/test/testUtil.tsx b/react/src/test/testUtil.tsx
index c03a4985..db33b37a 100644
--- a/react/src/test/testUtil.tsx
+++ b/react/src/test/testUtil.tsx
@@ -17,6 +17,9 @@ export const testQueryClient = new QueryClient({
       staleTime: 0,
       useErrorBoundary: true,
     },
+    mutations: {
+      retry: false,
+    },
   },
 });