🧪 Add Frontend Unit Tests

[Mosas2000]

Description

The project has comprehensive smart contract tests but no frontend tests. Adding tests will improve code quality and prevent regressions.

Current State

• tests/ directory contains contract tests only
• No frontend testing setup
• No test scripts in frontend package.json

Proposed Testing Stack

1. Test Framework

• Vitest (already in root package.json)
• React Testing Library for component tests
• MSW (Mock Service Worker) for API mocking

2. Test Categories

Unit Tests

• Utility functions (helpers.ts, validation.ts)
• Custom hooks (useMarkets, useContract)
• Component rendering

Integration Tests

• User flows (connect wallet → place stake → claim)
• Form submissions
• Error handling

3. Key Tests to Write

// helpers.test.ts
describe('parseMarketData', () => {
  it('parses valid market data correctly');
  it('handles missing fields');
  it('converts types appropriately');
});

describe('calculateOdds', () => {
  it('returns 50/50 for empty pool');
  it('calculates correct percentages');
  it('handles large numbers');
});

// useMarkets.test.ts
describe('useMarkets', () => {
  it('fetches markets on mount');
  it('handles loading state');
  it('handles errors gracefully');
  it('auto-refreshes periodically');
});

// TradePage.test.tsx
describe('TradePage', () => {
  it('renders market details');
  it('disables trading when not connected');
  it('validates stake amount');
  it('submits transaction correctly');
});

4. Coverage Goals

• Utilities: 90%
• Hooks: 80%
• Components: 70%

Files to Create

• frontend/vitest.config.ts
• frontend/src/setupTests.ts
• frontend/src/utils/__tests__/helpers.test.ts
• frontend/src/hooks/__tests__/useMarkets.test.ts
• frontend/src/pages/__tests__/TradePage.test.tsx
• frontend/src/components/__tests__/MarketCard.test.tsx

Package.json Updates

{
  "scripts": {
    "test": "vitest",
    "test:coverage": "vitest --coverage",
    "test:ui": "vitest --ui"
  },
  "devDependencies": {
    "@testing-library/react": "^14.0.0",
    "@testing-library/jest-dom": "^6.0.0",
    "msw": "^2.0.0",
    "@vitest/coverage-v8": "^1.0.0"
  }
}

Priority

🟡 Medium - Important for maintainability