fix: do not show pagination if there is only 1 page

IQSS · Jan 9, 2024 · 15dee44 · 15dee44
1 parent b7fa0f5
commit 15dee44
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 9 deletions.
diff --git a/src/sections/shared/pagination/PaginationControls.tsx b/src/sections/shared/pagination/PaginationControls.tsx
@@ -14,7 +14,7 @@ interface PaginationProps {
   initialPaginationInfo: PaginationInfo<DatasetPaginationInfo | FilePaginationInfo>
   showPageSizeSelector?: boolean
 }
-const NO_PAGES = 0
+const MINIMUM_NUMBER_OF_PAGES_TO_DISPLAY_PAGINATION = 2
 export function PaginationControls({
   onPaginationInfoChange,
   initialPaginationInfo,
@@ -44,7 +44,7 @@ export function PaginationControls({
     setPaginationInfo(paginationInfo.withTotal(initialPaginationInfo.totalItems))
   }, [initialPaginationInfo.totalItems])
 
-  if (paginationInfo.totalPages === NO_PAGES) {
+  if (paginationInfo.totalPages < MINIMUM_NUMBER_OF_PAGES_TO_DISPLAY_PAGINATION) {
     return <></>
   }
   return (

diff --git a/tests/component/sections/dataset/dataset-files/DatasetFiles.spec.tsx b/tests/component/sections/dataset/dataset-files/DatasetFiles.spec.tsx
@@ -116,7 +116,7 @@ describe('DatasetFiles', () => {
       cy.findByRole('columnheader', { name: '101 to 150 of 200 Files' }).should('exist')
     })
 
-    it('renders the first page if there is only one page and the user changes to a lower page size', () => {
+    it('does not render pagination if the user changes to a lower page size resulting in one page', () => {
       const testFilesCountInfo = FilesCountInfoMother.create({
         total: 32
       })
@@ -144,13 +144,10 @@ describe('DatasetFiles', () => {
       cy.findByRole('button', { name: '3' }).should('not.exist')
       cy.findByRole('columnheader', { name: '1 to 32 of 32 Files' }).should('exist')
 
-      cy.findByLabelText('Files per page').select('10')
-
       cy.findByRole('button', { name: '1' }).should('not.exist')
-      cy.findByRole('button', { name: '2' }).should('exist')
-      cy.findByRole('button', { name: '3' }).should('exist')
-      cy.findByRole('button', { name: '4' }).should('exist')
-      cy.findByRole('columnheader', { name: '1 to 10 of 32 Files' }).should('exist')
+      cy.findByRole('button', { name: '2' }).should('not.exist')
+      cy.findByRole('button', { name: '3' }).should('not.exist')
+      cy.findByRole('button', { name: '4' }).should('not.exist')
     })
 
     it('renders the page that includes the first element of the current page when changing the page size', () => {

diff --git a/tests/component/sections/shared/pagination/PaginationControls.spec.tsx b/tests/component/sections/shared/pagination/PaginationControls.spec.tsx
@@ -17,6 +17,40 @@ describe('PaginationControls', () => {
     )
   })
 
+  it('does not show the pagination controls if the total number of pages is less than 2', () => {
+    cy.customMount(
+      <PaginationControls
+        initialPaginationInfo={
+          new PaginationInfo<FilePaginationInfo | DatasetPaginationInfo>(1, pageSize, 10)
+        }
+        onPaginationInfoChange={() => {}}
+      />
+    )
+
+    cy.findByRole('button', { name: 'First' }).should('not.exist')
+    cy.findByRole('button', { name: 'Previous' }).should('not.exist')
+    cy.findByRole('button', { name: 'Next' }).should('not.exist')
+    cy.findByRole('button', { name: 'Last' }).should('not.exist')
+    cy.findByLabelText('Items per page').should('not.exist')
+  })
+
+  it('shows the pagination controls if the total number of pages is greater than 1', () => {
+    cy.customMount(
+      <PaginationControls
+        initialPaginationInfo={
+          new PaginationInfo<FilePaginationInfo | DatasetPaginationInfo>(1, pageSize, 11)
+        }
+        onPaginationInfoChange={() => {}}
+      />
+    )
+
+    cy.findByRole('button', { name: 'First' }).should('not.exist')
+    cy.findByRole('button', { name: 'Previous' }).should('not.exist')
+    cy.findByRole('button', { name: 'Next' }).should('exist')
+    cy.findByRole('button', { name: 'Last' }).should('exist')
+    cy.findByLabelText('Items per page').should('exist')
+  })
+
   it('clicking on the first page button calls goToPage 1', () => {
     const onPaginationInfoChange = cy.stub().as('onPaginationInfoChange')
     cy.customMount(