docker builder and test fixes

frontend/src/App.test.jsx

@@ -1,9 +1,44 @@
 // frontend/src/App.test.jsx
 
-import { render } from '@testing-library/react';
-import { test } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import App from './App';
 
-test('renders the App', () => {
-    render(<App />);
+const localStorageMock = {
+    getItem: vi.fn(),
+    setItem: vi.fn(),
+    removeItem: vi.fn(),
+    clear: vi.fn(),
+    theme: 'light',
+};
+global.localStorage = localStorageMock;
+
+global.fetch = vi.fn(() =>
+    Promise.resolve({
+        ok: true,
+        json: () => Promise.resolve({}),
+    })
+);
+
+describe('App Component', () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+        document.documentElement.classList.remove('dark');
+        document.documentElement.style.backgroundColor = '';
+    });
+
+    // Notice the "async" keyword added here
+    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(global.fetch).toHaveBeenCalled();
+        });
+    });
 });