diff --git a/src/components/Pagination/__tests__/Pagination.test.tsx b/src/components/Pagination/__tests__/Pagination.test.tsx new file mode 100644 index 0000000000..9ccca13aa5 --- /dev/null +++ b/src/components/Pagination/__tests__/Pagination.test.tsx @@ -0,0 +1,85 @@ +import React from 'react'; + +import {noop} from 'lodash'; + +import {render, screen} from '../../../../test-utils/utils'; +import {Pagination} from '../Pagination'; +import {PaginationQa, getPaginationPageQa} from '../constants'; + +describe('Pagination component', () => { + test('Single page', () => { + render(); + + const firstButton = screen.getByTestId(PaginationQa.PaginationButtonFirst); + expect(firstButton).toBeDisabled(); + + const prevButton = screen.getByTestId(PaginationQa.PaginationButtonPrevious); + expect(prevButton).toBeDisabled(); + + const nextButton = screen.getByTestId(PaginationQa.PaginationButtonNext); + expect(nextButton).toBeDisabled(); + }); + + describe('Two pages', () => { + const PAGE_SIZE = 20; + const TOTAL = PAGE_SIZE + 1; + + const FIRST_PAGE = 1; + const SECOND_PAGE = 2; + + test('First page is current', () => { + render( + , + ); + + const firstPageButton = screen.getByTestId(getPaginationPageQa(FIRST_PAGE)); + expect(firstPageButton).toHaveAttribute('aria-pressed', 'true'); + + const secondPageButton = screen.getByTestId(getPaginationPageQa(SECOND_PAGE)); + expect(secondPageButton).toHaveAttribute('aria-pressed', 'false'); + + const firstButton = screen.getByTestId(PaginationQa.PaginationButtonFirst); + expect(firstButton).toBeDisabled(); + + const prevButton = screen.getByTestId(PaginationQa.PaginationButtonPrevious); + expect(prevButton).toBeDisabled(); + + const nextButton = screen.getByTestId(PaginationQa.PaginationButtonNext); + expect(nextButton).not.toBeDisabled(); + }); + + test('Second page is current', () => { + render( + , + ); + + const firstPageButton = screen.getByTestId(getPaginationPageQa(FIRST_PAGE)); + expect(firstPageButton).toHaveAttribute('aria-pressed', 'false'); + + const secondPageButton = screen.getByTestId(getPaginationPageQa(SECOND_PAGE)); + expect(secondPageButton).toHaveAttribute('aria-pressed', 'true'); + + const firstButton = screen.getByTestId(PaginationQa.PaginationButtonFirst); + expect(firstButton).not.toBeDisabled(); + + const prevButton = screen.getByTestId(PaginationQa.PaginationButtonPrevious); + expect(prevButton).not.toBeDisabled(); + + const nextButton = screen.getByTestId(PaginationQa.PaginationButtonNext); + expect(nextButton).toBeDisabled(); + }); + }); + + test('Total property undefined', () => { + render(); + + const nextButton = screen.getByTestId(PaginationQa.PaginationButtonNext); + + expect(nextButton).not.toBeDisabled(); + }); +}); diff --git a/src/components/Pagination/components/PaginationPage/PaginationPage.tsx b/src/components/Pagination/components/PaginationPage/PaginationPage.tsx index 9288fb824c..e55fc8fe8a 100644 --- a/src/components/Pagination/components/PaginationPage/PaginationPage.tsx +++ b/src/components/Pagination/components/PaginationPage/PaginationPage.tsx @@ -2,7 +2,7 @@ import React from 'react'; import {Button} from '../../../Button'; import {block} from '../../../utils/cn'; -import {PaginationQa} from '../../constants'; +import {getPaginationPageQa} from '../../constants'; import type {PageItem, PaginationProps, PaginationSize} from '../../types'; import './PaginationPage.scss'; @@ -18,7 +18,7 @@ type Props = { }; export const PaginationPage = ({item, size, pageSize, className, onUpdate}: Props) => { - const qa = `${PaginationQa.PaginationPage}-${item.page}`; + const qa = getPaginationPageQa(item.page); if (item.simple) { return (
diff --git a/src/components/Pagination/constants.ts b/src/components/Pagination/constants.ts index 005b4e602d..c61df8a4e3 100644 --- a/src/components/Pagination/constants.ts +++ b/src/components/Pagination/constants.ts @@ -7,3 +7,7 @@ export const PaginationQa = { PaginationButtonPrevious: 'pagination-button-previous', PaginationButtonNext: 'pagination-button-next', }; + +export const getPaginationPageQa = (pageNumber: number) => { + return `${PaginationQa.PaginationPage}-${pageNumber}`; +};