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}`;
+};