/** @vitest-environment jsdom */
import { screen, fireEvent } from '@testing-library/react';
import { renderWithProviders as render } from '../../../test/render';
import { describe, it, expect, beforeEach } from 'vitest';
import { ThemeToggle } from './ThemeToggle';
import React from 'react';
describe('ThemeToggle', () => {
beforeEach(() => {
document.documentElement.classList.remove('dark');
window.localStorage.clear();
});
it('toggles theme when clicked', () => {
render();
const button = screen.getByRole('button');
// Initial: light (no dark class)
expect(document.documentElement.classList.contains('dark')).toBe(false);
// Click to dark
fireEvent.click(button);
expect(document.documentElement.classList.contains('dark')).toBe(true);
// Click back to light
fireEvent.click(button);
expect(document.documentElement.classList.contains('dark')).toBe(false);
});
it('detects initial dark theme', () => {
// ThemeProvider resolves its initial theme from localStorage (storageKey
// 'xertica-theme'), not from a pre-existing class on .
window.localStorage.setItem('xertica-theme', 'dark');
render();
// Check aria-label or specific icon
expect(screen.getByLabelText('Mudar para tema claro')).toBeInTheDocument();
});
});