Skip to content

Add Unit Tests For ToggleDarkMode ComponentΒ #728

@melbinroy97

Description

@melbinroy97

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:

  1. Rendering tests: Verify component renders correctly
  2. State initialization: Test light/dark mode based on backgroundColor from store
  3. User interactions: Test toggle button clicks
  4. Store integration: Verify toggleDarkMode function is called
  5. DOM updates: Ensure data-theme attribute changes correctly
  6. Props validation: Verify size and className props pass correctly
  7. 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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions