Simplify account modals tests

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

@@ -9,13 +9,6 @@ import React from 'react';
 import { MantineProvider } from '@mantine/core';
 import EmailPasswordModal from './EmailPasswordModal';
 
-// Mock notifications
-vi.mock('@mantine/notifications', () => ({
-  notifications: {
-    show: vi.fn(),
-  },
-}));
-
 // Helper wrapper component for testing
 const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <MantineProvider defaultColorScheme="light">{children}</MantineProvider>
@@ -33,12 +26,11 @@ describe('EmailPasswordModal', () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    mockOnConfirm.mockResolvedValue(undefined);
-    mockOnClose.mockClear();
+    mockOnConfirm.mockResolvedValue(true);
   });
 
   describe('Modal Visibility', () => {
-    it('renders modal when opened', () => {
+    it('shows modal with email confirmation message when opened', () => {
       render(
         <EmailPasswordModal
           opened={true}
@@ -63,7 +55,7 @@ describe('EmailPasswordModal', () => {
       ).toBeInTheDocument();
     });
 
-    it('does not render modal when closed', () => {
+    it('hides modal when closed', () => {
       render(
         <EmailPasswordModal
           opened={false}
@@ -75,151 +67,8 @@ describe('EmailPasswordModal', () => {
 
       expect(screen.queryByText('Confirm Password')).not.toBeInTheDocument();
     });
-  });
 
-  describe('Form Interaction', () => {
-    it('updates password input when typed', () => {
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
-      const passwordInput = screen.getByTestId('email-password-input');
-      fireEvent.change(passwordInput, { target: { value: 'testpassword123' } });
-
-      expect((passwordInput as HTMLInputElement).value).toBe('testpassword123');
-    });
-
-    it('handles form submission with valid password', async () => {
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
-      const passwordInput = screen.getByTestId('email-password-input');
-      const confirmButton = screen.getByTestId('confirm-email-password-button');
-
-      fireEvent.change(passwordInput, { target: { value: 'validpassword' } });
-      fireEvent.click(confirmButton);
-
-      await waitFor(() => {
-        expect(mockOnConfirm).toHaveBeenCalledWith('validpassword');
-      });
-    });
-
-    it('prevents submission with empty password', () => {
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
-      const confirmButton = screen.getByTestId('confirm-email-password-button');
-      fireEvent.click(confirmButton);
-
-      // Should not call the function with empty password
-      expect(mockOnConfirm).not.toHaveBeenCalled();
-    });
-
-    it('clears input after successful submission', async () => {
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
-      const passwordInput = screen.getByTestId('email-password-input');
-      const confirmButton = screen.getByTestId('confirm-email-password-button');
-
-      fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
-      fireEvent.click(confirmButton);
-
-      await waitFor(() => {
-        expect(mockOnConfirm).toHaveBeenCalledWith('testpassword');
-      });
-
-      await waitFor(() => {
-        expect((passwordInput as HTMLInputElement).value).toBe('');
-      });
-    });
-  });
-
-  describe('Modal Actions', () => {
-    it('has cancel and confirm buttons', () => {
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
-      const confirmButton = screen.getByTestId('confirm-email-password-button');
-      const cancelButton = screen.getByTestId('cancel-email-password-button');
-
-      expect(confirmButton).toBeInTheDocument();
-      expect(cancelButton).toBeInTheDocument();
-
-      expect(confirmButton).toHaveRole('button');
-      expect(cancelButton).toHaveRole('button');
-    });
-
-    it('closes modal when cancel button is clicked', () => {
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
-      const cancelButton = screen.getByTestId('cancel-email-password-button');
-      fireEvent.click(cancelButton);
-
-      expect(mockOnClose).toHaveBeenCalled();
-    });
-
-    it('calls onConfirm when confirm button is clicked with valid input', async () => {
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
-      const passwordInput = screen.getByTestId('email-password-input');
-      const confirmButton = screen.getByTestId('confirm-email-password-button');
-
-      fireEvent.change(passwordInput, { target: { value: 'mypassword' } });
-      fireEvent.click(confirmButton);
-
-      await waitFor(() => {
-        expect(mockOnConfirm).toHaveBeenCalledTimes(1);
-        expect(mockOnConfirm).toHaveBeenCalledWith('mypassword');
-      });
-    });
-  });
-
-  describe('Email Display', () => {
-    it('displays the correct email in the confirmation message', () => {
+    it('displays different email addresses correctly', () => {
       const customEmail = 'user@custom.com';
       render(
         <EmailPasswordModal
@@ -236,90 +85,10 @@ describe('EmailPasswordModal', () => {
         )
       ).toBeInTheDocument();
     });
-
-    it('handles different email formats', () => {
-      const emailFormats = [
-        'simple@example.com',
-        'user.name@example.com',
-        'user+tag@example.com',
-        'very.long.email.address@domain.co.uk',
-      ];
-
-      emailFormats.forEach((email) => {
-        const { unmount } = render(
-          <EmailPasswordModal
-            opened={true}
-            onClose={mockOnClose}
-            onConfirm={mockOnConfirm}
-            email={email}
-          />
-        );
-
-        expect(
-          screen.getByText(
-            `Please enter your password to confirm changing your email to: ${email}`
-          )
-        ).toBeInTheDocument();
-
-        unmount();
-      });
-    });
-
-    it('handles empty email string', () => {
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email=""
-        />
-      );
-
-      expect(screen.getByTestId('email-password-message')).toHaveTextContent(
-        'Please enter your password to confirm changing your email to:'
-      );
-    });
   });
 
-  describe('Password Validation', () => {
-    it('handles various password formats', async () => {
-      const passwords = [
-        'simple123',
-        'Complex!Password@123',
-        'spaces in password',
-        '12345',
-        'very-long-password-with-many-characters-and-symbols!@#$%^&*()',
-      ];
-
-      for (const password of passwords) {
-        const { unmount } = render(
-          <EmailPasswordModal
-            opened={true}
-            onClose={mockOnClose}
-            onConfirm={mockOnConfirm}
-            email={testEmail}
-          />
-        );
-
-        const passwordInput = screen.getByTestId('email-password-input');
-        const confirmButton = screen.getByTestId(
-          'confirm-email-password-button'
-        );
-
-        fireEvent.change(passwordInput, { target: { value: password } });
-        fireEvent.click(confirmButton);
-
-        await waitFor(() => {
-          expect(mockOnConfirm).toHaveBeenCalledWith(password);
-        });
-
-        unmount();
-        vi.clearAllMocks();
-        mockOnConfirm.mockResolvedValue(undefined);
-      }
-    });
-
-    it('handles unicode characters in passwords', async () => {
+  describe('Password Input and Validation', () => {
+    it('updates password value when user types', () => {
       render(
         <EmailPasswordModal
           opened={true}
@@ -330,18 +99,35 @@ describe('EmailPasswordModal', () => {
       );
 
       const passwordInput = screen.getByTestId('email-password-input');
-      const confirmButton = screen.getByTestId('confirm-email-password-button');
+      fireEvent.change(passwordInput, { target: { value: 'testpassword123' } });
 
-      const unicodePassword = 'パスワード123';
-      fireEvent.change(passwordInput, { target: { value: unicodePassword } });
-      fireEvent.click(confirmButton);
-
-      await waitFor(() => {
-        expect(mockOnConfirm).toHaveBeenCalledWith(unicodePassword);
-      });
+      expect((passwordInput as HTMLInputElement).value).toBe('testpassword123');
     });
 
-    it('trims whitespace from passwords', async () => {
+    it('prevents submission with empty or whitespace-only password', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+
+      // Test empty password
+      fireEvent.click(confirmButton);
+      expect(mockOnConfirm).not.toHaveBeenCalled();
+
+      // Test whitespace-only password
+      const passwordInput = screen.getByTestId('email-password-input');
+      fireEvent.change(passwordInput, { target: { value: '   ' } });
+      fireEvent.click(confirmButton);
+      expect(mockOnConfirm).not.toHaveBeenCalled();
+    });
+
+    it('submits with valid password, trims whitespace, and clears field on success', async () => {
       render(
         <EmailPasswordModal
           opened={true}
@@ -355,19 +141,21 @@ describe('EmailPasswordModal', () => {
       const confirmButton = screen.getByTestId('confirm-email-password-button');
 
       fireEvent.change(passwordInput, {
-        target: { value: '  password123  ' },
+        target: { value: '  validpassword  ' },
       });
       fireEvent.click(confirmButton);
 
       await waitFor(() => {
-        expect(mockOnConfirm).toHaveBeenCalledWith('password123');
+        expect(mockOnConfirm).toHaveBeenCalledWith('validpassword');
+      });
+
+      await waitFor(() => {
+        expect((passwordInput as HTMLInputElement).value).toBe('');
       });
     });
-  });
 
-  describe('Error Handling', () => {
-    it('handles confirmation errors gracefully', async () => {
-      mockOnConfirm.mockRejectedValue(new Error('Authentication failed'));
+    it('preserves password in field when submission fails', async () => {
+      mockOnConfirm.mockRejectedValue(new Error('Invalid password'));
 
       render(
         <EmailPasswordModal
@@ -388,39 +176,13 @@ describe('EmailPasswordModal', () => {
         expect(mockOnConfirm).toHaveBeenCalledWith('wrongpassword');
       });
 
-      // Modal should handle the error gracefully (not crash)
+      expect((passwordInput as HTMLInputElement).value).toBe('wrongpassword');
       expect(screen.getByText('Confirm Password')).toBeInTheDocument();
     });
-
-    it('does not clear input when confirmation fails', async () => {
-      mockOnConfirm.mockRejectedValue(new Error('Invalid password'));
-
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
-      const passwordInput = screen.getByTestId('email-password-input');
-      const confirmButton = screen.getByTestId('confirm-email-password-button');
-
-      fireEvent.change(passwordInput, { target: { value: 'testpassword' } });
-      fireEvent.click(confirmButton);
-
-      await waitFor(() => {
-        expect(mockOnConfirm).toHaveBeenCalledWith('testpassword');
-      });
-
-      // Input should retain value when confirmation fails
-      expect((passwordInput as HTMLInputElement).value).toBe('testpassword');
-    });
   });
 
-  describe('Accessibility', () => {
-    it('has proper form labels and structure', () => {
+  describe('User Actions', () => {
+    it('closes modal when cancel button is clicked', () => {
       render(
         <EmailPasswordModal
           opened={true}
@@ -430,200 +192,33 @@ describe('EmailPasswordModal', () => {
         />
       );
 
-      const passwordInput = screen.getByTestId('email-password-input');
-      expect(passwordInput).toBeInTheDocument();
-      expect(passwordInput.tagName).toBe('INPUT');
-      expect(passwordInput).toHaveAttribute('type', 'password');
-    });
-
-    it('has proper button roles', () => {
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
-      const buttons = screen.getAllByRole('button');
-      expect(buttons.length).toBeGreaterThanOrEqual(2); // Cancel and Confirm buttons
-
-      const cancelButton = screen.getByRole('button', { name: /cancel/i });
-      const confirmButton = screen.getByRole('button', { name: /confirm/i });
-
-      expect(cancelButton).toBeInTheDocument();
-      expect(confirmButton).toBeInTheDocument();
-    });
-
-    it('supports keyboard navigation', () => {
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
-      const passwordInput = screen.getByTestId('email-password-input');
-
-      // Check that the input is focusable (not disabled or readonly)
-      expect(passwordInput).not.toHaveAttribute('disabled');
-      expect(passwordInput).not.toHaveAttribute('readonly');
-
-      // Check that the input can receive keyboard events
-      fireEvent.keyDown(passwordInput, { key: 'a' });
-      fireEvent.change(passwordInput, { target: { value: 'test' } });
-
-      expect((passwordInput as HTMLInputElement).value).toBe('test');
-
-      // Verify the input is accessible via keyboard navigation
-      expect(passwordInput).toHaveAttribute('type', 'password');
-      expect(passwordInput).toHaveAccessibleName(); // Has proper label
-    });
-
-    it('has proper modal structure', () => {
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
-      // Modal should have proper title
-      expect(screen.getByText('Confirm Password')).toBeInTheDocument();
-
-      // Should have form elements
-      expect(screen.getByTestId('email-password-input')).toBeInTheDocument();
-    });
-  });
-
-  describe('Component Props', () => {
-    it('accepts and uses onConfirm prop correctly', async () => {
-      const customMockConfirm = vi.fn().mockResolvedValue(undefined);
-
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={customMockConfirm}
-          email={testEmail}
-        />
-      );
-
-      const passwordInput = screen.getByTestId('email-password-input');
-      const confirmButton = screen.getByTestId('confirm-email-password-button');
-
-      fireEvent.change(passwordInput, { target: { value: 'custompassword' } });
-      fireEvent.click(confirmButton);
-
-      await waitFor(() => {
-        expect(customMockConfirm).toHaveBeenCalledWith('custompassword');
-      });
-    });
-
-    it('accepts and uses onClose prop correctly', () => {
-      const customMockClose = vi.fn();
-
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={customMockClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
       const cancelButton = screen.getByTestId('cancel-email-password-button');
       fireEvent.click(cancelButton);
 
-      expect(customMockClose).toHaveBeenCalled();
-    });
-
-    it('handles function props correctly', () => {
-      const testOnConfirm = vi.fn();
-      const testOnClose = vi.fn();
-
-      expect(() => {
-        render(
-          <EmailPasswordModal
-            opened={true}
-            onClose={testOnClose}
-            onConfirm={testOnConfirm}
-            email={testEmail}
-          />
-        );
-      }).not.toThrow();
-
-      expect(screen.getByText('Confirm Password')).toBeInTheDocument();
-    });
-  });
-
-  describe('User Interaction Flow', () => {
-    it('completes full confirmation flow successfully', async () => {
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
-      // 1. Modal opens and shows email change confirmation
-      expect(
-        screen.getByText(
-          `Please enter your password to confirm changing your email to: ${testEmail}`
-        )
-      ).toBeInTheDocument();
-
-      // 2. User types password
-      const passwordInput = screen.getByTestId('email-password-input');
-      fireEvent.change(passwordInput, { target: { value: 'userpassword' } });
-
-      // 3. User clicks confirm
-      const confirmButton = screen.getByTestId('confirm-email-password-button');
-      fireEvent.click(confirmButton);
-
-      // 4. Confirmation function is called
-      await waitFor(() => {
-        expect(mockOnConfirm).toHaveBeenCalledWith('userpassword');
-      });
-
-      // 5. Input is cleared
-      await waitFor(() => {
-        expect((passwordInput as HTMLInputElement).value).toBe('');
-      });
-    });
-
-    it('allows user to cancel email change', () => {
-      render(
-        <EmailPasswordModal
-          opened={true}
-          onClose={mockOnClose}
-          onConfirm={mockOnConfirm}
-          email={testEmail}
-        />
-      );
-
-      // User types password but then cancels
-      const passwordInput = screen.getByTestId('email-password-input');
-      fireEvent.change(passwordInput, {
-        target: { value: 'cancelleddaction' },
-      });
-
-      const cancelButton = screen.getByTestId('cancel-email-password-button');
-      fireEvent.click(cancelButton);
-
-      // Should close modal without calling confirm function
-      expect(mockOnConfirm).not.toHaveBeenCalled();
       expect(mockOnClose).toHaveBeenCalled();
+      expect(mockOnConfirm).not.toHaveBeenCalled();
     });
 
-    it('handles multiple rapid clicks gracefully', () => {
+    it('submits via Enter key press', async () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+      fireEvent.change(passwordInput, { target: { value: 'enterpassword' } });
+      fireEvent.keyDown(passwordInput, { key: 'Enter' });
+
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('enterpassword');
+      });
+    });
+
+    it('handles rapid multiple clicks gracefully', () => {
       render(
         <EmailPasswordModal
           opened={true}
@@ -638,14 +233,98 @@ describe('EmailPasswordModal', () => {
 
       fireEvent.change(passwordInput, { target: { value: 'rapidtest' } });
 
-      // Rapidly click multiple times - should not crash
+      // Multiple rapid clicks should not break the component
       fireEvent.click(confirmButton);
       fireEvent.click(confirmButton);
       fireEvent.click(confirmButton);
 
-      // Verify component is still functional
       expect(screen.getByText('Confirm Password')).toBeInTheDocument();
       expect(mockOnConfirm).toHaveBeenCalledWith('rapidtest');
     });
   });
+
+  describe('Accessibility and Security', () => {
+    it('has proper form structure and security attributes', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      const passwordInput = screen.getByTestId('email-password-input');
+      expect(passwordInput).toHaveAttribute('type', 'password');
+      expect(passwordInput).toHaveAttribute('required');
+      expect(passwordInput).toHaveAccessibleName();
+
+      expect(
+        screen.getByRole('button', { name: /cancel/i })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: /confirm/i })
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe('Complete User Flows', () => {
+    it('completes successful email change confirmation flow', async () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      // 1. User sees email change confirmation
+      expect(
+        screen.getByText(
+          `Please enter your password to confirm changing your email to: ${testEmail}`
+        )
+      ).toBeInTheDocument();
+
+      // 2. User enters password
+      const passwordInput = screen.getByTestId('email-password-input');
+      fireEvent.change(passwordInput, { target: { value: 'userpassword' } });
+
+      // 3. User confirms change
+      const confirmButton = screen.getByTestId('confirm-email-password-button');
+      fireEvent.click(confirmButton);
+
+      // 4. System processes confirmation
+      await waitFor(() => {
+        expect(mockOnConfirm).toHaveBeenCalledWith('userpassword');
+      });
+
+      // 5. Password field is cleared for security
+      await waitFor(() => {
+        expect((passwordInput as HTMLInputElement).value).toBe('');
+      });
+    });
+
+    it('allows cancellation of email change', () => {
+      render(
+        <EmailPasswordModal
+          opened={true}
+          onClose={mockOnClose}
+          onConfirm={mockOnConfirm}
+          email={testEmail}
+        />
+      );
+
+      // User enters password but decides to cancel
+      const passwordInput = screen.getByTestId('email-password-input');
+      fireEvent.change(passwordInput, { target: { value: 'somepassword' } });
+
+      const cancelButton = screen.getByTestId('cancel-email-password-button');
+      fireEvent.click(cancelButton);
+
+      // Modal closes without confirmation
+      expect(mockOnClose).toHaveBeenCalled();
+      expect(mockOnConfirm).not.toHaveBeenCalled();
+    });
+  });
 });