@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,561 +0,0 @@
-import React from 'react';
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { PasswordChangeForm } from '../PasswordChangeForm';
-import { renderWithProviders } from '../../../__tests__/shared';
-
-describe('PasswordChangeForm Component', () => {
-  const user = userEvent.setup();
-  
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  const renderPasswordChangeForm = (props = {}) => {
-    const defaultProps = {
-      onSubmit: vi.fn(),
-      ...props
-    };
-    return renderWithProviders(<PasswordChangeForm {...defaultProps} />);
-  };
-
-  describe('Rendering', () => {
-    it('renders the form with all required elements', () => {
-      renderPasswordChangeForm();
-      
-      expect(screen.getByLabelText('New Password')).toBeInTheDocument();
-      expect(screen.getByLabelText('Confirm Password')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Change Password' })).toBeInTheDocument();
-    });
-
-    it('applies custom className', () => {
-      renderPasswordChangeForm({ className: 'custom-class' });
-      
-      const form = screen.getByRole('button', { name: 'Change Password' }).closest('form');
-      expect(form).toHaveClass('custom-class');
-    });
-
-    it('renders password fields with proper attributes', () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      
-      expect(newPasswordInput).toHaveAttribute('type', 'password');
-      expect(newPasswordInput).toHaveAttribute('required');
-      expect(newPasswordInput).toHaveAttribute('id', 'new-password');
-      
-      expect(confirmPasswordInput).toHaveAttribute('type', 'password');
-      expect(confirmPasswordInput).toHaveAttribute('required');
-      expect(confirmPasswordInput).toHaveAttribute('id', 'confirm-password');
-    });
-  });
-
-  describe('Form Interactions', () => {
-    it('updates new password input value', async () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      await user.type(newPasswordInput, 'newpassword123');
-      
-      expect(newPasswordInput).toHaveValue('newpassword123');
-    });
-
-    it('updates confirm password input value', async () => {
-      renderPasswordChangeForm();
-      
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      await user.type(confirmPasswordInput, 'newpassword123');
-      
-      expect(confirmPasswordInput).toHaveValue('newpassword123');
-    });
-
-    it('enables submit button when both passwords are entered', async () => {
-      renderPasswordChangeForm();
-      
-      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 passwords are empty', async () => {
-      renderPasswordChangeForm();
-      
-      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');
-      expect(submitButton).toBeEnabled();
-      
-      await user.clear(newPasswordInput);
-      expect(submitButton).toBeDisabled();
-    });
-  });
-
-  describe('Form Submission', () => {
-    it('submits form with password values when valid', async () => {
-      const onSubmit = vi.fn().mockResolvedValue({});
-      renderPasswordChangeForm({ onSubmit });
-      
-      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(onSubmit).toHaveBeenCalledWith({
-        newPassword: 'newpassword123',
-        confirmPassword: 'newpassword123'
-      });
-    });
-  });
-
-  describe('Password Validation', () => {
-    it('shows error when password is less than 8 characters', async () => {
-      renderPasswordChangeForm();
-      
-      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.getByRole('alert')).toHaveTextContent('Password must be at least 8 characters.');
-    });
-
-    it('shows error when passwords do not match', async () => {
-      renderPasswordChangeForm();
-      
-      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.getByRole('alert')).toHaveTextContent('Passwords do not match.');
-    });
-
-    it('validates password length before checking match', async () => {
-      renderPasswordChangeForm();
-      
-      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, 'different');
-      await user.click(submitButton);
-      
-      // Should show length error, not match error
-      expect(screen.getByRole('alert')).toHaveTextContent('Password must be at least 8 characters.');
-      expect(screen.queryByText('Passwords do not match.')).not.toBeInTheDocument();
-    });
-
-    it('accepts passwords with exactly 8 characters', async () => {
-      const onSubmit = vi.fn().mockResolvedValue({});
-      renderPasswordChangeForm({ onSubmit });
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      await user.type(newPasswordInput, '12345678');
-      await user.type(confirmPasswordInput, '12345678');
-      await user.click(submitButton);
-      
-      expect(onSubmit).toHaveBeenCalledWith({
-        newPassword: '12345678',
-        confirmPassword: '12345678'
-      });
-    });
-
-    it('accepts passwords with special characters', async () => {
-      const onSubmit = vi.fn().mockResolvedValue({});
-      renderPasswordChangeForm({ onSubmit });
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      await user.type(newPasswordInput, 'P@ssw0rd!');
-      await user.type(confirmPasswordInput, 'P@ssw0rd!');
-      await user.click(submitButton);
-      
-      expect(onSubmit).toHaveBeenCalledWith({
-        newPassword: 'P@ssw0rd!',
-        confirmPassword: 'P@ssw0rd!'
-      });
-    });
-  });
-
-  describe('Loading States', () => {
-    it('shows loading state during submission', async () => {
-      const onSubmit = vi.fn().mockImplementation(() => new Promise(resolve => setTimeout(() => resolve({}), 100)));
-      renderPasswordChangeForm({ onSubmit });
-      
-      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 form inputs during loading', async () => {
-      const onSubmit = vi.fn().mockImplementation(() => new Promise(resolve => setTimeout(() => resolve({}), 100)));
-      renderPasswordChangeForm({ onSubmit });
-      
-      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();
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('displays error from onSubmit callback', async () => {
-      const errorMessage = 'Password change failed';
-      const onSubmit = vi.fn().mockResolvedValue({ 
-        error: { message: errorMessage } 
-      });
-      
-      renderPasswordChangeForm({ onSubmit });
-      
-      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('alert')).toHaveTextContent(errorMessage);
-      });
-    });
-
-    it('displays generic error when onSubmit throws', async () => {
-      const onSubmit = vi.fn().mockRejectedValue(new Error('Network error'));
-      
-      renderPasswordChangeForm({ onSubmit });
-      
-      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('alert')).toHaveTextContent('Network error');
-      });
-    });
-
-    it('handles non-Error objects from onSubmit', async () => {
-      const onSubmit = vi.fn().mockRejectedValue('String error');
-      
-      renderPasswordChangeForm({ onSubmit });
-      
-      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('alert')).toHaveTextContent('An unexpected error occurred.');
-      });
-    });
-
-    it('clears error when form is resubmitted', async () => {
-      const onSubmit = vi.fn()
-        .mockResolvedValueOnce({ error: { message: 'First error' } })
-        .mockResolvedValueOnce({});
-      
-      renderPasswordChangeForm({ onSubmit });
-      
-      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('alert')).toHaveTextContent('First error');
-      });
-      
-      await user.click(submitButton);
-      
-      await waitFor(() => {
-        expect(screen.queryByRole('alert')).not.toBeInTheDocument();
-      });
-    });
-
-    it('clears error when validation passes', async () => {
-      const onSubmit = vi.fn().mockResolvedValue({ error: { message: 'Server error' } });
-      
-      renderPasswordChangeForm({ onSubmit });
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      // First submit with validation error
-      await user.type(newPasswordInput, 'short');
-      await user.type(confirmPasswordInput, 'short');
-      await user.click(submitButton);
-      
-      expect(screen.getByRole('alert')).toHaveTextContent('Password must be at least 8 characters.');
-      
-      // Fix validation and submit again
-      await user.clear(newPasswordInput);
-      await user.clear(confirmPasswordInput);
-      await user.type(newPasswordInput, 'newpassword123');
-      await user.type(confirmPasswordInput, 'newpassword123');
-      await user.click(submitButton);
-      
-      await waitFor(() => {
-        expect(screen.getByRole('alert')).toHaveTextContent('Server error');
-      });
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper form labels and associations', () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      
-      expect(newPasswordInput).toHaveAttribute('id', 'new-password');
-      expect(confirmPasswordInput).toHaveAttribute('id', 'confirm-password');
-    });
-
-    it('has proper ARIA roles', () => {
-      renderPasswordChangeForm();
-      
-      expect(screen.getByRole('button')).toBeInTheDocument();
-    });
-
-    it('announces errors with role="alert"', async () => {
-      renderPasswordChangeForm();
-      
-      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);
-      
-      const errorElement = screen.getByRole('alert');
-      expect(errorElement).toBeInTheDocument();
-      expect(errorElement).toHaveTextContent('Password must be at least 8 characters.');
-    });
-
-    it('supports keyboard navigation', async () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      newPasswordInput.focus();
-      expect(newPasswordInput).toHaveFocus();
-      
-      await user.tab();
-      expect(confirmPasswordInput).toHaveFocus();
-      
-      // Button should be disabled initially, so focus might not move there
-      // Let's check if we can tab to it after filling the form
-      await user.type(newPasswordInput, 'newpassword123');
-      await user.type(confirmPasswordInput, 'newpassword123');
-      
-      confirmPasswordInput.focus();
-      await user.tab();
-      expect(submitButton).toHaveFocus();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles very long passwords', async () => {
-      const onSubmit = vi.fn().mockResolvedValue({});
-      renderPasswordChangeForm({ onSubmit });
-      
-      const longPassword = 'a'.repeat(100); // Reduced from 1000 to 100
-      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(onSubmit).toHaveBeenCalledWith({
-        newPassword: longPassword,
-        confirmPassword: longPassword
-      });
-    }, 10000); // Add 10 second timeout
-
-    it('handles passwords with unicode characters', async () => {
-      const onSubmit = vi.fn().mockResolvedValue({});
-      renderPasswordChangeForm({ onSubmit });
-      
-      const unicodePassword = 'p@ssw0rd🚀🌟';
-      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(onSubmit).toHaveBeenCalledWith({
-        newPassword: unicodePassword,
-        confirmPassword: unicodePassword
-      });
-    });
-
-    it('handles rapid form submissions', async () => {
-      const onSubmit = vi.fn().mockImplementation(() => new Promise(resolve => setTimeout(() => resolve({}), 100)));
-      renderPasswordChangeForm({ onSubmit });
-      
-      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');
-      
-      // Rapid clicks
-      await user.click(submitButton);
-      await user.click(submitButton);
-      await user.click(submitButton);
-      
-      // Should only call once due to loading state
-      expect(onSubmit).toHaveBeenCalledTimes(1);
-    });
-
-    it('handles empty string passwords', async () => {
-      renderPasswordChangeForm();
-      
-      const newPasswordInput = screen.getByLabelText('New Password');
-      const confirmPasswordInput = screen.getByLabelText('Confirm Password');
-      const submitButton = screen.getByRole('button', { name: 'Change Password' });
-      
-      // Button should be disabled when fields are empty
-      expect(submitButton).toBeDisabled();
-      
-      // Fill fields with short passwords to trigger validation
-      await user.type(newPasswordInput, 'short');
-      await user.type(confirmPasswordInput, 'short');
-      await user.click(submitButton);
-      
-      // Should show validation error
-      expect(screen.getByRole('alert')).toHaveTextContent('Password must be at least 8 characters.');
-    });
-
-    it('handles whitespace-only passwords', async () => {
-      renderPasswordChangeForm();
-      
-      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, '   ');
-      await user.click(submitButton);
-      
-      // Should not submit due to validation
-      expect(screen.getByRole('alert')).toHaveTextContent('Password must be at least 8 characters.');
-    });
-  });
-
-  describe('Form State Management', () => {
-    it('clears form state when validation passes', async () => {
-      const onSubmit = vi.fn().mockResolvedValue({});
-      renderPasswordChangeForm({ onSubmit });
-      
-      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);
-      
-      // Form should remain filled after successful submission
-      expect(newPasswordInput).toHaveValue('newpassword123');
-      expect(confirmPasswordInput).toHaveValue('newpassword123');
-    });
-
-    it('maintains form state when validation fails', async () => {
-      renderPasswordChangeForm();
-      
-      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, 'different');
-      await user.click(submitButton);
-      
-      // Form should retain values after validation error
-      expect(newPasswordInput).toHaveValue('short');
-      expect(confirmPasswordInput).toHaveValue('different');
-    });
-
-    it('maintains form state when server error occurs', async () => {
-      const onSubmit = vi.fn().mockResolvedValue({ error: { message: 'Server error' } });
-      
-      renderPasswordChangeForm({ onSubmit });
-      
-      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('alert')).toHaveTextContent('Server error');
-      });
-      
-      // Form should retain values after server error
-      expect(newPasswordInput).toHaveValue('newpassword123');
-      expect(confirmPasswordInput).toHaveValue('newpassword123');
-    });
-  });
-});