flyer-crawler.projectium.com/src/components/DarkModeToggle.test.tsx

// src/components/DarkModeToggle.test.tsx
import React from 'react';
import { screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { DarkModeToggle } from './DarkModeToggle';
import { renderWithProviders } from '../tests/utils/renderWithProviders';

// Mock the icon components to isolate the toggle's logic
vi.mock('./icons/SunIcon', () => ({
  SunIcon: () => <div data-testid="sun-icon" />,
}));
vi.mock('./icons/MoonIcon', () => ({
  MoonIcon: () => <div data-testid="moon-icon" />,
}));

describe('DarkModeToggle', () => {
  const mockOnToggle = vi.fn();

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('should render in light mode state', () => {
    renderWithProviders(<DarkModeToggle isDarkMode={false} onToggle={mockOnToggle} />);

    const checkbox = screen.getByRole('checkbox');
    expect(checkbox).not.toBeChecked();
    expect(screen.getByTestId('sun-icon')).toBeInTheDocument();
    expect(screen.queryByTestId('moon-icon')).not.toBeInTheDocument();
  });

  it('should render in dark mode state', () => {
    renderWithProviders(<DarkModeToggle isDarkMode={true} onToggle={mockOnToggle} />);

    const checkbox = screen.getByRole('checkbox');
    expect(checkbox).toBeChecked();
    expect(screen.getByTestId('moon-icon')).toBeInTheDocument();
    expect(screen.queryByTestId('sun-icon')).not.toBeInTheDocument();
  });

  it('should call onToggle when the label is clicked', () => {
    renderWithProviders(<DarkModeToggle isDarkMode={false} onToggle={mockOnToggle} />);

    // Clicking the label triggers the checkbox change
    const label = screen.getByTitle('Switch to Dark Mode');
    fireEvent.click(label);

    expect(mockOnToggle).toHaveBeenCalledTimes(1);
  });
});