From 173d6a17a2acdcffd37e5cddfb37469ec83c95ab Mon Sep 17 00:00:00 2001
From: Josh Farrant <joshfarrant@github.com>
Date: Wed, 19 Feb 2025 14:27:25 +0000
Subject: [PATCH] add tests

---
 .../react/src/Pagination/Pagination.test.tsx  | 41 +++++++++++++++++--
 packages/react/src/Pagination/Pagination.tsx  |  2 +-
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/Pagination/Pagination.test.tsx b/packages/react/src/Pagination/Pagination.test.tsx
index 9c290a864..3e33b7300 100644
--- 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
index 67daa5c97..184c52d8f 100644
--- 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>