Test/toke add withdraw page validations (#701)

* fix: always show heading on governance page

* test(token): added validation for withdraw and governance pages

* chore: remove semicolon

Co-authored-by: Dexter <dexter.edwards93@gmail.com>
Co-authored-by: Rado <rado@vegaprotocol.io>

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

@@ -0,0 +1,32 @@
+import navigation from '../locators/navigation.locators';
+import governance from '../locators/governance.locators';
+
+context('Governance Page - verify elements on page', function () {
+  before('navigate to governance page', function () {
+    cy.visit('/')
+      .get(navigation.section)
+      .within(() => {
+        cy.get(navigation.governance).click();
+      });
+  });
+
+  describe('with no network change proposals', function () {
+    it('should have governance tab highlighted', function () {
+      cy.get(navigation.section).within(() => {
+        cy.get(navigation.governance).should('have.attr', 'aria-current');
+      });
+    });
+
+    it('should have GOVERNANCE header visible', function () {
+      cy.get(governance.pageHeader)
+        .should('be.visible')
+        .and('have.text', 'Governance');
+    });
+
+    it('should have information box visible', function () {
+      cy.get(governance.noProposals)
+        .should('be.visible')
+        .and('have.text', 'There are no active network change proposals');
+    });
+  });
+});

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

@@ -0,0 +1,36 @@
+import navigation from '../locators/navigation.locators';
+import withdraw from '../locators/withdraw.locators';
+
+context('Withdraw Page - verify elements on page', function () {
+  before('navigate to withdraw page', function () {
+    cy.visit('/')
+      .get(navigation.section)
+      .within(() => {
+        cy.get(navigation.withdraw).click();
+      });
+  });
+
+  describe('with wallets disconnected', function () {
+    it('should have withdraw tab highlighted', function () {
+      cy.get(navigation.section).within(() => {
+        cy.get(navigation.withdraw).should('have.attr', 'aria-current');
+      });
+    });
+
+    it('should have WITHDRAW header visible', function () {
+      cy.get(withdraw.pageHeader)
+        .should('be.visible')
+        .and('have.text', 'Withdraw');
+    });
+
+    it('should have connect Vega wallet button', function () {
+      cy.get(withdraw.connectToVegaBtn)
+        .should('be.visible')
+        .and('have.text', 'Connect Vega wallet');
+    });
+
+    it('should have withdraw information box', function () {
+      cy.get(withdraw.warning).should('be.visible');
+    });
+  });
+});

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

@@ -3,4 +3,5 @@ export default {
   sectionHeader: 'h2',
   link: '[data-testid="link"]',
   warning: '[data-testid="callout"]',
+  connectToVegaBtn: '[data-testid="connect-to-vega-wallet-btn"]',
 };

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

@@ -0,0 +1,6 @@
+import common from './common.locators';
+
+export default {
+  ...common,
+  noProposals: '[data-testid="no-proposals"]',
+};

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

@@ -2,5 +2,4 @@ import common from './common.locators';
 
 export default {
   ...common,
-  connectToVegaBtn: '[data-testid="connect-to-vega-wallet-btn"]',
 };

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

@@ -7,5 +7,4 @@ export default {
   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/withdraw.locators.js

@@ -0,0 +1,5 @@
+import common from './common.locators';
+
+export default {
+  ...common,
+};

apps/token/src/components/vega-wallet-container/vega-wallet-container.tsx

@@ -22,6 +22,7 @@ export const VegaWalletContainer = ({ children }: VegaWalletContainerProps) => {
     return (
       <p>
         <Button
+          data-testid="connect-to-vega-wallet-btn"
           onClick={() =>
             appDispatch({
               type: AppStateActionType.SET_VEGA_WALLET_OVERLAY,

apps/token/src/routes/governance/components/proposals-list/proposals-list.tsx

@@ -3,7 +3,6 @@ import { format, isFuture } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
-import { Heading } from '../../../../components/heading';
 import { KeyValueTable, KeyValueTableRow } from '@vegaprotocol/ui-toolkit';
 import { getProposalName } from '../../../../lib/type-policies/proposal';
 import type { Proposals_proposals } from '../../proposals/__generated__/Proposals';
@@ -17,12 +16,11 @@ export const ProposalsList = ({ proposals }: ProposalsListProps) => {
   const { t } = useTranslation();
 
   if (proposals.length === 0) {
-    return <p>{t('noProposals')}</p>;
+    return <p data-testid="no-proposals">{t('noProposals')}</p>;
   }
 
   return (
     <>
-      <Heading title={t('pageTitleGovernance')} />
       <p>{t('proposedChangesToVegaNetwork')}</p>
       <p>{t('vegaTokenHoldersCanVote')}</p>
       <p>{t('requiredMajorityDescription')}</p>

apps/token/src/routes/governance/proposals/proposals-container.tsx

@@ -1,5 +1,6 @@
 import { gql, useQuery } from '@apollo/client';
 import { Callout, Intent, Splash } from '@vegaprotocol/ui-toolkit';
+import { Heading } from '../../../components/heading';
 import compact from 'lodash/compact';
 import flow from 'lodash/flow';
 import orderBy from 'lodash/orderBy';
@@ -63,5 +64,10 @@ export const ProposalsContainer = () => {
     );
   }
 
-  return <ProposalsList proposals={proposals} />;
+  return (
+    <>
+      <Heading title={t('pageTitleGovernance')} />
+      <ProposalsList proposals={proposals} />
+    </>
+  );
 };