diff --git a/packages/react/src/components/PaginationNav/PaginationNav-test.js b/packages/react/src/components/PaginationNav/PaginationNav-test.js
index 8e6072c62193..f5b695da77b2 100644
--- a/packages/react/src/components/PaginationNav/PaginationNav-test.js
+++ b/packages/react/src/components/PaginationNav/PaginationNav-test.js
@@ -112,10 +112,38 @@ describe('PaginationNav', () => {
expect(screen.getByText('4')).toHaveAttribute('aria-current', 'page');
});
- it('should not hide page 1 when active page is 0', () => {
- render();
+ it('should render PaginationNav correctly and navigate through different page ranges using select elements', async () => {
+ render();
+
+ // Initial state: < 1 2 ... 10 >
+ expect(screen.getByText('1')).toHaveAttribute('aria-current', 'page');
+ expect(screen.getByText('2')).toBeInTheDocument();
+ expect(screen.getByText('10')).toBeInTheDocument();
+
+ let selectElements = screen.getAllByLabelText('Select Page number');
+ expect(selectElements).toHaveLength(1);
+
+ // Select page 6 from the dropdown
+ await userEvent.selectOptions(selectElements[0], '6');
+
+ // New state: < ... 6 ... 10 >
+ expect(screen.getByText('6')).toHaveAttribute('aria-current', 'page');
+
+ // Check for two select elements in this state
+ selectElements = screen.getAllByLabelText('Select Page number');
+ expect(selectElements).toHaveLength(2);
+
+ // Select page 1 from the first dropdown
+ await userEvent.selectOptions(selectElements[0], '1');
+
+ // Final state: < 1 2 ... 10 >
+ expect(screen.getByText('1')).toHaveAttribute('aria-current', 'page');
+ expect(screen.getByText('2')).toBeInTheDocument();
+ expect(screen.getByText('10')).toBeInTheDocument();
- expect(screen.getByText('1')).toBeInTheDocument();
+ // Check that we're back to one select element
+ selectElements = screen.getAllByLabelText('Select Page number');
+ expect(selectElements).toHaveLength(1);
});
});
});