Created MenuLayout test

src/common/MenuLayout.tsx

@@ -1,11 +1,10 @@
 import { FC, useEffect } from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
-import { useSwipeable } from 'react-swipeable';
 import { faBars as burgerIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
-import { useToggle } from '../utils/helpers/hooks';
+import { useSwipeable, useToggle } from '../utils/helpers/hooks';
 import { versionMatch } from '../utils/helpers/version';
 import { isReachableServer } from '../servers/data';
 import NotFound from './NotFound';
@@ -33,25 +32,8 @@ const MenuLayout = (
 
   const addTagsVisitsRoute = versionMatch(selectedServer.version, { minVersion: '2.2.0' });
   const addOrphanVisitsRoute = versionMatch(selectedServer.version, { minVersion: '2.6.0' });
-  const burgerClasses = classNames('menu-layout__burger-icon', {
-    'menu-layout__burger-icon--active': sidebarVisible,
-  });
-  const swipeMenuIfNoModalExists = (callback: () => void) => (e: any) => {
-    const swippedOnVisitsTable = (e.event.composedPath() as HTMLElement[]).some(
-      ({ classList }) => classList?.contains('visits-table'),
-    );
-
-    if (swippedOnVisitsTable || document.querySelector('.modal')) {
-      return;
-    }
-
-    callback();
-  };
-  const swipeableProps = useSwipeable({
-    delta: 40,
-    onSwipedLeft: swipeMenuIfNoModalExists(hideSidebar),
-    onSwipedRight: swipeMenuIfNoModalExists(showSidebar),
-  });
+  const burgerClasses = classNames('menu-layout__burger-icon', { 'menu-layout__burger-icon--active': sidebarVisible });
+  const swipeableProps = useSwipeable(showSidebar, hideSidebar);
 
   return (
     <>

src/servers/data/index.ts

@@ -34,7 +34,7 @@ export const isServerWithId = (server: SelectedServer | ServerWithId): server is
   !!server?.hasOwnProperty('id');
 
 export const isReachableServer = (server: SelectedServer): server is ReachableServer =>
-  !!server?.hasOwnProperty('printableVersion');
+  !!server?.hasOwnProperty('version');
 
 export const isNotFoundServer = (server: SelectedServer): server is NotFoundServer =>
   !!server?.hasOwnProperty('serverNotFound');

src/utils/helpers/hooks.ts

@@ -1,4 +1,5 @@
 import { useState, useRef } from 'react';
+import { useSwipeable as useReactSwipeable } from 'react-swipeable';
 
 const DEFAULT_DELAY = 2000;
 
@@ -30,3 +31,23 @@ export const useToggle = (initialValue = false): ToggleResult => {
 
   return [ flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false) ];
 };
+
+export const useSwipeable = (showSidebar: () => void, hideSidebar: () => void) => {
+  const swipeMenuIfNoModalExists = (callback: () => void) => (e: any) => {
+    const swippedOnVisitsTable = (e.event.composedPath() as HTMLElement[]).some(
+      ({ classList }) => classList?.contains('visits-table'),
+    );
+
+    if (swippedOnVisitsTable || document.querySelector('.modal')) {
+      return;
+    }
+
+    callback();
+  };
+
+  return useReactSwipeable({
+    delta: 40,
+    onSwipedLeft: swipeMenuIfNoModalExists(hideSidebar),
+    onSwipedRight: swipeMenuIfNoModalExists(showSidebar),
+  });
+};

test/common/MenuLayout.test.tsx

@@ -0,0 +1,63 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+import { History, Location } from 'history';
+import { match } from 'react-router'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import { Route } from 'react-router-dom';
+import { Mock } from 'ts-mockery';
+import createMenuLayout from '../../src/common/MenuLayout';
+import { NonReachableServer, NotFoundServer, ReachableServer, SelectedServer } from '../../src/servers/data';
+import NoMenuLayout from '../../src/common/NoMenuLayout';
+
+describe('<MenuLayout />', () => {
+  const ServerError = jest.fn();
+  const C = jest.fn();
+  const MenuLayout = createMenuLayout(C, C, C, C, C, C, C, ServerError, C);
+  let wrapper: ShallowWrapper;
+  const createWrapper = (selectedServer: SelectedServer) => {
+    wrapper = shallow(
+      <MenuLayout
+        selectServer={jest.fn()}
+        selectedServer={selectedServer}
+        history={Mock.all<History>()}
+        location={Mock.all<Location>()}
+        match={Mock.of<match<{ serverId: string }>>({
+          params: { serverId: 'abc123' },
+        })}
+      />,
+    );
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+
+  it.each([
+    [ null, NoMenuLayout ],
+    [ 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);
+  });
+
+  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.1.0', 6 ],
+    [ '2.2.0', 7 ],
+    [ '2.5.0', 7 ],
+    [ '2.6.0', 8 ],
+    [ '2.7.0', 8 ],
+  ])('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);
+  });
+});

test/common/ShlinkVersions.test.tsx

@@ -14,11 +14,11 @@ describe('<ShlinkVersions />', () => {
   afterEach(() => wrapper?.unmount());
 
   it.each([
-    [ '1.2.3', Mock.of<ReachableServer>({ printableVersion: 'foo' }), 'v1.2.3', 'foo' ],
-    [ 'foo', Mock.of<ReachableServer>({ printableVersion: '1.2.3' }), 'latest', '1.2.3' ],
-    [ 'latest', Mock.of<ReachableServer>({ printableVersion: 'latest' }), 'latest', 'latest' ],
-    [ '5.5.0', Mock.of<ReachableServer>({ printableVersion: '0.2.8' }), 'v5.5.0', '0.2.8' ],
-    [ 'not-semver', Mock.of<ReachableServer>({ printableVersion: 'something' }), 'latest', 'something' ],
+    [ '1.2.3', Mock.of<ReachableServer>({ version: '', printableVersion: 'foo' }), 'v1.2.3', 'foo' ],
+    [ 'foo', Mock.of<ReachableServer>({ version: '', printableVersion: '1.2.3' }), 'latest', '1.2.3' ],
+    [ 'latest', Mock.of<ReachableServer>({ version: '', printableVersion: 'latest' }), 'latest', 'latest' ],
+    [ '5.5.0', Mock.of<ReachableServer>({ version: '', printableVersion: '0.2.8' }), 'v5.5.0', '0.2.8' ],
+    [ 'not-semver', Mock.of<ReachableServer>({ version: '', printableVersion: 'something' }), 'latest', 'something' ],
   ])(
     'displays expected versions when selected server is reachable',
     (clientVersion, selectedServer, expectedClientVersion, expectedServerVersion) => {

test/common/ShlinkVersionsContainer.test.tsx

@@ -18,7 +18,7 @@ describe('<ShlinkVersionsContainer />', () => {
     [ null, 'text-center' ],
     [ Mock.of<NotFoundServer>({ serverNotFound: true }), 'text-center' ],
     [ Mock.of<NonReachableServer>({ serverNotReachable: true }), 'text-center' ],
-    [ Mock.of<ReachableServer>({ printableVersion: 'v1.0.0' }), 'text-center shlink-versions-container--with-server' ],
+    [ Mock.of<ReachableServer>({ version: '1.0.0' }), 'text-center shlink-versions-container--with-server' ],
   ])('renders proper col classes based on type of selected server', (selectedServer, expectedClasses) => {
     const wrapper = createWrapper(selectedServer);