frontend: fixed unit test

With MUI 5, the theme and style engine became stricter, therefore comps
needed to be wrapped with the theme provider in some cases

frontend/src/TestHelpers/theme.ts

@@ -1,4 +1,4 @@
-import green from '@mui/material/colors/green';
+import { green } from '@mui/material/colors';
 import { createTheme } from '@mui/material/styles';
 
 export const theme = createTheme({

frontend/src/__tests__/Common/ListHeader.spec.js

@@ -1,20 +1,33 @@
 import '../../i18n/config.ts';
+import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import { render } from '@testing-library/react';
-import React from 'react';
 import ListHeader from '../../components/common/ListHeader';
 import ModalButton from '../../components/common/ModalButton';
+import themes from '../../lib/themes';
 
 describe('List Header', () => {
   const minProps = {
     title: 'Applications',
     actions: [<ModalButton modalToOpen="AddApplicationModal" data={{ applications: [] }} />],
   };
   it('should render correct List Header title', () => {
-    const { getByText } = render(<ListHeader title={minProps.title} />);
+    const { getByText } = render(
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={themes['light']}>
+          <ListHeader title={minProps.title} />
+        </ThemeProvider>
+      </StyledEngineProvider>
+    );
     expect(getByText(minProps.title)).toBeInTheDocument();
   });
   it('should render correct List Header actions', () => {
-    const { asFragment } = render(<ListHeader actions={minProps.actions} />);
+    const { asFragment } = render(
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={themes['light']}>
+          <ListHeader actions={minProps.actions} />
+        </ThemeProvider>
+      </StyledEngineProvider>
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 });

frontend/src/__tests__/Common/ListSearch.spec.js

@@ -1,11 +1,18 @@
 import '../../i18n/config.ts';
+import { StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
 import { render } from '@testing-library/react';
-import React from 'react';
 import SearchInput from '../../components/common/ListSearch';
+import themes from '../../lib/themes';
 
 describe('List Search', () => {
   it('should render correct ListSearch', () => {
-    const { asFragment } = render(<SearchInput />);
+    const { asFragment } = render(
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={themes['light']}>
+          <SearchInput />
+        </ThemeProvider>
+      </StyledEngineProvider>
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 });

frontend/src/__tests__/Common/ModalButton.spec.js

@@ -7,18 +7,28 @@ import { theme } from '../../TestHelpers/theme';
 describe('Modal Button', () => {
   it('should render Application Edit Dialog on Add Icon click', () => {
     const { getByTestId } = render(
-      <MemoryRouter initialEntries={['/app/123']}>
-        <ModalButton data={{}} modalToOpen="AddApplicationModal" />
-      </MemoryRouter>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={theme}>
+          <MemoryRouter initialEntries={['/app/123']}>
+            <ModalButton data={{}} modalToOpen="AddApplicationModal" />
+          </MemoryRouter>
+        </ThemeProvider>
+      </StyledEngineProvider>
     );
     fireEvent.click(getByTestId('modal-button'));
     expect(getByTestId('app-edit-form')).toBeInTheDocument();
   });
   it('should render AddGroupModal on Add Icon click', () => {
     const { getByTestId } = render(
-      <MemoryRouter initialEntries={['/app/123/groups/321']}>
-        <ModalButton data={{}} modalToOpen="AddGroupModal" />
-      </MemoryRouter>
+      <StyledEngineProvider injectFirst>
+        (
+        <ThemeProvider theme={theme}>
+          <MemoryRouter initialEntries={['/app/123/groups/321']}>
+            <ModalButton data={{}} modalToOpen="AddGroupModal" />
+          </MemoryRouter>
+        </ThemeProvider>
+        )
+      </StyledEngineProvider>
     );
     fireEvent.click(getByTestId('modal-button'));
     expect(getByTestId('group-edit-form')).toBeInTheDocument();
@@ -41,9 +51,15 @@ describe('Modal Button', () => {
   });
   it('should render AddPackageModal on Add Icon click', () => {
     const { getByTestId } = render(
-      <MemoryRouter initialEntries={['/app/123']}>
-        <ModalButton data={{}} modalToOpen="AddPackageModal" />
-      </MemoryRouter>
+      <StyledEngineProvider injectFirst>
+        (
+        <ThemeProvider theme={theme}>
+          <MemoryRouter initialEntries={['/app/123']}>
+            <ModalButton data={{}} modalToOpen="AddPackageModal" />
+          </MemoryRouter>
+        </ThemeProvider>
+        )
+      </StyledEngineProvider>
     );
     fireEvent.click(getByTestId('modal-button'));
     expect(getByTestId('package-edit-form')).toBeInTheDocument();

frontend/src/components/common/ListSearch/ListSearch.tsx

@@ -1,6 +1,5 @@
 import Input from '@mui/material/Input';
 import makeStyles from '@mui/styles/makeStyles';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 const useStyles = makeStyles(theme => ({

frontend/src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import AppRoutes from './App';
 
@@ -8,9 +9,9 @@ if (process.env.NODE_ENV !== 'production') {
   axe(React, ReactDOM, 1000);
 }
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root')!);
+root.render(
   <BrowserRouter>
     <AppRoutes />
-  </BrowserRouter>,
-  document.getElementById('root')
+  </BrowserRouter>
 );

frontend/src/lib/themes.ts

@@ -1,4 +1,4 @@
-import green from '@mui/material/colors/green';
+import { green } from '@mui/material/colors';
 import { createTheme, Theme } from '@mui/material/styles';
 import React from 'react';
 

frontend/src/setupTests.ts

@@ -7,7 +7,4 @@ import '@testing-library/jest-dom/extend-expect';
 // Material UI doesn't have a stable ID generator.
 // Every render a different ID is made and snapshot tests are broken.
 // mui v5
-// jest.mock('@mui/utils/useId', () => jest.fn().mockReturnValue('mui-test-id'))
-
-// mui v4
-jest.mock('@mui/material/utils/unstable_useId', () => jest.fn().mockReturnValue('mui-test-id'));
+jest.mock('@mui/utils/useId', () => jest.fn().mockReturnValue('mui-test-id'));

frontend/src/utils/helpers.ts

@@ -1,9 +1,9 @@
 import { Color, Theme } from '@mui/material';
-import amber from '@mui/material/colors/amber';
-import deepOrange from '@mui/material/colors/deepOrange';
-import lime from '@mui/material/colors/lime';
-import orange from '@mui/material/colors/orange';
-import red from '@mui/material/colors/red';
+import { amber } from '@mui/material/colors';
+import { deepOrange } from '@mui/material/colors';
+import { lime } from '@mui/material/colors';
+import { orange } from '@mui/material/colors';
+import { red } from '@mui/material/colors';
 import React from 'react';
 import API from '../api/API';
 import { Channel, Group, VersionBreakdownEntry } from '../api/apiDataTypes';