chore: add unit testing

refs #49

Author: elboletaire

.github/workflows/netlify.yml

@@ -31,6 +31,9 @@ jobs:
       - name: Install
         run: pnpm i
 
+      - name: Test
+        run: pnpm test
+
       - name: Build DAVINCI UI
         run: pnpm build
         env:

package.json

@@ -7,7 +7,10 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "preview": "vite preview",
-    "lint": "tsc -b && eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    "lint": "tsc -b && eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -81,11 +84,13 @@
     "@typescript-eslint/eslint-plugin": "^8.37.0",
     "@typescript-eslint/parser": "^8.37.0",
     "@vitejs/plugin-react": "^4.3.3",
+    "@vitest/coverage-v8": "^4.0.16",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.31.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "jsdom": "^27.3.0",
     "postcss": "^8.5",
     "prettier": "3.5.3",
     "tailwindcss": "^3.4.17",
@@ -94,6 +99,7 @@
     "vite": "^7.0.5",
     "vite-plugin-pwa": "^1.0.1",
     "vite-tsconfig-paths": "^5.1.2",
+    "vitest": "^4.0.16",
     "workbox-window": "^7.3.0"
   },
   "packageManager": "pnpm@10.12.1"

pnpm-lock.yaml

@@ -17,6 +17,7 @@ import { useElection } from '~contexts/election-context'
 import { useVocdoniApi } from '~contexts/vocdoni-api-context'
 import { usePersistedVote } from '~hooks/use-persisted-vote'
 import { useUnifiedWallet } from '~hooks/use-unified-wallet'
+import { getBinaryArray, padTo } from '~lib/vote-utils'
 import { truncateAddress } from '~lib/web3-utils'
 import { NetworkValidationBanner } from './network-validation-banner'
 import RelativeTimeRemaining from './relative-time-remaining'
@@ -1057,17 +1058,3 @@ export const WalletEligibilityStatus = () => {
     </div>
   )
 }
-
-export function getBinaryArray(positions: string[], value: number = 1): number[] {
-  const result = Array(8).fill(0)
-  positions.forEach((posStr) => {
-    const pos = parseInt(posStr, 10)
-    if (!isNaN(pos) && pos >= 0 && pos < 8) {
-      result[pos] = value
-    }
-  })
-  return result
-}
-
-const padTo = (arr: number[], length: number = 8): number[] =>
-  arr.concat(Array(length - arr.length).fill(0)).slice(0, length)

src/components/vote-display.tsx

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest'
+
+import { cn, enumToReverseObject, formatInterval, formatNanosecondsInterval, truncateText } from './utils'
+
+describe('utils', () => {
+  describe('cn', () => {
+    it('merges tailwind conflicting classes', () => {
+      expect(cn('p-2', 'p-4')).toBe('p-4')
+      expect(cn('text-red-500', 'text-blue-500')).toBe('text-blue-500')
+    })
+
+    it('supports conditional values', () => {
+      const shouldInclude = false
+      expect(cn('a', shouldInclude && 'b', undefined, null, 'c')).toBe('a c')
+    })
+  })
+
+  describe('truncateText', () => {
+    it('returns the original string when under the limit', () => {
+      expect(truncateText('hello', 10)).toBe('hello')
+    })
+
+    it('truncates and appends ellipsis by default', () => {
+      expect(truncateText('hello world', 8)).toBe('hello...')
+    })
+
+    it('uses a custom ellipsis', () => {
+      expect(truncateText('hello world', 8, '…')).toBe('hello w…')
+    })
+
+    it('truncates ellipsis itself when limit is shorter than ellipsis', () => {
+      expect(truncateText('hello world', 2, '...')).toBe('..')
+    })
+  })
+
+  describe('formatInterval', () => {
+    it('formats milliseconds into a human readable string', () => {
+      expect(formatInterval(0)).toBe('')
+      expect(formatInterval(1000)).toBe('1 second')
+      expect(formatInterval(61_000)).toBe('1 minute 1 second')
+    })
+  })
+
+  describe('formatNanosecondsInterval', () => {
+    it('converts nanoseconds to milliseconds before formatting', () => {
+      expect(formatNanosecondsInterval(1_000_000_000)).toBe('1 second')
+    })
+  })
+
+  describe('enumToReverseObject', () => {
+    it('builds a numeric reverse map from a TS numeric enum-like object', () => {
+      const enumLike = { 0: 'A', 1: 'B', A: 0, B: 1 } as const
+      expect(enumToReverseObject(enumLike)).toEqual({ 0: 'A', 1: 'B' })
+    })
+  })
+})

src/lib/utils.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest'
+
+import { getBinaryArray, padTo } from './vote-utils'
+
+describe('vote-utils', () => {
+  describe('getBinaryArray', () => {
+    it('returns an array of length 8 with 1s in the selected positions', () => {
+      expect(getBinaryArray(['0', '3'])).toEqual([1, 0, 0, 1, 0, 0, 0, 0])
+    })
+
+    it('uses the provided numeric value', () => {
+      expect(getBinaryArray(['1', '7'], 5)).toEqual([0, 5, 0, 0, 0, 0, 0, 5])
+    })
+
+    it('ignores invalid positions', () => {
+      expect(getBinaryArray(['-1', '8', 'foo', '2'])).toEqual([0, 0, 1, 0, 0, 0, 0, 0])
+    })
+  })
+
+  describe('padTo', () => {
+    it('pads an array with zeros up to length', () => {
+      expect(padTo([1, 2], 5)).toEqual([1, 2, 0, 0, 0])
+    })
+
+    it('truncates an array down to length', () => {
+      expect(padTo([1, 2, 3, 4], 2)).toEqual([1, 2])
+    })
+  })
+})
+

src/lib/vote-utils.test.ts

@@ -0,0 +1,15 @@
+export function getBinaryArray(positions: string[], value: number = 1): number[] {
+  const result = Array(8).fill(0)
+  positions.forEach((posStr) => {
+    const pos = parseInt(posStr, 10)
+    if (!Number.isNaN(pos) && pos >= 0 && pos < 8) {
+      result[pos] = value
+    }
+  })
+  return result
+}
+
+export function padTo(arr: number[], length: number = 8): number[] {
+  return arr.concat(Array(Math.max(0, length - arr.length)).fill(0)).slice(0, length)
+}
+

src/lib/vote-utils.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+
+import { getNetworkName, truncateAddress } from './web3-utils'
+
+describe('web3-utils', () => {
+  describe('truncateAddress', () => {
+    it('returns empty string for empty input', () => {
+      expect(truncateAddress('')).toBe('')
+    })
+
+    it('truncates long addresses with defaults', () => {
+      expect(truncateAddress('0x1234567890abcdef')).toBe('0x1234...cdef')
+    })
+
+    it('returns the original address if it is shorter than the requested truncation', () => {
+      expect(truncateAddress('0x1234', 6, 4)).toBe('0x1234')
+    })
+  })
+
+  describe('getNetworkName', () => {
+    it('matches known hex chain ids', () => {
+      expect(getNetworkName('0xaa36a7')).toBe('Sepolia')
+    })
+
+    it('converts decimal ids to hex', () => {
+      expect(getNetworkName(1)).toBe('Ethereum Mainnet')
+    })
+
+    it('returns Unknown Network for unknown ids', () => {
+      expect(getNetworkName('0xdeadbeef')).toBe('Unknown Network')
+    })
+  })
+})
+

src/lib/web3-utils.test.ts

@@ -9,6 +9,17 @@ const viteconfig = defineConfig(({ mode }) => {
   process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '') }
 
   return {
+    test: {
+      environment: 'jsdom',
+      globals: true,
+      include: ['src/**/*.test.{ts,tsx}'],
+      coverage: {
+        provider: 'v8',
+        reporter: ['text', 'html'],
+        include: ['src/lib/**/*.ts'],
+        exclude: ['src/lib/**/*.d.ts'],
+      },
+    },
     plugins: [
       react(),
       tsconfigPaths(),