test(token): added validations for staking page without wallets connected (#686)

* test(token): added validations for staking page without wallets connected

* chore: formatting

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

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

@@ -0,0 +1,108 @@
+import navigation from '../locators/navigation.locators';
+import staking from '../locators/staking.locators';
+
+context('Staking Page - verify elements on page', function () {
+  before('navigate to staking page', function () {
+    cy.visit('/')
+      .get(navigation.section)
+      .within(() => {
+        cy.get(navigation.staking).click();
+      });
+  });
+
+  describe('with wallets disconnected', function () {
+    describe('description section', function () {
+      it('should have staking tab highlighted', function () {
+        cy.get(navigation.section).within(() => {
+          cy.get(navigation.staking).should('have.attr', 'aria-current');
+        });
+      });
+
+      it('should have STAKING ON VEGA header visible', function () {
+        cy.get(staking.pageHeader)
+          .should('be.visible')
+          .and('have.text', 'Staking on Vega');
+      });
+
+      it('should have Staking Guide link visible', function () {
+        cy.get(staking.guideLink)
+          .should('be.visible')
+          .and('have.text', 'Read more about staking on Vega')
+          .and(
+            'have.attr',
+            'href',
+            'https://docs.vega.xyz/docs/mainnet/concepts/vega-chain/#staking-on-vega'
+          );
+      });
+    });
+
+    describe('step 1 section', function () {
+      it('should have header visible', function () {
+        cy.get(staking.step1).within(() => {
+          cy.get(staking.sectionHeader)
+            .should('be.visible')
+            .and('have.text', 'Step 1. Connect to a Vega Wallet');
+        });
+      });
+
+      it('should have text visible', function () {
+        cy.get(staking.step1).within(() => {
+          cy.get(staking.link)
+            .should('be.visible')
+            .and('have.text', 'Vega Wallet')
+            .and('have.attr', 'href', 'https://vega.xyz/wallet');
+        });
+      });
+
+      it('should have connect to eth button visible', function () {
+        cy.get(staking.step1).within(() => {
+          cy.get(staking.connectToEthBtn)
+            .should('be.visible')
+            .and('have.text', 'Connect Ethereum wallet');
+        });
+      });
+
+      it('should have connect to vega button visible', function () {
+        cy.get(staking.step1).within(() => {
+          cy.get(staking.connectToVegaBtn)
+            .should('be.visible')
+            .and('have.text', 'Connect Vega wallet');
+        });
+      });
+    });
+
+    describe('step 2 section', function () {
+      it('should have header visible', function () {
+        cy.get(staking.step2).within(() => {
+          cy.get(staking.sectionHeader)
+            .should('be.visible')
+            .and('have.text', 'Step 2. Associate tokens with a Vega Wallet');
+        });
+      });
+
+      it('should have warning visible', function () {
+        cy.get(staking.step2).within(() => {
+          cy.get(staking.warning)
+            .should('be.visible')
+            .and(
+              'have.text',
+              'You need to connect to an Ethereum wallet first'
+            );
+        });
+      });
+    });
+
+    describe('step 3 section', function () {
+      it('should have header visible', function () {
+        cy.get(staking.step3).within(() => {
+          cy.get(staking.sectionHeader)
+            .should('be.visible')
+            .and(
+              'have.text',
+              "Step 3. Select the validator you'd like to nominate"
+            );
+        });
+      });
+    });
+  });
+});

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

@@ -18,7 +18,9 @@ context('Vesting Page - verify elements on page', function () {
     });
 
     it('should have VESTING header visible', function () {
-      cy.get(vesting.header).should('be.visible').and('have.text', 'Vesting');
+      cy.get(vesting.pageHeader)
+        .should('be.visible')
+        .and('have.text', 'Vesting');
     });
 
     it('should have connect Eth wallet info', function () {

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

@@ -0,0 +1,6 @@
+export default {
+  pageHeader: 'header h1',
+  sectionHeader: 'h2',
+  link: '[data-testid="link"]',
+  warning: '[data-testid="callout"]',
+};

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

@@ -0,0 +1,11 @@
+import common from './common.locators';
+
+export default {
+  ...common,
+  guideLink: '[data-testid="staking-guide-link"]',
+  step1: '[data-testid="staking-step-1"]',
+  step2: '[data-testid="staking-step-2"]',
+  step3: '[data-testid="staking-step-3"]',
+  connectToEthBtn: '[data-testid="connect-to-eth-btn"]',
+  connectToVegaBtn: '[data-testid="connect-to-vega-wallet-btn"]',
+};

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

@@ -1,5 +1,7 @@
+import common from './common.locators';
+
 export default {
-  header: 'header h1',
+  ...common,
   connectPrompt: '[data-testid="eth-connect-prompt"]',
   connectButton: '[data-testid="connect-to-eth-btn"]',
 };

apps/token/src/routes/staking/connect-to-vega.tsx

@@ -18,7 +18,7 @@ export const ConnectToVega = () => {
           isOpen: true,
         })
       }
-      data-test-id="connect-to-vega-wallet-btn"
+      data-testid="connect-to-vega-wallet-btn"
     >
       {t('connectVegaWallet')}
     </Button>

apps/token/src/routes/staking/staking.tsx

@@ -36,19 +36,20 @@ export const Staking = ({ data }: { data?: StakingQueryResult }) => {
             href={Links.STAKING_GUIDE}
             className="text-white underline"
             target="_blank"
+            data-testid="staking-guide-link"
           >
             {t('readMoreStaking')}
           </Link>
         </p>
       </section>
 
-      <section>
+      <section data-testid="staking-step-1">
         <BulletHeader tag="h2" style={stakingBulletStyles}>
           {t('stakingStep1')}
         </BulletHeader>
         <StakingStepConnectWallets />
       </section>
-      <section>
+      <section data-testid="staking-step-2">
         <BulletHeader tag="h2" style={stakingBulletStyles}>
           {t('stakingStep2')}
         </BulletHeader>
@@ -60,7 +61,7 @@ export const Staking = ({ data }: { data?: StakingQueryResult }) => {
           }
         />
       </section>
-      <section>
+      <section data-testid="staking-step-3">
         <BulletHeader tag="h2" style={stakingBulletStyles}>
           {t('stakingStep3')}
         </BulletHeader>