Add Vitest + React Testing Library setup for viewer-frontend #63

ilia · 2026-07-14T17:35:57-05:00

ilia commented

2026-07-14 17:35:57 -05:00

Summary

Adds frontend unit test infra to viewer-frontend: Vitest (jsdom env) + React Testing Library + jest-dom matchers, via vitest.config.ts / vitest.setup.ts.
Includes jsdom polyfills commonly needed by this codebase's Radix UI components and layout-aware hooks (matchMedia, ResizeObserver, pointer capture, offsetParent).
Seeds the suite with 46 tests across 4 files:
- lib/__tests__/utils.test.ts — cn() class merging, isValidEmail() edge cases
- lib/__tests__/photo-utils.test.ts — isUrl, isVideo, getImageSrc, getVideoSrc, getWebPlaybackStreamUrl
- hooks/__tests__/useFocusTrap.test.tsx — focus entry, Tab/Shift+Tab wrapping, focus restoration on deactivation
- components/__tests__/ThemeToggle.test.tsx — accessible labels/aria-pressed for both themes, click toggling (mocks next-themes)
New npm scripts: npm test, npm run test:watch, npm run test:coverage.
Documents the setup in viewer-frontend/README.md.

Scope note: intentionally avoided touching files with in-flight uncommitted changes (IdleLogoutHandler.tsx, SessionProviderWrapper.tsx, verify-email/route.ts, .gitea/workflows/ci.yml) to not collide with concurrent work. No CI job wires up npm test yet — recommend adding one once ci.yml settles.

Test plan

npm test — 46/46 passing locally
npx tsc --noEmit — clean
Wire a CI job to run npm test for viewer-frontend (follow-up)

## Summary - Adds frontend unit test infra to `viewer-frontend`: Vitest (jsdom env) + React Testing Library + jest-dom matchers, via `vitest.config.ts` / `vitest.setup.ts`. - Includes jsdom polyfills commonly needed by this codebase's Radix UI components and layout-aware hooks (`matchMedia`, `ResizeObserver`, pointer capture, `offsetParent`). - Seeds the suite with 46 tests across 4 files: - `lib/__tests__/utils.test.ts` — `cn()` class merging, `isValidEmail()` edge cases - `lib/__tests__/photo-utils.test.ts` — `isUrl`, `isVideo`, `getImageSrc`, `getVideoSrc`, `getWebPlaybackStreamUrl` - `hooks/__tests__/useFocusTrap.test.tsx` — focus entry, Tab/Shift+Tab wrapping, focus restoration on deactivation - `components/__tests__/ThemeToggle.test.tsx` — accessible labels/aria-pressed for both themes, click toggling (mocks `next-themes`) - New npm scripts: `npm test`, `npm run test:watch`, `npm run test:coverage`. - Documents the setup in `viewer-frontend/README.md`. Scope note: intentionally avoided touching files with in-flight uncommitted changes (`IdleLogoutHandler.tsx`, `SessionProviderWrapper.tsx`, `verify-email/route.ts`, `.gitea/workflows/ci.yml`) to not collide with concurrent work. No CI job wires up `npm test` yet — recommend adding one once `ci.yml` settles. ## Test plan - [x] `npm test` — 46/46 passing locally - [x] `npx tsc --noEmit` — clean - [ ] Wire a CI job to run `npm test` for viewer-frontend (follow-up)

ilia added 1 commit 2026-07-14 17:35:58 -05:00

Add Vitest + React Testing Library setup for viewer-frontend

CI / skip-ci-check (pull_request) Successful in 5s

Details

CI / docker-ci (pull_request) Successful in 6s

Details

CI / secret-scan (pull_request) Successful in 11s

Details

CI / e2e (pull_request) Successful in 28s

Details

975d0c809d

Establishes frontend unit testing infra (jsdom env, RTL, jest-dom
matchers, common Radix/jsdom polyfills) and seeds it with tests for
lib/utils.ts, lib/photo-utils.ts, hooks/useFocusTrap.ts, and
ThemeToggle.tsx (46 tests total).

ilia merged commit 62d5a66ffa into dev

2026-07-14 17:39:59 -05:00

ilia referenced this issue from a commit

2026-07-14 17:40:00 -05:00

Merge pull request 'Add Vitest + React Testing Library setup for viewer-frontend' (#63) from test/viewer-frontend-vitest-setup into dev

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ilia/punimtag#63