diff options
| author | Bertrand Yuan <noreply@bertyuan.com> | 2026-03-26 00:02:16 +0800 |
|---|---|---|
| committer | Bertrand Yuan <noreply@bertyuan.com> | 2026-03-26 00:02:16 +0800 |
| commit | 8a6a6712e7554f110b5ef951f270d88fd010e040 (patch) | |
| tree | 12cb86b1ede55e15600ef7f139ef7ec91b9fa8a1 /src/hooks | |
| parent | f7a02fe0e112cf108fc5f22872f1efc077e99fe8 (diff) | |
add more tests
Diffstat (limited to 'src/hooks')
| -rw-r--r-- | src/hooks/use-pagination.test.ts | 53 | ||||
| -rw-r--r-- | src/hooks/use-pagination.tsx | 5 |
2 files changed, 57 insertions, 1 deletions
diff --git a/src/hooks/use-pagination.test.ts b/src/hooks/use-pagination.test.ts new file mode 100644 index 0000000..ba70f5e --- /dev/null +++ b/src/hooks/use-pagination.test.ts @@ -0,0 +1,53 @@ +import { describe, expect, test } from 'vitest'; +import { usePagination } from './use-pagination'; + +describe('usePagination', () => { + test('returns all pages when total pages are less than display limit', () => { + const result = usePagination({ + currentPage: 2, + totalPages: 4, + paginationItemsToDisplay: 5, + }); + + expect(result.pages).toEqual([1, 2, 3, 4]); + expect(result.showLeftEllipsis).toBe(false); + expect(result.showRightEllipsis).toBe(false); + }); + + test('shows only right ellipsis near the start of the range', () => { + const result = usePagination({ + currentPage: 1, + totalPages: 10, + paginationItemsToDisplay: 5, + }); + + expect(result.pages).toEqual([1, 2, 3, 4]); + expect(result.showLeftEllipsis).toBe(false); + expect(result.showRightEllipsis).toBe(true); + }); + + test('shows both ellipses around middle pages', () => { + const result = usePagination({ + currentPage: 5, + totalPages: 10, + paginationItemsToDisplay: 5, + }); + + expect(result.pages).toEqual([4, 5, 6]); + expect(result.showLeftEllipsis).toBe(true); + expect(result.showRightEllipsis).toBe(true); + }); + + test('shows only left ellipsis near the end of the range', () => { + const result = usePagination({ + currentPage: 10, + totalPages: 10, + paginationItemsToDisplay: 5, + }); + + expect(result.pages).toEqual([7, 8, 9, 10]); + expect(result.showLeftEllipsis).toBe(true); + expect(result.showRightEllipsis).toBe(false); + }); +}); + diff --git a/src/hooks/use-pagination.tsx b/src/hooks/use-pagination.tsx index d009cd4..40ed979 100644 --- a/src/hooks/use-pagination.tsx +++ b/src/hooks/use-pagination.tsx @@ -15,8 +15,11 @@ export function usePagination({ totalPages, paginationItemsToDisplay, }: UsePaginationProps): UsePaginationReturn { - const showLeftEllipsis = currentPage - 1 > paginationItemsToDisplay / 2; + const shouldTruncate = totalPages > paginationItemsToDisplay; + const showLeftEllipsis = + shouldTruncate && currentPage - 1 > paginationItemsToDisplay / 2; const showRightEllipsis = + shouldTruncate && totalPages - currentPage + 1 > paginationItemsToDisplay / 2; function calculatePaginationRange(): number[] { |
