feat(ci): add unit tests (#24)

* test: add unit tests for voteConfig and stages (Phase 1)

Add comprehensive unit tests for:
- src/lib/voteConfig.ts: 20 tests covering VOTE_CONFIG structure, getVoteConfig, and getVoteValue functions
- src/lib/constants/stages.ts: 6 tests for DEFAULT_STAGE_COLOR constant

All tests passing (50/50). Phase 1 of the unit testing plan is now complete.

* test: add unit tests for UI components (Phase 2)

Set up React Testing Library and add comprehensive unit tests for:
- Component tests (87 new tests):
  - GenreBadge.tsx: 9 tests with mocked useGenres hook
  - StageBadge.tsx: 11 tests for rendering and styling
  - StagePin.tsx: 9 tests with mocked useStageQuery hook
  - ui/badge.tsx: 10 tests for variants and props
  - ui/button.tsx: 20 tests for variants, sizes, and interactions
  - ui/card.tsx: 28 tests for all card components

Infrastructure:
- Added @testing-library/react, @testing-library/jest-dom, @testing-library/user-event
- Created test setup file (src/test/setup.ts) for jest-dom matchers
- Updated vite.config.test.ts to include setupFiles

Total: 137 tests passing (Phase 1 + Phase 2)

* test: add unit tests for custom hooks (Phase 3)

Add comprehensive unit tests for custom hooks:
- use-mobile.tsx: 10 tests for responsive breakpoint detection
- useOnlineStatus.ts: 10 tests for online/offline status tracking
- useScrollVisibility.ts: 14 tests for IntersectionObserver wrapper
- use-toast.ts: 17 tests for toast state management with reducer
- useCookieConsent.ts: 16 tests for GDPR consent management

All hooks tests include:
- State initialization
- Event listener setup and cleanup
- State updates and transitions
- Edge cases and error handling
- Mock implementations for browser APIs

Total: 204 tests passing (Phases 1-3 combined)

* test: add unit tests for core utilities (Phase 4)

Add comprehensive unit tests for core utility functions:
- utils.ts: 12 tests for cn() function (class name merging with Tailwind)
- stageUtils.ts: 11 tests for sortStagesByOrder() sorting algorithm
- markdown.ts: 21 tests for parseMarkdown() with GFM support
- timeUtils.ts: 44 tests for time formatting and timezone conversion functions
  - formatTimeRange, formatDateTime, formatTimeOnly
  - toDatetimeLocal, toISOString
  - combineDateAndTime, convertLocalTimeToUTC

All utilities tests include:
- Edge cases and null/undefined handling
- Format validation
- Timezone conversions
- Complex data scenarios

Total: 292 tests passing (Phases 1-4 combined)

* ci: add unit tests workflow

Add GitHub Actions workflow to run Vitest unit tests:
- Runs on push to main/develop and on PRs
- Executes all 292 unit tests
- Generates coverage report on PRs
- Uploads coverage artifacts for review

This provides fast feedback (~20s) compared to E2E tests.

* fix: resolve vitest webidl-conversions errors

Fix unhandled errors with webidl-conversions and whatwg-url:
- Add pool: "forks" to vitest config for better process isolation
- Add global polyfills for Set, Map, WeakMap, WeakSet in test setup

This resolves the "Cannot read properties of undefined" errors
that were occurring during module loading in the test environment.

All 292 tests now pass successfully.

* fix: add globalSetup to fix webidl-conversions errors

Add globalSetup file to polyfill ArrayBuffer and SharedArrayBuffer
properties before any test modules are loaded. This prevents the
webidl-conversions package from throwing errors during module import.

Changes:
- Created vitest.global-setup.ts with early polyfills
- Updated vite.config.test.ts to use globalSetup
- Enhanced src/test/setup.ts with additional polyfills

All 292 tests now pass without unhandled errors.

* fix: resolve TypeScript and oxlint errors in test files

- Fixed timeUtils test for cross-day time ranges by using times farther apart
  to ensure they span different days regardless of timezone conversion
- Fixed unused variable in useScrollVisibility test
- Replaced any types with proper TypeScript types using ReturnType utility
- Added optional chaining for potentially undefined function calls in use-toast test
- Initialized variables with proper types instead of undefined in use-toast test
- Fixed update method call to include required id property in use-toast test
- Added null coalescing for querySelector result in card test
- Added type annotations and assertions for nullable stage_order values in stageUtils tests

* fix: move webidl-conversions polyfill to config file top

Apply ArrayBuffer/SharedArrayBuffer polyfills at the very top of the
vite.config.test.ts file, before any imports. This ensures the polyfills
are applied before webidl-conversions is loaded by any dependencies.

The previous globalSetup approach didn't work in CI because globalSetup
runs in a separate context after modules are already loaded. Moving the
polyfill to the config file ensures it runs early enough to prevent
'Cannot read properties of undefined (reading get)' errors in Node 18.

* ci: upgrade Node.js version from 18 to 22

Update CI workflows to use Node.js 22 to match local development
environment. This provides:
- Better compatibility with modern dependencies
- Native support for newer JavaScript features
- No need for webidl-conversions polyfills
- Consistent behavior between local and CI environments

* chore: add vite coverage

* chore: upgrade vite deps

* fix

* move test files

* chore: update vite deps

* fix: remove ref to vite.config.test

---------

Co-authored-by: Claude <[email protected]>

Author: chiptus

.github/workflows/e2e-tests.yml

@@ -24,7 +24,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
           cache: "pnpm"
 
       - name: Install dependencies
@@ -65,7 +65,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
           cache: "pnpm"
 
       - name: Install dependencies

.github/workflows/unit-tests.yml

@@ -0,0 +1,41 @@
+name: Unit Tests
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  test:
+    name: Run Unit Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run unit tests
+        run: pnpm test
+
+      - name: Run unit tests with coverage
+        run: pnpm run test:coverage
+        if: github.event_name == 'pull_request'
+
+      - name: Upload coverage reports
+        uses: actions/upload-artifact@v4
+        if: github.event_name == 'pull_request'
+        with:
+          name: coverage-report
+          path: coverage/
+          retention-days: 7

package.json

@@ -12,9 +12,9 @@
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "preview": "vite preview",
-    "test": "vitest --config vite.config.test.ts",
-    "test:ui": "vitest --ui --config vite.config.test.ts",
-    "test:coverage": "vitest run --coverage --config vite.config.test.ts",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
     "test:e2e": "playwright test",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:headed": "playwright test --headed",
@@ -91,22 +91,27 @@
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.9.3",
-    "vite-plugin-pwa": "^1.0.1",
     "workbox-background-sync": "^7.3.0",
     "workbox-precaching": "^7.3.0",
     "workbox-routing": "^7.3.0",
     "workbox-strategies": "^7.3.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "vite-plugin-pwa": "^1.2.0",
     "@playwright/test": "^1.54.1",
     "@tailwindcss/typography": "^0.5.15",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
-    "@vitest/ui": "^3.2.4",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "@vitest/coverage-v8": "^4.0.15",
+    "@vitest/ui": "^4.0.15",
     "autoprefixer": "^10.4.20",
+    "baseline-browser-mapping": "^2.9.5",
     "globals": "^15.9.0",
     "husky": "^9.1.7",
     "jsdom": "^27.0.0",
@@ -118,8 +123,8 @@
     "tailwindcss": "^3.4.11",
     "tsx": "^4.20.3",
     "typescript": "^5.5.3",
-    "vite": "^5.4.1",
-    "vitest": "^3.2.4"
+    "vite": "^7.2.7",
+    "vitest": "^4.0.15"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [