129 update tests for curator UI (#130)

* Update libraries batch-2 first part

* Move some testing to TODO

* Update Yup when

* update set field values

* Update breaking changes

* Update comment

* Remove unused

* update datepicker

* Update libraries batch-2 second part

* Update return values of the functions for countries

* update typescript

* Update mismatched versions

* WIP update router and eslint + vite instead of cra

* Update tests for new vitest library

* Update command for test and coverage

* Skip tests that were blocking flow

* Update Location.test.tsx

* Update varaible name

* Fix merging issues

* Update index.tsx

* Update index.tsx

* WIP tests for location and landing page

* Fixed all landing page tests

* Unskip and fix verification status indicator tests

* Fix automated source form tests

* WIP unmocking EditCase tests

* Update EditCase.test.tsx

* Fix viewcase tests

* Resolve warnings regarding act

* Update Dockerfile

* Update Location.test.tsx

* Fix tests failing at the first day of the month

* Cleanup sourcetable

* Update Users Uploads and Sources tables

* Add backfill back

It was removed after splitting one component into multiple

* Remove unused tests

verification/curator-service/Dockerfile

@@ -1,7 +1,7 @@
 # This dockerfile builds the curator API service and its UI in a single container.
 # The UI is served as a static resource from the curator API service express server.
 # Security best practices are followed and a trimmed down image is used for production serving.
-FROM node:18.18.0 as builder
+FROM node:18.20.2 as builder
 
 # Build the curator service.
 WORKDIR /usr/src/app/verification/curator-service/api

verification/curator-service/ui/src/components/App/App.test.tsx

@@ -62,7 +62,7 @@ describe('<App />', () => {
         });
 
         render(<App />, { initialState: initialLoggedInState });
-        expect(axios.get).toHaveBeenCalledTimes(6);
+        expect(axios.get).toHaveBeenCalledTimes(5);
         expect(axios.get).toHaveBeenCalledWith('/auth/profile');
         expect(axios.get).toHaveBeenCalledWith('/version');
         expect(axios.get).toHaveBeenCalledWith('/env');
@@ -184,7 +184,10 @@ describe('<App />', () => {
                 return Promise.resolve(axiosResponse);
             }
         });
-        render(<App />, { initialRoute: '/cases' });
+        render(<App />, {
+            initialState: initialLoggedInState,
+            initialRoute: '/cases',
+        });
 
         fireEvent.click(await screen.findByTestId('profile-menu'));
 

verification/curator-service/ui/src/components/App/index.tsx

@@ -180,13 +180,14 @@ function ProfileMenu(props: { user: User; version: string }): JSX.Element {
                 onClose={handleClose}
                 data-testid="profile-menu-dropdown"
             >
-                <Link
+                <MenuItem
+                    component={Link}
                     to="/profile"
                     onClick={handleClose}
                     className={classes.link}
                 >
-                    <MenuItem>Profile</MenuItem>
-                </Link>
+                    Profile
+                </MenuItem>
 
                 <MenuItem
                     onClick={() => {

verification/curator-service/ui/src/components/AutomatedBackfill.test.tsx

@@ -1,6 +1,7 @@
 import { vi } from 'vitest';
 import axios from 'axios';
 import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
 
 import AutomatedBackfill from './AutomatedBackfill';
 import { initialLoggedInState } from '../redux/store';
@@ -119,10 +120,14 @@ it('displays spinner and status post backfill', async () => {
     );
     await waitFor(() => expect(axios.get).toHaveBeenCalledTimes(1));
 
-    await user.click(
-        screen.getByLabelText(/Paste URL for data source or search/i),
-    );
-    await user.click(screen.getByText('https://example.com'));
+    await act(async () => {
+        await user.click(
+            screen.getByLabelText(/Paste URL for data source or search/i),
+        );
+    });
+    await act(async () => {
+        await user.click(screen.getByText('https://example.com'));
+    });
 
     const startDate = screen.getByRole('textbox', {
         name: 'First date to backfill (inclusive)',
@@ -134,13 +139,25 @@ it('displays spinner and status post backfill', async () => {
         throw Error('Unable to find date selector');
     }
 
-    await user.click(screen.getAllByRole('button', { name: 'Choose date' })[0]);
-    await user.click(screen.getByRole('gridcell', { name: '1' }));
+    await act(async () => {
+        await user.click(
+            screen.getAllByRole('button', { name: 'Choose date' })[0],
+        );
+    });
+    await act(async () => {
+        await user.click(screen.getByRole('gridcell', { name: '1' }));
+    });
 
-    await user.click(screen.getByRole('button', { name: 'Choose date' }));
-    await user.click(screen.getByRole('gridcell', { name: '2' }));
+    await act(async () => {
+        await user.click(screen.getByRole('button', { name: 'Choose date' }));
+    });
+    await act(async () => {
+        await user.click(screen.getByRole('gridcell', { name: '1' }));
+    });
 
-    await user.click(screen.getByTestId('submit'));
+    await act(async () => {
+        await user.click(screen.getByTestId('submit'));
+    });
 
     expect(screen.getByTestId('submit')).toBeDisabled();
     expect(screen.getByTestId('cancel')).toBeDisabled();

verification/curator-service/ui/src/components/AutomatedSourceForm.tsx

@@ -281,7 +281,7 @@ export default function AutomatedSourceForm(props: Props): JSX.Element {
                                                 name="excludeFromLineList"
                                                 component={CheckboxWithLabel}
                                                 type="checkbox"
-                                                helperText="Whether cases from this source can appear in the line list"
+                                                // helperText="Whether cases from this source can appear in the line list"
                                                 required
                                                 data-testid="excludeFromLineList"
                                                 Label={{
@@ -294,7 +294,7 @@ export default function AutomatedSourceForm(props: Props): JSX.Element {
                                                 name="hasStableIdentifiers"
                                                 component={CheckboxWithLabel}
                                                 type="checkbox"
-                                                helperText="Whether cases from this source have unique, unchanging identifiers"
+                                                // helperText="Whether cases from this source have unique, unchanging identifiers"
                                                 required
                                                 data-testid="hasStableIdentifiers"
                                                 Label={{

verification/curator-service/ui/src/components/DataGuideDialog.test.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { screen, render, waitFor } from './util/test-utils';
 import { Button } from '@mui/material';
+import { act } from 'react-dom/test-utils';
+import { screen, render, waitFor } from './util/test-utils';
 import DataGuideDialog from './DataGuideDialog';
 
 const SearchGuideTestCase = ({ defaultOpen = false }): JSX.Element => {
@@ -34,7 +35,9 @@ it('opens properly after clicking on button', async () => {
         screen.queryByText(/Welcome to Global.health Data!/i),
     ).not.toBeInTheDocument();
 
-    await user.click(screen.getByText('Open'));
+    await act(async () => {
+        await user.click(screen.getByText('Open'));
+    });
 
     waitFor(() => {
         expect(
@@ -52,15 +55,19 @@ it('closes properly after clicking on close button', async () => {
         screen.queryByText(/Welcome to Global.health Data!/i),
     ).not.toBeInTheDocument();
 
-    await user.click(screen.getByText('Open'));
+    await act(async () => {
+        await user.click(screen.getByText('Open'));
+    });
 
     waitFor(() => {
         expect(
             screen.queryByText(/Welcome to Global.health Data!/i),
         ).toBeInTheDocument();
     });
 
-    await user.click(screen.getByTestId('close-search-guide-button'));
+    await act(async () => {
+        await user.click(screen.getByTestId('close-search-guide-button'));
+    });
 
     expect(
         screen.queryByText(/Welcome to Global.health Data!/i),

verification/curator-service/ui/src/components/EditCase.test.tsx

@@ -3,22 +3,34 @@ import { screen, render } from './util/test-utils';
 import EditCase from './EditCase';
 import axios from 'axios';
 import { vi } from 'vitest';
+import { act } from 'react-dom/test-utils';
 import { initialLoggedInState } from '../redux/store';
 import validateEnv from '../util/validate-env';
 
 beforeAll(() => {
     vi.mock('axios');
+    vi.mock('react-router-dom', async () => {
+        // eslint-disable-next-line @typescript-eslint/ban-types
+        const mod = (await vi.importActual('react-router-dom')) as {};
+        return {
+            ...mod,
+            useParams: () => ({
+                id: 'abc123',
+            }),
+        };
+    });
 });
 
 afterAll(() => {
     vi.clearAllMocks();
 });
-const env = validateEnv();
 
 afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
 });
 
+const env = validateEnv();
+
 describe('<EditCase />', () => {
     it.skip('loads and displays case to edit', async () => {
         const axiosCaseResponse = {
@@ -64,24 +76,31 @@ describe('<EditCase />', () => {
             }
         });
 
-        render(
-            <EditCase
-                onModalClose={(): void => {
-                    return;
-                }}
-                diseaseName={env.VITE_APP_DISEASE_NAME}
-            />,
-            {
-                initialState: initialLoggedInState,
-                initialRoute: '/cases/edit/abc123',
-            },
-        );
+        await act(() => {
+            render(
+                <EditCase
+                    onModalClose={(): void => {
+                        return;
+                    }}
+                    diseaseName={env.VITE_APP_DISEASE_NAME}
+                />,
+                {
+                    initialState: initialLoggedInState,
+                },
+            );
+        });
+
+        await waitFor(() => {
+            expect(
+                screen.getByText('Enter the details for an existing case'),
+            ).toBeInTheDocument();
+        });
 
         expect(
             await screen.findByText('Enter the details for an existing case'),
         ).toBeInTheDocument();
 
-        expect(screen.getByText('Submit case edit')).toBeInTheDocument();
+        expect(await screen.getByText('Submit case edit')).toBeInTheDocument();
         expect(screen.getByText(/male/)).toBeInTheDocument();
         expect(screen.getByDisplayValue(/Horse breeder/)).toBeInTheDocument();
         expect(screen.getByDisplayValue('France')).toBeInTheDocument();
@@ -90,32 +109,9 @@ describe('<EditCase />', () => {
         expect(screen.getByDisplayValue('Moderna')).toBeInTheDocument();
         expect(screen.getByDisplayValue('PCR test')).toBeInTheDocument();
         expect(screen.getByText('confirmed')).toBeInTheDocument();
-        // TODO: These show up locally but we need to figure out how to properly
-        // expect(screen.getByDisplayValue('2020/01/02')).toBeInTheDocument();
-        // expect(screen.getByDisplayValue('2020/01/04')).toBeInTheDocument();
-        // expect(screen.getByDisplayValue('2020/01/03')).toBeInTheDocument();
-        // expect(screen.getByDisplayValue('2020/01/05')).toBeInTheDocument();
-        // expect(screen.getByDisplayValue('2020/02/01')).toBeInTheDocument();
-        // expect(screen.getByDisplayValue('2020/01/01')).toBeInTheDocument();
-        // query them in tests.
-        // expect(screen.getByDisplayValue('Paris')).toBeInTheDocument();
-        //expect(await findByText(/Swedish/)).toBeInTheDocument();
-        //expect(getByText('Severe acute respiratory')).toBeInTheDocument();
-        // expect(
-        //     getByDisplayValue('The reference sequence is identical to MN908947'),
-        // ).toBeInTheDocument();
-        //expect(getByText('2.35')).toBeInTheDocument();
-        //expect(getByText('48.85')).toBeInTheDocument();
-        //expect(getByDisplayValue('Hypertension')).toBeInTheDocument();
-        //expect(getByDisplayValue('Plane')).toBeInTheDocument();
-        // expect(
-        //     getByDisplayValue('Contact of a confirmed case at work'),
-        // ).toBeInTheDocument();
-        //expect(getByDisplayValue('Vector borne')).toBeInTheDocument();
-        //expect(getByDisplayValue('Gym')).toBeInTheDocument();
     });
 
-    it.skip('displays API errors', async () => {
+    it('displays API errors', async () => {
         axios.get.mockRejectedValueOnce(new Error('Request failed'));
 
         render(

verification/curator-service/ui/src/components/FiltersDialog/FiltersDialog.test.tsx

@@ -5,6 +5,7 @@ import { format } from 'date-fns';
 import { initialLoggedInState } from '../../redux/store';
 import axios from 'axios';
 import { vi } from 'vitest';
+import { act } from 'react-dom/test-utils';
 import validateEnv from '../../util/validate-env';
 import { Role } from '../../api/models/User';
 
@@ -63,7 +64,9 @@ describe('<FiltersDialog />', () => {
             initialRoute: '/cases',
         });
 
-        await user.click(screen.getByRole('button', { name: /FILTER/i }));
+        await act(async () => {
+            await user.click(screen.getByRole('button', { name: /FILTER/i }));
+        });
 
         expect(await screen.findByText(/Apply filters/i)).toBeInTheDocument();
     });
@@ -76,7 +79,9 @@ describe('<FiltersDialog />', () => {
             initialRoute: '/cases',
         });
 
-        await user.click(screen.getByRole('button', { name: /FILTER/i }));
+        await act(async () => {
+            await user.click(screen.getByRole('button', { name: /FILTER/i }));
+        });
 
         expect(await screen.findByText(/Apply filters/i)).toBeInTheDocument();
 
@@ -88,10 +93,12 @@ describe('<FiltersDialog />', () => {
         const toDateInput = screen.getByLabelText(/Date confirmed to/i);
         const fromDateInput = screen.getByLabelText(/Date confirmed from/i);
 
-        await user.type(toDateInput, futureDate);
-        await user.type(fromDateInput, futureDate);
+        await act(async () => {
+            await user.type(toDateInput, futureDate);
+            await user.type(fromDateInput, futureDate);
 
-        await user.click(screen.getByRole('button', { name: 'Apply' }));
+            await user.click(screen.getByRole('button', { name: 'Apply' }));
+        });
 
         // Check if the modal is still open
         expect(await screen.findByText(/Apply filters/i)).toBeInTheDocument();