test(governance): e2e tests for rewards pagination (#3473)

apps/governance-e2e/src/integration/view/home.cy.ts

@@ -15,7 +15,7 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
       });
     });
 
-    it.skip('should display announcement banner', function () {
+    it('should display announcement banner', function () {
       cy.getByTestId('app-announcement')
         .should('contain.text', 'TEST ANNOUNCEMENT!')
         .within(() => {

apps/governance-e2e/src/integration/view/rewards.cy.ts

@@ -3,6 +3,7 @@ import {
   navigation,
   verifyPageHeader,
 } from '../../support/common.functions';
+import { waitForBeginningOfEpoch } from '../../support/staking.functions';
 
 const viewToggle = '[data-testid="epoch-reward-view-toggle-total"]';
 const warning = '[data-testid="callout"]';
@@ -37,6 +38,41 @@ context(
       it('should have toggle for seeing total vs individual rewards', function () {
         cy.get(viewToggle).should('be.visible');
       });
+
+      // Skipping due to bug #3471 causing flaky failuress
+      it.skip('should have option to view go to next and previous page', function () {
+        waitForBeginningOfEpoch();
+        cy.getByTestId('page-info')
+          .should('contain.text', 'Page ')
+          .invoke('text')
+          .then(($currentPage) => {
+            const currentPageNumber = Number($currentPage.slice(5));
+            cy.getByTestId('goto-next-page').click();
+            cy.getByTestId('page-info')
+              .invoke('text')
+              .then(($newPageNumber) => {
+                const newPageNumber = Number($newPageNumber.slice(5));
+                expect(newPageNumber).to.be.greaterThan(currentPageNumber);
+                cy.getByTestId('goto-previous-page').click();
+                cy.getByTestId('page-info').should(
+                  'contain.text',
+                  $currentPage
+                );
+              });
+          });
+      });
+
+      it('should have option to go to last and newest page', function () {
+        waitForBeginningOfEpoch();
+        cy.getByTestId('goto-last-page').click();
+        cy.getByTestId('epoch-total-rewards-table')
+          .last()
+          .find('h2')
+          .first()
+          .should('have.text', 'EPOCH 1');
+        cy.getByTestId('goto-first-page').click();
+        cy.get('h2').should('not.contain.text', 'EPOCH 1');
+      });
     });
   }
 );

libs/ui-toolkit/src/components/pagination/pagination.tsx

@@ -26,7 +26,10 @@ export const Pagination = ({
   onLast,
 }: PaginationProps) => {
   return (
-    <div className={'flex gap-2 my-2 items-center justify-center'}>
+    <div
+      className={'flex gap-2 my-2 items-center justify-center'}
+      data-testid="page-info"
+    >
       {onFirst && (
         <Button
           size="sm"