diff --git a/src/features/pagination/__tests__/Pagination.test.tsx b/src/features/pagination/__tests__/Pagination.test.tsx index f09256e..60493d7 100644 --- a/src/features/pagination/__tests__/Pagination.test.tsx +++ b/src/features/pagination/__tests__/Pagination.test.tsx @@ -1,11 +1,11 @@ import React from 'react' import { render, waitFor, within } from '@testing-library/react' -import { PaginationExample } from '../stories/PaginationExample' +import { PaginationExample, PaginationExampleWithoutTotalPages } from '../stories/PaginationExample' import userEvent from '@testing-library/user-event' import '@testing-library/jest-dom' describe('Pagination component', () => { - describe('Render pagination without rowsPerPage selector and with 100 as total elements', () => { + describe('Render pagination without rowsPerPage selector and with 120 as total elements', () => { it('Should render correctly', () => { const screen = render() expect(screen).toBeDefined() @@ -17,7 +17,7 @@ describe('Pagination component', () => { expect(selectElement).toBeNull() }) - it('If total elements are 100 and default limit is 10, total pages should be 10', () => { + it('If total elements are 120 and default limit is 12, total pages should be 10', () => { const screen = render() const paginationElement = screen.getByRole('navigation') @@ -43,13 +43,13 @@ describe('Pagination component', () => { }) }) - describe('Render pagination with rowsPerPage selector enabled and with 100 as total elements', () => { + describe('Render pagination with rowsPerPage selector enabled and with 120 as total elements', () => { it('Should render correctly', () => { const screen = render() expect(screen).toBeDefined() }) - it('Should be available [10,24,36] as rows per page as default options', async () => { + it('Should be available [12,24,36] as rows per page as default options', async () => { const screen = render() const selectElement = screen.getByTestId('rows-per-page-select') const selectButton = within(selectElement).getByRole('button') @@ -61,10 +61,17 @@ describe('Pagination component', () => { const getOptions = screen.getAllByRole('option') expect(getOptions).toHaveLength(3) - expect(getOptions[0]).toHaveTextContent('10') + expect(getOptions[0]).toHaveTextContent('12') expect(getOptions[1]).toHaveTextContent('24') expect(getOptions[2]).toHaveTextContent('36') }) }) }) + + it('Should not render rows per page selector if total pages are 0', () => { + const screen = render() + const selectElement = screen.queryByTestId('rows-per-page-select') + + expect(selectElement).toBeNull() + }) }) diff --git a/src/features/pagination/components/Pagination.tsx b/src/features/pagination/components/Pagination.tsx index 7989893..58bca43 100644 --- a/src/features/pagination/components/Pagination.tsx +++ b/src/features/pagination/components/Pagination.tsx @@ -10,7 +10,7 @@ import { } from '@mui/material' import type { InteropTheme } from '@/theme' -const defaultOptions = [10, 24, 36] +const defaultOptions = [12, 24, 36] export interface PaginationProps extends StackProps { totalPages: number pageNum: number @@ -56,7 +56,7 @@ export const Pagination: React.FC = ({ alignItems="center" {...stackProps} > - {rowPerPageOptions && ( + {rowPerPageOptions && totalPages > 0 && (