Merge pull request #638 from acelaya-forks/feature/more-rtl-tests

Feature/more rtl tests

src/api/types/index.ts

@@ -46,7 +46,7 @@ export interface ShlinkVisits {
 
 export interface ShlinkVisitsOverview {
   visitsCount: number;
-  orphanVisitsCount?: number; // Optional only for versions older than 2.6.0
+  orphanVisitsCount: number;
 }
 
 export interface ShlinkVisitsParams {

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>
+            {loadingVisits ? 'Loading...' : prettify(orphanVisitsCount)}
           </HighlightCard>
         </div>
         <div className="col-lg-6 col-xl-3 mb-3">

src/servers/helpers/ForServerVersion.tsx

@@ -1,26 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-import { versionMatch, Versions } from '../../utils/helpers/version';
-import { isReachableServer, SelectedServer } from '../data';
-
-export type ForServerVersionProps = PropsWithChildren<Versions>;
-
-interface ForServerVersionConnectProps extends ForServerVersionProps {
-  selectedServer: SelectedServer;
-}
-
-const ForServerVersion: FC<ForServerVersionConnectProps> = ({ minVersion, maxVersion, selectedServer, children }) => {
-  if (!isReachableServer(selectedServer)) {
-    return null;
-  }
-
-  const { version } = selectedServer;
-  const matchesVersion = versionMatch(version, { maxVersion, minVersion });
-
-  if (!matchesVersion) {
-    return null;
-  }
-
-  return <>{children}</>;
-};
-
-export default ForServerVersion;

src/servers/helpers/ServerForm.tsx

@@ -23,7 +23,7 @@ export const ServerForm: FC<ServerFormProps> = ({ onSubmit, initialValues, child
   }, [initialValues]);
 
   return (
-    <form className="server-form" onSubmit={handleSubmit}>
+    <form className="server-form" name="serverForm" onSubmit={handleSubmit}>
       <SimpleCard className="mb-3" title={title}>
         <InputFormGroup value={name} onChange={setName}>Name</InputFormGroup>
         <InputFormGroup type="url" value={url} onChange={setUrl}>URL</InputFormGroup>

src/servers/services/provideServices.ts

@@ -8,7 +8,6 @@ import ImportServersBtn from '../helpers/ImportServersBtn';
 import { resetSelectedServer, selectServer } from '../reducers/selectedServer';
 import { createServer, createServers, deleteServer, editServer, setAutoConnect } from '../reducers/servers';
 import { fetchServers } from '../reducers/remoteServers';
-import ForServerVersion from '../helpers/ForServerVersion';
 import { ServerError } from '../helpers/ServerError';
 import { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../helpers/withoutSelectedServer';
@@ -55,13 +54,10 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('ImportServersBtn', ImportServersBtn, 'ServersImporter');
   bottle.decorator('ImportServersBtn', connect(['servers'], ['createServers']));
 
-  bottle.serviceFactory('ForServerVersion', () => ForServerVersion);
-  bottle.decorator('ForServerVersion', connect(['selectedServer']));
-
   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'],

src/short-urls/ShortUrlForm.tsx

@@ -12,7 +12,7 @@ import { SelectedServer } from '../servers/data';
 import { TagsSelectorProps } from '../tags/helpers/TagsSelector';
 import { DomainSelectorProps } from '../domains/DomainSelector';
 import { formatIsoDate } from '../utils/helpers/date';
-import UseExistingIfFoundInfoIcon from './UseExistingIfFoundInfoIcon';
+import { UseExistingIfFoundInfoIcon } from './UseExistingIfFoundInfoIcon';
 import { ShortUrlData } from './data';
 import { ShortUrlFormCheckboxGroup } from './helpers/ShortUrlFormCheckboxGroup';
 import './ShortUrlForm.scss';

src/short-urls/UseExistingIfFoundInfoIcon.tsx

@@ -36,7 +36,7 @@ const InfoModal = ({ isOpen, toggle }: { isOpen: boolean; toggle: () => void })
   </Modal>
 );
 
-const UseExistingIfFoundInfoIcon = () => {
+export const UseExistingIfFoundInfoIcon = () => {
   const [isModalOpen, toggleModal] = useToggle();
 
   return (
@@ -48,5 +48,3 @@ const UseExistingIfFoundInfoIcon = () => {
     </>
   );
 };
-
-export default UseExistingIfFoundInfoIcon;

src/short-urls/helpers/QrCodeModal.tsx

@@ -1,4 +1,4 @@
-import { FC, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Modal, FormGroup, ModalBody, ModalHeader, Row, Button } from 'reactstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faFileDownload as downloadIcon } from '@fortawesome/free-solid-svg-icons';
@@ -7,9 +7,8 @@ import { ShortUrlModalProps } from '../data';
 import { SelectedServer } from '../../servers/data';
 import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
 import { buildQrCodeUrl, QrCodeCapabilities, QrCodeFormat, QrErrorCorrection } from '../../utils/helpers/qrCodes';
-import { supportsQrErrorCorrection } from '../../utils/helpers/features';
+import { supportsNonRestCors, supportsQrErrorCorrection } from '../../utils/helpers/features';
 import { ImageDownloader } from '../../common/services/ImageDownloader';
-import { ForServerVersionProps } from '../../servers/helpers/ForServerVersion';
 import { QrFormatDropdown } from './qr-codes/QrFormatDropdown';
 import { QrErrorCorrectionDropdown } from './qr-codes/QrErrorCorrectionDropdown';
 import './QrCodeModal.scss';
@@ -18,7 +17,7 @@ interface QrCodeModalConnectProps extends ShortUrlModalProps {
   selectedServer: SelectedServer;
 }
 
-const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<ForServerVersionProps>) => (
+const QrCodeModal = (imageDownloader: ImageDownloader) => (
   { shortUrl: { shortUrl, shortCode }, toggle, isOpen, selectedServer }: QrCodeModalConnectProps,
 ) => {
   const [size, setSize] = useState(300);
@@ -28,6 +27,7 @@ const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<ForS
   const capabilities: QrCodeCapabilities = useMemo(() => ({
     errorCorrectionIsSupported: supportsQrErrorCorrection(selectedServer),
   }), [selectedServer]);
+  const displayDownloadBtn = supportsNonRestCors(selectedServer);
   const willRenderThreeControls = !capabilities.errorCorrectionIsSupported;
   const qrCodeUrl = useMemo(
     () => buildQrCodeUrl(shortUrl, { size, format, margin, errorCorrection }, capabilities),
@@ -89,7 +89,7 @@ const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<ForS
             <CopyToClipboardIcon text={qrCodeUrl} />
           </div>
           <img src={qrCodeUrl} className="qr-code-modal__img" alt="QR code" />
-          <ForServerVersion minVersion="2.9.0">
+          {displayDownloadBtn && (
             <div className="mt-3">
               <Button
                 block
@@ -101,7 +101,7 @@ const QrCodeModal = (imageDownloader: ImageDownloader, ForServerVersion: FC<ForS
                 Download <FontAwesomeIcon icon={downloadIcon} className="ms-1" />
               </Button>
             </div>
-          </ForServerVersion>
+          )}
         </div>
       </ModalBody>
     </Modal>

src/short-urls/services/provideServices.ts

@@ -47,7 +47,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('DeleteShortUrlModal', () => DeleteShortUrlModal);
   bottle.decorator('DeleteShortUrlModal', connect(['shortUrlDeletion'], ['deleteShortUrl', 'resetDeleteShortUrl']));
 
-  bottle.serviceFactory('QrCodeModal', QrCodeModal, 'ImageDownloader', 'ForServerVersion');
+  bottle.serviceFactory('QrCodeModal', QrCodeModal, 'ImageDownloader');
   bottle.decorator('QrCodeModal', connect(['selectedServer']));
 
   bottle.serviceFactory('ShortUrlsFilteringBar', ShortUrlsFilteringBar, 'ColorGenerator', 'ExportShortUrlsBtn');

src/utils/helpers/features.ts

@@ -9,6 +9,7 @@ export const supportsCrawlableVisits = supportsBotVisits;
 export const supportsQrErrorCorrection = serverMatchesMinVersion('2.8.0');
 export const supportsDomainRedirects = supportsQrErrorCorrection;
 export const supportsForwardQuery = serverMatchesMinVersion('2.9.0');
+export const supportsNonRestCors = supportsForwardQuery;
 export const supportsDefaultDomainRedirectsEdition = serverMatchesMinVersion('2.10.0');
 export const supportsNonOrphanVisits = serverMatchesMinVersion('3.0.0');
 export const supportsAllTagsFiltering = supportsNonOrphanVisits;

src/visits/reducers/visitsOverview.ts

@@ -12,7 +12,7 @@ export const GET_OVERVIEW = 'shlink/visitsOverview/GET_OVERVIEW';
 
 export interface VisitsOverview {
   visitsCount: number;
-  orphanVisitsCount?: number;
+  orphanVisitsCount: number;
   loading: boolean;
   error: boolean;
 }

test/api/ShlinkApiError.test.tsx

@@ -1,26 +1,20 @@
-import { shallow, ShallowWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { ShlinkApiError, ShlinkApiErrorProps } from '../../src/api/ShlinkApiError';
 import { InvalidArgumentError, ProblemDetailsError } from '../../src/api/types';
 
 describe('<ShlinkApiError />', () => {
-  let commonWrapper: ShallowWrapper;
-  const createWrapper = (props: ShlinkApiErrorProps) => {
-    commonWrapper = shallow(<ShlinkApiError {...props} />);
-
-    return commonWrapper;
-  };
-
-  afterEach(() => commonWrapper?.unmount());
+  const setUp = (props: ShlinkApiErrorProps) => render(<ShlinkApiError {...props} />);
 
   it.each([
     [undefined, 'the fallback', 'the fallback'],
     [Mock.all<ProblemDetailsError>(), 'the fallback', 'the fallback'],
     [Mock.of<ProblemDetailsError>({ detail: 'the detail' }), 'the fallback', 'the detail'],
   ])('renders proper message', (errorData, fallbackMessage, expectedMessage) => {
-    const wrapper = createWrapper({ errorData, fallbackMessage });
+    const { container } = setUp({ errorData, fallbackMessage });
 
-    expect(wrapper.text()).toContain(expectedMessage);
+    expect(container.firstChild).toHaveTextContent(expectedMessage);
+    expect(screen.queryByRole('paragraph')).not.toBeInTheDocument();
   });
 
   it.each([
@@ -28,9 +22,7 @@ describe('<ShlinkApiError />', () => {
     [Mock.all<ProblemDetailsError>(), 0],
     [Mock.of<InvalidArgumentError>({ type: 'INVALID_ARGUMENT', invalidElements: [] }), 1],
   ])('renders list of invalid elements when provided error is an InvalidError', (errorData, expectedElementsCount) => {
-    const wrapper = createWrapper({ errorData });
-    const p = wrapper.find('p');
-
-    expect(p).toHaveLength(expectedElementsCount);
+    setUp({ errorData });
+    expect(screen.queryAllByText(/^Invalid elements/)).toHaveLength(expectedElementsCount);
   });
 });

test/servers/EditServer.test.tsx

@@ -1,46 +1,65 @@
-import { mount, ReactWrapper } from 'enzyme';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Mock } from 'ts-mockery';
 import { useNavigate } from 'react-router-dom';
 import { EditServer as editServerConstruct } from '../../src/servers/EditServer';
-import { ServerForm } from '../../src/servers/helpers/ServerForm';
-import { ReachableServer } from '../../src/servers/data';
+import { ReachableServer, SelectedServer } from '../../src/servers/data';
 
 jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
 
 describe('<EditServer />', () => {
-  let wrapper: ReactWrapper;
   const ServerError = jest.fn();
   const editServerMock = jest.fn();
   const navigate = jest.fn();
-  const selectedServer = Mock.of<ReachableServer>({
+  const defaultSelectedServer = Mock.of<ReachableServer>({
     id: 'abc123',
-    name: 'name',
-    url: 'url',
-    apiKey: 'apiKey',
+    name: 'the_name',
+    url: 'the_url',
+    apiKey: 'the_api_key',
   });
   const EditServer = editServerConstruct(ServerError);
+  const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => render(
+    <EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={jest.fn()} />,
+  );
 
   beforeEach(() => {
     (useNavigate as any).mockReturnValue(navigate);
-
-    wrapper = mount(
-      <EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={jest.fn()} />,
-    );
   });
 
   afterEach(jest.clearAllMocks);
-  afterEach(() => wrapper?.unmount());
 
-  it('renders components', () => {
-    expect(wrapper.find(ServerForm)).toHaveLength(1);
+  it('renders nothing if selected server is not reachable', () => {
+    setUp(Mock.all<SelectedServer>());
+
+    expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+    expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
+    expect(screen.queryByText('Save')).not.toBeInTheDocument();
+  });
+
+  it('renders server title', () => {
+    setUp();
+    expect(screen.getByText(`Edit "${defaultSelectedServer.name}"`)).toBeInTheDocument();
+  });
+
+  it('display the server info in the form components', () => {
+    setUp();
+
+    expect(screen.getByDisplayValue('the_name')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('the_url')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('the_api_key')).toBeInTheDocument();
   });
 
   it('edits server and redirects to it when form is submitted', () => {
-    const form = wrapper.find(ServerForm);
+    setUp();
 
-    form.simulate('submit', {});
+    fireEvent.change(screen.getByDisplayValue('the_name'), { target: { value: 'the_new_name' } });
+    fireEvent.change(screen.getByDisplayValue('the_url'), { target: { value: 'the_new_url' } });
+    fireEvent.submit(screen.getByRole('form'));
 
-    expect(editServerMock).toHaveBeenCalledTimes(1);
+    expect(editServerMock).toHaveBeenCalledWith('abc123', {
+      name: 'the_new_name',
+      url: 'the_new_url',
+      apiKey: 'the_api_key',
+    });
     expect(navigate).toHaveBeenCalledWith(-1);
   });
 });

test/servers/Overview.test.tsx

@@ -1,7 +1,6 @@
-import { FC, PropsWithChildren } from 'react';
-import { mount, ReactWrapper } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 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,79 +8,73 @@ 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 = () => null;
-  const CreateShortUrl = () => null;
-  const ForServerVersion: FC<PropsWithChildren<unknown>> = ({ children }) => <>{children}</>;
+  const ShortUrlsTable = () => <>ShortUrlsTable</>;
+  const CreateShortUrl = () => <>CreateShortUrl</>;
   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) => {
-    wrapper = mount(
-      <MemoryRouter>
-        <Overview
-          listShortUrls={listShortUrls}
-          listTags={listTags}
-          loadVisitsOverview={loadVisitsOverview}
-          shortUrlsList={Mock.of<ShortUrlsListState>({ loading, shortUrls })}
-          tagsList={Mock.of<TagsList>({ loading, tags: ['foo', 'bar', 'baz'] })}
-          visitsOverview={Mock.of<VisitsOverview>({ loading, visitsCount: 3456, orphanVisitsCount: 28 })}
-          selectedServer={Mock.of<ReachableServer>({ id: serverId })}
-          createNewVisits={jest.fn()}
-          loadMercureInfo={jest.fn()}
-          mercureInfo={Mock.all<MercureInfo>()}
-        />
-      </MemoryRouter>,
-    );
-
-    return wrapper;
-  };
-
-  afterEach(() => wrapper?.unmount());
+  const setUp = (loading = false) => render(
+    <MemoryRouter>
+      <Overview
+        listShortUrls={listShortUrls}
+        listTags={listTags}
+        loadVisitsOverview={loadVisitsOverview}
+        shortUrlsList={Mock.of<ShortUrlsListState>({ loading, shortUrls })}
+        tagsList={Mock.of<TagsList>({ loading, tags: ['foo', 'bar', 'baz'] })}
+        visitsOverview={Mock.of<VisitsOverview>({ loading, visitsCount: 3456, orphanVisitsCount: 28 })}
+        selectedServer={Mock.of<ReachableServer>({ id: serverId })}
+        createNewVisits={jest.fn()}
+        loadMercureInfo={jest.fn()}
+        mercureInfo={Mock.all<MercureInfo>()}
+      />
+    </MemoryRouter>,
+  );
 
   it('displays loading messages when still loading', () => {
-    const wrapper = createWrapper(true);
-    const cards = wrapper.find(HighlightCard);
-
-    expect(cards).toHaveLength(4);
-    cards.forEach((card) => expect(card.html()).toContain('Loading...'));
+    setUp(true);
+    expect(screen.getAllByText('Loading...')).toHaveLength(4);
   });
 
   it('displays amounts in cards after finishing loading', () => {
-    const wrapper = createWrapper();
-    const cards = wrapper.find(HighlightCard);
+    setUp();
 
-    expect(cards).toHaveLength(4);
-    expect(cards.at(0).html()).toContain(prettify(3456));
-    expect(cards.at(1).html()).toContain(prettify(28));
-    expect(cards.at(2).html()).toContain(prettify(83710));
-    expect(cards.at(3).html()).toContain(prettify(3));
+    const headingElements = screen.getAllByRole('heading');
+
+    expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
+    expect(headingElements[0]).toHaveTextContent('Visits');
+    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', () => {
-    const wrapper = createWrapper();
+  it('nests injected components', () => {
+    setUp();
 
-    expect(wrapper.find(CreateShortUrl)).toHaveLength(1);
-    expect(wrapper.find(ShortUrlsTable)).toHaveLength(1);
+    expect(screen.queryByText('ShortUrlsTable')).toBeInTheDocument();
+    expect(screen.queryByText('CreateShortUrl')).toBeInTheDocument();
   });
 
   it('displays links to other sections', () => {
-    const wrapper = createWrapper();
-    const links = wrapper.find(Link);
+    setUp();
+
+    const links = screen.getAllByRole('link');
 
     expect(links).toHaveLength(5);
-    expect(links.at(0).prop('to')).toEqual(`/server/${serverId}/orphan-visits`);
-    expect(links.at(1).prop('to')).toEqual(`/server/${serverId}/list-short-urls/1`);
-    expect(links.at(2).prop('to')).toEqual(`/server/${serverId}/manage-tags`);
-    expect(links.at(3).prop('to')).toEqual(`/server/${serverId}/create-short-url`);
-    expect(links.at(4).prop('to')).toEqual(`/server/${serverId}/list-short-urls/1`);
+    expect(links[0]).toHaveAttribute('href', `/server/${serverId}/orphan-visits`);
+    expect(links[1]).toHaveAttribute('href', `/server/${serverId}/list-short-urls/1`);
+    expect(links[2]).toHaveAttribute('href', `/server/${serverId}/manage-tags`);
+    expect(links[3]).toHaveAttribute('href', `/server/${serverId}/create-short-url`);
+    expect(links[4]).toHaveAttribute('href', `/server/${serverId}/list-short-urls/1`);
   });
 });

test/servers/helpers/ForServerVersion.test.tsx

@@ -1,49 +0,0 @@
-import { mount, ReactWrapper } from 'enzyme';
-import { Mock } from 'ts-mockery';
-import ForServerVersion from '../../../src/servers/helpers/ForServerVersion';
-import { ReachableServer, SelectedServer } from '../../../src/servers/data';
-import { SemVer, SemVerPattern } from '../../../src/utils/helpers/version';
-
-describe('<ForServerVersion />', () => {
-  let wrapped: ReactWrapper;
-
-  const renderComponent = (selectedServer: SelectedServer, minVersion?: SemVerPattern, maxVersion?: SemVerPattern) => {
-    wrapped = mount(
-      <ForServerVersion minVersion={minVersion} maxVersion={maxVersion} selectedServer={selectedServer}>
-        <span>Hello</span>
-      </ForServerVersion>,
-    );
-
-    return wrapped;
-  };
-
-  afterEach(() => wrapped?.unmount());
-
-  it('does not render children when current server is empty', () => {
-    const wrapped = renderComponent(null, '1.*.*');
-
-    expect(wrapped.html()).toBeNull();
-  });
-
-  it.each([
-    ['2.0.0' as SemVerPattern, undefined, '1.8.3' as SemVer],
-    [undefined, '1.8.0' as SemVerPattern, '1.8.3' as SemVer],
-    ['1.7.0' as SemVerPattern, '1.8.0' as SemVerPattern, '1.8.3' as SemVer],
-  ])('does not render children when current version does not match requirements', (min, max, version) => {
-    const wrapped = renderComponent(Mock.of<ReachableServer>({ version, printableVersion: version }), min, max);
-
-    expect(wrapped.html()).toBeNull();
-  });
-
-  it.each([
-    ['2.0.0' as SemVerPattern, undefined, '2.8.3' as SemVer],
-    ['2.0.0' as SemVerPattern, undefined, '2.0.0' as SemVer],
-    [undefined, '1.8.0' as SemVerPattern, '1.8.0' as SemVer],
-    [undefined, '1.8.0' as SemVerPattern, '1.7.1' as SemVer],
-    ['1.7.0' as SemVerPattern, '1.8.0' as SemVerPattern, '1.7.3' as SemVer],
-  ])('renders children when current version matches requirements', (min, max, version) => {
-    const wrapped = renderComponent(Mock.of<ReachableServer>({ version, printableVersion: version }), min, max);
-
-    expect(wrapped.html()).toContain('<span>Hello</span>');
-  });
-});

test/short-urls/UseExistingIfFoundInfoIcon.test.tsx

@@ -1,22 +1,12 @@
-import { mount, ReactWrapper } from 'enzyme';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Modal } from 'reactstrap';
-import UseExistingIfFoundInfoIcon from '../../src/short-urls/UseExistingIfFoundInfoIcon';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { UseExistingIfFoundInfoIcon } from '../../src/short-urls/UseExistingIfFoundInfoIcon';
 
 describe('<UseExistingIfFoundInfoIcon />', () => {
-  let wrapped: ReactWrapper;
+  it('shows modal when icon is clicked', async () => {
+    render(<UseExistingIfFoundInfoIcon />);
 
-  beforeEach(() => {
-    wrapped = mount(<UseExistingIfFoundInfoIcon />);
-  });
-
-  afterEach(() => wrapped.unmount());
-
-  it('shows modal when icon is clicked', () => {
-    const icon = wrapped.find(FontAwesomeIcon);
-
-    expect(wrapped.find(Modal).prop('isOpen')).toEqual(false);
-    icon.simulate('click');
-    expect(wrapped.find(Modal).prop('isOpen')).toEqual(true);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByTitle('What does this mean?').firstChild as Node);
+    expect(await screen.findByRole('dialog')).toBeInTheDocument();
   });
 });

test/short-urls/helpers/QrCodeModal.test.tsx

@@ -14,7 +14,7 @@ import { QrErrorCorrectionDropdown } from '../../../src/short-urls/helpers/qr-co
 describe('<QrCodeModal />', () => {
   let wrapper: ShallowWrapper;
   const saveImage = jest.fn().mockReturnValue(Promise.resolve());
-  const QrCodeModal = createQrCodeModal(Mock.of<ImageDownloader>({ saveImage }), () => null);
+  const QrCodeModal = createQrCodeModal(Mock.of<ImageDownloader>({ saveImage }));
   const shortUrl = 'https://doma.in/abc123';
   const createWrapper = (version: SemVer = '2.6.0') => {
     const selectedServer = Mock.of<ReachableServer>({ version });
@@ -99,7 +99,7 @@ describe('<QrCodeModal />', () => {
   });
 
   it('saves the QR code image when clicking the Download button', () => {
-    const wrapper = createWrapper();
+    const wrapper = createWrapper('2.9.0');
     const downloadBtn = wrapper.find(Button);
 
     expect(saveImage).not.toHaveBeenCalled();