2022-06-09 23:17:33 +03:00
|
|
|
import { render, screen } from '@testing-library/react';
|
2023-04-13 22:48:29 +03:00
|
|
|
import { fromPartial } from '@total-typescript/shoehorn';
|
2022-06-09 23:17:33 +03:00
|
|
|
import { MemoryRouter } from 'react-router-dom';
|
2023-07-24 21:14:59 +03:00
|
|
|
import { Paginator } from '../../shlink-web-component/short-urls/Paginator';
|
2023-07-29 11:43:15 +03:00
|
|
|
import { ELLIPSIS } from '../../shlink-web-component/utils/helpers/pagination';
|
2023-02-18 12:40:37 +03:00
|
|
|
import type { ShlinkPaginator } from '../../src/api/types';
|
2018-09-16 13:18:02 +03:00
|
|
|
|
|
|
|
describe('<Paginator />', () => {
|
2023-04-13 22:48:29 +03:00
|
|
|
const buildPaginator = (pagesCount?: number) => fromPartial<ShlinkPaginator>({ pagesCount, currentPage: 1 });
|
2022-06-09 23:17:33 +03:00
|
|
|
const setUp = (paginator?: ShlinkPaginator, currentQueryString?: string) => render(
|
|
|
|
<MemoryRouter>
|
|
|
|
<Paginator serverId="abc123" paginator={paginator} currentQueryString={currentQueryString} />
|
|
|
|
</MemoryRouter>,
|
|
|
|
);
|
2018-09-16 13:18:02 +03:00
|
|
|
|
2021-11-09 00:13:37 +03:00
|
|
|
it.each([
|
2022-03-26 14:17:42 +03:00
|
|
|
[undefined],
|
|
|
|
[buildPaginator()],
|
|
|
|
[buildPaginator(0)],
|
|
|
|
[buildPaginator(1)],
|
2022-12-18 12:12:34 +03:00
|
|
|
])('renders an empty gap if the number of pages is below 2', (paginator) => {
|
2022-06-09 23:17:33 +03:00
|
|
|
const { container } = setUp(paginator);
|
2022-12-18 12:12:34 +03:00
|
|
|
|
2022-12-31 12:47:15 +03:00
|
|
|
expect(container.firstChild).toBeEmptyDOMElement();
|
2022-12-18 12:12:34 +03:00
|
|
|
expect(container.firstChild).toHaveClass('pb-3');
|
2018-09-16 13:18:02 +03:00
|
|
|
});
|
|
|
|
|
2021-11-09 00:13:37 +03:00
|
|
|
it.each([
|
2022-03-26 14:17:42 +03:00
|
|
|
[buildPaginator(2), 4, 0],
|
|
|
|
[buildPaginator(3), 5, 0],
|
|
|
|
[buildPaginator(4), 6, 0],
|
|
|
|
[buildPaginator(5), 7, 1],
|
|
|
|
[buildPaginator(6), 7, 1],
|
|
|
|
[buildPaginator(23), 7, 1],
|
2021-11-09 00:13:37 +03:00
|
|
|
])('renders previous, next and the list of pages, with ellipses when expected', (
|
|
|
|
paginator,
|
|
|
|
expectedPages,
|
|
|
|
expectedEllipsis,
|
|
|
|
) => {
|
2022-06-09 23:17:33 +03:00
|
|
|
setUp(paginator);
|
|
|
|
|
|
|
|
const links = screen.getAllByRole('link');
|
|
|
|
const ellipsis = screen.queryAllByText(ELLIPSIS);
|
2021-11-09 00:13:37 +03:00
|
|
|
|
2022-06-09 23:17:33 +03:00
|
|
|
expect(links).toHaveLength(expectedPages);
|
2021-11-09 00:13:37 +03:00
|
|
|
expect(ellipsis).toHaveLength(expectedEllipsis);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('appends query string to all pages', () => {
|
|
|
|
const paginator = buildPaginator(3);
|
|
|
|
const currentQueryString = '?foo=bar';
|
|
|
|
|
2022-06-09 23:17:33 +03:00
|
|
|
setUp(paginator, currentQueryString);
|
|
|
|
const links = screen.getAllByRole('link');
|
2018-09-16 13:18:02 +03:00
|
|
|
|
2021-11-09 00:13:37 +03:00
|
|
|
expect(links).toHaveLength(5);
|
2022-06-09 23:17:33 +03:00
|
|
|
links.forEach((link) => expect(link).toHaveAttribute('href', expect.stringContaining(currentQueryString)));
|
2018-09-16 13:18:02 +03:00
|
|
|
});
|
|
|
|
});
|