From bacd2a509e40213a329cbe6032ce27586cf9e5c8 Mon Sep 17 00:00:00 2001
From: Dexter Edwards <dexter.edwards93@gmail.com>
Date: Tue, 6 Sep 2022 15:03:23 +0100
Subject: [PATCH] fix: polling not working on governance page (#1255)

* fix: polling not working on governance page

* style: lint
---
 apps/token/.env                               |  4 +--
 .../components/proposal/proposal.spec.tsx     | 35 +++++++++++++++++++
 .../components/proposal/proposal.tsx          | 14 +++-----
 .../proposal/proposal-container.tsx           | 16 +++++----
 4 files changed, 51 insertions(+), 18 deletions(-)
 create mode 100644 apps/token/src/routes/governance/components/proposal/proposal.spec.tsx

diff --git a/apps/token/.env b/apps/token/.env
index e4bc187e4..2c47f7911 100644
--- a/apps/token/.env
+++ b/apps/token/.env
@@ -1,10 +1,10 @@
 # App configuration variables
 NX_VEGA_ENV=TESTNET
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/testnet-network.json
-NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql
+NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
-NX_VEGA_REST=https://api.n11.testnet.vega.xyz
+NX_VEGA_REST=https://api.n07.testnet.vega.xyz
 NX_FAIRGROUND=false
 NX_VEGA_NETWORKS='{"DEVNET":"https://dev.token.vega.xyz","STAGNET3":"https://stagnet3.token.vega.xyz","TESTNET":"https://token.fairground.wtf","MAINNET":"https://token.vega.xyz"}'
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
diff --git a/apps/token/src/routes/governance/components/proposal/proposal.spec.tsx b/apps/token/src/routes/governance/components/proposal/proposal.spec.tsx
new file mode 100644
index 000000000..b8880e72c
--- /dev/null
+++ b/apps/token/src/routes/governance/components/proposal/proposal.spec.tsx
@@ -0,0 +1,35 @@
+import { render, screen } from '@testing-library/react';
+import { generateProposal } from '../../test-helpers/generate-proposals';
+import { Proposal } from './proposal';
+
+jest.mock('../proposal-detail-header/proposal-header', () => ({
+  ProposalHeader: () => <div data-testid="proposal-header"></div>,
+}));
+jest.mock('../proposal-change-table', () => ({
+  ProposalChangeTable: () => <div data-testid="proposal-change-table"></div>,
+}));
+jest.mock('../proposal-terms-json', () => ({
+  ProposalTermsJson: () => <div data-testid="proposal-terms-json"></div>,
+}));
+jest.mock('../proposal-votes-table', () => ({
+  ProposalVotesTable: () => <div data-testid="proposal-votes-table"></div>,
+}));
+jest.mock('../vote-details', () => ({
+  VoteDetails: () => <div data-testid="proposal-vote-details"></div>,
+}));
+
+it('Renders with data-testid', () => {
+  const proposal = generateProposal();
+  render(<Proposal proposal={proposal} />);
+  expect(screen.getByTestId('proposal')).toBeInTheDocument();
+});
+
+it('renders each section', () => {
+  const proposal = generateProposal();
+  render(<Proposal proposal={proposal} />);
+  expect(screen.getByTestId('proposal-header')).toBeInTheDocument();
+  expect(screen.getByTestId('proposal-change-table')).toBeInTheDocument();
+  expect(screen.getByTestId('proposal-terms-json')).toBeInTheDocument();
+  expect(screen.getByTestId('proposal-votes-table')).toBeInTheDocument();
+  expect(screen.getByTestId('proposal-vote-details')).toBeInTheDocument();
+});
diff --git a/apps/token/src/routes/governance/components/proposal/proposal.tsx b/apps/token/src/routes/governance/components/proposal/proposal.tsx
index b8288d8e7..8d4efe417 100644
--- a/apps/token/src/routes/governance/components/proposal/proposal.tsx
+++ b/apps/token/src/routes/governance/components/proposal/proposal.tsx
@@ -1,8 +1,5 @@
 import { ProposalHeader } from '../proposal-detail-header/proposal-header';
-import type {
-  Proposal_proposal,
-  Proposal_proposal_terms,
-} from '../../proposal/__generated__/Proposal';
+import type { Proposal_proposal } from '../../proposal/__generated__/Proposal';
 import { ProposalChangeTable } from '../proposal-change-table';
 import { ProposalTermsJson } from '../proposal-terms-json';
 import { ProposalVotesTable } from '../proposal-votes-table';
@@ -10,16 +7,15 @@ import { VoteDetails } from '../vote-details';
 
 interface ProposalProps {
   proposal: Proposal_proposal;
-  terms: Proposal_proposal_terms;
 }
 
-export const Proposal = ({ proposal, terms }: ProposalProps) => {
+export const Proposal = ({ proposal }: ProposalProps) => {
   if (!proposal) {
     return null;
   }
 
   return (
-    <>
+    <section data-testid="proposal">
       <ProposalHeader proposal={proposal} />
       <div className="mb-8">
         <ProposalChangeTable proposal={proposal} />
@@ -30,7 +26,7 @@ export const Proposal = ({ proposal, terms }: ProposalProps) => {
       <div className="mb-8">
         <ProposalVotesTable proposal={proposal} />
       </div>
-      <ProposalTermsJson terms={terms} />
-    </>
+      <ProposalTermsJson terms={proposal.terms} />
+    </section>
   );
 };
diff --git a/apps/token/src/routes/governance/proposal/proposal-container.tsx b/apps/token/src/routes/governance/proposal/proposal-container.tsx
index 3d8b78543..e799c0ab6 100644
--- a/apps/token/src/routes/governance/proposal/proposal-container.tsx
+++ b/apps/token/src/routes/governance/proposal/proposal-container.tsx
@@ -1,5 +1,6 @@
 import { gql, useQuery } from '@apollo/client';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Proposal } from '../components/proposal';
@@ -20,22 +21,23 @@ export const PROPOSAL_QUERY = gql`
 
 export const ProposalContainer = () => {
   const params = useParams<{ proposalId: string }>();
-
-  const { data, loading, error } = useQuery<
+  const { data, loading, error, refetch } = useQuery<
     ProposalQueryResult,
     ProposalVariables
   >(PROPOSAL_QUERY, {
-    fetchPolicy: 'no-cache',
+    fetchPolicy: 'network-only',
     variables: { proposalId: params.proposalId || '' },
     skip: !params.proposalId,
-    pollInterval: 5000,
   });
 
+  useEffect(() => {
+    const interval = setInterval(refetch, 1000);
+    return () => clearInterval(interval);
+  }, [refetch]);
+
   return (
     <AsyncRenderer loading={loading} error={error} data={data}>
-      {data && (
-        <Proposal proposal={data.proposal} terms={data.proposal.terms} />
-      )}
+      {data && <Proposal proposal={data.proposal} />}
     </AsyncRenderer>
   );
 };