test(CustomizeTypes): add theme contrast tests#5743
Conversation
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds a Vitest suite to validate structural correctness and basic visual-contrast invariants for the dark, light, and auto-theme mappings used by the Customize UI/theme system.
Changes:
- Introduces tests for required theme tokens, hex formatting, and minimum contrast ratios.
- Adds checks for theme key presence/absence (
auto,random) and optionalnegativehandling. - Verifies auto-theme light/dark constants align with canonical presets.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| expect(AUTO_THEME_LIGHT).toBe(themes.light); | ||
| expect(AUTO_THEME_DARK).toBe(themes.dark); |
| const partial: Partial<BadgeTheme> = { | ||
| bg: 'aabbcc' as HexColor, | ||
| text: '112233' as HexColor, | ||
| accent: 'ff5500' as HexColor, | ||
| // negative intentionally omitted | ||
| }; | ||
|
|
||
| expect(partial.negative).toBeUndefined(); | ||
|
|
||
| // Accessing the optional property and falling back mirrors production usage | ||
| const negativeColor = partial.negative ?? 'ff0000'; | ||
| expect(negativeColor).toBe('ff0000'); |
| expect(themes['auto' as string]).toBeUndefined(); | ||
| expect(themes['random' as string]).toBeUndefined(); |
| it('dark and light theme presets expose all required color properties and are structurally valid', () => { | ||
| for (const key of ['dark', 'light'] as ThemeKey[]) { | ||
| const theme = themes[key]; | ||
| expect(theme).toBeDefined(); | ||
|
|
||
| // Every required token must be a non-empty string | ||
| for (const token of REQUIRED_COLOR_TOKENS) { | ||
| expect(theme[token]).toBeDefined(); | ||
| expect(typeof theme[token]).toBe('string'); | ||
| expect((theme[token] as string).length).toBeGreaterThan(0); | ||
| } |
| // ──────────────────────────────────────────────────────────────────────── | ||
| // 2. Minimum contrast between text/accent and background | ||
| // ──────────────────────────────────────────────────────────────────────── | ||
| it('dark and light themes maintain sufficient text-on-background contrast and no required color tokens are missing', () => { |
| // No required token may be missing | ||
| for (const token of REQUIRED_COLOR_TOKENS) { | ||
| expect(theme[token]).toBeDefined(); | ||
| } |
📦 Next.js Bundle Size Report (Gzipped Sizes)✨ No significant bundle size changes detected. 📊 Summary of Totals
|
|
hi ,@JhaSourav07, |
Aamod007
added
level:intermediate
Aamod007
left a comment
Aamod007
left a comment
There was a problem hiding this comment.
Nice focused test coverage. The assertions in app/customize/types.theme-contrast.test.ts line up well with the actual theme helpers: structural checks for themes.dark/themes.light, contrast validation through getLuminance, fallback coverage for optional fields, and the AUTO_THEME_LIGHT/AUTO_THEME_DARK mapping check all make the theme contract clearer without touching production code.
|
🎉 Congratulations @ArchiGajera! Your PR has been successfully merged. 🚀 Thank you for contributing to CommitPulse. Your work helps us build a better tool for the community.
Keep building! 💻✨ |
Description
This PR adds a dedicated Vitest test suite for
app/customize/types.tsto verify Dark and Light Prefers-Color-Scheme Visual Cohesion. The implementation includes five isolated and deterministic test cases that validate theme configuration consistency across light and dark modes, ensure expected color-related properties remain intact, verify fallback behavior for optional or missing theme values, and confirm that styling mappings preserve visual cohesion without introducing runtime issues. The production code remains unchanged, no unnecessary mocks were introduced, and the tests are designed to be stable and CI-friendly while satisfying the requirements of verify Dark and Light Prefers-Color-Scheme Visual Cohesion.Fixes #4458
Pillar
Visual Preview
N/A
Checklist before requesting a review:
CONTRIBUTING.mdfile.localhost:3000/api/streak?user=YOUR_USERNAME).npm run formatandnpm run lintlocally and resolved all errors (CI will fail otherwise).feat(themes): ...,fix(calculate): ...).README.mdif I added a new theme or URL parameter.