test(governance): update home tests (#2900)

apps/token-e2e/src/integration/view/home.cy.js

@@ -7,26 +7,9 @@ const navWithdraw = '[href="/token/withdraw"]';
 const navGovernance = '[href="/proposals"]';
 const navRedeem = '[href="/token/redeem"]';
 
-const tokenDetailsTable = '.token-details';
-const address = '[data-testid="token-address"]';
-const contract = '[data-testid="token-contract"]';
-const totalSupply = '[data-testid="total-supply"]';
-const circulatingSupply = '[data-testid="circulating-supply"]';
-const staked = '[data-testid="staked"]';
-const tranchesLink = '[data-testid="tranches-link"]';
-const redeemBtn = '[data-testid="check-vesting-page-btn"]';
-const getVegaWalletLink = '[data-testid="get-vega-wallet-link"]';
-const associateVegaLink =
-  '[data-testid="associate-vega-tokens-link-on-homepage"]';
-const stakingBtn = '[data-testid="staking-button-on-homepage"]';
-const governanceBtn = '[data-testid="governance-button-on-homepage"]';
-
-const vegaTokenAddress = Cypress.env('vegaTokenAddress');
-const vegaTokenContractAddress = Cypress.env('vegaTokenContractAddress');
-
 context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
   before('visit token home page', function () {
-    cy.visit('/token');
+    cy.visit('/');
   });
 
   describe('with wallets disconnected', function () {
@@ -54,7 +37,7 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
       describe('Token dropdown', function () {
         before('click on token dropdown', function () {
           cy.get(navSection).within(() => {
-            cy.getByTestId('state-trigger').click();
+            cy.getByTestId('state-trigger').realClick();
           });
         });
         it('should have token dropdown', function () {
@@ -72,80 +55,73 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
       });
     });
 
-    describe('THE $VEGA TOKEN table', function () {
+    describe('Links and buttons', function () {
-      it('should have TOKEN ADDRESS', function () {
+      it('should have link for proposal page', function () {
-        cy.get(tokenDetailsTable).within(() => {
+        cy.getByTestId('home-proposals').within(() => {
-          cy.get(address)
+          cy.get('[href="/proposals"]')
-            .should('be.visible')
+            .should('exist')
-            .invoke('text')
+            .and('have.text', 'Browse, vote, and propose');
-            .should('be.equal', vegaTokenAddress);
         });
       });
-      it('should have VESTING CONTRACT', function () {
+      it('should have external link for governance', function () {
-        // 1004-ASSO-001
+        cy.getByTestId('home-proposals').within(() => {
-        cy.get(tokenDetailsTable).within(() => {
+          cy.getByTestId('external-link')
-          cy.get(contract)
+            .should('have.attr', 'href')
-            .should('be.visible')
+            .and('contain', 'https://vega.xyz/governance');
-            .invoke('text')
-            .should('be.equal', vegaTokenContractAddress);
         });
       });
-      it('should have TOTAL SUPPLY', function () {
+      it('should have link for validator page', function () {
-        cy.get(tokenDetailsTable).within(() => {
+        cy.getByTestId('home-validators').within(() => {
-          cy.get(totalSupply).should('be.visible');
+          cy.get('[href="/validators"]')
+            .first()
+            .should('exist')
+            .and('have.text', 'Browse, and stake');
         });
       });
-      it('should have CIRCULATING SUPPLY', function () {
+      it('should have external link for validators', function () {
-        cy.get(tokenDetailsTable).within(() => {
+        cy.getByTestId('home-validators').within(() => {
-          cy.get(circulatingSupply).should('be.visible');
+          cy.getByTestId('external-link')
+            .should('have.attr', 'href')
+            .and(
+              'contain',
+              'https://community.vega.xyz/c/mainnet-validator-candidates'
+            );
         });
       });
-      it('should have STAKED $VEGA', function () {
+      it('should have information on active nodes', function () {
-        cy.get(tokenDetailsTable).within(() => {
+        cy.getByTestId('node-information')
-          cy.get(staked).should('be.visible');
+          .first()
+          .should('contain.text', '2')
+          .and('contain.text', 'active nodes');
+      });
+      it('should have information on consensus nodes', function () {
+        cy.getByTestId('node-information')
+          .last()
+          .should('contain.text', '2')
+          .and('contain.text', 'consensus nodes');
+      });
+      it('should contain link to specific validators', function () {
+        cy.getByTestId('validators')
+          .should('have.length', '2')
+          .each(($validator) => {
+            cy.wrap($validator).find('a').should('have.attr', 'href');
+          });
+      });
+      it('should have link for rewards page', function () {
+        cy.getByTestId('home-rewards').within(() => {
+          cy.get('[href="/rewards"]')
+            .first()
+            .should('exist')
+            .and('have.text', 'See rewards');
         });
       });
-    });
+      it('should have link for withdrawal page', function () {
-
+        cy.getByTestId('home-vega-token').within(() => {
-    describe('links and buttons', function () {
+          cy.get('[href="/token/withdraw"]')
-      it('should have TRANCHES link', function () {
+            .first()
-        cy.get(tranchesLink)
+            .should('exist')
-          .should('be.visible')
+            .and('have.text', 'Manage tokens');
-          .and('have.attr', 'href')
+        });
-          .and('equal', '/token/tranches');
-      });
-      it('should have REDEEM button', function () {
-        cy.get(redeemBtn)
-          .should('be.visible')
-          .parent()
-          .should('have.attr', 'href')
-          .and('equal', '/token/redeem');
-      });
-      it('should have GET VEGA WALLET link', function () {
-        cy.get(getVegaWalletLink)
-          .should('be.visible')
-          .and('have.attr', 'href')
-          .and('equal', 'https://vega.xyz/wallet');
-      });
-      it('should have ASSOCIATE VEGA TOKENS link', function () {
-        cy.get(associateVegaLink)
-          .should('be.visible')
-          .and('have.attr', 'href')
-          .and('equal', '/token/associate');
-      });
-      it('should have STAKING button', function () {
-        cy.get(stakingBtn)
-          .should('be.visible')
-          .parent()
-          .should('have.attr', 'href')
-          .and('equal', '/validators');
-      });
-      it('should have GOVERNANCE button', function () {
-        cy.get(governanceBtn)
-          .should('be.visible')
-          .parent()
-          .should('have.attr', 'href')
-          .and('equal', '/proposals');
       });
     });
   });

apps/token-e2e/src/integration/view/token.cy.js

@@ -0,0 +1,99 @@
+const tokenDetailsTable = '.token-details';
+const address = '[data-testid="token-address"]';
+const contract = '[data-testid="token-contract"]';
+const totalSupply = '[data-testid="total-supply"]';
+const circulatingSupply = '[data-testid="circulating-supply"]';
+const staked = '[data-testid="staked"]';
+const tranchesLink = '[data-testid="tranches-link"]';
+const redeemBtn = '[data-testid="check-vesting-page-btn"]';
+const getVegaWalletLink = '[data-testid="get-vega-wallet-link"]';
+const associateVegaLink =
+  '[data-testid="associate-vega-tokens-link-on-homepage"]';
+const stakingBtn = '[data-testid="staking-button-on-homepage"]';
+const governanceBtn = '[data-testid="governance-button-on-homepage"]';
+
+const vegaTokenAddress = Cypress.env('vegaTokenAddress');
+const vegaTokenContractAddress = Cypress.env('vegaTokenContractAddress');
+
+context('Verify elements on Token page', { tags: '@smoke' }, function () {
+  before('Visit token page', function () {
+    cy.visit('/');
+    cy.navigate_to('token');
+  });
+  describe('THE $VEGA TOKEN table', function () {
+    it('should have TOKEN ADDRESS', function () {
+      cy.get(tokenDetailsTable).within(() => {
+        cy.get(address)
+          .should('be.visible')
+          .invoke('text')
+          .should('be.equal', vegaTokenAddress);
+      });
+    });
+    it('should have VESTING CONTRACT', function () {
+      // 1004-ASSO-001
+      cy.get(tokenDetailsTable).within(() => {
+        cy.get(contract)
+          .should('be.visible')
+          .invoke('text')
+          .should('be.equal', vegaTokenContractAddress);
+      });
+    });
+    it('should have TOTAL SUPPLY', function () {
+      cy.get(tokenDetailsTable).within(() => {
+        cy.get(totalSupply).should('be.visible');
+      });
+    });
+    it('should have CIRCULATING SUPPLY', function () {
+      cy.get(tokenDetailsTable).within(() => {
+        cy.get(circulatingSupply).should('be.visible');
+      });
+    });
+    it('should have STAKED $VEGA', function () {
+      cy.get(tokenDetailsTable).within(() => {
+        cy.get(staked).should('be.visible');
+      });
+    });
+  });
+
+  describe('links and buttons', function () {
+    it('should have TRANCHES link', function () {
+      cy.get(tranchesLink)
+        .should('be.visible')
+        .and('have.attr', 'href')
+        .and('equal', '/token/tranches');
+    });
+    it('should have REDEEM button', function () {
+      cy.get(redeemBtn)
+        .should('be.visible')
+        .parent()
+        .should('have.attr', 'href')
+        .and('equal', '/token/redeem');
+    });
+    it('should have GET VEGA WALLET link', function () {
+      cy.get(getVegaWalletLink)
+        .should('be.visible')
+        .and('have.attr', 'href')
+        .and('equal', 'https://vega.xyz/wallet');
+    });
+    it('should have ASSOCIATE VEGA TOKENS link', function () {
+      cy.get(associateVegaLink)
+        .should('be.visible')
+        .and('have.attr', 'href')
+        .and('equal', '/token/associate');
+    });
+    it('should have STAKING button', function () {
+      cy.get(stakingBtn)
+        .should('be.visible')
+        .parent()
+        .should('have.attr', 'href')
+        .and('equal', '/validators');
+    });
+    it('should have GOVERNANCE button', function () {
+      cy.get(governanceBtn)
+        .should('be.visible')
+        .parent()
+        .should('have.attr', 'href')
+        .and('equal', '/proposals');
+    });
+  });
+});

apps/token/src/routes/home/index.tsx

@@ -94,7 +94,10 @@ const HomeNodes = ({
           <div key={index} className="col-span-3">
             <Link to={Routes.VALIDATORS}>
               <RoundedWrapper paddingBottom={true}>
-                <div className="flex flex-col items-center m-[-1rem] px-4 py-6 hover:bg-neutral-800">
+                <div
+                  data-testid="node-information"
+                  className="flex flex-col items-center m-[-1rem] px-4 py-6 hover:bg-neutral-800"
+                >
                   <span className="text-5xl">{length}</span>
                   <span className="text-sm uppercase text-neutral-400">
                     {title}
@@ -106,7 +109,7 @@ const HomeNodes = ({
         ))}
 
         {trimmedActiveNodes.map(({ id, avatarUrl, name }) => (
-          <div key={id} className="col-span-2">
+          <div key={id} data-testid="validators" className="col-span-2">
             <Link to={`${Routes.VALIDATORS}/${id}`}>
               <RoundedWrapper paddingBottom={true} border={false}>
                 <div className="flex items-center justify-center m-[-1rem] p-4 bg-neutral-900 hover:bg-neutral-800">