diff --git a/src/components/Pagination/Pagination.test.tsx b/src/components/Pagination/Pagination.test.tsx index 29104654e..168a7b208 100644 --- a/src/components/Pagination/Pagination.test.tsx +++ b/src/components/Pagination/Pagination.test.tsx @@ -4,16 +4,15 @@ import React from 'react' import { Pagination } from './Pagination' describe('Pagination component', () => { - const testPages = 24 - const testThreePages = 3 - const testSevenPages = 7 + const totalPages = 24 const testPathname = '/test-pathname' it('renders pagination for a list of pages', () => { + const currentPageNumber = 10 render( ) @@ -31,21 +30,22 @@ describe('Pagination component', () => { 'href', `${testPathname}?page=9` ) - expect(screen.getByLabelText('Page 10')).toHaveAttribute( + const currentPage = screen.getByLabelText(`Page ${currentPageNumber}`) + expect(currentPage).toHaveAttribute( 'href', - `${testPathname}?page=10` - ) - expect(screen.getByLabelText('Page 10')).toHaveAttribute( - 'aria-current', - 'page' + `${testPathname}?page=${currentPageNumber}` ) + expect(currentPage).toHaveAttribute('aria-current', 'page') + expect(screen.getByLabelText('Page 11')).toHaveAttribute( 'href', `${testPathname}?page=11` ) - expect(screen.getByLabelText('Page 24')).toHaveAttribute( + + const lastPage = screen.getByLabelText(`Last page, page ${totalPages}`) + expect(lastPage).toHaveAttribute( 'href', - `${testPathname}?page=24` + `${testPathname}?page=${totalPages}` ) expect(screen.getByLabelText('Next page')).toHaveAttribute( 'href', @@ -56,7 +56,7 @@ describe('Pagination component', () => { it('only renders the maximum number of slots', () => { render( @@ -67,7 +67,7 @@ describe('Pagination component', () => { it('renders pagination when the first page is current', () => { render( @@ -83,24 +83,25 @@ describe('Pagination component', () => { it('renders pagination when the last page is current', () => { render( ) expect(screen.queryByLabelText('Previous page')).toBeInTheDocument() expect(screen.queryByLabelText('Next page')).not.toBeInTheDocument() - expect(screen.getByLabelText('Page 24')).toHaveAttribute( + expect(screen.getByLabelText('Last page, page 24')).toHaveAttribute( 'aria-current', 'page' ) }) it('renders overflow at the beginning and end when current page is in the middle', () => { + const currentPageNumber = 10 render( ) @@ -116,21 +117,20 @@ describe('Pagination component', () => { 'href', `${testPathname}?page=9` ) - expect(screen.getByLabelText('Page 10')).toHaveAttribute( + const currentPage = screen.getByLabelText(`Page ${currentPageNumber}`) + expect(currentPage).toHaveAttribute( 'href', - `${testPathname}?page=10` - ) - expect(screen.getByLabelText('Page 10')).toHaveAttribute( - 'aria-current', - 'page' + `${testPathname}?page=${currentPageNumber}` ) + expect(currentPage).toHaveAttribute('aria-current', 'page') expect(screen.getByLabelText('Page 11')).toHaveAttribute( 'href', `${testPathname}?page=11` ) - expect(screen.getByLabelText('Page 24')).toHaveAttribute( + const lastPage = screen.getByLabelText(`Last page, page ${totalPages}`) + expect(lastPage).toHaveAttribute( 'href', - `${testPathname}?page=24` + `${testPathname}?page=${totalPages}` ) expect(screen.getByLabelText('Next page')).toHaveAttribute( 'href', @@ -142,7 +142,7 @@ describe('Pagination component', () => { it('renders overflow at the end when at the beginning of the pages', () => { render( @@ -176,9 +176,10 @@ describe('Pagination component', () => { 'href', `${testPathname}?page=5` ) - expect(screen.getByLabelText('Page 24')).toHaveAttribute( + const lastPage = screen.getByLabelText(`Last page, page ${totalPages}`) + expect(lastPage).toHaveAttribute( 'href', - `${testPathname}?page=24` + `${testPathname}?page=${totalPages}` ) expect(screen.getByLabelText('Next page')).toHaveAttribute( 'href', @@ -190,7 +191,7 @@ describe('Pagination component', () => { it('renders overflow at the beginning when at the end of the pages', () => { render( @@ -224,9 +225,10 @@ describe('Pagination component', () => { 'href', `${testPathname}?page=23` ) - expect(screen.getByLabelText('Page 24')).toHaveAttribute( + const lastPage = screen.getByLabelText(`Last page, page ${totalPages}`) + expect(lastPage).toHaveAttribute( 'href', - `${testPathname}?page=24` + `${testPathname}?page=${totalPages}` ) expect(screen.getByLabelText('Next page')).toHaveAttribute( 'href', @@ -242,6 +244,7 @@ describe('Pagination component', () => { 'href', `${testPathname}?page=${randomPage + 1}` ) + expect(screen.queryByLabelText(/^Last page, page/)).not.toBeInTheDocument() }) it('can click onClickNext, onClickPrevious and onClickPagenumber', () => { @@ -251,7 +254,7 @@ describe('Pagination component', () => { const { getByTestId, getAllByTestId } = render( { describe('for fewer pages than the max slots', () => { it('renders pagination with no overflow 1', () => { render( - + ) expect(screen.getAllByRole('listitem')).toHaveLength(5) expect(screen.queryAllByText('…')).toHaveLength(0) @@ -286,11 +285,7 @@ describe('Pagination component', () => { it('renders pagination with no overflow 2', () => { render( - + ) expect(screen.getAllByRole('listitem')).toHaveLength(9) expect(screen.queryAllByText('…')).toHaveLength(0) @@ -301,7 +296,7 @@ describe('Pagination component', () => { it('only renders the maximum number of slots', () => { render( void } & JSX.IntrinsicElements['nav'] -const PaginationPage = ({ - page, - isCurrent, - pathname, - onClickPageNumber, -}: { +type PaginationPageProps = { pathname: string page: number - isCurrent?: boolean + isCurrent: boolean + isLastPage: boolean onClickPageNumber?: ( event: React.MouseEvent, page: number ) => void -}) => { +} +const PaginationPage = ({ + page, + isCurrent, + isLastPage, + pathname, + onClickPageNumber, +}: PaginationPageProps) => { const linkClasses = classnames('usa-pagination__button', { 'usa-current': isCurrent, }) @@ -40,6 +43,9 @@ const PaginationPage = ({ 'text-underline' ) + const ariaLabel = isLastPage ? `Last page, page ${page}` : `Page ${page}` + const ariaCurrent = isCurrent ? 'page' : undefined + return (
  • { onClickPageNumber(event, page) }}> @@ -60,8 +66,8 @@ const PaginationPage = ({ + aria-label={ariaLabel} + aria-current={ariaCurrent}> {page} )} @@ -226,6 +232,7 @@ export const Pagination = ({ page={pageNum} pathname={pathname} isCurrent={pageNum === currentPage} + isLastPage={totalPages !== undefined && pageNum === totalPages} onClickPageNumber={onClickPageNumber} /> )