TEST-006: Test Apply Form Component

[jeromehardaway]

---

Priority: P1 - High
Effort: Large (6-8 hours)
File: src/components/forms/apply-form.test.tsx

Description

Create comprehensive test suite for the multi-step application form component. This is a critical user-facing feature that requires thorough testing of user interactions, validation logic, navigation, accessibility, and API integration to ensure a smooth application experience for veterans.

Test Cases

Rendering & Navigation

• ✅ Renders all 5 steps correctly
• ✅ Multi-step navigation works (next, previous, step indicators)
• ✅ Progress indicator updates correctly

Form Validation

• ✅ Form validation on each step
• ✅ Required field validation (all required fields)
• ✅ LinkedIn URL validation (format and requirements)
• ✅ GitHub URL validation (format and requirements)
• ✅ Email format validation
• ✅ Phone number format validation

Conditional Logic

• ✅ Conditional field display (previous courses attended)
• ✅ Dynamic form fields based on user selections

Submission & State Management

• ✅ Submit button disabled during submission
• ✅ Submit button enabled only when form is valid
• ✅ Success message displayed after submission
• ✅ Error handling for API failures (network errors, validation errors, server errors)
• ✅ EmojiRain component triggers on success
• ✅ Form reset after successful submission
• ✅ Loading states displayed appropriately

Accessibility

• ✅ Accessibility: keyboard navigation (Tab, Enter, Escape)
• ✅ Accessibility: ARIA labels on all form elements
• ✅ Accessibility: error announcements for screen readers
• ✅ Accessibility: focus management between steps

Acceptance Criteria

• 80% component coverage minimum
• All user interactions tested (click, type, navigate)
• API endpoints properly mocked using MSW or similar
• No console errors or warnings during tests
• Form validation matches production behavior
• All error states properly handled and displayed
• Success flow validated end-to-end
• Tests run in <5 seconds

Technical Notes

• Use React Testing Library for component testing
• Mock API calls with msw (Mock Service Worker) or jest.mock
• Use userEvent for realistic user interactions
• Test with @testing-library/jest-dom matchers
• Mock EmojiRain component to verify it's called
• Test form state persistence across steps
• Verify form data structure matches API contract

Testing Strategy

1. Unit level: Test individual step components
2. Integration level: Test multi-step flow and data passing
3. E2E simulation: Test complete form submission workflow
4. Accessibility: Use jest-axe for automated a11y checks

Edge Cases to Cover

• Navigating back and forth without losing data
• Attempting to skip steps
• Submitting incomplete forms
• Network timeout scenarios
• Rapid successive submissions
• Browser autofill interactions

---