Extended ShortUrlVisitsCount test to cover different contents of the tooltip

This commit is contained in:
Alejandro Celaya 2022-12-19 20:18:50 +01:00
parent afc272c4d9
commit 73a3d1d50f
2 changed files with 35 additions and 7 deletions

View file

@ -64,7 +64,7 @@ export const ShortUrlsRow = (
</td> </td>
<td className="responsive-table__cell short-urls-row__cell text-lg-end" data-th="Visits"> <td className="responsive-table__cell short-urls-row__cell text-lg-end" data-th="Visits">
<ShortUrlVisitsCount <ShortUrlVisitsCount
visitsCount={shortUrl.visitsCount} visitsCount={shortUrl.visitsSummary?.total ?? shortUrl.visitsCount}
shortUrl={shortUrl} shortUrl={shortUrl}
selectedServer={selectedServer} selectedServer={selectedServer}
active={active} active={active}

View file

@ -1,14 +1,18 @@
import { render } from '@testing-library/react'; import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { ShortUrlVisitsCount } from '../../../src/short-urls/helpers/ShortUrlVisitsCount'; import { ShortUrlVisitsCount } from '../../../src/short-urls/helpers/ShortUrlVisitsCount';
import { ShortUrl } from '../../../src/short-urls/data'; import { ShortUrl } from '../../../src/short-urls/data';
describe('<ShortUrlVisitsCount />', () => { describe('<ShortUrlVisitsCount />', () => {
const setUp = (visitsCount: number, shortUrl: ShortUrl) => render( const setUp = (visitsCount: number, shortUrl: ShortUrl) => ({
user: userEvent.setup(),
...render(
<ShortUrlVisitsCount visitsCount={visitsCount} shortUrl={shortUrl} />, <ShortUrlVisitsCount visitsCount={visitsCount} shortUrl={shortUrl} />,
); ),
});
it.each([undefined, {}])('just returns visits when no maxVisits is provided', (meta) => { it.each([undefined, {}])('just returns visits when no limits are provided', (meta) => {
const visitsCount = 45; const visitsCount = 45;
const { container } = setUp(visitsCount, Mock.of<ShortUrl>({ meta })); const { container } = setUp(visitsCount, Mock.of<ShortUrl>({ meta }));
@ -23,6 +27,30 @@ describe('<ShortUrlVisitsCount />', () => {
const { container } = setUp(visitsCount, Mock.of<ShortUrl>({ meta })); const { container } = setUp(visitsCount, Mock.of<ShortUrl>({ meta }));
expect(container.firstChild).toHaveTextContent(`/ ${maxVisits}`); expect(container.firstChild).toHaveTextContent(`/ ${maxVisits}`);
expect(container.querySelector('.short-urls-visits-count__max-visits-control')).toBeInTheDocument(); });
it.each([
[['This short URL will not accept more than 50 visits'], { maxVisits: 50 }],
[['This short URL will not accept more than 1 visit'], { maxVisits: 1 }],
[['This short URL will not accept visits before 2022-01-01 10:00'], { validSince: '2022-01-01T10:00:00' }],
[['This short URL will not accept visits after 2022-05-05 15:30'], { validUntil: '2022-05-05T15:30:30' }],
[[
'This short URL will not accept more than 100 visits',
'This short URL will not accept visits after 2022-05-05 15:30',
], { validUntil: '2022-05-05T15:30:30', maxVisits: 100 }],
[[
'This short URL will not accept more than 100 visits',
'This short URL will not accept visits before 2023-01-01 10:00',
'This short URL will not accept visits after 2023-05-05 15:30',
], { validSince: '2023-01-01T10:00:00', validUntil: '2023-05-05T15:30:30', maxVisits: 100 }],
])('displays proper amount of tooltip list items', async (expectedListItems, meta) => {
const { user } = setUp(100, Mock.of<ShortUrl>({ meta }));
await user.hover(screen.getByRole('img', { hidden: true }));
await waitFor(() => expect(screen.getByRole('list')));
const items = screen.getAllByRole('listitem');
expect(items).toHaveLength(expectedListItems.length);
expectedListItems.forEach((text, index) => expect(items[index]).toHaveTextContent(text));
}); });
}); });