More converting to typescript

frontend/src/App.test.tsx

@@ -0,0 +1,47 @@
+// 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();
+        });
+    });
+});