mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 01:37:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated Overview test from enzyme to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-02 19:19:47 +02:00
parent 0de8eb1568
commit 8918b1ac96
3 changed files with 49 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/servers/Overview.tsx
View file

@ -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 ?? 0)}
</HighlightCard>
</div>
<div className="col-lg-6 col-xl-3 mb-3">

2
src/servers/services/provideServices.ts
View file

@ -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'],

101
test/servers/Overview.test.tsx
View file

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