@jmruthers/pace-core 0.5.1 → 0.5.3

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

@@ -0,0 +1,621 @@
+/**
+ * @file PasswordChangeForm Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/PasswordReset
+ * @since 0.1.0
+ *
+ * Comprehensive test suite for the PasswordChangeForm component.
+ * Tests cover rendering, form submission, validation, loading states,
+ * error handling, 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 { PasswordChangeForm, PasswordChangeFormProps, PasswordChangeFormValues } from './PasswordChangeForm';
+
+// Mock child components
+vi.mock('../Button/Button', () => ({
+  Button: ({ children, onClick, disabled, className, type, ...props }: any) => (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={className}
+      type={type}
+      {...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('PasswordChangeForm', () => {
+  const mockOnSubmit = vi.fn();
+  const defaultProps: PasswordChangeFormProps = {
+    onSubmit: mockOnSubmit
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders password change form with all elements', () => {
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      expect(screen.getByLabelText('New Password')).toBeInTheDocument();
+      expect(screen.getByLabelText('Confirm Password')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Change Password' })).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      const customClass = 'custom-password-change-form';
+      const { container } = render(<PasswordChangeForm {...defaultProps} className={customClass} />);
+
+      const form = container.querySelector('form');
+      expect(form).toHaveClass(customClass);
+    });
+
+    it('has proper form structure and accessibility', () => {
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      expect(newPasswordInput).toHaveAttribute('type', 'password');
+      expect(newPasswordInput).toHaveAttribute('required');
+      expect(newPasswordInput).toHaveAttribute('id', 'new-password');
+
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      expect(confirmPasswordInput).toHaveAttribute('type', 'password');
+      expect(confirmPasswordInput).toHaveAttribute('required');
+      expect(confirmPasswordInput).toHaveAttribute('id', 'confirm-password');
+
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+      expect(submitButton).toHaveAttribute('type', 'submit');
+    });
+  });
+
+  describe('Form Interaction', () => {
+    it('updates new password input value when user types', async () => {
+      const user = userEvent.setup();
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      await user.type(newPasswordInput, 'newpassword123');
+
+      expect(newPasswordInput).toHaveValue('newpassword123');
+    });
+
+    it('updates confirm password input value when user types', async () => {
+      const user = userEvent.setup();
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      await user.type(confirmPasswordInput, 'newpassword123');
+
+      expect(confirmPasswordInput).toHaveValue('newpassword123');
+    });
+
+    it('enables submit button when both passwords are provided', async () => {
+      const user = userEvent.setup();
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      expect(submitButton).toBeDisabled();
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+
+      expect(submitButton).toBeEnabled();
+    });
+
+    it('disables submit button when new password is empty', async () => {
+      const user = userEvent.setup();
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(confirmPasswordInput, 'newpassword123');
+
+      expect(submitButton).toBeDisabled();
+    });
+
+    it('disables submit button when confirm password is empty', async () => {
+      const user = userEvent.setup();
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+
+      expect(submitButton).toBeDisabled();
+    });
+  });
+
+  describe('Form Validation', () => {
+    it('shows error when password is too short', async () => {
+      const user = userEvent.setup();
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'short');
+      await user.type(confirmPasswordInput, 'short');
+      await user.click(submitButton);
+
+      expect(screen.getByText('Password must be at least 8 characters.')).toBeInTheDocument();
+      expect(mockOnSubmit).not.toHaveBeenCalled();
+    });
+
+    it('shows error when passwords do not match', async () => {
+      const user = userEvent.setup();
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'differentpassword');
+      await user.click(submitButton);
+
+      expect(screen.getByText('Passwords do not match.')).toBeInTheDocument();
+      expect(mockOnSubmit).not.toHaveBeenCalled();
+    });
+
+    it('validates password length before checking match', async () => {
+      const user = userEvent.setup();
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'short');
+      await user.type(confirmPasswordInput, 'short');
+      await user.click(submitButton);
+
+      expect(screen.getByText('Password must be at least 8 characters.')).toBeInTheDocument();
+      expect(screen.queryByText('Passwords do not match.')).not.toBeInTheDocument();
+    });
+
+    it('clears error when form is resubmitted with valid data', async () => {
+      const user = userEvent.setup();
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      // First submit with invalid data
+      await user.type(newPasswordInput, 'short');
+      await user.type(confirmPasswordInput, 'short');
+      await user.click(submitButton);
+
+      expect(screen.getByText('Password must be at least 8 characters.')).toBeInTheDocument();
+
+      // Clear and resubmit with valid data
+      await user.clear(newPasswordInput);
+      await user.clear(confirmPasswordInput);
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      expect(screen.queryByText('Password must be at least 8 characters.')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Form Submission', () => {
+    it('calls onSubmit with correct values when form is submitted', async () => {
+      const user = userEvent.setup();
+      mockOnSubmit.mockResolvedValue({});
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        newPassword: 'newpassword123',
+        confirmPassword: 'newpassword123'
+      });
+    });
+
+    it('prevents form submission when validation fails', async () => {
+      const user = userEvent.setup();
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'short');
+      await user.type(confirmPasswordInput, 'short');
+      await user.click(submitButton);
+
+      expect(mockOnSubmit).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Loading States', () => {
+    it('shows loading state during form submission', async () => {
+      const user = userEvent.setup();
+      mockOnSubmit.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      expect(screen.getByRole('button', { name: 'Changing...' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Changing...' })).toBeDisabled();
+    });
+
+    it('disables inputs during loading', async () => {
+      const user = userEvent.setup();
+      mockOnSubmit.mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      expect(newPasswordInput).toBeDisabled();
+      expect(confirmPasswordInput).toBeDisabled();
+    });
+
+    it('resets loading state after successful submission', async () => {
+      const user = userEvent.setup();
+      mockOnSubmit.mockResolvedValue({});
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'Change Password' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Change Password' })).toBeEnabled();
+      });
+    });
+
+    it('resets loading state after failed submission', async () => {
+      const user = userEvent.setup();
+      mockOnSubmit.mockResolvedValue({ error: { message: 'Test error' } });
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'Change Password' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Change Password' })).toBeEnabled();
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('displays error message when onSubmit returns error', async () => {
+      const user = userEvent.setup();
+      const errorMessage = 'Password change failed';
+      mockOnSubmit.mockResolvedValue({ error: { message: errorMessage } });
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText(errorMessage)).toBeInTheDocument();
+        expect(screen.getByText(errorMessage)).toHaveAttribute('role', 'alert');
+      });
+    });
+
+    it('displays error message when onSubmit throws exception', async () => {
+      const user = userEvent.setup();
+      const errorMessage = 'Network error';
+      mockOnSubmit.mockRejectedValue(new Error(errorMessage));
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText(errorMessage)).toBeInTheDocument();
+        expect(screen.getByText(errorMessage)).toHaveAttribute('role', 'alert');
+      });
+    });
+
+    it('handles non-Error exceptions gracefully', async () => {
+      const user = userEvent.setup();
+      mockOnSubmit.mockRejectedValue('String error');
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('An unexpected error occurred.')).toBeInTheDocument();
+      });
+    });
+
+    it('handles error without message property', async () => {
+      const user = userEvent.setup();
+      mockOnSubmit.mockResolvedValue({ error: { code: 'INVALID_PASSWORD' } });
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Failed to change password.')).toBeInTheDocument();
+      });
+    });
+
+    it('clears error when form is resubmitted', async () => {
+      const user = userEvent.setup();
+      mockOnSubmit
+        .mockResolvedValueOnce({ error: { message: 'First error' } })
+        .mockResolvedValueOnce({});
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      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();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper form labels and associations', () => {
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      expect(newPasswordInput).toHaveAttribute('id', 'new-password');
+      expect(newPasswordInput).toHaveAttribute('type', 'password');
+
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      expect(confirmPasswordInput).toHaveAttribute('id', 'confirm-password');
+      expect(confirmPasswordInput).toHaveAttribute('type', 'password');
+    });
+
+    it('announces errors to screen readers', async () => {
+      const user = userEvent.setup();
+      mockOnSubmit.mockResolvedValue({ error: { message: 'Test error' } });
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      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();
+      mockOnSubmit.mockResolvedValue({});
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, 'newpassword123');
+      await user.type(confirmPasswordInput, 'newpassword123');
+      await user.click(submitButton);
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: 'Change Password' })).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty password values', () => {
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      expect(submitButton).toBeDisabled();
+    });
+
+    it('handles whitespace-only passwords', async () => {
+      const user = userEvent.setup();
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, '   ');
+      await user.type(confirmPasswordInput, '   ');
+
+      // The button should be enabled because the inputs have values (even if whitespace)
+      // The validation happens on submit, not on input
+      expect(submitButton).toBeEnabled();
+    });
+
+    it('handles very long passwords', async () => {
+      const user = userEvent.setup();
+      const longPassword = 'a'.repeat(1000);
+      mockOnSubmit.mockResolvedValue({});
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, longPassword);
+      await user.type(confirmPasswordInput, longPassword);
+      await user.click(submitButton);
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        newPassword: longPassword,
+        confirmPassword: longPassword
+      });
+    });
+
+    it('handles special characters in passwords', async () => {
+      const user = userEvent.setup();
+      const specialPassword = 'P@ssw0rd!@#$%^&*()_+-=';
+      mockOnSubmit.mockResolvedValue({});
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, specialPassword);
+      await user.type(confirmPasswordInput, specialPassword);
+      await user.click(submitButton);
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        newPassword: specialPassword,
+        confirmPassword: specialPassword
+      });
+    });
+
+    it('handles unicode characters in passwords', async () => {
+      const user = userEvent.setup();
+      const unicodePassword = 'pássw0rd_测试_пароль';
+      mockOnSubmit.mockResolvedValue({});
+
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+
+      await user.type(newPasswordInput, unicodePassword);
+      await user.type(confirmPasswordInput, unicodePassword);
+      await user.click(submitButton);
+
+      expect(mockOnSubmit).toHaveBeenCalledWith({
+        newPassword: unicodePassword,
+        confirmPassword: unicodePassword
+      });
+    });
+  });
+
+  describe('Performance', () => {
+    it('handles rapid input changes efficiently', async () => {
+      const user = userEvent.setup();
+      render(<PasswordChangeForm {...defaultProps} />);
+
+      const newPasswordInput = screen.getByLabelText('New Password');
+      
+      // Type rapidly to test performance
+      await user.type(newPasswordInput, 'testpassword123');
+      
+      expect(newPasswordInput).toHaveValue('testpassword123');
+    });
+  });
+});