import { describe, expect, it } from '@jest/globals'; import { render, screen as rtlScreen } from '@testing-library/react'; import { Pagination, type RenderPaginationItemAriaLabel, type RenderPaginationLink, } from './pagination'; const pagePrefix = '#page-'; const backwardLabel = 'omnis assumenda ex'; const forwardLabel = 'voluptatum aut molestiae'; const currentPageLabelPrefix = 'est nostrum a'; const pageLabelPrefix = 'reprehenderit qui unde'; const renderLink: RenderPaginationLink = (num: number) => `${pagePrefix}${num}`; const renderItemAriaLabel: RenderPaginationItemAriaLabel = ({ kind, pageNumber, isCurrentPage, }) => { switch (kind) { case 'backward': return backwardLabel; case 'forward': return forwardLabel; case 'number': default: return isCurrentPage ? `${currentPageLabelPrefix}${pageNumber}` : `${pageLabelPrefix}${pageNumber}`; } }; describe('Pagination', () => { it('renders a list of items in a nav element', () => { const ariaLabel = 'expedita repellat rem'; const current = 1; const total = 1; render( ); expect( rtlScreen.getByRole('navigation', { name: ariaLabel }) ).toBeInTheDocument(); expect(rtlScreen.getAllByRole('listitem')).toHaveLength(total); }); it('can render a forward link when there is more than one page', () => { const ariaLabel = 'expedita repellat rem'; const current = 1; const total = 3; render( ); expect( rtlScreen.getByRole('link', { name: forwardLabel }) ).toBeInTheDocument(); // the pages links + the forward link expect(rtlScreen.getAllByRole('listitem')).toHaveLength(total + 1); }); it('can render a backward link when the last page is selected', () => { const ariaLabel = 'expedita repellat rem'; const total = 3; render( ); expect( rtlScreen.getByRole('link', { name: backwardLabel }) ).toBeInTheDocument(); // the pages links + the backward link expect(rtlScreen.getAllByRole('listitem')).toHaveLength(total + 1); }); it('can skip next pages when the total is high and first page is selected', () => { const ariaLabel = 'expedita repellat rem'; const current = 1; const total = 50; /* * First page & the two next pages + 1 ellipsis + last page + forward link */ const expectedItemsCount = 6; render( ); expect(rtlScreen.getAllByRole('listitem')).toHaveLength(expectedItemsCount); // The current page and the ellipsis should not be linked. expect(rtlScreen.getAllByRole('link')).toHaveLength(expectedItemsCount - 2); }); it('can skip previous pages when the total is high and last page is selected', () => { const ariaLabel = 'expedita repellat rem'; const current = 50; const total = 50; /* * Last page & the two previous pages + 1 ellipsis + first page + backward * link */ const expectedItemsCount = 6; render( ); expect(rtlScreen.getAllByRole('listitem')).toHaveLength(expectedItemsCount); // The current page and the ellipsis should not be linked. expect(rtlScreen.getAllByRole('link')).toHaveLength(expectedItemsCount - 2); }); it('can render a custom number of siblings', () => { const ariaLabel = 'expedita repellat rem'; const siblings = 3; const current = 10; const total = 20; /* * Current page + 3 siblings on each side + first page + last page + 2 * ellipsis + backward and forward links */ const expectedItemsCount = 13; render( ); expect(rtlScreen.getAllByRole('listitem')).toHaveLength(expectedItemsCount); /* eslint-disable-next-line @typescript-eslint/no-magic-numbers -- The current page and the two ellipsis should not be linked. */ expect(rtlScreen.getAllByRole('link')).toHaveLength(expectedItemsCount - 3); }); });