SonicJS Forms - Human Testing Scenarios

Complete manual testing guide for QA and user acceptance testing

🎯 Overview

This document provides step-by-step testing scenarios for real users to validate all forms functionality before launch. Each scenario includes expected results and pass/fail criteria.

Time Required: ~2-3 hours for complete testing
Prerequisites: Access to admin account, browser console open for debugging

📋 Pre-Test Checklist

Before starting, verify:

Development server is running (npm run dev)
Database is migrated (npm run setup:db in my-sonicjs-app/)
Admin account credentials are available
Browser console is open (F12) to check for errors
Test data is prepared (sample emails, phone numbers, addresses)

🧪 Testing Scenarios

Scenario 1: Forms List & Navigation

Objective: Verify forms list page and navigation work correctly

Steps:

Log in as admin
Navigate to Forms in admin sidebar
Verify page loads without errors
Check for "Create New Form" button
Verify any existing forms are displayed
Click on a form to edit (if any exist)

Expected Results:

✅ Forms page loads with title "Forms"
✅ "Create New Form" button is visible
✅ Table/list of forms is displayed (or empty state)
✅ No console errors
✅ Clicking form navigates to builder

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 2: Create New Form

Objective: Test form creation flow

Steps:

From forms list, click "Create New Form"
Fill in form details:
- Name: test_contact_form (lowercase, underscores only)
- Display Name: Test Contact Form
- Description: Testing form creation
- Category: general
Click "Create Form" button
Wait for redirect to builder

Expected Results:

✅ Form creation page loads
✅ All fields are visible and editable
✅ Redirects to builder after creation
✅ Builder loads with empty form
✅ No console errors

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 3: Form Name Validation

Objective: Verify form name validation rules

Steps:

Click "Create New Form"
Try each invalid name:
- Test Form (spaces)
- test-form (hyphens)
- TestForm (uppercase)
- test@form (special characters)
Verify error messages appear
Try valid name: valid_form_name
Verify it's accepted

Expected Results:

✅ Invalid names show error message
✅ Error message mentions "lowercase letters, numbers, underscores"
✅ Valid names are accepted
✅ Form doesn't submit with invalid name

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 4: Duplicate Form Prevention

Objective: Verify duplicate form names are prevented

Steps:

Note the name of an existing form (or create one first)
Click "Create New Form"
Enter the same name as existing form
Try to submit
Verify error message

Expected Results:

✅ Error message appears
✅ Message mentions "already exists"
✅ Form is not created
✅ User stays on creation page

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 5: Form Builder Interface

Objective: Verify Form.io builder loads and functions

Steps:

Open an existing form or create new one
Wait for builder to fully load (may take 5-10 seconds)
Verify components sidebar is visible
Check for component groups:
- Basic
- Advanced
- Layout
- Data
- Premium
Verify canvas area is visible

Expected Results:

✅ Builder loads within 15 seconds
✅ All component groups are visible
✅ Components can be clicked
✅ Canvas/drop area is visible
✅ No console errors
✅ Loading spinner disappears

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 6: Display Type Toggle

Objective: Test single-page vs wizard mode toggle

Steps:

In form builder, locate display type toggle at top
Verify "Single Page" and "Multi-Page Wizard" buttons
Click "Multi-Page Wizard"
Verify:
- Button becomes active/highlighted
- Hint text appears about using Panel components
Click "Single Page" to toggle back
Verify button state changes

Expected Results:

✅ Toggle buttons are visible
✅ Single Page is active by default
✅ Clicking changes active state
✅ Wizard mode shows hint message
✅ Toggle works both ways

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 7: Drag & Drop Components

Objective: Test adding components to form

Steps:

In builder, locate "Text Field" in Basic components
Drag it to the canvas area
Drop it (wait for it to appear)
Verify component appears in builder
Try adding more components:
- Email (Basic)
- Text Area (Basic)
- Checkbox (Basic)

Expected Results:

✅ Components can be dragged
✅ Drop zones are visible during drag
✅ Components appear after drop
✅ Multiple components can be added
✅ Components are editable (Edit/Copy/Remove buttons visible)

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 8: Configure Component Properties

Objective: Test editing component settings

Steps:

Add a Text Field component
Click "Edit" button on the component
Verify configuration modal opens
Edit properties:
- Change label to "Full Name"
- Change placeholder to "Enter your name"
- Check "Required"
Save changes
Verify changes are reflected

Expected Results:

✅ Edit modal opens
✅ All tabs are accessible (Display, Data, Validation, etc.)
✅ Changes are saved
✅ Component updates in builder
✅ Modal closes after save

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 9: Save Form

Objective: Test form saving functionality

Steps:

Add at least 2 components to form
Click "Save Form" button
Wait for save to complete
Verify success message
Refresh page
Verify components are still there

Expected Results:

✅ Save button is visible
✅ Shows "Saving..." during save
✅ Success notification appears
✅ Components persist after refresh
✅ No errors in console

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 10: Preview Form

Objective: Test form preview functionality

Steps:

Add several components to form
Click "Preview" button
Verify modal opens
Check preview shows:
- Form title
- All components
- Submit button
Try filling out the preview form
Close modal

Expected Results:

✅ Preview modal opens
✅ Form renders correctly
✅ All components are visible
✅ Form is interactive
✅ Close button works
✅ Background/styling looks good

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 11: Create Multi-Page Wizard

Objective: Test wizard form creation

Steps:

Create new form or edit existing
Click "Multi-Page Wizard" button
From Layout tab, drag "Panel" component
Add Panel, name it "Page 1: Personal Info"
Drag Text Field inside the panel
Add another Panel named "Page 2: Contact"
Drag Email component inside second panel
Save form

Expected Results:

✅ Panels can be added
✅ Components can be dragged into panels
✅ Multiple panels create multiple pages
✅ Panel titles are visible
✅ Form saves successfully

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 12: View Public Form (Single Page)

Objective: Test public form rendering

Steps:

Create form with several components
Save form
Click "View Public Form" button (or navigate to /forms/{form_name})
Verify form renders on public page
Check that:
- Title is displayed
- All components are visible
- Form is interactive
- Submit button is present

Expected Results:

✅ Public form page loads
✅ Form title is displayed
✅ All components render correctly
✅ Components are functional
✅ Submit button is visible
✅ Page styling looks good

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 13: View Public Wizard Form

Objective: Test wizard form on public page

Steps:

Open a wizard form (with panels) on public page
Verify:
- Only first page is visible
- "Next" button is present
- No "Previous" button on first page
Click "Next"
Verify second page appears
Verify "Previous" and "Next" buttons
Navigate to last page
Verify "Submit" button appears

Expected Results:

✅ Wizard navigation works
✅ Progress indicator shows current page
✅ Previous/Next buttons function
✅ Submit only on last page
✅ Pages transition smoothly

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 14: Submit Form Data

Objective: Test form submission

Steps:

Open a public form
Fill in all required fields with test data:
- Name: Test User
- Email: test@example.com
- Message: This is a test submission
Click Submit
Wait for response
Verify success message appears
Verify form clears or shows success

Expected Results:

✅ Submit button works
✅ Shows loading state during submission
✅ Success message appears
✅ No errors in console
✅ Form handles success gracefully

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 15: Form Validation

Objective: Test required field validation

Steps:

Open a form with required fields
Try to submit without filling required fields
Verify validation errors appear
Fill in fields one by one
Verify errors clear as fields are filled
Submit valid form

Expected Results:

✅ Cannot submit with empty required fields
✅ Validation messages appear
✅ Invalid fields are highlighted
✅ Validation clears when filled correctly
✅ Valid form submits successfully

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 16: View Submissions in Admin

Objective: Test submission viewing

Steps:

After submitting test form (Scenario 14)
Go to admin forms list
Find your test form
Click "View Submissions"
Verify submission appears in list
Check submission details

Expected Results:

✅ Submissions page loads
✅ Test submission is listed
✅ Submission data is displayed
✅ Timestamp is shown
✅ Can view submission details

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 17: Headless API - Get Form Schema

Objective: Test JSON API endpoint

Steps:

Open browser dev tools (F12)
Go to Console tab
Run this code (replace form_name):

fetch('/forms/test_contact_form/schema')
  .then(r => r.json())
  .then(data => {
    console.log('Form Schema:', data)
    console.log('✅ API works!' if data.schema else '❌ API failed')
  })

Verify response structure

Expected Results:

✅ API returns 200 status
✅ Response contains:
- id, name, displayName
- schema object with components array
- settings object
- submitUrl string
✅ No CORS errors

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 18: Headless API - Submit via API

Objective: Test form submission API

Steps:

Get form ID from admin (or use name)
In browser console, run:

fetch('/api/forms/YOUR_FORM_ID/submit', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({
    data: {
      name: 'API Test',
      email: 'api@example.com',
      message: 'Submitted via API'
    }
  })
})
  .then(r => r.json())
  .then(data => console.log('Submission result:', data))

Verify response

Expected Results:

✅ API returns 200 status
✅ Response contains:
- success: true
- submissionId
- message
✅ Submission appears in admin

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 19: File Upload Component (Optional - Requires R2)

Objective: Test file upload functionality

Steps:

Add File component to form
Configure:
- File Types: .pdf, .jpg, .png
- Storage: r2
Save form
On public form, upload a test file
Submit form
Verify file is stored

Expected Results:

✅ File component appears
✅ File picker works
✅ File uploads successfully
✅ Form submits with file reference
✅ File is stored in R2

Pass/Fail: ☐ PASS ☐ FAIL ☐ N/A (R2 not configured)
Notes:

Scenario 20: Address Component with Google Maps (Optional - Requires API Key)

Objective: Test address component

Steps:

Add Address component to form
Edit component settings
Set Google Maps API key in map.key field
Save form
On public form, start typing an address
Verify autocomplete suggestions appear

Expected Results:

✅ Address component appears
✅ Google Maps autocomplete works
✅ Can select address from dropdown
✅ Address data is captured
✅ No API key errors in console

Pass/Fail: ☐ PASS ☐ FAIL ☐ N/A (API key not configured)
Notes:

Scenario 21: Delete Form

Objective: Test form deletion

Steps:

Go to forms list
Find a test form to delete
Click "Delete" button
Confirm deletion (if prompted)
Verify form is removed from list
Try to access deleted form's public URL
Verify 404 error

Expected Results:

✅ Delete button works
✅ Confirmation dialog appears (if implemented)
✅ Form is removed from list
✅ Public URL returns 404
✅ No orphaned data

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 22: Browser Compatibility

Objective: Test in multiple browsers

Steps:

Test key scenarios in:
- Chrome/Chromium
- Firefox
- Safari (if available)
- Mobile browser
Focus on:
- Form builder UI
- Drag & drop
- Public form rendering
- Form submission

Expected Results:

✅ Works in Chrome
✅ Works in Firefox
✅ Works in Safari
✅ Mobile responsive
✅ No browser-specific errors

Pass/Fail: ☐ PASS ☐ FAIL
Browsers Tested:

Scenario 23: Mobile Responsiveness

Objective: Test on mobile devices

Steps:

Open public form on mobile device or resize browser to mobile width
Verify:
- Form is readable
- Components are touch-friendly
- Submit button is accessible
Fill and submit form
Test form builder on tablet (optional)

Expected Results:

✅ Form scales to mobile
✅ All components are usable
✅ Text is readable
✅ Buttons are tap-friendly
✅ Submission works on mobile

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

Scenario 24: Performance

Objective: Test loading times and responsiveness

Steps:

Create form with 20+ components
Time how long builder takes to load
Time how long public form takes to render
Test form submission speed
Check browser performance tab for issues

Expected Results:

✅ Builder loads in < 15 seconds
✅ Public form loads in < 5 seconds
✅ Submission completes in < 3 seconds
✅ No memory leaks
✅ No excessive CPU usage

Pass/Fail: ☐ PASS ☐ FAIL
Load Times:

Builder: ___ seconds
Public form: ___ seconds
Submission: ___ seconds

Scenario 25: Error Handling

Objective: Test error scenarios

Steps:

Try to access non-existent form: /forms/fake_form_name
Try to submit to non-existent form via API
Try to edit form without authentication
Try to create form with malformed data

Expected Results:

✅ Non-existent forms show 404
✅ API returns appropriate error codes
✅ Auth required for admin routes
✅ Validation errors are clear
✅ No crashes or white screens

Pass/Fail: ☐ PASS ☐ FAIL
Notes:

📊 Test Summary

Overall Results

Total Scenarios: 25
Passed: ___
Failed: ___
N/A: ___

Pass Rate: ____%

Critical Issues Found

Minor Issues Found

Browser Compatibility Matrix

Feature	Chrome	Firefox	Safari	Mobile
Form Builder	☐	☐	☐	☐
Public Forms	☐	☐	☐	☐
Submissions	☐	☐	☐	☐
API	☐	☐	☐	☐

✅ Launch Readiness Checklist

Before launching forms to production:

Functionality

All PASS criteria met
No critical bugs
Mobile responsive
Browser compatible

Performance

Builder loads in < 15 sec
Public forms load in < 5 sec
No memory leaks

Security

Auth required for admin
Public forms properly sandboxed
Input sanitized
No XSS vulnerabilities

Documentation

User guide created
API docs complete
Known issues documented

Infrastructure

Database migrations tested
Backups configured
Monitoring in place

🎯 Sign-Off

Tester Name: _______________
Date: _______________
Recommendation: ☐ Ready for Launch ☐ Needs Fixes ☐ Major Issues

Notes:

Testing Tips:

Use browser private/incognito mode for clean tests
Clear localStorage between test runs
Keep console open to catch errors
Take screenshots of issues
Note exact steps to reproduce bugs
Test with realistic data
Try to break things!

Good luck with testing! 🚀

Uh oh!

FilesExpand file tree

FORMS_TESTING_SCENARIOS.md

Latest commit

History

FORMS_TESTING_SCENARIOS.md

File metadata and controls

SonicJS Forms - Human Testing Scenarios

🎯 Overview

📋 Pre-Test Checklist

🧪 Testing Scenarios

Scenario 1: Forms List & Navigation

Scenario 2: Create New Form

Scenario 3: Form Name Validation

Scenario 4: Duplicate Form Prevention

Scenario 5: Form Builder Interface

Scenario 6: Display Type Toggle

Scenario 7: Drag & Drop Components

Scenario 8: Configure Component Properties

Scenario 9: Save Form

Scenario 10: Preview Form

Scenario 11: Create Multi-Page Wizard

Scenario 12: View Public Form (Single Page)

Scenario 13: View Public Wizard Form

Scenario 14: Submit Form Data

Scenario 15: Form Validation

Scenario 16: View Submissions in Admin

Scenario 17: Headless API - Get Form Schema

Scenario 18: Headless API - Submit via API

Scenario 19: File Upload Component (Optional - Requires R2)

Scenario 20: Address Component with Google Maps (Optional - Requires API Key)

Scenario 21: Delete Form

Scenario 22: Browser Compatibility

Scenario 23: Mobile Responsiveness

Scenario 24: Performance

Scenario 25: Error Handling

📊 Test Summary

Overall Results

Critical Issues Found

Minor Issues Found

Browser Compatibility Matrix

✅ Launch Readiness Checklist

Functionality

Performance

Security

Documentation

Infrastructure

🎯 Sign-Off