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 && (