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

Feature/more rtl tests
This commit is contained in:
Alejandro Celaya 2022-05-02 19:39:30 +02:00 committed by GitHub
commit e6f9003fb6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 115 additions and 208 deletions

View file

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

View file

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

View file

@ -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;

View file

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

View file

@ -8,7 +8,6 @@ import ImportServersBtn from '../helpers/ImportServersBtn';
import { resetSelectedServer, selectServer } from '../reducers/selectedServer'; import { resetSelectedServer, selectServer } from '../reducers/selectedServer';
import { createServer, createServers, deleteServer, editServer, setAutoConnect } from '../reducers/servers'; import { createServer, createServers, deleteServer, editServer, setAutoConnect } from '../reducers/servers';
import { fetchServers } from '../reducers/remoteServers'; import { fetchServers } from '../reducers/remoteServers';
import ForServerVersion from '../helpers/ForServerVersion';
import { ServerError } from '../helpers/ServerError'; import { ServerError } from '../helpers/ServerError';
import { ConnectDecorator } from '../../container/types'; import { ConnectDecorator } from '../../container/types';
import { withoutSelectedServer } from '../helpers/withoutSelectedServer'; import { withoutSelectedServer } from '../helpers/withoutSelectedServer';
@ -55,13 +54,10 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
bottle.serviceFactory('ImportServersBtn', ImportServersBtn, 'ServersImporter'); bottle.serviceFactory('ImportServersBtn', ImportServersBtn, 'ServersImporter');
bottle.decorator('ImportServersBtn', connect(['servers'], ['createServers'])); bottle.decorator('ImportServersBtn', connect(['servers'], ['createServers']));
bottle.serviceFactory('ForServerVersion', () => ForServerVersion);
bottle.decorator('ForServerVersion', connect(['selectedServer']));
bottle.serviceFactory('ServerError', ServerError, 'DeleteServerButton'); bottle.serviceFactory('ServerError', ServerError, 'DeleteServerButton');
bottle.decorator('ServerError', connect(['servers', 'selectedServer'])); bottle.decorator('ServerError', connect(['servers', 'selectedServer']));
bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable', 'CreateShortUrl', 'ForServerVersion'); bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable', 'CreateShortUrl');
bottle.decorator('Overview', connect( bottle.decorator('Overview', connect(
['shortUrlsList', 'tagsList', 'selectedServer', 'mercureInfo', 'visitsOverview'], ['shortUrlsList', 'tagsList', 'selectedServer', 'mercureInfo', 'visitsOverview'],
['listShortUrls', 'listTags', 'createNewVisits', 'loadMercureInfo', 'loadVisitsOverview'], ['listShortUrls', 'listTags', 'createNewVisits', 'loadMercureInfo', 'loadVisitsOverview'],

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,46 +1,65 @@
import { mount, ReactWrapper } from 'enzyme'; import { fireEvent, render, screen } from '@testing-library/react';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { EditServer as editServerConstruct } from '../../src/servers/EditServer'; import { EditServer as editServerConstruct } from '../../src/servers/EditServer';
import { ServerForm } from '../../src/servers/helpers/ServerForm'; import { ReachableServer, SelectedServer } from '../../src/servers/data';
import { ReachableServer } from '../../src/servers/data';
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() })); jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
describe('<EditServer />', () => { describe('<EditServer />', () => {
let wrapper: ReactWrapper;
const ServerError = jest.fn(); const ServerError = jest.fn();
const editServerMock = jest.fn(); const editServerMock = jest.fn();
const navigate = jest.fn(); const navigate = jest.fn();
const selectedServer = Mock.of<ReachableServer>({ const defaultSelectedServer = Mock.of<ReachableServer>({
id: 'abc123', id: 'abc123',
name: 'name', name: 'the_name',
url: 'url', url: 'the_url',
apiKey: 'apiKey', apiKey: 'the_api_key',
}); });
const EditServer = editServerConstruct(ServerError); const EditServer = editServerConstruct(ServerError);
const setUp = (selectedServer: SelectedServer = defaultSelectedServer) => render(
<EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={jest.fn()} />,
);
beforeEach(() => { beforeEach(() => {
(useNavigate as any).mockReturnValue(navigate); (useNavigate as any).mockReturnValue(navigate);
wrapper = mount(
<EditServer editServer={editServerMock} selectedServer={selectedServer} selectServer={jest.fn()} />,
);
}); });
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders components', () => { it('renders nothing if selected server is not reachable', () => {
expect(wrapper.find(ServerForm)).toHaveLength(1); 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', () => { 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); expect(navigate).toHaveBeenCalledWith(-1);
}); });
}); });

View file

@ -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 { 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 { ShortUrlsList as ShortUrlsListState } from '../../src/short-urls/reducers/shortUrlsList';
import { Overview as overviewCreator } from '../../src/servers/Overview'; import { Overview as overviewCreator } from '../../src/servers/Overview';
import { TagsList } from '../../src/tags/reducers/tagsList'; 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 { MercureInfo } from '../../src/mercure/reducers/mercureInfo';
import { ReachableServer } from '../../src/servers/data'; import { ReachableServer } from '../../src/servers/data';
import { prettify } from '../../src/utils/helpers/numbers'; import { prettify } from '../../src/utils/helpers/numbers';
import { HighlightCard } from '../../src/servers/helpers/HighlightCard';
describe('<Overview />', () => { 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 listShortUrls = jest.fn();
const listTags = jest.fn(); const listTags = jest.fn();
const loadVisitsOverview = jest.fn(); const loadVisitsOverview = jest.fn();
const Overview = overviewCreator(ShortUrlsTable, CreateShortUrl, ForServerVersion); const Overview = overviewCreator(ShortUrlsTable, CreateShortUrl);
const shortUrls = { const shortUrls = {
pagination: { totalItems: 83710 }, pagination: { totalItems: 83710 },
}; };
const serverId = '123'; const serverId = '123';
const createWrapper = (loading = false) => { const setUp = (loading = false) => render(
wrapper = mount( <MemoryRouter>
<MemoryRouter> <Overview
<Overview listShortUrls={listShortUrls}
listShortUrls={listShortUrls} listTags={listTags}
listTags={listTags} loadVisitsOverview={loadVisitsOverview}
loadVisitsOverview={loadVisitsOverview} shortUrlsList={Mock.of<ShortUrlsListState>({ loading, shortUrls })}
shortUrlsList={Mock.of<ShortUrlsListState>({ loading, shortUrls })} tagsList={Mock.of<TagsList>({ loading, tags: ['foo', 'bar', 'baz'] })}
tagsList={Mock.of<TagsList>({ loading, tags: ['foo', 'bar', 'baz'] })} visitsOverview={Mock.of<VisitsOverview>({ loading, visitsCount: 3456, orphanVisitsCount: 28 })}
visitsOverview={Mock.of<VisitsOverview>({ loading, visitsCount: 3456, orphanVisitsCount: 28 })} selectedServer={Mock.of<ReachableServer>({ id: serverId })}
selectedServer={Mock.of<ReachableServer>({ id: serverId })} createNewVisits={jest.fn()}
createNewVisits={jest.fn()} loadMercureInfo={jest.fn()}
loadMercureInfo={jest.fn()} mercureInfo={Mock.all<MercureInfo>()}
mercureInfo={Mock.all<MercureInfo>()} />
/> </MemoryRouter>,
</MemoryRouter>, );
);
return wrapper;
};
afterEach(() => wrapper?.unmount());
it('displays loading messages when still loading', () => { 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', () => { 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', () => { 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).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`);
}); });
}); });

View file

@ -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>');
});
});

View file

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

View file

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