Add extensive form tests and enhanced error handling for auth components.

- Introduced comprehensive tests for `RegisterForm`, `PasswordResetRequestForm`, and `PasswordResetConfirmForm` covering successful submissions, validation errors, and API error handling.
- Refactored forms to handle unexpected errors gracefully and improve test coverage for edge cases.
- Updated `crypto` and `storage` modules with robust error handling for storage issues and encryption key management.
- Removed unused `axios-mock-adapter` dependency for cleaner dependency management.

frontend/tests/components/auth/PasswordResetRequestForm.test.tsx

@@ -7,6 +7,31 @@ import userEvent from '@testing-library/user-event';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { PasswordResetRequestForm } from '@/components/auth/PasswordResetRequestForm';
 
+// Mock the usePasswordResetRequest hook
+const mockMutateAsync = jest.fn();
+const mockUsePasswordResetRequest = jest.fn(() => ({
+  mutateAsync: mockMutateAsync,
+  mutate: jest.fn(),
+  isPending: false,
+  isError: false,
+  isSuccess: false,
+  isIdle: true,
+  error: null,
+  data: undefined,
+  status: 'idle' as const,
+  variables: undefined,
+  reset: jest.fn(),
+  context: undefined,
+  failureCount: 0,
+  failureReason: null,
+  isPaused: false,
+  submittedAt: 0,
+}));
+
+jest.mock('@/lib/api/hooks/useAuth', () => ({
+  usePasswordResetRequest: () => mockUsePasswordResetRequest(),
+}));
+
 jest.mock('next/navigation', () => ({
   useRouter: () => ({
     push: jest.fn(),
@@ -29,6 +54,11 @@ const createWrapper = () => {
 };
 
 describe('PasswordResetRequestForm', () => {
+  beforeEach(() => {
+    mockMutateAsync.mockClear();
+    mockUsePasswordResetRequest.mockClear();
+  });
+
   it('renders password reset form with email field', () => {
     render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
 
@@ -74,13 +104,153 @@ describe('PasswordResetRequestForm', () => {
     ).toBeInTheDocument();
   });
 
-  // Note: Async submission tests require API mocking with MSW
-  // Will be added in Phase 9 (Testing Infrastructure)
-
   it('marks email field as required with asterisk', () => {
     render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
 
     const labels = screen.getAllByText('*');
     expect(labels.length).toBeGreaterThan(0);
   });
+
+  describe('Form submission', () => {
+    it('calls mutateAsync with email on valid submission', async () => {
+      const user = userEvent.setup();
+      mockMutateAsync.mockResolvedValueOnce(undefined);
+
+      render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
+
+      await user.type(screen.getByLabelText(/email/i), 'test@example.com');
+      await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
+
+      await waitFor(() => {
+        expect(mockMutateAsync).toHaveBeenCalledWith({ email: 'test@example.com' });
+      });
+    });
+
+    it('displays success message after successful submission', async () => {
+      const user = userEvent.setup();
+      mockMutateAsync.mockResolvedValueOnce(undefined);
+
+      render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
+
+      await user.type(screen.getByLabelText(/email/i), 'test@example.com');
+      await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText(/password reset instructions have been sent/i)).toBeInTheDocument();
+      });
+    });
+
+    it('resets form after successful submission', async () => {
+      const user = userEvent.setup();
+      mockMutateAsync.mockResolvedValueOnce(undefined);
+
+      render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
+
+      const emailInput = screen.getByLabelText(/email/i) as HTMLInputElement;
+      await user.type(emailInput, 'test@example.com');
+      await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
+
+      await waitFor(() => {
+        expect(emailInput.value).toBe('');
+      });
+    });
+
+    it('calls onSuccess callback after successful submission', async () => {
+      const user = userEvent.setup();
+      const onSuccess = jest.fn();
+      mockMutateAsync.mockResolvedValueOnce(undefined);
+
+      render(<PasswordResetRequestForm onSuccess={onSuccess} />, { wrapper: createWrapper() });
+
+      await user.type(screen.getByLabelText(/email/i), 'test@example.com');
+      await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
+
+      await waitFor(() => {
+        expect(onSuccess).toHaveBeenCalled();
+      });
+    });
+
+    it('displays general error message from API', async () => {
+      const user = userEvent.setup();
+      const apiError = [
+        {
+          code: 'USER_001',
+          message: 'User not found',
+        },
+      ];
+      mockMutateAsync.mockRejectedValueOnce(apiError);
+
+      render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
+
+      await user.type(screen.getByLabelText(/email/i), 'notfound@example.com');
+      await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText('User not found')).toBeInTheDocument();
+      });
+    });
+
+    it('displays field-specific errors from API', async () => {
+      const user = userEvent.setup();
+      const apiError = [
+        {
+          code: 'VAL_002',
+          message: 'Invalid email format',
+          field: 'email',
+        },
+      ];
+      mockMutateAsync.mockRejectedValueOnce(apiError);
+
+      render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
+
+      await user.type(screen.getByLabelText(/email/i), 'test@example.com');
+      await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText('Invalid email format')).toBeInTheDocument();
+      });
+    });
+
+    it('displays generic error for unexpected error format', async () => {
+      const user = userEvent.setup();
+      const unexpectedError = new Error('Network error');
+      mockMutateAsync.mockRejectedValueOnce(unexpectedError);
+
+      render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
+
+      await user.type(screen.getByLabelText(/email/i), 'test@example.com');
+      await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText('An unexpected error occurred. Please try again.')).toBeInTheDocument();
+      });
+    });
+
+    it('clears success message on new submission', async () => {
+      const user = userEvent.setup();
+      // First submission succeeds
+      mockMutateAsync.mockResolvedValueOnce(undefined);
+
+      render(<PasswordResetRequestForm />, { wrapper: createWrapper() });
+
+      const emailInput = screen.getByLabelText(/email/i);
+      await user.type(emailInput, 'test@example.com');
+      await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText(/password reset instructions have been sent/i)).toBeInTheDocument();
+      });
+
+      // Second submission with error
+      mockMutateAsync.mockRejectedValueOnce([{ code: 'USER_001', message: 'User not found' }]);
+
+      await user.type(emailInput, 'another@example.com');
+      await user.click(screen.getByRole('button', { name: /send reset instructions/i }));
+
+      await waitFor(() => {
+        expect(screen.queryByText(/password reset instructions have been sent/i)).not.toBeInTheDocument();
+        expect(screen.getByText('User not found')).toBeInTheDocument();
+      });
+    });
+  });
 });