81 lines
2.4 KiB
Markdown
81 lines
2.4 KiB
Markdown
# 10. Test Theme Switching and Light/Dark Mode
|
|
|
|
meta:
|
|
id: theme-refactoring-10
|
|
feature: theme-refactoring-json-format
|
|
priority: P0
|
|
depends_on: [theme-refactoring-05, theme-refactoring-09]
|
|
tags: [testing, verification]
|
|
|
|
objective:
|
|
- Comprehensive testing of theme switching functionality
|
|
- Verify light/dark mode switching works correctly
|
|
- Test all theme JSON files load and apply correctly
|
|
- Ensure theme persistence works across sessions
|
|
|
|
deliverables:
|
|
- `src/utils/theme.test.ts` - Theme utility tests
|
|
- `src/context/ThemeContext.test.ts` - Context tests
|
|
- Test results showing all themes work correctly
|
|
|
|
steps:
|
|
- Step 10.1: Create `src/utils/theme.test.ts`
|
|
- Test theme loading functions
|
|
- Test theme resolution logic
|
|
- Test color reference resolution
|
|
- Test ANSI color conversion
|
|
|
|
- Step 10.2: Create `src/context/ThemeContext.test.ts`
|
|
- Test theme context initialization
|
|
- Test theme switching
|
|
- Test mode switching
|
|
- Test system theme detection
|
|
- Test localStorage persistence
|
|
- Test reactive theme updates
|
|
|
|
- Step 10.3: Manual testing
|
|
- Test switching between all themes (catppuccin, gruvbox, tokyo, nord)
|
|
- Test light/dark mode switching
|
|
- Test system theme detection
|
|
- Test theme persistence (close and reopen app)
|
|
- Test custom theme loading
|
|
|
|
- Step 10.4: Visual verification
|
|
- Verify all theme colors are correct
|
|
- Check readability of text colors
|
|
- Verify background colors are appropriate
|
|
- Check that all UI elements use theme colors
|
|
|
|
tests:
|
|
- Unit:
|
|
- Run all theme utility tests
|
|
- Run all theme context tests
|
|
- Verify all tests pass
|
|
|
|
- Integration/e2e:
|
|
- Test theme switching in application
|
|
- Test light/dark mode switching
|
|
- Test theme persistence
|
|
- Test system theme detection
|
|
|
|
acceptance_criteria:
|
|
- All unit tests pass
|
|
- All integration tests pass
|
|
- Theme switching works correctly
|
|
- Light/dark mode switching works correctly
|
|
- All themes load and apply correctly
|
|
- Theme persistence works across sessions
|
|
|
|
validation:
|
|
- Run: `bun test src/utils/theme.test.ts`
|
|
- Run: `bun test src/context/ThemeContext.test.ts`
|
|
- Run: `bun test` - Run all tests
|
|
- Manual testing of all themes
|
|
- Visual verification of theme appearance
|
|
|
|
notes:
|
|
- Test with actual terminal to verify system theme detection
|
|
- Verify all theme colors are visually appealing
|
|
- Check for any color contrast issues
|
|
- Test edge cases (missing themes, invalid colors)
|