better tests (#191)

app/src/components/fields/DollarAmountField.test.tsx

@@ -7,7 +7,7 @@ describe('DollarAmountField', () => {
   it('matches the snapshot', () => {
     const { asFragment } = render(
       <Formik initialValues={[]} onSubmit={async () => {}}>
-        {() => <DollarAmountField id="id" label="label" required={true} name="name" value={123} />}
+        {() => <DollarAmountField id="id" label="label" required={true} name="name" />}
       </Formik>
     );
 

app/src/features/projects/__snapshots__/CreateProjectPage.test.tsx.snap

@@ -328,6 +328,7 @@ exports[`CreateProjectPage removes the extra project steps if all permits are ma
                                   <button
                                     aria-label="remove permit"
                                     class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary"
+                                    data-testid="delete-icon"
                                     tabindex="0"
                                     type="button"
                                   >

app/src/features/projects/components/ProjectPermitForm.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import { Formik } from 'formik';
 import React from 'react';
 import ProjectPermitForm, {
@@ -50,4 +50,34 @@ describe('ProjectPermitForm', () => {
 
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('deletes existing permits when delete icon is clicked', async () => {
+    const existingFormValues: IProjectPermitForm = {
+      permits: [
+        {
+          permit_number: '123',
+          sampling_conducted: 'true'
+        }
+      ]
+    };
+
+    const { getByTestId, queryByText } = render(
+      <Formik
+        initialValues={existingFormValues}
+        validationSchema={ProjectPermitFormYupSchema}
+        validateOnBlur={true}
+        validateOnChange={false}
+        onSubmit={async () => {}}>
+        {() => <ProjectPermitForm />}
+      </Formik>
+    );
+
+    expect(queryByText('Permit Number')).toBeInTheDocument();
+
+    fireEvent.click(getByTestId('delete-icon'));
+
+    await waitFor(() => {
+      expect(queryByText('Permit Number')).toBeNull();
+    });
+  });
 });

app/src/features/projects/components/ProjectPermitForm.tsx

@@ -115,6 +115,7 @@ const ProjectPermitForm: React.FC<IProjectPermitFormProps> = (props) => {
                       <Box pt={0.5} pl={1}>
                         <IconButton
                           color="primary"
+                          data-testid="delete-icon"
                           aria-label="remove permit"
                           onClick={() => arrayHelpers.remove(index)}>
                           <Icon path={mdiTrashCanOutline} size={1} />

app/src/features/projects/components/__snapshots__/ProjectPermitForm.test.tsx.snap

@@ -172,6 +172,7 @@ exports[`ProjectPermitForm renders correctly with existing permit values 1`] = `
               <button
                 aria-label="remove permit"
                 class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary"
+                data-testid="delete-icon"
                 tabindex="0"
                 type="button"
               >
@@ -326,6 +327,7 @@ exports[`ProjectPermitForm renders correctly with existing permit values 1`] = `
               <button
                 aria-label="remove permit"
                 class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary"
+                data-testid="delete-icon"
                 tabindex="0"
                 type="button"
               >

app/src/features/projects/view/ProjectPage.test.tsx

@@ -67,4 +67,67 @@ describe('ProjectPage', () => {
       expect(asFragment()).toMatchSnapshot();
     });
   });
+
+  it('shows the project details when pathname includes /details', async () => {
+    await act(async () => {
+      mockBiohubApi().project.getProjectForView.mockResolvedValue(getProjectForViewResponse);
+
+      mockBiohubApi().codes.getAllCodeSets.mockResolvedValue({
+        activity: [{ id: 1, name: 'activity 1' }],
+        climate_change_initiative: [{ id: 1, name: 'climate change initiative 1' }]
+      } as any);
+
+      history.push('/details');
+
+      const { asFragment } = render(
+        <Router history={history}>
+          <ProjectPage />
+        </Router>
+      );
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+
+  it('shows the project surveys when pathname includes /surveys', async () => {
+    await act(async () => {
+      mockBiohubApi().project.getProjectForView.mockResolvedValue(getProjectForViewResponse);
+
+      mockBiohubApi().codes.getAllCodeSets.mockResolvedValue({
+        activity: [{ id: 1, name: 'activity 1' }],
+        climate_change_initiative: [{ id: 1, name: 'climate change initiative 1' }]
+      } as any);
+
+      history.push('/surveys');
+
+      const { asFragment } = render(
+        <Router history={history}>
+          <ProjectPage />
+        </Router>
+      );
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+
+  it('shows the project attachments when pathname includes /attachments', async () => {
+    await act(async () => {
+      mockBiohubApi().project.getProjectForView.mockResolvedValue(getProjectForViewResponse);
+
+      mockBiohubApi().codes.getAllCodeSets.mockResolvedValue({
+        activity: [{ id: 1, name: 'activity 1' }],
+        climate_change_initiative: [{ id: 1, name: 'climate change initiative 1' }]
+      } as any);
+
+      history.push('/attachments');
+
+      const { asFragment } = render(
+        <Router history={history}>
+          <ProjectPage />
+        </Router>
+      );
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
 });

app/src/features/projects/view/__snapshots__/ProjectPage.test.tsx.snap

@@ -266,3 +266,75 @@ exports[`ProjectPage renders project page when project is loaded 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`ProjectPage shows the project attachments when pathname includes /attachments 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiCircularProgress-root MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+    role="progressbar"
+    style="width: 40px; height: 40px;"
+  >
+    <svg
+      class="MuiCircularProgress-svg"
+      viewBox="22 22 44 44"
+    >
+      <circle
+        class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+        cx="44"
+        cy="44"
+        fill="none"
+        r="20.2"
+        stroke-width="3.6"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ProjectPage shows the project details when pathname includes /details 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiCircularProgress-root MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+    role="progressbar"
+    style="width: 40px; height: 40px;"
+  >
+    <svg
+      class="MuiCircularProgress-svg"
+      viewBox="22 22 44 44"
+    >
+      <circle
+        class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+        cx="44"
+        cy="44"
+        fill="none"
+        r="20.2"
+        stroke-width="3.6"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ProjectPage shows the project surveys when pathname includes /surveys 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiCircularProgress-root MuiCircularProgress-colorPrimary MuiCircularProgress-indeterminate"
+    role="progressbar"
+    style="width: 40px; height: 40px;"
+  >
+    <svg
+      class="MuiCircularProgress-svg"
+      viewBox="22 22 44 44"
+    >
+      <circle
+        class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
+        cx="44"
+        cy="44"
+        fill="none"
+        r="20.2"
+        stroke-width="3.6"
+      />
+    </svg>
+  </div>
+</DocumentFragment>
+`;

app/src/features/projects/view/components/GeneralInformation.test.tsx

@@ -1,6 +1,6 @@
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import { useBiohubApi } from 'hooks/useBioHubApi';
-import { IGetProjectForUpdateResponse, UPDATE_GET_ENTITIES } from 'interfaces/useProjectApi.interface';
+import { UPDATE_GET_ENTITIES } from 'interfaces/useProjectApi.interface';
 import { getProjectForViewResponse } from 'test-helpers/project-helpers';
 import React from 'react';
 import { codes } from 'test-helpers/code-helpers';
@@ -9,7 +9,7 @@ import ProjectDetails from './GeneralInformation';
 jest.mock('../../../../hooks/useBioHubApi');
 const mockUseBiohubApi = {
   project: {
-    getProjectForUpdate: jest.fn<Promise<IGetProjectForUpdateResponse>, ['number', UPDATE_GET_ENTITIES[]]>(),
+    getProjectForUpdate: jest.fn<Promise<object>, []>(),
     updateProject: jest.fn()
   }
 };
@@ -35,7 +35,22 @@ describe('ProjectDetails', () => {
     cleanup();
   });
 
-  it('renders correctly', async () => {
+  it('renders correctly with no activity and climate initiative data', () => {
+    const { asFragment } = render(
+      <ProjectDetails
+        projectForViewData={{
+          ...getProjectForViewResponse,
+          project: { ...getProjectForViewResponse.project, climate_change_initiatives: [], project_activities: [] }
+        }}
+        codes={codes}
+        refresh={mockRefresh}
+      />
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders correctly with activity and climate initiative data', () => {
     const { asFragment } = renderContainer();
 
     expect(asFragment()).toMatchSnapshot();
@@ -54,7 +69,7 @@ describe('ProjectDetails', () => {
       }
     });
 
-    const { getByText, queryByText } = renderContainer();
+    const { getByText, queryByText, getAllByRole } = renderContainer();
 
     await waitFor(() => {
       expect(getByText('General Information')).toBeVisible();
@@ -84,6 +99,20 @@ describe('ProjectDetails', () => {
       expect(getByText('Edit General Information')).toBeVisible();
     });
 
+    // Get the backdrop, then get the firstChild because this is where the event listener is attached
+    //@ts-ignore
+    fireEvent.click(getAllByRole('presentation')[0].firstChild);
+
+    await waitFor(() => {
+      expect(queryByText('Edit General Information')).not.toBeInTheDocument();
+    });
+
+    fireEvent.click(getByText('EDIT'));
+
+    await waitFor(() => {
+      expect(getByText('Edit General Information')).toBeVisible();
+    });
+
     fireEvent.click(getByText('Save Changes'));
 
     await waitFor(() => {

app/src/features/projects/view/components/LocationBoundary.test.tsx

@@ -54,6 +54,21 @@ describe('LocationBoundary', () => {
     }
   ];
 
+  test('matches the snapshot when there is no geometry', () => {
+    const { asFragment } = render(
+      <LocationBoundary
+        projectForViewData={{
+          ...getProjectForViewResponse,
+          location: { ...getProjectForViewResponse.location, geometry: [] }
+        }}
+        codes={codes}
+        refresh={mockRefresh}
+      />
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
   test('matches the snapshot when the geometry is a single polygon in valid GeoJSON format', () => {
     const { asFragment } = render(
       <LocationBoundary

app/src/features/projects/view/components/LocationBoundary.tsx

@@ -157,15 +157,13 @@ const LocationBoundary: React.FC<ILocationBoundaryProps> = (props) => {
       geometryCollection.push(geometry[0]);
     }
 
-    if (geometryCollection.length) {
-      const allGeosFeatureCollection = {
-        type: 'FeatureCollection',
-        features: geometryCollection
-      };
-      const bboxCoords = bbox(allGeosFeatureCollection);
-
-      bounds.push([bboxCoords[1], bboxCoords[0]], [bboxCoords[3], bboxCoords[2]]);
-    }
+    const allGeosFeatureCollection = {
+      type: 'FeatureCollection',
+      features: geometryCollection
+    };
+    const bboxCoords = bbox(allGeosFeatureCollection);
+
+    bounds.push([bboxCoords[1], bboxCoords[0]], [bboxCoords[3], bboxCoords[2]]);
 
     return { geometryCollection, bounds };
   };