fix: fix all tests

src/apps/__tests__/AppShell.test.js

@@ -0,0 +1,30 @@
+import AppShell from 'apps/AppShell';
+import GlobalAppBar from 'components/GlobalAppBar';
+import GlobalNavBar from 'components/GlobalNavBar';
+import { act, customRender } from 'test-utils/react';
+
+jest.mock('components/GlobalAppBar');
+jest.mock('components/GlobalNavBar');
+
+describe('AppShell', () => {
+  beforeEach(() => {
+    GlobalAppBar.mockReturnValue(null);
+    GlobalNavBar.mockReturnValue(null);
+  });
+
+  it('should expand the global nav bar when user clicks on the menu button in global app bar', () => {
+    let onDrawerButttonClickedFn = null;
+    GlobalAppBar.mockImplementation(({ onDrawerButttonClicked }) => {
+      onDrawerButttonClickedFn = onDrawerButttonClicked;
+      return null;
+    });
+
+    customRender(<AppShell />, {}, { route: '/files' });
+
+    act(() => {
+      onDrawerButttonClickedFn();
+    });
+
+    expect(GlobalNavBar.mock.calls[1][0].isExpanded).toBeTruthy();
+  });
+});

src/apps/__tests__/MainApp.test.js

@@ -1,15 +1,20 @@
-import AuthenticatedApp from 'apps/AuthenticatedApp';
 import MainApp from 'apps/MainApp';
+import FilesListPage from 'pages/FilesListPage/index';
+import FilesPage from 'pages/FilesPage/index';
 import LandingPage from 'pages/LandingPage';
 import LoginPage from 'pages/LoginPage';
 import LogoutPage from 'pages/LogoutPage';
-import { AuthenticatedPaths } from 'utils/constants';
+import PicturesListPage from 'pages/PicturesListPage/index';
+import PicturesPage from 'pages/PicturesPage/index';
 import { customRender } from 'test-utils/react';
 
 jest.mock('pages/LandingPage');
 jest.mock('pages/LoginPage');
 jest.mock('pages/LogoutPage');
-jest.mock('apps/AuthenticatedApp');
+jest.mock('pages/FilesPage');
+jest.mock('pages/FilesListPage');
+jest.mock('pages/PicturesPage');
+jest.mock('pages/PicturesListPage');
 
 describe('MainApp', () => {
   it('should match snapshot given valid route', () => {
@@ -24,7 +29,10 @@ describe('MainApp', () => {
     [LandingPage, '/'],
     [LoginPage, '/login'],
     [LogoutPage, '/logout'],
-    [AuthenticatedApp, AuthenticatedPaths[0]],
+    [FilesPage, '/files'],
+    [FilesListPage, '/files/123'],
+    [PicturesPage, '/pictures'],
+    [PicturesListPage, '/pictures/123'],
   ])('should render %s given route is %s', (expectedComponent, route) => {
     expectedComponent.mockReturnValue(null);
 

src/pages/ErrorBoundaries/__tests__/AppErrorBoundary.test.js

@@ -1,3 +1,4 @@
+import { MemoryRouter } from 'react-router-dom';
 import { InvalidRemotePathError } from 'hooks/utils/useRemotePathParams';
 import NotFoundErrorPage from 'pages/ErrorPages/NotFoundErrorPage';
 import { mockErrorStackTrace } from 'test-utils/mock-error';
@@ -23,9 +24,11 @@ describe('AppErrorBoundary', () => {
     };
 
     return render(
-      <AppErrorBoundary>
-        <ErrorThrowingComponent error={error} />
-      </AppErrorBoundary>
+      <MemoryRouter>
+        <AppErrorBoundary>
+          <ErrorThrowingComponent error={error} />
+        </AppErrorBoundary>
+      </MemoryRouter>
     );
   };
 });

src/pages/ErrorBoundaries/__tests__/FilesListPageErrorBoundary.test.js

@@ -1,3 +1,4 @@
+import { MemoryRouter } from 'react-router-dom';
 import { InvalidRemotePathError } from 'hooks/utils/useRemotePathParams';
 import NotFoundErrorPage from 'pages/ErrorPages/NotFoundErrorPage';
 import { mockErrorStackTrace } from 'test-utils/mock-error';
@@ -23,9 +24,11 @@ describe('FilesListPageErrorBoundary', () => {
     };
 
     return render(
-      <FilesListPageErrorBoundary>
-        <ErrorThrowingComponent error={error} />
-      </FilesListPageErrorBoundary>
+      <MemoryRouter>
+        <FilesListPageErrorBoundary>
+          <ErrorThrowingComponent error={error} />
+        </FilesListPageErrorBoundary>
+      </MemoryRouter>
     );
   };
 });

src/pages/ErrorBoundaries/__tests__/PageErrorBoundary.test.js

@@ -1,3 +1,5 @@
+import { createMemoryHistory } from 'history';
+import { Router } from 'react-router-dom';
 import { InvalidRemotePathError } from 'hooks/utils/useRemotePathParams';
 import InternalErrorPage from 'pages/ErrorPages/InternalServerErrorPage';
 import NotFoundErrorPage from 'pages/ErrorPages/NotFoundErrorPage';
@@ -8,15 +10,6 @@ import PageErrorBoundary from '../PageErrorBoundary';
 jest.mock('pages/ErrorPages/NotFoundErrorPage');
 jest.mock('pages/ErrorPages/InternalServerErrorPage');
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useHistory: () => ({
-    location: {
-      pathname: '/pictures',
-    },
-  }),
-}));
-
 describe('PageErrorBoundary', () => {
   const notFoundError1 = mockErrorStackTrace(new InvalidRemotePathError('/files/123'));
   const notFoundError2 = {
@@ -67,10 +60,14 @@ describe('PageErrorBoundary', () => {
   });
 
   const renderComponent = (error) => {
+    const history = createMemoryHistory({ initialEntries: ['/pictures'] });
+
     return render(
-      <PageErrorBoundary NotFoundComponent={NotFoundErrorPage}>
-        <ErrorThrowingComponent error={error} />
-      </PageErrorBoundary>
+      <Router location={history.location} navigator={history}>
+        <PageErrorBoundary NotFoundComponent={NotFoundErrorPage}>
+          <ErrorThrowingComponent error={error} />
+        </PageErrorBoundary>
+      </Router>
     );
   };
 

src/pages/ErrorBoundaries/__tests__/PicturesListPageErrorBoundary.test.js

@@ -1,3 +1,4 @@
+import { MemoryRouter } from 'react-router-dom';
 import { InvalidRemotePathError } from 'hooks/utils/useRemotePathParams';
 import NotFoundErrorPage from 'pages/ErrorPages/NotFoundErrorPage';
 import { mockErrorStackTrace } from 'test-utils/mock-error';
@@ -23,9 +24,11 @@ describe('PicturesListPageErrorBoundary', () => {
     };
 
     return render(
-      <PicturesListPageErrorBoundary>
-        <ErrorThrowingComponent error={error} />
-      </PicturesListPageErrorBoundary>
+      <MemoryRouter>
+        <PicturesListPageErrorBoundary>
+          <ErrorThrowingComponent error={error} />
+        </PicturesListPageErrorBoundary>
+      </MemoryRouter>
     );
   };
 });

src/pages/FilesListPage/__tests__/Table.test.js

@@ -1,4 +1,4 @@
-import { Route, Switch } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import useFetchFiles from 'hooks/fetch-data/useFetchFiles';
 import useFileCopier from 'hooks/utils/useFileCopier';
 import useFileDownloader from 'hooks/utils/useFileDownloader';
@@ -9,7 +9,7 @@ import useRenameFileDialog from 'hooks/utils/useRenameFileDialog';
 import { StatusTypes } from 'utils/constants';
 import { hashRemotePath } from 'utils/remote-paths-url';
 import { mockFiles } from 'test-utils/mock-responses';
-import { customRender, fireEvent, userEvent } from 'test-utils/react';
+import { customRender, fireEvent, userEvent, screen } from 'test-utils/react';
 import Table from '../Table';
 
 jest.mock('hooks/fetch-data/useFetchFiles');
@@ -59,15 +59,15 @@ describe('Table', () => {
       status: StatusTypes.LOADING,
     });
 
-    const component = customRender(<Table />);
+    customRender(<Table />);
 
-    expect(component.getByTestId('files-list-table-skeleton')).toBeInTheDocument();
+    expect(screen.getByTestId('files-list-table-skeleton')).toBeInTheDocument();
   });
 
   it('should render a Table when the api call succeeds', () => {
-    const component = customRender(<Table />);
+    customRender(<Table />);
 
-    expect(component.getByTestId('file-list-table')).toBeInTheDocument();
+    expect(screen.getByTestId('file-list-table')).toBeInTheDocument();
   });
 
   it('should throw an error when the api call fails', () => {
@@ -80,30 +80,30 @@ describe('Table', () => {
   });
 
   it('should call fileViewer.show() when user right-clicks on a file and selects Open', () => {
-    const component = renderComponent();
+    renderComponent();
 
-    fireEvent.contextMenu(component.getByTestId('backup.sh'));
-    userEvent.click(component.getByTestId('open'));
+    fireEvent.contextMenu(screen.getByTestId('backup.sh'));
+    userEvent.click(screen.getByTestId('open'));
 
     expect(show).toBeCalledWith({ remote, folderPath: '', fileName: 'backup.sh' });
   });
 
   it('should redirect the user to the correct route when user right-clicks on a directory and selects Open', () => {
-    const component = renderComponent();
+    const view = renderComponent();
 
-    fireEvent.contextMenu(component.getByTestId('Documents'));
-    userEvent.click(component.getByTestId('open'));
+    fireEvent.contextMenu(screen.getByTestId('Documents'));
+    userEvent.click(screen.getByTestId('open'));
 
     // Check that user went to the correct page
     const expectedPath = `/files/${hashRemotePath(`${remote}:Documents`)}`;
-    expect(component.history.location.pathname).toEqual(expectedPath);
+    expect(view.history.location.pathname).toEqual(expectedPath);
   });
 
   it('should download the file when user right-clicks on a file and selects Download', () => {
-    const component = renderComponent();
+    renderComponent();
 
-    fireEvent.contextMenu(component.getByTestId('backup.sh'));
-    userEvent.click(component.getByTestId('download'));
+    fireEvent.contextMenu(screen.getByTestId('backup.sh'));
+    userEvent.click(screen.getByTestId('download'));
 
     expect(downloadFile).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -115,10 +115,10 @@ describe('Table', () => {
   });
 
   it('should delete the file when user right-clicks on a file and selects Delete', () => {
-    const component = renderComponent();
+    renderComponent();
 
-    fireEvent.contextMenu(component.getByTestId('backup.sh'));
-    userEvent.click(component.getByTestId('delete'));
+    fireEvent.contextMenu(screen.getByTestId('backup.sh'));
+    userEvent.click(screen.getByTestId('delete'));
 
     expect(deleteFile).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -130,10 +130,10 @@ describe('Table', () => {
   });
 
   it('should copy the file when user right-clicks on a file and selects Copy', () => {
-    const component = renderComponent();
+    renderComponent();
 
-    fireEvent.contextMenu(component.getByTestId('backup.sh'));
-    userEvent.click(component.getByTestId('copy'));
+    fireEvent.contextMenu(screen.getByTestId('backup.sh'));
+    userEvent.click(screen.getByTestId('copy'));
 
     expect(copyFile).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -145,10 +145,10 @@ describe('Table', () => {
   });
 
   it('should rename the file when user right-clicks on the file and selects Rename', () => {
-    const component = renderComponent();
+    renderComponent();
 
-    fireEvent.contextMenu(component.getByTestId('backup.sh'));
-    userEvent.click(component.getByTestId('rename'));
+    fireEvent.contextMenu(screen.getByTestId('backup.sh'));
+    userEvent.click(screen.getByTestId('rename'));
 
     expect(renameFile).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -160,10 +160,10 @@ describe('Table', () => {
   });
 
   it('should move the file and refetch the data when user right-clicks on a file and selects Move', () => {
-    const component = renderComponent();
+    renderComponent();
 
-    fireEvent.contextMenu(component.getByTestId('backup.sh'));
-    userEvent.click(component.getByTestId('move'));
+    fireEvent.contextMenu(screen.getByTestId('backup.sh'));
+    userEvent.click(screen.getByTestId('move'));
 
     expect(moveFile).toHaveBeenCalledWith(
       expect.objectContaining({
@@ -177,11 +177,9 @@ describe('Table', () => {
   const renderComponent = () => {
     const route = `/files/${hashRemotePath('gdrive:')}`;
     const component = (
-      <Switch>
-        <Route path="/files/:id">
-          <Table remote={remote} path="" />
-        </Route>
-      </Switch>
+      <Routes>
+        <Route path="/files/:id" element={<Table remote={remote} path="" />} />
+      </Routes>
     );
 
     return customRender(component, {}, { route });