refactor: unify test render context (#871)

* refactor: fix warning when both project and projects are undefined

* refactor: unify test render context

* refactor: use render route option

frontend/src/component/admin/apiToken/ApiTokenList/ProjectsList/ProjectsList.tsx

@@ -10,7 +10,12 @@ export const ProjectsList: VFC<IProjectsListProps> = ({
     projects,
     project,
 }) => {
-    let fields = projects && Array.isArray(projects) ? projects : [project];
+    let fields: string[] =
+        projects && Array.isArray(projects)
+            ? projects
+            : project
+            ? [project]
+            : [];
 
     if (fields.length === 0) {
         return <>*</>;

frontend/src/component/user/Authentication/Authentication.test.tsx

@@ -1,5 +1,5 @@
 import Authentication from 'component/user/Authentication/Authentication';
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import {
     LOGIN_PASSWORD_ID,
     LOGIN_EMAIL_ID,
@@ -8,7 +8,7 @@ import {
     SSO_LOGIN_BUTTON,
 } from 'utils/testIds';
 import React from 'react';
-import { TestContext } from 'utils/testContext';
+import { render } from 'utils/testRenderer';
 import { testServerSetup, testServerRoute } from 'utils/testServer';
 
 const server = testServerSetup();
@@ -22,11 +22,7 @@ test('should render password auth', async () => {
         options: [],
     });
 
-    render(
+    render(<Authentication redirect="/" />);
-        <TestContext>
-            <Authentication redirect="/" />
-        </TestContext>
-    );
 
     await screen.findByTestId(AUTH_PAGE_ID);
     expect(screen.getByTestId(LOGIN_EMAIL_ID)).toBeInTheDocument();
@@ -43,11 +39,7 @@ test('should not render password auth if defaultHidden is true', async () => {
         options: [],
     });
 
-    render(
+    render(<Authentication redirect="/" />);
-        <TestContext>
-            <Authentication redirect="/" />
-        </TestContext>
-    );
 
     await screen.findByTestId(AUTH_PAGE_ID);
     expect(screen.queryByTestId(LOGIN_EMAIL_ID)).not.toBeInTheDocument();
@@ -64,11 +56,7 @@ test('should render demo auth', async () => {
         options: [],
     });
 
-    render(
+    render(<Authentication redirect="/" />);
-        <TestContext>
-            <Authentication redirect="/" />
-        </TestContext>
-    );
 
     await screen.findByTestId(AUTH_PAGE_ID);
     expect(screen.getByTestId(LOGIN_EMAIL_ID)).toBeInTheDocument();
@@ -85,11 +73,7 @@ test('should render email auth', async () => {
         options: [],
     });
 
-    render(
+    render(<Authentication redirect="/" />);
-        <TestContext>
-            <Authentication redirect="/" />
-        </TestContext>
-    );
 
     await screen.findByTestId(AUTH_PAGE_ID);
     expect(screen.getByTestId(LOGIN_EMAIL_ID)).toBeInTheDocument();
@@ -121,11 +105,7 @@ const testSSOAuthOption = async (authOption: string) => {
         type: 'password',
     });
 
-    render(
+    render(<Authentication redirect="/" />);
-        <TestContext>
-            <Authentication redirect="/" />
-        </TestContext>
-    );
 
     const ssoLink = await screen.findByTestId(testId);
     expect(ssoLink.getAttribute('href')).toEqual(path);

frontend/src/component/user/ForgottenPassword/ForgottenPassword.test.tsx

@@ -1,15 +1,11 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { FORGOTTEN_PASSWORD_FIELD } from 'utils/testIds';
 import React from 'react';
-import { TestContext } from 'utils/testContext';
 import ForgottenPassword from 'component/user/ForgottenPassword/ForgottenPassword';
+import { render } from 'utils/testRenderer';
 
 test('should render password auth', async () => {
-    render(
+    render(<ForgottenPassword />);
-        <TestContext>
-            <ForgottenPassword />
-        </TestContext>
-    );
 
     await screen.findByTestId(FORGOTTEN_PASSWORD_FIELD);
 });

frontend/src/component/user/ResetPassword/ResetPassword.test.tsx

@@ -1,11 +1,10 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { INVALID_TOKEN_BUTTON } from 'utils/testIds';
 import React from 'react';
-import { TestContext } from 'utils/testContext';
 import ResetPassword from 'component/user/ResetPassword/ResetPassword';
-import { MemoryRouter } from 'react-router-dom';
 import { INVALID_TOKEN_ERROR } from 'hooks/api/getters/useResetPassword/useResetPassword';
 import { testServerSetup, testServerRoute } from 'utils/testServer';
+import { render } from 'utils/testRenderer';
 
 const server = testServerSetup();
 
@@ -14,13 +13,7 @@ test('should render password auth', async () => {
         name: INVALID_TOKEN_ERROR,
     });
 
-    render(
+    render(<ResetPassword />, { route: '/new-user?token=invalid' });
-        <TestContext>
-            <MemoryRouter initialEntries={['/new-user?token=invalid']}>
-                <ResetPassword />
-            </MemoryRouter>
-        </TestContext>
-    );
 
     await screen.findByTestId(INVALID_TOKEN_BUTTON);
 });

frontend/src/utils/testContext.tsx

@@ -1,15 +0,0 @@
-import { SWRConfig } from 'swr';
-import { MemoryRouter } from 'react-router-dom';
-import { ThemeProvider } from '@material-ui/core/styles';
-import theme from 'themes/mainTheme';
-import React from 'react';
-
-export const TestContext: React.FC = ({ children }) => {
-    return (
-        <SWRConfig value={{ provider: () => new Map() }}>
-            <MemoryRouter>
-                <ThemeProvider theme={theme}>{children}</ThemeProvider>
-            </MemoryRouter>
-        </SWRConfig>
-    );
-};

frontend/src/utils/testRenderer.tsx

@@ -1,5 +1,9 @@
-import { BrowserRouter as Router } from 'react-router-dom';
 import { render as rtlRender, RenderOptions } from '@testing-library/react';
+import { SWRConfig } from 'swr';
+import { ThemeProvider } from '@material-ui/core/styles';
+import theme from 'themes/mainTheme';
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
 
 export const render = (
     ui: JSX.Element,
@@ -11,7 +15,17 @@ export const render = (
     window.history.pushState({}, 'Test page', route);
 
     return rtlRender(ui, {
-        wrapper: Router,
+        wrapper: Wrapper,
         ...renderOptions,
     });
 };
+
+const Wrapper: React.FC = ({ children }) => {
+    return (
+        <SWRConfig value={{ provider: () => new Map() }}>
+            <BrowserRouter>
+                <ThemeProvider theme={theme}>{children}</ThemeProvider>
+            </BrowserRouter>
+        </SWRConfig>
+    );
+};