diff --git a/app/src/components/modals/account/DeleteAccountModal.test.tsx b/app/src/components/modals/account/DeleteAccountModal.test.tsx index af4f1f2..1e79d13 100644 --- a/app/src/components/modals/account/DeleteAccountModal.test.tsx +++ b/app/src/components/modals/account/DeleteAccountModal.test.tsx @@ -9,13 +9,6 @@ import React from 'react'; import { MantineProvider } from '@mantine/core'; import DeleteAccountModal from './DeleteAccountModal'; -// Mock notifications -vi.mock('@mantine/notifications', () => ({ - notifications: { - show: vi.fn(), - }, -})); - // Helper wrapper component for testing const TestWrapper = ({ children }: { children: React.ReactNode }) => ( {children} @@ -33,11 +26,10 @@ describe('DeleteAccountModal', () => { beforeEach(() => { vi.clearAllMocks(); mockOnConfirm.mockResolvedValue(undefined); - mockOnClose.mockClear(); }); describe('Modal Visibility', () => { - it('renders modal when opened', () => { + it('shows modal with warning and form when opened', () => { render( { expect(screen.getByTestId('confirm-delete-button')).toBeInTheDocument(); }); - it('does not render modal when closed', () => { + it('hides modal when closed', () => { render( { expect(screen.queryByText('Delete Account')).not.toBeInTheDocument(); }); - - it('calls onClose when modal is closed via cancel button', () => { - render( - - ); - - const cancelButton = screen.getByTestId('cancel-delete-button'); - fireEvent.click(cancelButton); - - expect(mockOnClose).toHaveBeenCalled(); - }); }); - describe('Form Interaction', () => { - it('updates password input when typed', () => { + describe('Password Input and Validation', () => { + it('updates password value when user types', () => { render( { expect((passwordInput as HTMLInputElement).value).toBe('testpassword123'); }); - it('handles form submission with valid password', async () => { + it('prevents submission with empty or whitespace-only password', () => { + render( + + ); + + const passwordInput = screen.getByTestId('delete-account-password-input'); + const deleteButton = screen.getByTestId('confirm-delete-button'); + + // Test empty password + fireEvent.click(deleteButton); + expect(mockOnConfirm).not.toHaveBeenCalled(); + + // Test whitespace-only password + fireEvent.change(passwordInput, { target: { value: ' ' } }); + fireEvent.click(deleteButton); + expect(mockOnConfirm).not.toHaveBeenCalled(); + }); + + it('submits with valid password and clears field on success', async () => { render( { await waitFor(() => { expect(mockOnConfirm).toHaveBeenCalledWith('validpassword'); }); - }); - - it('prevents submission with empty password', () => { - render( - - ); - - const deleteButton = screen.getByTestId('confirm-delete-button'); - fireEvent.click(deleteButton); - - // Should not call the function with empty password - expect(mockOnConfirm).not.toHaveBeenCalled(); - }); - - it('clears input after successful submission', async () => { - render( - - ); - - const passwordInput = screen.getByTestId('delete-account-password-input'); - const deleteButton = screen.getByTestId('confirm-delete-button'); - - fireEvent.change(passwordInput, { target: { value: 'testpassword' } }); - fireEvent.click(deleteButton); - - await waitFor(() => { - expect(mockOnConfirm).toHaveBeenCalledWith('testpassword'); - }); await waitFor(() => { expect((passwordInput as HTMLInputElement).value).toBe(''); }); }); - }); - describe('Modal Actions', () => { - it('has cancel and delete buttons', () => { - render( - - ); - - const deleteButton = screen.getByTestId('confirm-delete-button'); - const cancelButton = screen.getByTestId('cancel-delete-button'); - - expect(deleteButton).toBeInTheDocument(); - expect(cancelButton).toBeInTheDocument(); - - expect(deleteButton).toHaveRole('button'); - expect(cancelButton).toHaveRole('button'); - }); - - it('has proper button styling and colors', () => { - render( - - ); - - const deleteButton = screen.getByTestId('confirm-delete-button'); - const cancelButton = screen.getByTestId('cancel-delete-button'); - - expect(deleteButton).toHaveTextContent('Delete'); - expect(cancelButton).toHaveTextContent('Cancel'); - }); - - it('closes modal when cancel button is clicked', () => { - render( - - ); - - const cancelButton = screen.getByTestId('cancel-delete-button'); - fireEvent.click(cancelButton); - - expect(mockOnClose).toHaveBeenCalled(); - }); - - it('calls onConfirm when delete button is clicked with valid input', async () => { - render( - - ); - - const passwordInput = screen.getByTestId('delete-account-password-input'); - const deleteButton = screen.getByTestId('confirm-delete-button'); - - fireEvent.change(passwordInput, { target: { value: 'mypassword' } }); - fireEvent.click(deleteButton); - - await waitFor(() => { - expect(mockOnConfirm).toHaveBeenCalledTimes(1); - expect(mockOnConfirm).toHaveBeenCalledWith('mypassword'); - }); - }); - }); - - describe('Warning Display', () => { - it('displays the warning message prominently', () => { - render( - - ); - - const warningElement = screen.getByText( - 'Warning: This action cannot be undone' - ); - expect(warningElement).toBeInTheDocument(); - }); - - it('displays the confirmation instructions', () => { - render( - - ); - - expect( - screen.getByText( - 'Please enter your password to confirm account deletion.' - ) - ).toBeInTheDocument(); - }); - }); - - 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( - - ); - - const passwordInput = screen.getByTestId( - 'delete-account-password-input' - ); - const deleteButton = screen.getByTestId('confirm-delete-button'); - - fireEvent.change(passwordInput, { target: { value: password } }); - fireEvent.click(deleteButton); - - await waitFor(() => { - expect(mockOnConfirm).toHaveBeenCalledWith(password); - }); - - unmount(); - vi.clearAllMocks(); - mockOnConfirm.mockResolvedValue(undefined); - } - }); - - it('handles unicode characters in passwords', async () => { - render( - - ); - - const passwordInput = screen.getByTestId('delete-account-password-input'); - const deleteButton = screen.getByTestId('confirm-delete-button'); - - const unicodePassword = 'パスワード123'; - fireEvent.change(passwordInput, { target: { value: unicodePassword } }); - fireEvent.click(deleteButton); - - await waitFor(() => { - expect(mockOnConfirm).toHaveBeenCalledWith(unicodePassword); - }); - }); - - it('handles whitespace-only passwords', () => { - render( - - ); - - const passwordInput = screen.getByTestId('delete-account-password-input'); - const deleteButton = screen.getByTestId('confirm-delete-button'); - - fireEvent.change(passwordInput, { target: { value: ' ' } }); - fireEvent.click(deleteButton); - - // Should not call confirm function for whitespace-only password - expect(mockOnConfirm).not.toHaveBeenCalled(); - }); - }); - - describe('Error Handling', () => { - it('handles deletion errors gracefully', async () => { - mockOnConfirm.mockRejectedValue(new Error('Account deletion failed')); + it('preserves password in field when submission fails', async () => { + mockOnConfirm.mockRejectedValue(new Error('Invalid password')); render( { expect(mockOnConfirm).toHaveBeenCalledWith('wrongpassword'); }); - // Modal should handle the error gracefully (not crash) + expect((passwordInput as HTMLInputElement).value).toBe('wrongpassword'); expect(screen.getByText('Delete Account')).toBeInTheDocument(); }); + }); - it('does not clear input when deletion fails', async () => { - mockOnConfirm.mockRejectedValue(new Error('Invalid password')); + describe('User Actions', () => { + it('closes modal when cancel button is clicked', () => { + render( + + ); + const cancelButton = screen.getByTestId('cancel-delete-button'); + fireEvent.click(cancelButton); + + expect(mockOnClose).toHaveBeenCalled(); + expect(mockOnConfirm).not.toHaveBeenCalled(); + }); + + it('handles rapid multiple clicks gracefully', () => { render( { const deleteButton = screen.getByTestId('confirm-delete-button'); fireEvent.change(passwordInput, { target: { value: 'testpassword' } }); + + // Multiple rapid clicks should not break the component + fireEvent.click(deleteButton); + fireEvent.click(deleteButton); fireEvent.click(deleteButton); - await waitFor(() => { - expect(mockOnConfirm).toHaveBeenCalledWith('testpassword'); - }); - - // Input should retain value when deletion fails - expect((passwordInput as HTMLInputElement).value).toBe('testpassword'); - }); - - it('handles authentication errors', async () => { - mockOnConfirm.mockRejectedValue(new Error('Authentication failed')); - - render( - - ); - - const passwordInput = screen.getByTestId('delete-account-password-input'); - const deleteButton = screen.getByTestId('confirm-delete-button'); - - fireEvent.change(passwordInput, { target: { value: 'authtest' } }); - fireEvent.click(deleteButton); - - await waitFor(() => { - expect(mockOnConfirm).toHaveBeenCalledWith('authtest'); - }); - - // Should not crash the component expect(screen.getByText('Delete Account')).toBeInTheDocument(); + expect(mockOnConfirm).toHaveBeenCalledWith('testpassword'); }); }); - describe('Accessibility', () => { - it('has proper form labels and structure', () => { + describe('Accessibility and Security', () => { + it('has proper form structure and security attributes', () => { render( { ); const passwordInput = screen.getByTestId('delete-account-password-input'); - expect(passwordInput).toBeInTheDocument(); - expect(passwordInput.tagName).toBe('INPUT'); expect(passwordInput).toHaveAttribute('type', 'password'); - }); + expect(passwordInput).toHaveAttribute('required'); + expect(passwordInput).toHaveAccessibleName(); - it('has proper button roles', () => { - render( - - ); - - const buttons = screen.getAllByRole('button'); - expect(buttons.length).toBeGreaterThanOrEqual(2); // Cancel and Delete buttons - - const cancelButton = screen.getByRole('button', { name: /cancel/i }); - const deleteButton = screen.getByRole('button', { - name: /delete/i, - }); - - expect(cancelButton).toBeInTheDocument(); - expect(deleteButton).toBeInTheDocument(); - }); - - it('supports keyboard navigation', () => { - render( - - ); - - const passwordInput = screen.getByTestId('delete-account-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( - - ); - - // Modal should have proper title - expect(screen.getByText('Delete Account')).toBeInTheDocument(); - - // Should have form elements expect( - screen.getByTestId('delete-account-password-input') + screen.getByRole('button', { name: /cancel/i }) + ).toBeInTheDocument(); + expect( + screen.getByRole('button', { name: /delete/i }) ).toBeInTheDocument(); }); - - it('has proper warning styling and visibility', () => { - render( - - ); - - const warningText = screen.getByText( - 'Warning: This action cannot be undone' - ); - expect(warningText).toBeInTheDocument(); - }); }); - describe('Component Props', () => { - it('accepts and uses onConfirm prop correctly', async () => { - const customMockConfirm = vi.fn().mockResolvedValue(undefined); - - render( - - ); - - const passwordInput = screen.getByTestId('delete-account-password-input'); - const deleteButton = screen.getByTestId('confirm-delete-button'); - - fireEvent.change(passwordInput, { target: { value: 'custompassword' } }); - fireEvent.click(deleteButton); - - await waitFor(() => { - expect(customMockConfirm).toHaveBeenCalledWith('custompassword'); - }); - }); - - it('accepts and uses onClose prop correctly', () => { - const customMockClose = vi.fn(); - - render( - - ); - - const cancelButton = screen.getByTestId('cancel-delete-button'); - fireEvent.click(cancelButton); - - expect(customMockClose).toHaveBeenCalled(); - }); - - it('handles function props correctly', () => { - const testOnConfirm = vi.fn(); - const testOnClose = vi.fn(); - - expect(() => { - render( - - ); - }).not.toThrow(); - - expect(screen.getByText('Delete Account')).toBeInTheDocument(); - }); - - it('handles opened prop correctly', () => { - const { rerender } = render( - - ); - - // Should not be visible when opened is false - expect(screen.queryByText('Delete Account')).not.toBeInTheDocument(); - - rerender( - - - - ); - - // Should be visible when opened is true - expect(screen.getByText('Delete Account')).toBeInTheDocument(); - }); - }); - - describe('User Interaction Flow', () => { - it('completes full deletion confirmation flow successfully', async () => { + describe('Complete User Flows', () => { + it('completes successful account deletion flow', async () => { render( { /> ); - // 1. Modal opens and shows warning + // 1. User sees warning expect( screen.getByText('Warning: This action cannot be undone') ).toBeInTheDocument(); - // 2. User types password + // 2. User enters password const passwordInput = screen.getByTestId('delete-account-password-input'); fireEvent.change(passwordInput, { target: { value: 'userpassword' } }); - // 3. User clicks delete + // 3. User confirms deletion const deleteButton = screen.getByTestId('confirm-delete-button'); fireEvent.click(deleteButton); - // 4. Confirmation function is called + // 4. System processes deletion await waitFor(() => { expect(mockOnConfirm).toHaveBeenCalledWith('userpassword'); }); - // 5. Input is cleared + // 5. Password field is cleared for security await waitFor(() => { expect((passwordInput as HTMLInputElement).value).toBe(''); }); }); - it('allows user to cancel account deletion', () => { + it('allows cancellation of account deletion', () => { render( { /> ); - // User types password but then cancels + // User enters password but decides to cancel const passwordInput = screen.getByTestId('delete-account-password-input'); - fireEvent.change(passwordInput, { - target: { value: 'cancelledaction' }, - }); + fireEvent.change(passwordInput, { target: { value: 'somepassword' } }); const cancelButton = screen.getByTestId('cancel-delete-button'); fireEvent.click(cancelButton); - // Should close modal without calling confirm function - expect(mockOnConfirm).not.toHaveBeenCalled(); + // Modal closes without deletion expect(mockOnClose).toHaveBeenCalled(); - }); - - it('handles multiple rapid clicks gracefully', () => { - render( - - ); - - const passwordInput = screen.getByTestId('delete-account-password-input'); - const deleteButton = screen.getByTestId('confirm-delete-button'); - - fireEvent.change(passwordInput, { target: { value: 'rapidtest' } }); - - // Rapidly click multiple times - should not crash - fireEvent.click(deleteButton); - fireEvent.click(deleteButton); - fireEvent.click(deleteButton); - - // Verify component is still functional - expect(screen.getByText('Delete Account')).toBeInTheDocument(); - expect(mockOnConfirm).toHaveBeenCalledWith('rapidtest'); - }); - - it('prevents accidental deletion with empty password', () => { - render( - - ); - - // User immediately clicks delete without entering password - const deleteButton = screen.getByTestId('confirm-delete-button'); - fireEvent.click(deleteButton); - - // Should not proceed with deletion expect(mockOnConfirm).not.toHaveBeenCalled(); - expect(screen.getByText('Delete Account')).toBeInTheDocument(); - }); - }); - - describe('Security Considerations', () => { - it('masks password input properly', () => { - render( - - ); - - const passwordInput = screen.getByTestId('delete-account-password-input'); - expect(passwordInput).toHaveAttribute('type', 'password'); - }); - - it('clears password from memory after successful deletion', async () => { - render( - - ); - - const passwordInput = screen.getByTestId('delete-account-password-input'); - const deleteButton = screen.getByTestId('confirm-delete-button'); - - fireEvent.change(passwordInput, { - target: { value: 'sensitivepassword' }, - }); - fireEvent.click(deleteButton); - - await waitFor(() => { - expect(mockOnConfirm).toHaveBeenCalledWith('sensitivepassword'); - }); - - // Password should be cleared from the input - await waitFor(() => { - expect((passwordInput as HTMLInputElement).value).toBe(''); - }); - }); - - it('requires explicit password confirmation', () => { - render( - - ); - - // Should require password input - const passwordInput = screen.getByTestId('delete-account-password-input'); - expect(passwordInput).toHaveAttribute('required'); - - // Should show clear warning - expect( - screen.getByText('Warning: This action cannot be undone') - ).toBeInTheDocument(); }); }); }); diff --git a/app/src/components/modals/account/EmailPasswordModal.test.tsx b/app/src/components/modals/account/EmailPasswordModal.test.tsx index 3e8103c..3b6044a 100644 --- a/app/src/components/modals/account/EmailPasswordModal.test.tsx +++ b/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 }) => ( {children} @@ -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( { ).toBeInTheDocument(); }); - it('does not render modal when closed', () => { + it('hides modal when closed', () => { render( { expect(screen.queryByText('Confirm Password')).not.toBeInTheDocument(); }); - }); - describe('Form Interaction', () => { - it('updates password input when typed', () => { - render( - - ); - - 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( - - ); - - 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( - - ); - - 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( - - ); - - 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( - - ); - - 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( - - ); - - 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( - - ); - - 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( { ) ).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( - - ); - - expect( - screen.getByText( - `Please enter your password to confirm changing your email to: ${email}` - ) - ).toBeInTheDocument(); - - unmount(); - }); - }); - - it('handles empty email string', () => { - render( - - ); - - 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( - - ); - - 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( { ); 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( + + ); + + 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( { 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( { 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( - - ); - - 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( { /> ); - 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( - - ); - - 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( - - ); - - 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( - - ); - - // 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( - - ); - - 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( - - ); - 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( - - ); - }).not.toThrow(); - - expect(screen.getByText('Confirm Password')).toBeInTheDocument(); - }); - }); - - describe('User Interaction Flow', () => { - it('completes full confirmation flow successfully', async () => { - render( - - ); - - // 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( - - ); - - // 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( + + ); + + 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( { 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( + + ); + + 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( + + ); + + // 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( + + ); + + // 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(); + }); + }); });