jest testing init (#360)

* tests init

* setup.ts

* write generic test for all routes

* all pages render test

* formmat bank values test

* deduplicate

* deduplicate

* test command

.eslintrc.json

@@ -9,6 +9,12 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:tailwindcss/recommended"
   ],
+  "env": {
+    "es6": true,
+    "browser": true,
+    "jest": true,
+    "node": true
+  },
   "rules": {
     "react/react-in-jsx-scope": 0,
     "@next/next/no-img-element": 0,

apis/notifications/websocket.ts

@@ -5,7 +5,7 @@ export class NotificationsWebSocket {
   token: string
   mangoAccount: string
   publicKey: string
-  pingInterval: NodeJS.Timer | null
+  pingInterval: number | null
   retryCount = 0
   maxRetries = 2
 
@@ -26,7 +26,7 @@ export class NotificationsWebSocket {
     this.ws.addEventListener('open', () => {
       console.log('Notifications WebSocket opened')
       // Send a ping message to the server every 10 seconds
-      const interval = setInterval(() => {
+      const interval = window.setInterval(() => {
         if (this.ws?.readyState === this.ws?.OPEN) {
           this.ws?.send('ping')
         }

components/governance/Vote/Vote.tsx

@@ -54,7 +54,9 @@ const Vote = () => {
   useEffect(() => {
     const handleGetMangoMint = async () => {
       const mangoMint = await tryGetMint(connection, new PublicKey(MANGO_MINT))
-      setMangoMint(mangoMint!.account)
+      if (mangoMint) {
+        setMangoMint(mangoMint.account)
+      }
     }
     handleGetMangoMint()
   }, [])

jest.config.ts

@@ -0,0 +1,17 @@
+import nextJest from 'next/jest'
+
+const customConfig = {
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
+  transform: {
+    '^.+\\.(t|j)sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  moduleNameMapper: {
+    // Force module uuid to resolve with the CJS entry point, because Jest does not support package.json.exports. See https://github.com/uuidjs/uuid/issues/451
+    uuid: require.resolve('uuid'),
+    three: require.resolve('three'),
+  },
+}
+
+export default nextJest({ dir: './' })(customConfig)

package.json

@@ -8,6 +8,7 @@
     "ci-dupe-check": "npx yarn-deduplicate --list --fail",
     "bigint-fix": "cd node_modules/bigint-buffer && yarn rebuild && cd ../../",
     "dev": "rm -rf .next && next dev",
+    "test": "yarn jest",
     "build": "next build",
     "start": "next start",
     "format": "prettier --check .",
@@ -91,11 +92,14 @@
   "devDependencies": {
     "@lavamoat/allow-scripts": "2.3.0",
     "@lavamoat/preinstall-always-fail": "^1.0.0",
+    "@testing-library/jest-dom": "6.1.6",
+    "@testing-library/react": "14.1.2",
     "@types/big.js": "6.1.6",
     "@types/howler": "2.2.7",
+    "@types/jest": "29.5.11",
     "@types/js-cookie": "3.0.3",
     "@types/lodash": "4.14.185",
-    "@types/node": "17.0.23",
+    "@types/node": "20.10.6",
     "@types/react": "18.0.3",
     "@types/react-dom": "18.0.0",
     "@types/react-grid-layout": "1.3.2",
@@ -109,10 +113,16 @@
     "eslint-plugin-react-hooks": "4.4.0",
     "eslint-plugin-tailwindcss": "3.13.0",
     "husky": "8.0.1",
+    "jest": "29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "jest-fetch-mock": "3.0.3",
+    "next-router-mock": "0.9.11",
     "postcss": "8.4.12",
     "prettier": "3.0.2",
     "prettier-plugin-tailwindcss": "0.5.3",
     "tailwindcss": "3.3.3",
+    "ts-jest": "29.1.1",
+    "ts-node": "10.9.2",
     "typescript": "4.9.4"
   },
   "resolutions": {

store/mangoStore.ts

@@ -43,6 +43,7 @@ import {
   INPUT_TOKEN_DEFAULT,
   LAST_ACCOUNT_KEY,
   MANGO_DATA_API_URL,
+  MANGO_MAINNET_GROUP,
   MAX_PRIORITY_FEE_KEYS,
   OUTPUT_TOKEN_DEFAULT,
   PAGINATION_PAGE_LENGTH,
@@ -90,8 +91,6 @@ import { fetchTokenStatsData, processTokenStatsData } from 'apis/mngo'
 import { OrderTypes } from 'utils/tradeForm'
 import { usePlausible } from 'next-plausible'
 
-const GROUP = new PublicKey('78b8f4cGCwmZ9ysPFMWLaLTkkaYnUjwMJYStWe5RTSSX')
-
 const ENDPOINTS = [
   {
     name: 'mainnet-beta',
@@ -545,7 +544,7 @@ const mangoStore = create<MangoStore>()(
           try {
             const set = get().set
             const client = get().client
-            const group = await client.getGroup(GROUP)
+            const group = await client.getGroup(MANGO_MAINNET_GROUP)
             let selectedMarketName = get().selectedMarket.name
 
             if (!selectedMarketName) {

test/render.test.tsx

@@ -0,0 +1,33 @@
+/**
+ * @jest-environment node
+ */
+
+import { Connection } from '@solana/web3.js'
+import { getClient, getGroupForClient } from './utils'
+import { Group, MangoClient } from '@blockworks-foundation/mango-v4'
+import { getFormattedBankValues } from 'utils/governance/listingTools'
+import { MANGO_MAINNET_GROUP } from 'utils/constants'
+
+describe('Bank formatting function', () => {
+  let client: MangoClient
+  let group: Group
+
+  // Asynchronous setup before all tests
+  beforeAll(async () => {
+    const connection = new Connection(
+      'https://mango.rpcpool.com/946ef7337da3f5b8d3e4a34e7f88',
+    )
+    client = await getClient(connection)
+    group = await getGroupForClient(client, MANGO_MAINNET_GROUP)
+  })
+
+  it('Format all banks without errors', async () => {
+    Array.from(group.banksMapByMint)
+      .map(([_mintAddress, banks]) => banks)
+      .map((b) => b[0])
+      .forEach((x) => {
+        const formatted = getFormattedBankValues(group, x)
+        expect(formatted.name === x.name)
+      })
+  })
+})

test/setup.ts

@@ -0,0 +1,3 @@
+import '@testing-library/jest-dom'
+
+jest.mock('next/router', () => require('next-router-mock'))

test/utils.ts

@@ -0,0 +1,31 @@
+import { MANGO_V4_ID, MangoClient } from '@blockworks-foundation/mango-v4'
+import { AnchorProvider } from '@coral-xyz/anchor'
+import { Connection, Keypair, PublicKey } from '@solana/web3.js'
+import EmptyWallet from 'utils/wallet'
+
+export const getClient = async (connection: Connection) => {
+  const options = AnchorProvider.defaultOptions()
+  const adminProvider = new AnchorProvider(
+    connection,
+    new EmptyWallet(Keypair.generate()),
+    options,
+  )
+  const client = MangoClient.connect(
+    adminProvider,
+    'mainnet-beta',
+    MANGO_V4_ID['mainnet-beta'],
+  )
+
+  return client
+}
+export const getGroupForClient = async (
+  client: MangoClient,
+  groupPk: PublicKey,
+) => {
+  const response = await client.getGroup(groupPk)
+  return response
+}
+
+export const MAINNET_MANGO_GROUP = new PublicKey(
+  '78b8f4cGCwmZ9ysPFMWLaLTkkaYnUjwMJYStWe5RTSSX',
+)

utils/constants.ts

@@ -202,3 +202,7 @@ export enum TOKEN_REDUCE_ONLY_OPTIONS {
 }
 
 export const PRIVATE_MODE_STRING = '****'
+
+export const MANGO_MAINNET_GROUP = new PublicKey(
+  '78b8f4cGCwmZ9ysPFMWLaLTkkaYnUjwMJYStWe5RTSSX',
+)

utils/governance/voteStakeRegistryClient.ts

@@ -1,8 +1,8 @@
-import { Program, Provider, web3 } from '@coral-xyz/anchor'
+import { Program, Provider } from '@coral-xyz/anchor'
 import { Idl } from '@coral-xyz/anchor'
 import { PublicKey } from '@solana/web3.js'
 
-export const DEFAULT_VSR_ID = new web3.PublicKey(
+export const DEFAULT_VSR_ID = new PublicKey(
   '4Q6WW2ouZ6V3iaNm56MTd5n2tnTm4C5fiH8miFHnAFHo',
 )
 
@@ -14,10 +14,10 @@ export class VsrClient {
 
   static async connect(
     provider: Provider,
-    programId: web3.PublicKey,
+    programId: PublicKey,
     devnet?: boolean,
   ): Promise<VsrClient> {
-    const idl = await Program.fetchIdl(new PublicKey(DEFAULT_VSR_ID), provider)
+    const idl = await Program.fetchIdl(DEFAULT_VSR_ID, provider)
     return new VsrClient(
       new Program<Idl>(idl as Idl, programId, provider),
       devnet,