From 36032018e3def2bd7cc77e6746148a4339b2a4af Mon Sep 17 00:00:00 2001 From: GermanVor Date: Wed, 22 May 2024 14:02:33 +0200 Subject: [PATCH 1/4] chore: total undefined disable next --- src/components/Pagination/hooks/usePagination.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Pagination/hooks/usePagination.ts b/src/components/Pagination/hooks/usePagination.ts index 0f1669ec92..c0704fe870 100644 --- a/src/components/Pagination/hooks/usePagination.ts +++ b/src/components/Pagination/hooks/usePagination.ts @@ -18,7 +18,7 @@ export function usePagination({ }: UsePaginationArgs): UsePaginationReturn { const numberOfPages = getNumberOfPages(pageSize, total); const hasTotal = numberOfPages !== 0; - const isNextDisabled = (hasTotal && page === numberOfPages) || total === 0; + const isNextDisabled = hasTotal === false || page === numberOfPages; let items: PaginationItem[]; From d235005208d55498c33e1713a6d0c048c9463fd6 Mon Sep 17 00:00:00 2001 From: GermanVor Date: Wed, 22 May 2024 14:30:05 +0200 Subject: [PATCH 2/4] chore: add test --- .../Pagination/__tests__/Pagination.test.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/components/Pagination/__tests__/Pagination.test.tsx diff --git a/src/components/Pagination/__tests__/Pagination.test.tsx b/src/components/Pagination/__tests__/Pagination.test.tsx new file mode 100644 index 0000000000..39d0cab597 --- /dev/null +++ b/src/components/Pagination/__tests__/Pagination.test.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import {noop} from 'lodash'; + +import {render, screen} from '../../../../test-utils/utils'; +import {Pagination} from '../Pagination'; +import {PaginationQa} from '../constants'; + +describe('Pagination', () => { + test('Total property disable Next', () => { + render(); + + const nextButton = screen.getByTestId(PaginationQa.PaginationButtonNext); + + expect(nextButton).toBeDisabled(); + }); +}); From 084e3928deae3c4156d811078b08fd795e6baaab Mon Sep 17 00:00:00 2001 From: GermanVor Date: Wed, 22 May 2024 22:55:06 +0200 Subject: [PATCH 3/4] chore: new tests --- .../Pagination/__tests__/Pagination.test.tsx | 72 ++++++++++++++++++- .../PaginationPage/PaginationPage.tsx | 4 +- src/components/Pagination/constants.ts | 4 ++ 3 files changed, 76 insertions(+), 4 deletions(-) diff --git a/src/components/Pagination/__tests__/Pagination.test.tsx b/src/components/Pagination/__tests__/Pagination.test.tsx index 39d0cab597..afcca61c68 100644 --- a/src/components/Pagination/__tests__/Pagination.test.tsx +++ b/src/components/Pagination/__tests__/Pagination.test.tsx @@ -4,9 +4,77 @@ import {noop} from 'lodash'; import {render, screen} from '../../../../test-utils/utils'; import {Pagination} from '../Pagination'; -import {PaginationQa} from '../constants'; +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(); + }); + }); -describe('Pagination', () => { test('Total property disable Next', () => { render(); 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}`; +}; From 1f68b21ad81a753e9988ed55b6b489acc5010ac9 Mon Sep 17 00:00:00 2001 From: GermanVor Date: Thu, 23 May 2024 12:37:35 +0200 Subject: [PATCH 4/4] chore: return prev code --- src/components/Pagination/__tests__/Pagination.test.tsx | 4 ++-- src/components/Pagination/hooks/usePagination.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Pagination/__tests__/Pagination.test.tsx b/src/components/Pagination/__tests__/Pagination.test.tsx index afcca61c68..9ccca13aa5 100644 --- a/src/components/Pagination/__tests__/Pagination.test.tsx +++ b/src/components/Pagination/__tests__/Pagination.test.tsx @@ -75,11 +75,11 @@ describe('Pagination component', () => { }); }); - test('Total property disable Next', () => { + test('Total property undefined', () => { render(); const nextButton = screen.getByTestId(PaginationQa.PaginationButtonNext); - expect(nextButton).toBeDisabled(); + expect(nextButton).not.toBeDisabled(); }); }); diff --git a/src/components/Pagination/hooks/usePagination.ts b/src/components/Pagination/hooks/usePagination.ts index c0704fe870..0f1669ec92 100644 --- a/src/components/Pagination/hooks/usePagination.ts +++ b/src/components/Pagination/hooks/usePagination.ts @@ -18,7 +18,7 @@ export function usePagination({ }: UsePaginationArgs): UsePaginationReturn { const numberOfPages = getNumberOfPages(pageSize, total); const hasTotal = numberOfPages !== 0; - const isNextDisabled = hasTotal === false || page === numberOfPages; + const isNextDisabled = (hasTotal && page === numberOfPages) || total === 0; let items: PaginationItem[];