@jmruthers/pace-core 0.5.180 → 0.5.182

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

@@ -1,597 +0,0 @@
-/**
- * @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');
-    });
-  });
-});