Improve tests for MainSite component and mock Firebase auth; update l…

…ogging function to use console.log in development mode

frontend/src/app/__tests__/HomePage.test.js

@@ -2,7 +2,8 @@
 
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import MainSite from '@/app/page'; // Import MainSite as a component
+import MainSite from '@/app/page';
+import { auth } from '@/app/firebase/firebaseConfig';
 
 // Mock useRouter to prevent routing issues, updated for next/navigation
 jest.mock('next/navigation', () => ({
@@ -15,10 +16,26 @@ jest.mock('next/navigation', () => ({
   }),
 }));
 
+// Mock Firebase auth with a function that correctly sets loading state
+jest.mock('@/app/firebase/firebaseConfig', () => ({
+  auth: {
+    onAuthStateChanged: jest.fn((callback) => {
+      // Immediately invoke the callback with null to simulate a logged-out user
+      callback(null);
+      return jest.fn(); // Return a mock unsubscribe function
+    }),
+  },
+}));
+
 describe('MainSite Component', () => {
-  it('renders welcome text', () => {
+  it('renders welcome text', async () => {
     render(<MainSite />);
-    const welcomeText = screen.getByText(/Welcome/i);
+
+    // Debug the component output to check rendering status
+    screen.debug();
+
+    // Use findByText to wait for the async rendering to complete
+    const welcomeText = await screen.findByText(/Welcome/i);
     expect(welcomeText).toBeInTheDocument();
   });
 });

frontend/src/utils/log.ts

@@ -2,6 +2,6 @@ const isDevelopment = process.env.NODE_ENV === "development";
 
 export const log = (...args: unknown[]) => {
   if (isDevelopment) {
-    log(...args);
+    console.log(...args);
   }
 };