chore(Pagination): add tests (#1605)

gravity-ui · May 24, 2024 · e35ce8b · e35ce8b
1 parent 27b62e1
commit e35ce8b
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 2 deletions.
diff --git a/src/components/Pagination/__tests__/Pagination.test.tsx 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(<Pagination pageSize={20} total={20} onUpdate={noop} page={0} />);
+
+        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(
+                <Pagination pageSize={PAGE_SIZE} total={TOTAL} onUpdate={noop} page={FIRST_PAGE} />,
+            );
+
+            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(
+                <Pagination
+                    pageSize={PAGE_SIZE}
+                    total={TOTAL}
+                    onUpdate={noop}
+                    page={SECOND_PAGE}
+                />,
+            );
+
+            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(<Pagination pageSize={20} onUpdate={noop} page={0} total={undefined} />);
+
+        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
@@ -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 (
             <div data-qa={qa} className={b('simple', {size}, className)}>

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