Migrated MenuLayout test to react testing library

src/common/MenuLayout.tsx

@@ -16,7 +16,7 @@ interface MenuLayoutProps {
   sidebarNotPresent: Function;
 }
 
-const MenuLayout = (
+export const MenuLayout = (
   TagsList: FC,
   ShortUrlsList: FC,
   AsideMenu: FC<AsideMenuProps>,
@@ -86,5 +86,3 @@ const MenuLayout = (
     </>
   );
 }, ServerError);
-
-export default MenuLayout;

src/common/services/provideServices.ts

@@ -3,7 +3,7 @@ import Bottle from 'bottlejs';
 import ScrollToTop from '../ScrollToTop';
 import { MainHeader } from '../MainHeader';
 import { Home } from '../Home';
-import MenuLayout from '../MenuLayout';
+import { MenuLayout } from '../MenuLayout';
 import AsideMenu from '../AsideMenu';
 import { ErrorHandler } from '../ErrorHandler';
 import ShlinkVersionsContainer from '../ShlinkVersionsContainer';

test/common/MenuLayout.test.tsx

@@ -1,70 +1,89 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import { Route, useParams } from 'react-router-dom';
+import { Router, useParams } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
 import { Mock } from 'ts-mockery';
-import createMenuLayout from '../../src/common/MenuLayout';
+import { MenuLayout as createMenuLayout } from '../../src/common/MenuLayout';
 import { NonReachableServer, NotFoundServer, ReachableServer, SelectedServer } from '../../src/servers/data';
-import { NoMenuLayout } from '../../src/common/NoMenuLayout';
 import { SemVer } from '../../src/utils/helpers/version';
 
-jest.mock('react-router-dom', () => ({
+jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useParams: jest.fn() }));
-  ...jest.requireActual('react-router-dom'),
-  useParams: jest.fn().mockReturnValue({}),
-  useLocation: jest.fn().mockReturnValue({}),
-}));
 
 describe('<MenuLayout />', () => {
-  const ServerError = jest.fn();
+  const MenuLayout = createMenuLayout(
-  const C = jest.fn();
+    () => <>TagsList</>,
-  const MenuLayout = createMenuLayout(C, C, C, C, C, C, C, C, C, ServerError, C, C, C);
+    () => <>ShortUrlsList</>,
-  let wrapper: ShallowWrapper;
+    () => <>AsideMenu</>,
-  const createWrapper = (selectedServer: SelectedServer) => {
+    () => <>CreateShortUrl</>,
-    (useParams as any).mockReturnValue({ serverId: 'abc123' });
+    () => <>ShortUrlVisits</>,
+    () => <>TagVisits</>,
+    () => <>DomainVisits</>,
+    () => <>OrphanVisits</>,
+    () => <>NonOrphanVisits</>,
+    () => <>ServerError</>,
+    () => <>Overview</>,
+    () => <>EditShortUrl</>,
+    () => <>ManageDomains</>,
+  );
+  const setUp = (selectedServer: SelectedServer, currentPath = '/') => {
+    const history = createMemoryHistory();
+    history.push(currentPath);
 
-    wrapper = shallow(
+    return render(
+      <Router location={history.location} navigator={history}>
         <MenuLayout
           sidebarNotPresent={jest.fn()}
           sidebarPresent={jest.fn()}
           selectServer={jest.fn()}
           selectedServer={selectedServer}
-      />,
+        />
+      </Router>,
     );
-
-    return wrapper;
   };
 
+  beforeEach(() => {
+    (useParams as any).mockReturnValue({ serverId: 'abc123' });
+  });
+
   afterEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
 
-  it.each([
+  it('shows loading indicator while loading server', () => {
-    [null, NoMenuLayout],
+    setUp(null);
-    [Mock.of<NotFoundServer>({ serverNotFound: true }), ServerError],
-  ])('returns error when server is not found', (selectedServer, ExpectedComp) => {
-    const wrapper = createWrapper(selectedServer);
-    const comp = wrapper.find(ExpectedComp);
 
-    expect(comp).toHaveLength(1);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
-  });
+    expect(screen.queryByText('ServerError')).not.toBeInTheDocument();
-
-  it('returns error if server is not reachable', () => {
-    const wrapper = createWrapper(Mock.of<NonReachableServer>()).dive();
-    const serverError = wrapper.find(ServerError);
-
-    expect(serverError).toHaveLength(1);
   });
 
   it.each([
-    ['2.6.0' as SemVer, 10],
+    [Mock.of<NotFoundServer>({ serverNotFound: true })],
-    ['2.7.0' as SemVer, 10],
+    [Mock.of<NonReachableServer>({ serverNotReachable: true })],
-    ['2.8.0' as SemVer, 11],
+  ])('shows error for non reachable servers', (selectedServer) => {
-    ['2.10.0' as SemVer, 11],
+    setUp(selectedServer);
-    ['3.0.0' as SemVer, 12],
-    ['3.1.0' as SemVer, 13],
-  ])('has expected amount of routes based on selected server\'s version', (version, expectedAmountOfRoutes) => {
-    const selectedServer = Mock.of<ReachableServer>({ version });
-    const wrapper = createWrapper(selectedServer).dive();
-    const routes = wrapper.find(Route);
 
-    expect(routes).toHaveLength(expectedAmountOfRoutes);
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-    expect(routes.findWhere((element) => element.prop('index'))).toHaveLength(1);
+    expect(screen.getByText('ServerError')).toBeInTheDocument();
   });
+
+  it.each([
+    ['3.0.0' as SemVer, '/overview', 'Overview'],
+    ['3.0.0' as SemVer, '/list-short-urls/1', 'ShortUrlsList'],
+    ['3.0.0' as SemVer, '/create-short-url', 'CreateShortUrl'],
+    ['3.0.0' as SemVer, '/short-code/abc123/visits/foo', 'ShortUrlVisits'],
+    ['3.0.0' as SemVer, '/short-code/abc123/edit', 'EditShortUrl'],
+    ['3.0.0' as SemVer, '/tag/foo/visits/foo', 'TagVisits'],
+    ['3.0.0' as SemVer, '/orphan-visits/foo', 'OrphanVisits'],
+    ['3.0.0' as SemVer, '/manage-tags', 'TagsList'],
+    ['3.0.0' as SemVer, '/not-found', 'Oops! We could not find requested route.'],
+    ['3.0.0' as SemVer, '/domain/domain.com/visits/foo', 'Oops! We could not find requested route.'],
+    ['3.1.0' as SemVer, '/domain/domain.com/visits/foo', 'DomainVisits'],
+    ['2.10.0' as SemVer, '/non-orphan-visits/foo', 'Oops! We could not find requested route.'],
+    ['3.0.0' as SemVer, '/non-orphan-visits/foo', 'NonOrphanVisits'],
+    ['2.7.0' as SemVer, '/manage-domains', 'Oops! We could not find requested route.'],
+    ['2.8.0' as SemVer, '/manage-domains', 'ManageDomains'],
+  ])(
+    'renders expected component based on location and server version',
+    (version, currentPath, expectedContent) => {
+      setUp(Mock.of<ReachableServer>({ version }), currentPath);
+      expect(screen.getByText(expectedContent)).toBeInTheDocument();
+    },
+  );
 });