FI-3104: Update React + other packages

.github/workflows/js.yml

@@ -11,16 +11,16 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ['16.x']
+        node-version: ['20.x']
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Set up Node
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
     - name: Cache Node.js modules
-      uses: actions/cache@v2
+      uses: actions/cache@v4
       with:
         # npm cache files are stored in `~/.npm` on Linux/macOS
         path: ~/.npm
@@ -35,16 +35,16 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ['16.x']
+        node-version: ['20.x']
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Set up Node
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
     - name: Cache Node.js modules
-      uses: actions/cache@v2
+      uses: actions/cache@v4
       with:
         # npm cache files are stored in `~/.npm` on Linux/macOS
         path: ~/.npm
@@ -56,7 +56,7 @@ jobs:
     # `npm run coverage` is run tests with coverage flags, rather than repeating them here
     - run: npm run coverage
     - name: Upload coverage to Codecov
-      uses: codecov/codecov-action@v3
+      uses: codecov/codecov-action@v4
       with:
         name: frontend-coverage
         flags: frontend
@@ -67,16 +67,16 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: ['16.x']
+        node-version: ['20.x']
 
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Set up Node
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
     - name: Cache Node.js modules
-      uses: actions/cache@v2
+      uses: actions/cache@v4
       with:
         # npm cache files are stored in `~/.npm` on Linux/macOS
         path: ~/.npm

.nvmrc

@@ -1 +1 @@
-16.15.0
+20.17.0

.tool-versions

@@ -1,2 +1,2 @@
 ruby 3.1.2
-nodejs 16.20.1
+nodejs 20.17.0

client/src/api/TestRunsApi.ts

@@ -13,7 +13,7 @@ export function postTestRun(
   testSessionId: string,
   runnableType: RunnableType,
   runnableId: string,
-  inputs: TestInput[]
+  inputs: TestInput[],
 ): Promise<TestRun | null> {
   const postEndpoint = getApiEndpoint('/test_runs');
   const postBody: CreateTestRunBody = {
@@ -51,7 +51,7 @@ export function deleteTestRun(testRunId: string): Promise<Response> {
 
 export function getTestRunWithResults(
   testRunId: string,
-  time: string | null | undefined
+  time: string | null | undefined,
 ): Promise<TestRun | null> {
   let endpoint = getApiEndpoint(`/test_runs/${testRunId}?include_results=true`);
   if (time) {

client/src/api/TestSessionApi.ts

@@ -10,7 +10,7 @@ import { getApiEndpoint } from './infernoApiService';
 
 export function getLastTestRun(test_session_id: string): Promise<TestRun | null> {
   const testSessionsEndpoint = getApiEndpoint(
-    '/test_sessions/' + test_session_id + '/last_test_run'
+    '/test_sessions/' + test_session_id + '/last_test_run',
   );
   return fetch(testSessionsEndpoint)
     .then((response) => response.json())
@@ -31,7 +31,7 @@ export function getTestSession(test_session_id: string): Promise<TestSession | n
 export function postTestSessions(
   testSuiteID: string,
   presetId: string | null,
-  suiteOptions: SuiteOption[] | null
+  suiteOptions: SuiteOption[] | null,
 ): Promise<TestSession | null> {
   const testSuiteIDParameter = { name: 'test_suite_id', value: testSuiteID };
   const postEndpoint = getApiEndpoint('/test_sessions', [testSuiteIDParameter]);
@@ -69,7 +69,7 @@ export function getTestSessionData(test_session_id: string): Promise<TestOutput[
 
 export function applyPreset(test_session_id: string, preset_id: string): Promise<null> {
   const endpoint = getApiEndpoint(
-    `/test_sessions/${test_session_id}/session_data/apply_preset?preset_id=${preset_id}`
+    `/test_sessions/${test_session_id}/session_data/apply_preset?preset_id=${preset_id}`,
   );
 
   return fetch(endpoint, { method: 'PUT' }).then((response) => {

client/src/components/App/Router.tsx

@@ -38,6 +38,6 @@ export const router = (testSuites: TestSuite[]) => {
         element: <TestSessionWrapper />,
       },
     ],
-    { basename: `/${basePath || ''}` }
+    { basename: `/${basePath || ''}` },
   );
 };

client/src/components/App/__tests__/App.test.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { render } from '@testing-library/react';
+import React, { act } from 'react';
+import { render, waitFor } from '@testing-library/react';
 
-import { vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { SnackbarProvider } from 'notistack';
 
 import ThemeProvider from 'components/ThemeProvider';
@@ -26,16 +25,19 @@ describe('The App Root Component', () => {
   it('sets Test Suite state on mount', async () => {
     const getTestSuites = vi.spyOn(testSuitesApi, 'getTestSuites');
     getTestSuites.mockResolvedValue(testSuites);
+
     await act(() =>
       render(
         <ThemeProvider>
           <SnackbarProvider>
             <App />
           </SnackbarProvider>
-        </ThemeProvider>
-      )
+        </ThemeProvider>,
+      ),
     );
 
-    expect(getTestSuites).toBeCalledTimes(1);
+    await waitFor(() => {
+      expect(getTestSuites).toBeCalledTimes(1);
+    });
   });
 });

client/src/components/App/__tests__/Page.test.tsx

@@ -3,6 +3,7 @@ import { RouterProvider, createMemoryRouter } from 'react-router-dom';
 import { render /* , waitFor */ } from '@testing-library/react';
 import { testSuites } from '~/components/App/__mocked_data__/mockData';
 import Page from '../Page';
+import { describe, it } from 'vitest';
 
 describe('The Page Component', () => {
   it('sets page title on render', /* async */ () => {

client/src/components/Footer/__tests__/Footer.test.tsx

@@ -3,20 +3,21 @@ import { render, screen } from '@testing-library/react';
 import Footer from '..';
 import ThemeProvider from 'components/ThemeProvider';
 import { basePath } from '~/api/infernoApiService';
+import { expect, test } from 'vitest';
 
 test('renders Inferno Footer', () => {
   render(
     <ThemeProvider>
       <Footer version={'dummyVersion'} />
-    </ThemeProvider>
+    </ThemeProvider>,
   );
 });
 
 test('has no links if not provided any', () => {
   render(
     <ThemeProvider>
       <Footer version={'dummyVersion'} />
-    </ThemeProvider>
+    </ThemeProvider>,
   );
 
   // testing a negative is nearly meaningless
@@ -33,7 +34,7 @@ test('can be given a list of links to display', () => {
   render(
     <ThemeProvider>
       <Footer version={'dummyVersion'} linkList={links} />
-    </ThemeProvider>
+    </ThemeProvider>,
   );
 
   expect(screen.getByRole('link', { name: /One/ })).toHaveAttribute('href', 'http://one.com');
@@ -49,11 +50,11 @@ test('displays API link with scheme and host name', () => {
   render(
     <ThemeProvider>
       <Footer version={'dummyVersion'} />
-    </ThemeProvider>
+    </ThemeProvider>,
   );
 
   expect(screen.getByRole('link', { name: /API/ })).toHaveAttribute(
     'href',
-    `${apiBase}?scheme=${scheme}&host=${fullHost}`
+    `${apiBase}?scheme=${scheme}&host=${fullHost}`,
   );
 });

client/src/components/Footer/styles.tsx

@@ -1,6 +1,4 @@
 // Necessary to override default z-index value of appbar
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 
 import { Theme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';

client/src/components/Header/__tests__/Header.test.tsx

@@ -5,6 +5,7 @@ import Header from '../Header';
 
 import { MemoryRouter } from 'react-router-dom';
 import { useAppStore } from '~/store/app';
+import { beforeEach, expect, test } from 'vitest';
 
 // boilerplate for mocking zustand which uses hooks outside of a component
 beforeEach(() => {
@@ -24,7 +25,7 @@ test('renders wide screen Inferno Header', () => {
           toggleDrawer={() => (drawerOpen = !drawerOpen)}
         />
       </ThemeProvider>
-    </MemoryRouter>
+    </MemoryRouter>,
   );
 
   const logoElement = screen.getByRole('img');

client/src/components/Header/__tests__/HeaderSmall.test.tsx

@@ -6,14 +6,15 @@ import Header from '../Header';
 
 import { MemoryRouter } from 'react-router-dom';
 import { useAppStore } from '~/store/app';
+import { beforeEach, expect, test } from 'vitest';
 
 // boilerplate for mocking zustand which uses hooks outside of a component
 beforeEach(() => {
   const { result } = renderHook(() => useAppStore((state) => state));
   result.current.windowIsSmall = true;
 });
 
-test('renders narrow screen Inferno Header', () => {
+test('renders narrow screen Inferno Header', async () => {
   let drawerOpen = false;
 
   render(
@@ -25,14 +26,14 @@ test('renders narrow screen Inferno Header', () => {
           toggleDrawer={() => (drawerOpen = !drawerOpen)}
         />
       </ThemeProvider>
-    </MemoryRouter>
+    </MemoryRouter>,
   );
 
   const buttonElement = screen.getAllByRole('button')[0];
   expect(buttonElement).toHaveAttribute('aria-label', 'menu');
 
   // test icon drawer control
   expect(drawerOpen).toBe(false);
-  userEvent.click(buttonElement);
+  await userEvent.click(buttonElement);
   expect(drawerOpen).toBe(true);
 });

client/src/components/InputsModal/AuthSettings.ts

@@ -51,7 +51,7 @@ export const authSettings = {
 export const getAuthFields = (
   authType: AuthType,
   authValues: Map<string, unknown>,
-  components: TestInput[]
+  components: TestInput[],
 ): TestInput[] => {
   const fields = [
     {
@@ -232,7 +232,7 @@ export const accessSettings = {
 export const getAccessFields = (
   authType: AuthType,
   accessValues: Map<string, unknown>,
-  components: TestInput[]
+  components: TestInput[],
 ): TestInput[] => {
   const fields = [
     {

client/src/components/InputsModal/InputAccess.tsx

@@ -23,10 +23,10 @@ const InputAccess: FC<InputAccessProps> = ({ requirement, index, inputsMap, setI
   const [authType, setAuthType] = React.useState<string>(
     requirement.options?.components
       ? (requirement.options?.components[0].default as string)
-      : 'public'
+      : 'public',
   );
   const [accessFields, setAccessFields] = React.useState<TestInput[]>(
-    getAccessFields(authType as AuthType, accessValues, requirement.options?.components || [])
+    getAccessFields(authType as AuthType, accessValues, requirement.options?.components || []),
   );
 
   useEffect(() => {
@@ -44,7 +44,7 @@ const InputAccess: FC<InputAccessProps> = ({ requirement, index, inputsMap, setI
           field.default = field.options?.list_options[0].value;
         }
         return field;
-      })
+      }),
     );
 
     const combinedStartingValues = getStartingValues();
@@ -64,7 +64,7 @@ const InputAccess: FC<InputAccessProps> = ({ requirement, index, inputsMap, setI
   useEffect(() => {
     // Recalculate hidden fields
     setAccessFields(
-      getAccessFields(authType as AuthType, accessValues, requirement.options?.components || [])
+      getAccessFields(authType as AuthType, accessValues, requirement.options?.components || []),
     );
 
     // Update inputsMap while maintaining hidden values
@@ -82,7 +82,7 @@ const InputAccess: FC<InputAccessProps> = ({ requirement, index, inputsMap, setI
     // Pre-populate values from AuthFields, requirement, and inputsMap in order of precedence
     const fieldDefaultValues = accessFields.reduce(
       (acc, field) => ({ ...acc, [field.name]: field.default }),
-      {}
+      {},
     ) as Auth;
     const requirementDefaultValues =
       requirement.default && typeof requirement.default === 'string'