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()
- 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()
+
+ expect(getByText('Page 1 of 5')).toBeVisible()
+ })
+
+ it('does not show a pagination summary when page numbers are shown', () => {
+ const {queryByText} = render()
+ 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(
+ ,
+ )
+
+ 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}
>
- {`Showing page ${currentPage} of ${pageCount}`}
+ {`Page ${currentPage} of ${pageCount}`}
{pageElements}