// frontend/src/App.test.tsx

import { render, waitFor } from '@testing-library/react';
import { beforeEach, describe, expect, it, vi } from 'vitest';
import App from './App';

// Setup mocks
const localStorageMock = {
    getItem: vi.fn(),
    setItem: vi.fn(),
    removeItem: vi.fn(),
    clear: vi.fn(),
    theme: 'light',
};

const fetchMock = vi.fn(() =>
    Promise.resolve({
        ok: true,
        json: () => Promise.resolve({}),
    })
);

// Use Vitest's stubGlobal for type-safe environment mocking
vi.stubGlobal('localStorage', localStorageMock);
vi.stubGlobal('fetch', fetchMock);

describe('App Component', () => {
    beforeEach(() => {
        vi.clearAllMocks();
        document.documentElement.classList.remove('dark');
        document.documentElement.style.backgroundColor = '';
    });

    it('renders the App and applies the light theme by default', async () => {
        render(<App />);

        // 1. Verify your synchronous theme logic
        expect(document.documentElement.style.backgroundColor).toBe('rgb(250, 250, 250)');
        expect(document.documentElement.classList.contains('dark')).toBe(false);
        expect(localStorageMock.setItem).toHaveBeenCalledWith('theme', 'light');

        // 2. Wait for the asynchronous fetch to finish so React doesn't complain
        await waitFor(() => {
            expect(fetchMock).toHaveBeenCalled();
        });
    });
});