test(token-e2e): add elements verification tests for home page (#616)

* test(token-e2e): add elements verification tests for home page

* test(token-e2e): change locators files names

* test(token-e2e): change title of describe block

* test: add some more validation

* test: eol fix

Co-authored-by: Rado <rado@vegaprotocol.io>

apps/token-e2e/src/data/vegaToken.json

@@ -0,0 +1,4 @@
+{
+  "tokenAddress": "0xDc335304979D378255015c33AbFf09B60c31EBAb",
+  "vestingContract": "0xe2deBB240b43EDfEBc9c38B67c0894B9A92Bf07c"
+}

apps/token-e2e/src/fixtures/example.json

@@ -1,4 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io"
-}

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

@@ -0,0 +1,124 @@
+import navigation from '../../locators/navigation.locators';
+import home from '../../locators/home.locators';
+import vegaToken from '../../data/vegaToken.json';
+
+context('Home Page - verify elements on page', function () {
+  before('visit token home page', function () {
+    cy.visit('/');
+  });
+
+  describe('with wallets disconnected', function () {
+    before('wait for page to load', function () {
+      cy.get(navigation.section, { timeout: 10000 }).should('be.visible');
+    });
+
+    describe('Navigation tabs', function () {
+      it('should have HOME tab', function () {
+        cy.get(navigation.section).within(() => {
+          cy.get(navigation.home).should('be.visible');
+        });
+      });
+      it('should have VESTING tab', function () {
+        cy.get(navigation.section).within(() => {
+          cy.get(navigation.vesting).should('be.visible');
+        });
+      });
+      it('should have STAKING tab', function () {
+        cy.get(navigation.section).within(() => {
+          cy.get(navigation.staking).should('be.visible');
+        });
+      });
+      it('should have REWARDS tab', function () {
+        cy.get(navigation.section).within(() => {
+          cy.get(navigation.rewards).should('be.visible');
+        });
+      });
+      it('should have WITHDRAW tab', function () {
+        cy.get(navigation.section).within(() => {
+          cy.get(navigation.withdraw).should('be.visible');
+        });
+      });
+      it('should have GOVERNANCE tab', function () {
+        cy.get(navigation.section).within(() => {
+          cy.get(navigation.governance).should('be.visible');
+        });
+      });
+    });
+
+    describe('THE $VEGA TOKEN table', function () {
+      it('should have TOKEN ADDRESS', function () {
+        cy.get(home.tokenDetailsTable).within(() => {
+          cy.get(home.address)
+            .should('be.visible')
+            .invoke('text')
+            .should('be.equal', vegaToken.tokenAddress);
+        });
+      });
+      it('should have VESTING CONTRACT', function () {
+        cy.get(home.tokenDetailsTable).within(() => {
+          cy.get(home.contract)
+            .should('be.visible')
+            .invoke('text')
+            .should('be.equal', vegaToken.vestingContract);
+        });
+      });
+      it('should have TOTAL SUPPLY', function () {
+        cy.get(home.tokenDetailsTable).within(() => {
+          cy.get(home.totalSupply).should('be.visible');
+        });
+      });
+      it('should have CIRCULATING SUPPLY', function () {
+        cy.get(home.tokenDetailsTable).within(() => {
+          cy.get(home.circulatingSupply).should('be.visible');
+        });
+      });
+      it('should have STAKED $VEGA', function () {
+        cy.get(home.tokenDetailsTable).within(() => {
+          cy.get(home.staked).should('be.visible');
+        });
+      });
+    });
+
+    describe('links and buttons', function () {
+      it('should have TRANCHES link', function () {
+        cy.get(home.tranchesLink)
+          .should('be.visible')
+          .and('have.attr', 'href')
+          .and('equal', '/tranches');
+      });
+      it('should have REDEEM button', function () {
+        cy.get(home.redeemBtn)
+          .should('be.visible')
+          .parent()
+          .should('have.attr', 'href')
+          .and('equal', '/vesting');
+      });
+      it('should have GET VEGA WALLET link', function () {
+        cy.get(home.getVegaWalletLink)
+          .should('be.visible')
+          .and('have.attr', 'href')
+          .and('equal', 'https://vega.xyz/wallet');
+      });
+      it('should have ASSOCIATE VEGA TOKENS link', function () {
+        cy.get(home.associateVegaLink)
+          .should('be.visible')
+          .and('have.attr', 'href')
+          .and('equal', '/staking/associate');
+      });
+      it('should have STAKING button', function () {
+        cy.get(home.stakingBtn)
+          .should('be.visible')
+          .parent()
+          .should('have.attr', 'href')
+          .and('equal', '/staking');
+      });
+      it('should have GOVERNANCE button', function () {
+        cy.get(home.governanceBtn)
+          .should('be.visible')
+          .parent()
+          .should('have.attr', 'href')
+          .and('equal', '/governance');
+      });
+    });
+  });
+});

apps/token-e2e/src/locators/home.locators.js

@@ -0,0 +1,15 @@
+export default {
+  tokenDetailsTable: '.token-details',
+  address: '[data-testid="token-address"]',
+  contract: '[data-testid="token-contract"]',
+  totalSupply: '[data-testid="total-supply"]',
+  circulatingSupply: '[data-testid="circulating-supply"]',
+  staked: '[data-testid="staked"]',
+
+  tranchesLink: '[data-testid="tranches-link"]',
+  redeemBtn: '[data-testid="check-vesting-page-btn"]',
+  getVegaWalletLink: '[data-testid="get-vega-wallet-link"]',
+  associateVegaLink: '[data-testid="associate-vega-tokens-link-on-homepage"]',
+  stakingBtn: '[data-testid="staking-button-on-homepage"]',
+  governanceBtn: '[data-testid="governance-button-on-homepage"]',
+};

apps/token-e2e/src/locators/navigation.locators.js

@@ -0,0 +1,9 @@
+export default {
+  section: 'nav',
+  home: '[href="/"]',
+  vesting: '[href="/vesting"]',
+  staking: '[href="/staking"]',
+  rewards: '[href="/rewards"]',
+  withdraw: '[href="/withdraw"]',
+  governance: '[href="/governance"]',
+};

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

@@ -52,7 +52,9 @@ const Home = ({ name }: RouteChildProps) => {
           <Trans
             i18nKey="Tokens are held in different <trancheLink>Tranches</trancheLink>. Each tranche has its own schedule for how the tokens are unlocked."
             components={{
-              trancheLink: <Link to={Routes.TRANCHES} />,
+              trancheLink: (
+                <Link data-testid="tranches-link" to={Routes.TRANCHES} />
+              ),
             }}
           />
         </p>
@@ -62,7 +64,7 @@ const Home = ({ name }: RouteChildProps) => {
           )}
         </p>
         <Link to={Routes.VESTING}>
-          <Button variant="secondary" data-test-id="check-vesting-page-btn">
+          <Button variant="secondary" data-testid="check-vesting-page-btn">
             {t('Check to see if you can redeem unlocked VEGA tokens')}
           </Button>
         </Link>
@@ -81,7 +83,7 @@ const Home = ({ name }: RouteChildProps) => {
         </p>
         <p>
           <a
-            data-test-id="get-vega-wallet-link"
+            data-testid="get-vega-wallet-link"
             href={Links.WALLET_GUIDE}
             className="underline text-white"
             target="_blank"
@@ -90,8 +92,9 @@ const Home = ({ name }: RouteChildProps) => {
             {t('Get a Vega wallet')}
           </a>
         </p>
-        <p data-test-id="associate-vega-tokens-link-on-homepage">
+        <p>
           <Link
+            data-testid="associate-vega-tokens-link-on-homepage"
             to={`${Routes.STAKING}/associate`}
             className="underline text-white"
           >
@@ -110,7 +113,12 @@ const Home = ({ name }: RouteChildProps) => {
             </p>
             <p>
               <Link to={Routes.STAKING}>
-                <Button variant="secondary">{t('Nominate a validator')}</Button>
+                <Button
+                  variant="secondary"
+                  data-testid="staking-button-on-homepage"
+                >
+                  {t('Nominate a validator')}
+                </Button>
               </Link>
             </p>
           </HomeSection>
@@ -125,7 +133,10 @@ const Home = ({ name }: RouteChildProps) => {
             </p>
             <p>
               <Link to={Routes.GOVERNANCE}>
-                <Button variant="secondary">
+                <Button
+                  variant="secondary"
+                  data-testid="governance-button-on-homepage"
+                >
                   {t('View Governance proposals')}
                 </Button>
               </Link>