3.4 KiB
3.4 KiB
Manual Frontend Test Checklist
Prerequisites
- Ensure
.envfile is configured with valid Appwrite and Stripe credentials - Run
node bootstrap-appwrite.mjsto seed the database - Start the server with
node index.mjs - 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.