Skip to content

test: add dark mode coverage for UI components#297

Open
MerlinTheWhiz wants to merge 1 commit into
XStreamRollz:mainfrom
MerlinTheWhiz:test/dark-mode-coverage
Open

test: add dark mode coverage for UI components#297
MerlinTheWhiz wants to merge 1 commit into
XStreamRollz:mainfrom
MerlinTheWhiz:test/dark-mode-coverage

Conversation

@MerlinTheWhiz

Copy link
Copy Markdown

Summary

Add systematic dark mode coverage verification for all UI components. Previously only one component (stream-status-badge.test.tsx) existed with no theme-switching tests. This PR adds a comprehensive test suite that renders every shadcn/ui component (50+) in both light and dark mode and asserts zero console.error calls, catching contrast issues, invisible text, and missing borders in dark mode before they reach users.

Changes:

  • Create app/lib/test-utils.tsx — reusable buildThemeTest() helper that generates light + dark test cases
  • Add global useIsMobile mock in app/jest.setup.ts (required by sidebar component tests)
  • Create app/components/ui/dark-mode-coverage.test.tsx — 134 test cases covering 50+ components in both themes
  • Mock next-themes and embla-carousel-react for test isolation

Related issues

Closes #233

Type of change

  • feat
  • fix
  • docs
  • chore
  • test
  • ci

Testing performed

All 182 tests pass (134 new + 48 existing):

cd app
npx jest --no-cache

Result: Test Suites: 12 passed, 12 total | Tests: 182 passed, 182 total

Screenshots (if applicable)

image

Checklist — author

  • I rebased onto origin/main and resolved conflicts.
  • I ran the quality gates locally: npm run lint, npm run build, npm test.
  • Title follows Conventional Commits and references the issue (see above).
  • I added/updated tests where applicable and they pass locally.
  • No new TypeScript errors or lint warnings introduced.
  • I updated documentation if the change affects public behavior.
  • Screenshots included for UI changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

a11y: Add dark mode coverage verification for all UI components

1 participant