Migrated Overview test from enzyme to react testing library

src/servers/Overview.tsx

@@ -13,7 +13,6 @@ import { ShlinkShortUrlsListParams } from '../api/types';
 import { supportsNonOrphanVisits } from '../utils/helpers/features';
 import { getServerId, SelectedServer } from './data';
 import { HighlightCard } from './helpers/HighlightCard';
-import { ForServerVersionProps } from './helpers/ForServerVersion';
 
 interface OverviewConnectProps {
   shortUrlsList: ShortUrlsListState;
@@ -28,7 +27,6 @@ interface OverviewConnectProps {
 export const Overview = (
   ShortUrlsTable: FC<ShortUrlsTableProps>,
   CreateShortUrl: FC<CreateShortUrlProps>,
-  ForServerVersion: FC<ForServerVersionProps>,
 ) => boundToMercureHub(({
   shortUrlsList,
   listShortUrls,
@@ -61,12 +59,7 @@ export const Overview = (
         </div>
         <div className="col-lg-6 col-xl-3 mb-3">
           <HighlightCard title="Orphan visits" link={`/server/${serverId}/orphan-visits`}>
-            <ForServerVersion minVersion="2.6.0">
             {loadingVisits ? 'Loading...' : prettify(orphanVisitsCount ?? 0)}
-            </ForServerVersion>
-            <ForServerVersion maxVersion="2.5.*">
-              <small className="text-muted"><i>Shlink 2.6 is needed</i></small>
-            </ForServerVersion>
           </HighlightCard>
         </div>
         <div className="col-lg-6 col-xl-3 mb-3">

src/servers/services/provideServices.ts

@@ -61,7 +61,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('ServerError', ServerError, 'DeleteServerButton');
   bottle.decorator('ServerError', connect(['servers', 'selectedServer']));
 
-  bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable', 'CreateShortUrl', 'ForServerVersion');
+  bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable', 'CreateShortUrl');
   bottle.decorator('Overview', connect(
     ['shortUrlsList', 'tagsList', 'selectedServer', 'mercureInfo', 'visitsOverview'],
     ['listShortUrls', 'listTags', 'createNewVisits', 'loadMercureInfo', 'loadVisitsOverview'],

test/servers/Overview.test.tsx

@@ -1,7 +1,6 @@
-import { FC, PropsWithChildren } from 'react';
+import { render, screen } from '@testing-library/react';
-import { mount, ReactWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
-import { Link, MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router-dom';
 import { ShortUrlsList as ShortUrlsListState } from '../../src/short-urls/reducers/shortUrlsList';
 import { Overview as overviewCreator } from '../../src/servers/Overview';
 import { TagsList } from '../../src/tags/reducers/tagsList';
@@ -9,23 +8,19 @@ import { VisitsOverview } from '../../src/visits/reducers/visitsOverview';
 import { MercureInfo } from '../../src/mercure/reducers/mercureInfo';
 import { ReachableServer } from '../../src/servers/data';
 import { prettify } from '../../src/utils/helpers/numbers';
-import { HighlightCard } from '../../src/servers/helpers/HighlightCard';
 
 describe('<Overview />', () => {
-  let wrapper: ReactWrapper;
+  const ShortUrlsTable = () => <>ShortUrlsTable</>;
-  const ShortUrlsTable = () => null;
+  const CreateShortUrl = () => <>CreateShortUrl</>;
-  const CreateShortUrl = () => null;
-  const ForServerVersion: FC<PropsWithChildren<unknown>> = ({ children }) => <>{children}</>;
   const listShortUrls = jest.fn();
   const listTags = jest.fn();
   const loadVisitsOverview = jest.fn();
-  const Overview = overviewCreator(ShortUrlsTable, CreateShortUrl, ForServerVersion);
+  const Overview = overviewCreator(ShortUrlsTable, CreateShortUrl);
   const shortUrls = {
     pagination: { totalItems: 83710 },
   };
   const serverId = '123';
-  const createWrapper = (loading = false) => {
+  const setUp = (loading = false) => render(
-    wrapper = mount(
     <MemoryRouter>
       <Overview
         listShortUrls={listShortUrls}
@@ -42,46 +37,44 @@ describe('<Overview />', () => {
     </MemoryRouter>,
   );
 
-    return wrapper;
-  };
-
-  afterEach(() => wrapper?.unmount());
-
   it('displays loading messages when still loading', () => {
-    const wrapper = createWrapper(true);
+    setUp(true);
-    const cards = wrapper.find(HighlightCard);
+    expect(screen.getAllByText('Loading...')).toHaveLength(4);
-
-    expect(cards).toHaveLength(4);
-    cards.forEach((card) => expect(card.html()).toContain('Loading...'));
   });
 
   it('displays amounts in cards after finishing loading', () => {
-    const wrapper = createWrapper();
+    setUp();
-    const cards = wrapper.find(HighlightCard);
 
-    expect(cards).toHaveLength(4);
+    const headingElements = screen.getAllByRole('heading');
-    expect(cards.at(0).html()).toContain(prettify(3456));
+
-    expect(cards.at(1).html()).toContain(prettify(28));
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-    expect(cards.at(2).html()).toContain(prettify(83710));
+    expect(headingElements[0]).toHaveTextContent('Visits');
-    expect(cards.at(3).html()).toContain(prettify(3));
+    expect(headingElements[1]).toHaveTextContent(prettify(3456));
+    expect(headingElements[2]).toHaveTextContent('Orphan visits');
+    expect(headingElements[3]).toHaveTextContent(prettify(28));
+    expect(headingElements[4]).toHaveTextContent('Short URLs');
+    expect(headingElements[5]).toHaveTextContent(prettify(83710));
+    expect(headingElements[6]).toHaveTextContent('Tags');
+    expect(headingElements[7]).toHaveTextContent(prettify(3));
   });
 
-  it('nests complex components', () => {
+  it('nests injected components', () => {
-    const wrapper = createWrapper();
+    setUp();
 
-    expect(wrapper.find(CreateShortUrl)).toHaveLength(1);
+    expect(screen.queryByText('ShortUrlsTable')).toBeInTheDocument();
-    expect(wrapper.find(ShortUrlsTable)).toHaveLength(1);
+    expect(screen.queryByText('CreateShortUrl')).toBeInTheDocument();
   });
 
   it('displays links to other sections', () => {
-    const wrapper = createWrapper();
+    setUp();
-    const links = wrapper.find(Link);
+
+    const links = screen.getAllByRole('link');
 
     expect(links).toHaveLength(5);
-    expect(links.at(0).prop('to')).toEqual(`/server/${serverId}/orphan-visits`);
+    expect(links[0]).toHaveAttribute('href', `/server/${serverId}/orphan-visits`);
-    expect(links.at(1).prop('to')).toEqual(`/server/${serverId}/list-short-urls/1`);
+    expect(links[1]).toHaveAttribute('href', `/server/${serverId}/list-short-urls/1`);
-    expect(links.at(2).prop('to')).toEqual(`/server/${serverId}/manage-tags`);
+    expect(links[2]).toHaveAttribute('href', `/server/${serverId}/manage-tags`);
-    expect(links.at(3).prop('to')).toEqual(`/server/${serverId}/create-short-url`);
+    expect(links[3]).toHaveAttribute('href', `/server/${serverId}/create-short-url`);
-    expect(links.at(4).prop('to')).toEqual(`/server/${serverId}/list-short-urls/1`);
+    expect(links[4]).toHaveAttribute('href', `/server/${serverId}/list-short-urls/1`);
   });
 });