@jmruthers/pace-core 0.5.136 → 0.5.139

package/src/components/PasswordReset/PasswordResetForm.test.tsx

@@ -0,0 +1,597 @@
+/**
+ * @file PasswordResetForm Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/PasswordReset
+ * @since 0.1.0
+ *
+ * Comprehensive test suite for the PasswordResetForm component.
+ * Tests cover rendering, form submission, loading states, error handling,
+ * success states, and accessibility compliance.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { PasswordResetForm, PasswordResetFormProps } from './PasswordResetForm';
+
+// Mock the UnifiedAuthProvider
+const mockResetPassword = vi.fn();
+vi.mock('../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => ({
+    resetPassword: mockResetPassword
+  })
+}));
+
+// Mock child components
+vi.mock('../Button/Button', () => ({
+  Button: ({ children, onClick, disabled, className, type, variant, ...props }: any) => (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={className}
+      type={type}
+      data-variant={variant}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}));
+
+vi.mock('../Input/Input', () => ({
+  Input: ({ value, onChange, placeholder, disabled, required, type, id, ...props }: any) => (
+    <input
+      id={id}
+      type={type}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      disabled={disabled}
+      required={required}
+      {...props}
+    />
+  )
+}));
+
+vi.mock('../Label', () => ({
+  Label: ({ children, htmlFor, ...props }: any) => (
+    <label htmlFor={htmlFor} {...props}>
+      {children}
+    </label>
+  )
+}));
+
+describe('PasswordResetForm', () => {
+  const defaultProps: PasswordResetFormProps = {};
+
+    describe('Rendering', () => {
+    it('renders password reset form with all elements', () => {
+      render(<PasswordResetForm {...defaultProps} />);
+
+      expect(screen.getByRole('form')).toBeInTheDocument();
+      expect(screen.getByText('Reset Password')).toBeInTheDocument();
+      expect(screen.getByText("Enter your email address and we'll send you a reset link.")).toBeInTheDocument();
+      expect(screen.getByLabelText('Email Address')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('Enter your email')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Send Reset Link' })).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      const customClass = 'custom-password-reset-form';
+      render(<PasswordResetForm {...defaultProps} className={customClass} />);
+
+      const form = screen.getByRole('form');
+      expect(form).toHaveClass(customClass);
+    });
+
+    it('has proper form structure and accessibility', () => {
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      expect(emailInput).toHaveAttribute('type', 'email');
+      expect(emailInput).toHaveAttribute('required');
+      expect(emailInput).toHaveAttribute('id', 'email');
+
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+      expect(submitButton).toHaveAttribute('type', 'submit');
+    });
+  });
+
+  describe('Form Interaction', () => {
+    it('updates email input value when user types', async () => {
+      const user = userEvent.setup();
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      await user.type(emailInput, 'test@example.com');
+
+      expect(emailInput).toHaveValue('test@example.com');
+    });
+
+    it('enables submit button when email is provided', async () => {
+      const user = userEvent.setup();
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      expect(submitButton).toBeDisabled();
+
+      await user.type(emailInput, 'test@example.com');
+
+      expect(submitButton).toBeEnabled();
+    });
+
+    it('disables submit button when email is empty', () => {
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+      expect(submitButton).toBeDisabled();
+    });
+
+    it('disables submit button when email is only whitespace', async () => {
+      const user = userEvent.setup();
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, '   ');
+
+      expect(submitButton).toBeDisabled();
+    });
+  });
+
+  describe('Form Submission', () => {
+    it('calls resetPassword with email when form is submitted', async () => {
+      const user = userEvent.setup();
+      mockResetPassword.mockResolvedValue({ error: null });
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      expect(mockResetPassword).toHaveBeenCalledWith('test@example.com');
+    });
+
+    it('prevents form submission when email is empty', async () => {
+      const user = userEvent.setup();
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const form = screen.getByRole('form');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      expect(submitButton).toBeDisabled();
+      await user.click(submitButton);
+
+      expect(mockResetPassword).not.toHaveBeenCalled();
+    });
+
+    it('prevents form submission when email is only whitespace', async () => {
+      const user = userEvent.setup();
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, '   ');
+      await user.click(submitButton);
+
+      expect(mockResetPassword).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Loading States', () => {
+    it('shows loading state during form submission', async () => {
+      const user = userEvent.setup();
+      mockResetPassword.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      expect(screen.getByRole('button', { name: 'Sending...' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Sending...' })).toBeDisabled();
+    });
+
+    it('disables email input during loading', async () => {
+      const user = userEvent.setup();
+      mockResetPassword.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      expect(emailInput).toBeDisabled();
+    });
+
+    it('resets loading state after successful submission', async () => {
+      const user = userEvent.setup();
+      mockResetPassword.mockResolvedValue({ error: null });
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Check your email')).toBeInTheDocument();
+      });
+    });
+
+    it('resets loading state after failed submission', async () => {
+      const user = userEvent.setup();
+      mockResetPassword.mockResolvedValue({ error: { message: 'Network error' } });
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'Send Reset Link' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Send Reset Link' })).toBeEnabled();
+      });
+    });
+  });
+
+  describe('Success State', () => {
+    it('shows success message after successful password reset', async () => {
+      const user = userEvent.setup();
+      mockResetPassword.mockResolvedValue({ error: null });
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Check your email')).toBeInTheDocument();
+        expect(screen.getByText('We have sent a password reset link to test@example.com')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Send another email' })).toBeInTheDocument();
+      });
+    });
+
+    it('calls onSuccess callback when reset is successful', async () => {
+      const user = userEvent.setup();
+      const onSuccess = vi.fn();
+      mockResetPassword.mockResolvedValue({ error: null });
+
+      render(<PasswordResetForm {...defaultProps} onSuccess={onSuccess} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(onSuccess).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it('allows sending another email from success state', async () => {
+      const user = userEvent.setup();
+      mockResetPassword.mockResolvedValue({ error: null });
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Check your email')).toBeInTheDocument();
+      });
+
+      const sendAnotherButton = screen.getByRole('button', { name: 'Send another email' });
+      await user.click(sendAnotherButton);
+
+      expect(screen.getByText('Reset Password')).toBeInTheDocument();
+      expect(screen.getByLabelText('Email Address')).toBeInTheDocument();
+    });
+
+    it('resets form state when sending another email', async () => {
+      const user = userEvent.setup();
+      mockResetPassword.mockResolvedValue({ error: null });
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Check your email')).toBeInTheDocument();
+      });
+
+      const sendAnotherButton = screen.getByRole('button', { name: 'Send another email' });
+      await user.click(sendAnotherButton);
+
+      // The form should be reset and show the original form
+      expect(screen.getByText('Reset Password')).toBeInTheDocument();
+      expect(screen.getByLabelText('Email Address')).toBeInTheDocument();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('displays error message when resetPassword returns error', async () => {
+      const user = userEvent.setup();
+      const errorMessage = 'Email not found';
+      mockResetPassword.mockResolvedValue({ error: { message: errorMessage } });
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText(errorMessage)).toBeInTheDocument();
+        expect(screen.getByText(errorMessage)).toHaveAttribute('role', 'alert');
+      });
+    });
+
+    it('calls onError callback when resetPassword returns error', async () => {
+      const user = userEvent.setup();
+      const onError = vi.fn();
+      const errorMessage = 'Email not found';
+      mockResetPassword.mockResolvedValue({ error: { message: errorMessage } });
+
+      render(<PasswordResetForm {...defaultProps} onError={onError} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(onError).toHaveBeenCalledWith(expect.objectContaining({
+          message: errorMessage
+        }));
+      });
+    });
+
+    it('displays error message when resetPassword throws exception', async () => {
+      const user = userEvent.setup();
+      const errorMessage = 'Network error';
+      mockResetPassword.mockRejectedValue(new Error(errorMessage));
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText(errorMessage)).toBeInTheDocument();
+        expect(screen.getByText(errorMessage)).toHaveAttribute('role', 'alert');
+      });
+    });
+
+    it('calls onError callback when resetPassword throws exception', async () => {
+      const user = userEvent.setup();
+      const onError = vi.fn();
+      const errorMessage = 'Network error';
+      mockResetPassword.mockRejectedValue(new Error(errorMessage));
+
+      render(<PasswordResetForm {...defaultProps} onError={onError} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(onError).toHaveBeenCalledWith(expect.objectContaining({
+          message: errorMessage
+        }));
+      });
+    });
+
+    it('handles non-Error exceptions gracefully', async () => {
+      const user = userEvent.setup();
+      mockResetPassword.mockRejectedValue('String error');
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('An unexpected error occurred')).toBeInTheDocument();
+      });
+    });
+
+    it('clears error message when form is resubmitted', async () => {
+      const user = userEvent.setup();
+      mockResetPassword
+        .mockResolvedValueOnce({ error: { message: 'First error' } })
+        .mockResolvedValueOnce({ error: null });
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('First error')).toBeInTheDocument();
+      });
+
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.queryByText('First error')).not.toBeInTheDocument();
+        expect(screen.getByText('Check your email')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper form labels and associations', () => {
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      expect(emailInput).toHaveAttribute('id', 'email');
+      expect(emailInput).toHaveAttribute('type', 'email');
+    });
+
+    it('announces errors to screen readers', async () => {
+      const user = userEvent.setup();
+      mockResetPassword.mockResolvedValue({ error: { message: 'Test error' } });
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        const errorElement = screen.getByText('Test error');
+        expect(errorElement).toHaveAttribute('role', 'alert');
+      });
+    });
+
+    it('maintains focus management during state changes', async () => {
+      const user = userEvent.setup();
+      mockResetPassword.mockResolvedValue({ error: null });
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Check your email')).toBeInTheDocument();
+      });
+
+      const sendAnotherButton = screen.getByRole('button', { name: 'Send another email' });
+      expect(sendAnotherButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty onSuccess callback gracefully', async () => {
+      const user = userEvent.setup();
+      mockResetPassword.mockResolvedValue({ error: null });
+
+      render(<PasswordResetForm {...defaultProps} onSuccess={undefined} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Check your email')).toBeInTheDocument();
+      });
+    });
+
+    it('handles empty onError callback gracefully', async () => {
+      const user = userEvent.setup();
+      mockResetPassword.mockResolvedValue({ error: { message: 'Test error' } });
+
+      render(<PasswordResetForm {...defaultProps} onError={undefined} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, 'test@example.com');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Test error')).toBeInTheDocument();
+      });
+    });
+
+    it('handles very long email addresses', async () => {
+      const user = userEvent.setup();
+      const longEmail = 'a'.repeat(100) + '@example.com';
+      mockResetPassword.mockResolvedValue({ error: null });
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, longEmail);
+      await user.click(submitButton);
+
+      expect(mockResetPassword).toHaveBeenCalledWith(longEmail);
+    });
+
+    it('handles special characters in email', async () => {
+      const user = userEvent.setup();
+      const specialEmail = 'test+tag@example.co.uk';
+      mockResetPassword.mockResolvedValue({ error: null });
+
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      const submitButton = screen.getByRole('button', { name: 'Send Reset Link' });
+
+      await user.type(emailInput, specialEmail);
+      await user.click(submitButton);
+
+      expect(mockResetPassword).toHaveBeenCalledWith(specialEmail);
+    });
+  });
+
+  describe('Performance', () => {
+    it('handles rapid input changes efficiently', async () => {
+      const user = userEvent.setup();
+      render(<PasswordResetForm {...defaultProps} />);
+
+      const emailInput = screen.getByLabelText('Email Address');
+      
+      // Type rapidly to test performance
+      await user.type(emailInput, 'test@example.com');
+      
+      expect(emailInput).toHaveValue('test@example.com');
+    });
+  });
+});