Update tests to handle asynchronous loading and initialization states across multiple components

app/src/components/auth/LoginPage.test.tsx

@@ -38,8 +38,16 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
 );
 
 // Custom render function
-const render = (ui: React.ReactElement) => {
-  return rtlRender(ui, { wrapper: TestWrapper });
+const render = async (ui: React.ReactElement) => {
+  const result = rtlRender(ui, { wrapper: TestWrapper });
+
+  // Wait for AuthProvider initialization to complete
+  await waitFor(() => {
+    // The LoginPage should be rendered (indicates AuthProvider has initialized)
+    expect(screen.getByText('Welcome to Lemma')).toBeInTheDocument();
+  });
+
+  return result;
 };
 
 describe('LoginPage', () => {
@@ -64,8 +72,8 @@ describe('LoginPage', () => {
   });
 
   describe('Initial Render', () => {
-    it('renders the login form with all required elements', () => {
-      render(<LoginPage />);
+    it('renders the login form with all required elements', async () => {
+      await render(<LoginPage />);
 
       // Check title and subtitle
       expect(screen.getByText('Welcome to Lemma')).toBeInTheDocument();
@@ -95,8 +103,8 @@ describe('LoginPage', () => {
   });
 
   describe('Form Interaction', () => {
-    it('updates input values when user types', () => {
-      render(<LoginPage />);
+    it('updates input values when user types', async () => {
+      await render(<LoginPage />);
 
       const emailInput = screen.getByTestId('email-input');
       const passwordInput = screen.getByTestId('password-input');
@@ -108,8 +116,8 @@ describe('LoginPage', () => {
       expect((passwordInput as HTMLInputElement).value).toBe('password123');
     });
 
-    it('prevents form submission with empty fields due to HTML5 validation', () => {
-      render(<LoginPage />);
+    it('prevents form submission with empty fields due to HTML5 validation', async () => {
+      await render(<LoginPage />);
 
       const submitButton = screen.getByTestId('login-button');
       fireEvent.click(submitButton);
@@ -132,7 +140,7 @@ describe('LoginPage', () => {
     };
 
     it('calls login function with correct credentials on form submit', async () => {
-      render(<LoginPage />);
+      await render(<LoginPage />);
       fillAndSubmitForm('test@example.com', 'password123');
 
       await waitFor(() => {
@@ -151,7 +159,7 @@ describe('LoginPage', () => {
       });
       mockApiLogin.mockReturnValue(loginPromise);
 
-      render(<LoginPage />);
+      await render(<LoginPage />);
       const { submitButton } = fillAndSubmitForm(
         'test@example.com',
         'password123'
@@ -170,7 +178,7 @@ describe('LoginPage', () => {
     });
 
     it('handles login success with notification', async () => {
-      render(<LoginPage />);
+      await render(<LoginPage />);
       fillAndSubmitForm('test@example.com', 'password123');
 
       await waitFor(() => {
@@ -194,7 +202,7 @@ describe('LoginPage', () => {
       const errorMessage = 'Invalid credentials';
       mockApiLogin.mockRejectedValue(new Error(errorMessage));
 
-      render(<LoginPage />);
+      await render(<LoginPage />);
       const { submitButton } = fillAndSubmitForm(
         'test@example.com',
         'wrongpassword'

app/src/components/editor/MarkdownPreview.test.tsx

@@ -272,7 +272,7 @@ describe('MarkdownPreview', () => {
     });
   });
 
-  it('handles markdown processing errors gracefully', () => {
+  it('handles markdown processing errors gracefully', async () => {
     // Mock console.error to avoid noise in test output
     const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
 
@@ -286,9 +286,12 @@ describe('MarkdownPreview', () => {
       />
     );
 
-    // Should still render something even if processing has issues
-    const markdownPreview = screen.getByTestId('markdown-preview');
-    expect(markdownPreview).toBeInTheDocument();
+    // Wait for async content processing to complete
+    await waitFor(() => {
+      // Should still render something even if processing has issues
+      const markdownPreview = screen.getByTestId('markdown-preview');
+      expect(markdownPreview).toBeInTheDocument();
+    });
 
     consoleSpy.mockRestore();
   });

app/src/components/modals/account/DeleteAccountModal.test.tsx

@@ -4,6 +4,7 @@ import {
   screen,
   fireEvent,
   waitFor,
+  act,
 } from '@testing-library/react';
 import React from 'react';
 import { MantineProvider } from '@mantine/core';
@@ -192,7 +193,7 @@ describe('DeleteAccountModal', () => {
       expect(mockOnConfirm).not.toHaveBeenCalled();
     });
 
-    it('handles rapid multiple clicks gracefully', () => {
+    it('handles rapid multiple clicks gracefully', async () => {
       render(
         <DeleteAccountModal
           opened={true}
@@ -207,12 +208,16 @@ describe('DeleteAccountModal', () => {
       fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
 
       // Multiple rapid clicks should not break the component
-      fireEvent.click(deleteButton);
-      fireEvent.click(deleteButton);
-      fireEvent.click(deleteButton);
+      act(() => {
+        fireEvent.click(deleteButton);
+        fireEvent.click(deleteButton);
+        fireEvent.click(deleteButton);
+      });
 
       expect(screen.getByText('Delete Account')).toBeInTheDocument();
-      expect(mockOnConfirm).toHaveBeenCalledWith('testpassword');
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('testpassword');
+      });
     });
   });
 

app/src/components/modals/account/EmailPasswordModal.test.tsx

@@ -4,6 +4,7 @@ import {
   screen,
   fireEvent,
   waitFor,
+  act,
 } from '@testing-library/react';
 import React from 'react';
 import { MantineProvider } from '@mantine/core';
@@ -218,7 +219,7 @@ describe('EmailPasswordModal', () => {
       });
     });
 
-    it('handles rapid multiple clicks gracefully', () => {
+    it('handles rapid multiple clicks gracefully', async () => {
       render(
         <EmailPasswordModal
           opened={true}
@@ -234,12 +235,15 @@ describe('EmailPasswordModal', () => {
       fireEvent.change(passwordInput, { target: { value: 'rapidtest' } });
 
       // Multiple rapid clicks should not break the component
-      fireEvent.click(confirmButton);
-      fireEvent.click(confirmButton);
-      fireEvent.click(confirmButton);
+      act(() => {
+        fireEvent.click(confirmButton);
+        fireEvent.click(confirmButton);
+        fireEvent.click(confirmButton);
+      });
 
-      expect(screen.getByText('Confirm Password')).toBeInTheDocument();
-      expect(mockOnConfirm).toHaveBeenCalledWith('rapidtest');
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('rapidtest');
+      });
     });
   });