[Test] Phase 1: Component Tests (Vitest + Testing Library)

[realproject7]

Parent: #426

Summary

Add component-level tests using Vitest (already installed) + React Testing Library.

Setup

• Install: @testing-library/react, @testing-library/jest-dom, @testing-library/user-event, jsdom
• Update vitest.config.ts: add environment: 'jsdom' and setup file for jest-dom matchers
• Add test script to CI workflow (.github/workflows/ci.yml)

Components to Test

StoryCard (src/components/StoryCard.tsx)

• Renders title, author, genre correctly
• Truncates long titles
• Links to correct story page (/story/[id])
• Moleskine hover animation class applied

StoryGrid (src/components/StoryGrid.tsx)

• Renders correct number of shelf rows
• useShelfSize() returns 2 on mobile, 3 on desktop
• chunk() helper groups items correctly
• Empty state when no storylines

FilterBar (src/components/FilterBar.tsx)

• All dropdowns render (writer, genre, lang, sort)
• Clicking token toggles dropdown open/close
• Selecting option navigates to correct URL params
• Click outside closes dropdown
• Active option highlighted

TradingWidget (src/components/TradingWidget.tsx)

• Buy/sell tab toggle
• Amount input validation (non-negative, numeric)
• Insufficient balance warning shown
• Slippage display
• Disabled state when wallet not connected

NavBar (src/components/NavBar.tsx)

• Logo links to home
• Wallet connect button renders
• Navigation links present

Acceptance Criteria

• All above components have tests
• npm test passes
• Tests added to CI workflow
• No mocking of Supabase or RPC — test rendering and interaction logic only

Dependencies

None — can start immediately (Vitest already installed)

[realproject7]

Component tests complete. 25 tests across NavBar, StoryCard, StoryGrid, FilterBar. TradingWidget skipped — will be covered by E2E tests (#428). PR #437 merged.