-
-
Notifications
You must be signed in to change notification settings - Fork 213
Description
Add unit tests for ToggleDarkMode component
Feature Request ποΈ
This feature request proposes adding comprehensive unit tests for the ToggleDarkMode component to improve test coverage and code quality.
Use Case
Currently, the ToggleDarkMode component has no unit tests. As the codebase grows and more contributors join, having proper test coverage ensures:
- The dark mode toggle functionality works correctly across updates
- Store integration (Zustand) remains stable
- Regressions are caught early before deployment
- New contributors can understand component behavior through tests
Possible Solution
Create a test file at src/tests/components/ToggleDarkMode.test.tsx with the following test coverage:
- Rendering tests: Verify component renders correctly
- State initialization: Test light/dark mode based on backgroundColor from store
- User interactions: Test toggle button clicks
- Store integration: Verify toggleDarkMode function is called
- DOM updates: Ensure data-theme attribute changes correctly
- Props validation: Verify size and className props pass correctly
- Multiple toggles: Test sequential click behavior
Technology stack: Vitest + React Testing Library (already configured in the project)
Context
After analyzing the codebase, I noticed that only 3 out of 18 components have unit tests (Footer, Navbar, PlaygroundSidebar). This leaves significant gaps in test coverage.
I've already implemented the tests locally and they pass successfully (10 test cases, all green). I'd like to contribute this to help improve the project's quality and demonstrate my commitment to the Accord Project community.
Detailed Description
The proposed test suite includes 10 comprehensive test cases:
- β Renders the toggle component
- β Initializes with light mode when backgroundColor is white (#ffffff)
- β Initializes with dark mode when backgroundColor is dark (#121212)
- β Calls toggleDarkMode when clicked
- β Sets data-theme to dark when toggling from light mode
- β Sets data-theme to light when toggling from dark mode
- β Updates isDarkMode state when backgroundColor changes
- β Passes correct size prop (60) to DarkModeToggle
- β Applies correct className ('dark-mode-toggle')
- β Toggles between states correctly on multiple clicks
This follows the existing test patterns in the project (mocking dependencies, using Vitest + React Testing Library) and integrates seamlessly with the current test suite (all 44 tests pass including the new ones).