# Manual Frontend Test Checklist

## Prerequisites
1. Ensure `.env` file is configured with valid Appwrite and Stripe credentials
2. Run `node bootstrap-appwrite.mjs` to seed the database
3. Start the server with `node index.mjs`
4. Open browser to `http://localhost:3000`

## Test Checklist

### ✅ Test 1: Form Type Rendering
- [ ] Page loads without errors
- [ ] Step 1 displays with question fields
- [ ] Text input fields render correctly
- [ ] Email input field has email validation
- [ ] Required fields show asterisk (*) marker
- [ ] Help text displays below labels (if present)

### ✅ Test 2: Select and Multiselect
Navigate to step with select/multiselect fields:
- [ ] Single select dropdown shows all options
- [ ] Can select one option from dropdown
- [ ] Multiselect shows as list box (size=5)
- [ ] Can select multiple options in multiselect (Ctrl+Click)

### ✅ Test 3: Textarea
Navigate to step with textarea:
- [ ] Textarea renders with multiple rows
- [ ] Can type multi-line text
- [ ] Text persists when navigating away and back

### ✅ Test 4: Navigation - Forward
- [ ] "Zurück" button is hidden on step 1
- [ ] "Weiter" button is visible
- [ ] Clicking "Weiter" advances to next step
- [ ] Button text changes to "Zur Zusammenfassung" on last step

### ✅ Test 5: Navigation - Backward
- [ ] Fill some fields on step 1
- [ ] Click "Weiter" to go to step 2
- [ ] "Zurück" button is now visible
- [ ] Click "Zurück" to return to step 1
- [ ] Previously entered values are still present

### ✅ Test 6: Required Field Validation
- [ ] Leave a required field empty
- [ ] Click "Weiter"
- [ ] Alert message appears with field name
- [ ] Navigation is blocked (stays on same step)
- [ ] Fill the required field
- [ ] Click "Weiter" again
- [ ] Navigation proceeds to next step

### ✅ Test 7: Answer Persistence
- [ ] Fill out step 1 completely
- [ ] Navigate to step 2
- [ ] Fill out step 2 completely
- [ ] Navigate back to step 1
- [ ] Verify all step 1 answers are preserved
- [ ] Navigate forward to step 2
- [ ] Verify all step 2 answers are preserved

### ✅ Test 8: Summary Display
- [ ] Complete all steps with valid data
- [ ] Click "Zur Zusammenfassung"
- [ ] Form and navigation buttons disappear
- [ ] Summary section appears
- [ ] All questions and answers are displayed
- [ ] Multiselect answers show as comma-separated list
- [ ] Empty answers show as "-"
- [ ] "Jetzt kaufen" button is visible

### ✅ Test 9: Checkout Flow
- [ ] Click "Jetzt kaufen" button
- [ ] Browser redirects to Stripe checkout page
- [ ] Stripe page shows correct product and price
- [ ] (Optional) Complete test payment
- [ ] (Optional) Verify webhook updates submission status

### ✅ Test 10: Error Handling
- [ ] Disconnect from internet or stop server
- [ ] Try to load page or submit
- [ ] Verify error message appears
- [ ] Verify user-friendly error handling

## Expected Results

All checkboxes should be checked (✅) for the frontend to be considered fully functional.

## Notes

- This checklist validates Requirements 1.1, 1.2, 1.3, and 1.4
- All form types (text, email, textarea, select, multiselect) must work
- Navigation must be bidirectional with answer persistence
- Validation must prevent invalid submissions
- Summary must display all answers correctly
- Checkout flow must redirect to Stripe

## Test Status: ✅ READY FOR MANUAL TESTING

The code has been verified through static analysis. Manual testing can be performed once the environment is configured.