add tests

primer · Feb 19, 2025 · 173d6a1 · 173d6a1
1 parent c48885b
commit 173d6a1
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 5 deletions.
diff --git a/packages/react/src/Pagination/Pagination.test.tsx b/packages/react/src/Pagination/Pagination.test.tsx
@@ -132,10 +132,43 @@ describe('Pagination', () => {
   })
 
   it('does not show paged items by default on narrow viewports', () => {
-    mockUseWindowSize.mockImplementation(() => ({isMedium: false}))
     const {getByRole} = render(<Pagination pageCount={5} currentPage={1} />)
-    const rootEl = getByRole('navigation')
-    const linksAsVerbatimText = Array.from(rootEl.querySelectorAll('a')).map(link => link.textContent)
-    expect(linksAsVerbatimText).toEqual(['Previous', 'Next'])
+
+    const button = getByRole('button', {name: 'Page 1'})
+
+    expect(button).toHaveClass('Pagination__hidden-narrow')
+    expect(button).toHaveClass('Pagination__visible-regular')
+    expect(button).toHaveClass('Pagination__visible-wide')
+  })
+
+  it('shows a pagination summary when page numbers are not shown', () => {
+    const {getByText} = render(<Pagination pageCount={5} currentPage={1} showPages={false} />)
+
+    expect(getByText('Page 1 of 5')).toBeVisible()
+  })
+
+  it('does not show a pagination summary when page numbers are shown', () => {
+    const {queryByText} = render(<Pagination pageCount={5} currentPage={1} showPages={true} />)
+    expect(queryByText('Page 1 of 5')).toHaveClass('Pagination__hidden')
+  })
+
+  it('shows a pagination summary when page numbers are not shown across different viewports', () => {
+    const {queryByText} = render(
+      <Pagination
+        pageCount={10}
+        currentPage={3}
+        showPages={{
+          narrow: true,
+          regular: true,
+          wide: false,
+        }}
+      />,
+    )
+
+    const summary = queryByText('Page 3 of 10')
+
+    expect(summary).toHaveClass('Pagination__hidden-narrow')
+    expect(summary).toHaveClass('Pagination__hidden-regular')
+    expect(summary).toHaveClass('Pagination__visible-wide')
   })
 })
diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx
@@ -101,7 +101,7 @@ export const Pagination = memo(
         {...rest}
       >
         <Text className={clsx(styles.Pagination__summary, getSummaryClasses())}>
-          {`Showing page ${currentPage} of ${pageCount}`}
+          {`Page ${currentPage} of ${pageCount}`}
         </Text>
         <div className={clsx(styles.Pagination__inner)}>{pageElements}</div>
       </nav>