2022-05-06 22:20:14 +03:00
|
|
|
import { render, screen } from '@testing-library/react';
|
2023-07-29 11:43:15 +03:00
|
|
|
import { SimplePaginator } from '../../shlink-web-component/utils/components/SimplePaginator';
|
|
|
|
import { ELLIPSIS } from '../../shlink-web-component/utils/helpers/pagination';
|
2019-09-22 12:14:08 +03:00
|
|
|
|
|
|
|
describe('<SimplePaginator />', () => {
|
2022-05-06 22:20:14 +03:00
|
|
|
const setUp = (pagesCount: number, currentPage = 1) => render(
|
2023-05-27 12:57:26 +03:00
|
|
|
<SimplePaginator pagesCount={pagesCount} currentPage={currentPage} setCurrentPage={vi.fn()} />,
|
2022-05-06 22:20:14 +03:00
|
|
|
);
|
2019-09-22 12:14:08 +03:00
|
|
|
|
2022-03-26 14:17:42 +03:00
|
|
|
it.each([-3, -2, 0, 1])('renders empty when the amount of pages is smaller than 2', (pagesCount) => {
|
2022-05-06 22:20:14 +03:00
|
|
|
const { container } = setUp(pagesCount);
|
2022-06-11 18:28:47 +03:00
|
|
|
expect(container.firstChild).toBeNull();
|
2019-09-22 12:14:08 +03:00
|
|
|
});
|
|
|
|
|
2020-03-28 19:19:33 +03:00
|
|
|
describe('ELLIPSIS are rendered where expected', () => {
|
2020-08-28 21:05:01 +03:00
|
|
|
const getItemsForPages = (pagesCount: number, currentPage: number) => {
|
2022-05-06 22:20:14 +03:00
|
|
|
setUp(pagesCount, currentPage);
|
|
|
|
|
|
|
|
const items = screen.getAllByRole('link');
|
|
|
|
const itemsWithEllipsis = items.filter((item) => item.innerHTML.includes(ELLIPSIS));
|
2019-09-22 12:14:08 +03:00
|
|
|
|
|
|
|
return { items, itemsWithEllipsis };
|
|
|
|
};
|
|
|
|
|
2020-03-28 19:19:33 +03:00
|
|
|
it('renders first ELLIPSIS', () => {
|
2019-09-22 12:14:08 +03:00
|
|
|
const { items, itemsWithEllipsis } = getItemsForPages(9, 7);
|
|
|
|
|
2022-05-06 22:20:14 +03:00
|
|
|
expect(items[1]).toHaveTextContent(ELLIPSIS);
|
2019-09-22 12:14:08 +03:00
|
|
|
expect(itemsWithEllipsis).toHaveLength(1);
|
|
|
|
});
|
|
|
|
|
2020-03-28 19:19:33 +03:00
|
|
|
it('renders last ELLIPSIS', () => {
|
2019-09-22 12:14:08 +03:00
|
|
|
const { items, itemsWithEllipsis } = getItemsForPages(9, 2);
|
|
|
|
|
2022-05-06 22:20:14 +03:00
|
|
|
expect(items[items.length - 2]).toHaveTextContent(ELLIPSIS);
|
2019-09-22 12:14:08 +03:00
|
|
|
expect(itemsWithEllipsis).toHaveLength(1);
|
|
|
|
});
|
|
|
|
|
2020-03-28 19:19:33 +03:00
|
|
|
it('renders both ELLIPSIS', () => {
|
2019-09-22 12:14:08 +03:00
|
|
|
const { items, itemsWithEllipsis } = getItemsForPages(20, 9);
|
|
|
|
|
2022-05-06 22:20:14 +03:00
|
|
|
expect(items[1]).toHaveTextContent(ELLIPSIS);
|
|
|
|
expect(items[items.length - 2]).toHaveTextContent(ELLIPSIS);
|
2019-09-22 12:14:08 +03:00
|
|
|
expect(itemsWithEllipsis).toHaveLength(2);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|