Fix GaugeTable tests

balancer · Sep 8, 2023 · 930aced · 930aced
1 parent c509ef6
commit 930aced
Show file tree

Hide file tree

Showing 10 changed files with 251 additions and 212 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "@sentry/tracing": "^7.17.4",
     "@tanstack/vue-query": "^4.22.0",
     "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/vue": "^6.4.2",
+    "@testing-library/vue": "^7.0.0",
     "@tomfrench/ens-avatar-resolver": "^0.1.0",
     "@types/animejs": "^3.1.3",
     "@types/debounce-promise": "^3.1.6",
@@ -89,7 +89,7 @@
     "@typescript-eslint/parser": "^5.48.1",
     "@vitejs/plugin-vue": "^4.1.0",
     "@vitest/coverage-c8": "^0.30.1",
-    "@vue/test-utils": "^2.3.2",
+    "@vue/test-utils": "^2.4.1",
     "@vueuse/core": "^4.3.4",
     "@walletconnect/ethereum-provider": "^2.10.0",
     "@walletconnect/modal": "^2.6.1",

diff --git a/src/components/contextual/pages/vebal/LMVoting/GaugesTable.spec.ts b/src/components/contextual/pages/vebal/LMVoting/GaugesTable.spec.ts
@@ -2,15 +2,15 @@ import { screen } from '@testing-library/vue';
 
 import BalAssetSet from '@/components/_global/BalAsset/BalAssetSet.vue';
 
-import GaugesTable from './GaugesTable.vue';
-import { renderComponent } from '@tests/renderComponent';
+import { mockExpiredGauges } from '@/composables/queries/__mocks__/useExpiredGaugesQuery';
 import { VotingPool } from '@/composables/queries/useVotingPoolsQuery';
+import { renderComponent } from '@tests/renderComponent';
+import { aVotingPool } from '../MultiVoting/voting-pool.builders';
+import GaugesTable from './GaugesTable.vue';
 import {
-  GqlChain,
-  GqlPoolMinimalType,
-} from '@/services/api/graphql/generated/api-types';
-import { Network } from '@/lib/config/types';
-import { PoolType } from '@/services/pool/types';
+  VotingProviderSymbol,
+  votingProvider,
+} from '../providers/voting.provider';
 
 GaugesTable.components = {
   BalAssetSet,
@@ -60,110 +60,73 @@ const global = {
   },
 };
 
+const gaugeId = '0x34f33CDaED8ba0E1CEECE80e5f4a73bcf234cfac';
 vi.mock('vue-router');
 vi.mock('@/providers/tokens.provider');
+vi.mock('@/composables/queries/useExpiredGaugesQuery');
 
-const gaugeId = '0x34f33CDaED8ba0E1CEECE80e5f4a73bcf234cfac';
-
-const pool: VotingPool = {
-  chain: GqlChain.Mainnet,
-  network: Network.MAINNET,
-  id: '0x1542b8783e5e884b6fe7422dd2f71a42c5edb86d0000000000000000000002f3',
-  address: '0x06Df3b2bbB68adc8B0e302443692037ED9f91b42',
-  type: GqlPoolMinimalType.Stable,
-  poolType: PoolType.Stable,
-  symbol: 'staBAL2',
-  tokens: [
-    {
-      address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
-      weight: 'null',
-      symbol: 'USDC',
-      logoURI:
-        'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png',
-    },
-    {
-      address: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
-      weight: 'null',
-      symbol: 'USDT',
-      logoURI:
-        'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xdAC17F958D2ee523a2206206994597C13D831ec7/logo.png',
-    },
-  ],
+const pool: VotingPool = aVotingPool({
   gauge: {
     address: gaugeId,
     isKilled: false,
   },
-  votes: '8212341531532800',
-  votesNextPeriod: '6934407282299320',
-  userVotes: '0',
-  lastUserVoteTime: 0,
-};
+});
 
-const expiredGauges = [gaugeId];
 const votingPools: VotingPool[] = [pool];
 
 const queryExpiredLabel = () => screen.queryByText(/Expired/i);
-const queryVoteBtn = () => screen.queryByRole('button', { name: /Vote/i });
 const queryRemoveVotesBtn = () =>
   screen.queryByRole('button', { name: /Remove/i });
 
+const votingProviderPlugin = {
+  install(app) {
+    app.provide(VotingProviderSymbol, votingProvider());
+  },
+};
+
 describe('GaugesTable', () => {
   it('should render right tokens for gauge', async () => {
-    renderComponent(GaugesTable, {
-      global,
-      props: {
-        data: votingPools,
-        renderedRowsIdx: 0,
+    renderComponent(
+      GaugesTable,
+      {
+        global,
+        props: {
+          data: votingPools,
+          renderedRowsIdx: 0,
+          selectVotesDisabled: false,
+        },
       },
-    });
+      votingProviderPlugin
+    );
     const usdt = await screen.findByText('USDT');
     const usdc = await screen.findByText('USDC');
     const expiredLabel = queryExpiredLabel();
-    const voteBtn = queryVoteBtn();
-    const removeVotesBtn = queryRemoveVotesBtn();
 
     expect(usdt).toBeVisible();
     expect(usdc).toBeVisible();
     expect(expiredLabel).not.toBeInTheDocument();
-    expect(removeVotesBtn).not.toBeInTheDocument();
-    expect(voteBtn).toBeEnabled();
   });
 
   it('should render Expired label and disabled Vote btn, if gauge is expired', async () => {
-    renderComponent(GaugesTable, {
-      global,
-      props: {
-        expiredGauges,
-        data: votingPools,
-        renderedRowsIdx: 0,
+    mockExpiredGauges([gaugeId]);
+
+    renderComponent(
+      GaugesTable,
+      {
+        global,
+        props: {
+          data: votingPools,
+          renderedRowsIdx: 0,
+          selectVotesDisabled: false,
+        },
       },
-    });
+      votingProviderPlugin
+    );
 
     const expiredLabel = queryExpiredLabel();
-    const voteBtn = queryVoteBtn();
     const removeVotesBtn = queryRemoveVotesBtn();
 
     expect(expiredLabel).toBeVisible();
     expect(removeVotesBtn).not.toBeInTheDocument();
-    expect(voteBtn).toBeDisabled();
-  });
-
-  it("should render Expired label and Remove Votes btn if gauge is expired and it has user's votes", async () => {
-    renderComponent(GaugesTable, {
-      global,
-      props: {
-        expiredGauges,
-        data: [{ ...pool, userVotes: '1' }],
-        renderedRowsIdx: 0,
-      },
-    });
-
-    const expiredLabel = queryExpiredLabel();
-    const voteBtn = queryVoteBtn();
-    const removeVotesBtn = queryRemoveVotesBtn();
-
-    expect(expiredLabel).toBeVisible();
-    expect(removeVotesBtn).toBeEnabled();
-    expect(voteBtn).not.toBeInTheDocument();
   });
 });
diff --git a/src/components/contextual/pages/vebal/LMVoting/GaugesTable.vue b/src/components/contextual/pages/vebal/LMVoting/GaugesTable.vue
@@ -36,7 +36,7 @@ import { PoolFeature } from '@/types/pools';
 import { Protocol } from '@/composables/useProtocols';
 import { isVotingTimeLocked } from '@/composables/useVeBAL';
 import { useVoting } from '@/components/contextual/pages/vebal/providers/voting.provider';
-import { hasVotes } from '@/components/contextual/pages/vebal/voting-utils';
+import { hasUserVotes } from '@/components/contextual/pages/vebal/voting-utils';
 
 /**
  * TYPES
@@ -328,7 +328,7 @@ function getPickedTokens(tokens: VotingPool['tokens']) {
           noMargin
           :modelValue="isSelected(pool)"
           :disabled="
-            hasVotes(pool) ||
+            hasUserVotes(pool) ||
             isVotingTimeLocked(pool.lastUserVoteTime) ||
             selectVotesDisabled
           "

diff --git a/src/components/contextual/pages/vebal/MultiVoting/voting-pool.builders.ts b/src/components/contextual/pages/vebal/MultiVoting/voting-pool.builders.ts
@@ -1,4 +1,5 @@
 import { VotingPool } from '@/composables/queries/useVotingPoolsQuery';
+import { Network } from '@/lib/config/types';
 import { parseEther } from '@ethersproject/units';
 import { randomAddress } from '@tests/unit/builders/address';
 import { DeepPartial } from '@tests/unit/types';
@@ -7,16 +8,37 @@ export function toOnchainVotesNextPeriod(formattedVotes: string): string {
   return parseEther(formattedVotes).toString();
 }
 
+const defaultPoolTokens = [
+  {
+    address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+    weight: 'null',
+    symbol: 'USDC',
+    logoURI:
+      'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png',
+  },
+  {
+    address: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
+    weight: 'null',
+    symbol: 'USDT',
+    logoURI:
+      'https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/0xdAC17F958D2ee523a2206206994597C13D831ec7/logo.png',
+  },
+];
+
 export function aVotingPool(...options: DeepPartial<VotingPool>[]): VotingPool {
   const defaultPool: Partial<VotingPool> = {
     id: 'voting pool id',
     votesNextPeriod: '0',
     userVotes: '0',
+    lastUserVoteTime: 0,
     gauge: {
       address: randomAddress(),
       isKilled: false,
       relativeWeightCap: '0.1',
     },
+    network: Network.MAINNET,
+    tokens: defaultPoolTokens,
+    votes: '8212341531532800',
   };
   return Object.assign({}, defaultPool, ...options);
 }
diff --git a/src/components/contextual/pages/vebal/voting-utils.ts b/src/components/contextual/pages/vebal/voting-utils.ts
@@ -48,6 +48,6 @@ export function voteLockedUntilText() {
   return format(toUtcTime(new Date(unlockTime)), 'd LLLL y');
 }
 
-export function hasVotes(pool: VotingPool): boolean {
+export function hasUserVotes(pool: VotingPool): boolean {
   return Number(pool.userVotes) > 0;
 }
diff --git a/src/composables/queries/__mocks__/useExpiredGaugesQuery.ts b/src/composables/queries/__mocks__/useExpiredGaugesQuery.ts
@@ -1,7 +1,7 @@
 export let defaultExpiredGauges = [];
 
-export function mockExpiredGauges(foo) {
-  defaultExpiredGauges = foo;
+export function mockExpiredGauges(expiredGauges) {
+  defaultExpiredGauges = expiredGauges;
 }
 
 export default function useExpiredGaugesQuery() {

diff --git a/src/pages/vebal-voting.vue b/src/pages/vebal-voting.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import MultiVoting from '@/components/contextual/pages/vebal/LMVoting/MultiVoting.vue';
-import { provideVoting } from '@/providers/local/voting.provider';
+import { provideVoting } from '@/components/contextual/pages/vebal/providers/voting.provider';
 
 provideVoting();
 </script>

diff --git a/tests/renderComponent.ts b/tests/renderComponent.ts
@@ -10,7 +10,7 @@ import { wallets, WalletsProviderSymbol } from '@/providers/wallet.provider';
 import { render, RenderOptions } from '@testing-library/vue';
 import { RouterLinkStub } from '@vue/test-utils';
 import { mergeWith } from 'lodash';
-import { computed } from 'vue';
+import { Plugin, computed } from 'vue';
 import { registerTestPlugins } from './registerTestPlugins';
 
 const DefaultTestPlugins = {
@@ -26,11 +26,14 @@ const DefaultTestPlugins = {
 
 export function renderComponent(
   componentUnderTest,
-  options: RenderOptions = {}
+  options: RenderOptions = {},
+  extraPlugins?: Plugin
 ) {
   const defaultOptions: Partial<RenderOptions> = {
     global: {
-      plugins: [DefaultTestPlugins],
+      plugins: extraPlugins
+        ? [DefaultTestPlugins, extraPlugins]
+        : [DefaultTestPlugins],
       stubs: {
         RouterLink: RouterLinkStub,
         Jazzicon: true,

diff --git a/tests/unit/console.ts b/tests/unit/console.ts
@@ -11,7 +11,9 @@ export function silenceConsoleLog(
     .mockImplementation((message, optionalParams) => {
       if (isString(message) && silenceRulesCallback(message)) return;
 
-      originalConsoleLog(message, optionalParams);
+      optionalParams
+        ? originalConsoleLog(message, optionalParams)
+        : originalConsoleLog(message);
     });
 }