# FSM HTMX Browser Testing Checklist

This checklist provides manual testing steps to verify the FSM+HTMX integration
works correctly across different browsers and scenarios.

## Quick Start

Before testing, ensure:
1. Development server is running: `uv run manage.py runserver`
2. Test users exist: `uv run manage.py create_test_users`
3. Test data exists: `uv run manage.py loaddata test_data`

## Moderation Dashboard

### Edit Submissions

- [ ] **Approve submission** shows green toast and updates status badge to "Approved"
- [ ] **Reject submission** shows red toast and updates status badge to "Rejected"
- [ ] **Escalate submission** shows yellow toast and updates status badge to "Escalated"
- [ ] Confirmation dialog appears for approve/reject/escalate actions
- [ ] Loading spinner appears during transition (visible briefly)
- [ ] Row updates without full page reload
- [ ] Multiple transitions in sequence work correctly
- [ ] Transition buttons disappear after final state reached (Approved/Rejected)
- [ ] Status badge color matches state (green=approved, red=rejected, yellow=escalated)
- [ ] Toast notification auto-dismisses after ~3-5 seconds

### Photo Submissions

- [ ] **Approve photo** shows success toast and creates approved photo
- [ ] **Reject photo** shows warning toast and updates status
- [ ] Photo preview remains visible during transition
- [ ] Loading state shown while processing image approval

### Moderation Queue

- [ ] **Start** button transitions item to "In Progress"
- [ ] **Complete** button transitions item to "Completed"
- [ ] **Cancel** button transitions item to "Cancelled"
- [ ] Queue items update in real-time without refresh
- [ ] Assignment updates correctly when claiming item

### Bulk Operations

- [ ] **Cancel** pending operation shows confirmation and cancels
- [ ] Progress indicator updates during operation
- [ ] Cannot cancel completed operations (button hidden)

## Park Detail Page

### Status Transitions (as Moderator)

- [ ] **Close Temporarily** button visible for operating parks
- [ ] Status badge updates to "Temporarily Closed" (yellow)
- [ ] **Reopen** button appears after temporary closure
- [ ] Status badge updates back to "Operating" (green)
- [ ] **Close Permanently** transitions to "Permanently Closed" (red)
- [ ] **Mark as Demolished** available only from permanently closed
- [ ] **Mark as Relocated** available only from permanently closed
- [ ] Status badge updates to "Demolished" (gray) or "Relocated" (gray)

### Status Actions Section

- [ ] Available transitions update based on current state
- [ ] Buttons hidden for invalid transitions (can't reopen operating park)
- [ ] Confirmation dialogs appear for destructive transitions
- [ ] Toast notifications appear for all transitions
- [ ] Section refreshes via HTMX swap without full page reload

### Unauthorized Users

- [ ] Regular users cannot see transition buttons
- [ ] Status badge visible but not clickable for regular users
- [ ] Moderator buttons visible only to moderators

## Ride Detail Page

### Status Transitions (as Moderator)

- [ ] **Close Temporarily** button works correctly
- [ ] **Mark SBNO** transitions to "Standing But Not Operating"
- [ ] **Set Closing** transitions to "Closing" status
- [ ] Closing status with future date shows countdown (if implemented)
- [ ] **Reopen** button appears for closed/SBNO rides
- [ ] **Close Permanently** available for operating/closed_temp rides
- [ ] **Mark as Demolished** available only from permanently closed
- [ ] **Mark as Relocated** available only from permanently closed

### SBNO State

- [ ] SBNO status badge shows distinct styling (orange/amber)
- [ ] Reopen available from SBNO state
- [ ] Close Permanently available from SBNO state

## Error Handling

### Invalid Transitions

- [ ] Attempting invalid transition shows error toast (red)
- [ ] Error message is user-friendly (not technical exception)
- [ ] Database state unchanged after failed transition
- [ ] UI remains in consistent state after error

### Permission Denied

- [ ] Unauthorized transition attempt shows 403 error toast
- [ ] Error message says "Permission denied" or similar
- [ ] No partial state change occurs

### Network Errors

- [ ] Offline/network failure shows error toast
- [ ] "Connection failed" or similar message displayed
- [ ] Retry option available (if applicable)
- [ ] UI recovers gracefully from network errors

### Server Errors

- [ ] 500 errors show user-friendly message
- [ ] No raw exception/traceback shown to user
- [ ] Error toast has red/danger styling

## Loading States

- [ ] Loading spinner/indicator appears immediately on button click
- [ ] Button becomes disabled during transition
- [ ] Spinner disappears when response received
- [ ] Multiple rapid clicks don't cause duplicate requests

## Confirmation Dialogs

- [ ] Dialog appears for dangerous transitions (reject, cancel, demolish)
- [ ] Dialog shows appropriate warning message
- [ ] Clicking "Cancel" prevents transition
- [ ] Clicking "OK/Confirm" executes transition
- [ ] ESC key dismisses dialog without action
- [ ] Dialog backdrop click dismisses without action

## Cross-Browser Testing

Test all scenarios above in each browser:

### Desktop

- [ ] Chrome/Chromium (latest)
- [ ] Firefox (latest)
- [ ] Safari/WebKit (latest)
- [ ] Edge (latest)

### Mobile

- [ ] Mobile Safari (iOS 15+)
- [ ] Chrome Mobile (Android)
- [ ] Samsung Internet (Android)

### Notes

- Test with different viewport sizes (mobile, tablet, desktop)
- Verify touch interactions work on mobile
- Check that modals/dialogs are properly positioned on mobile

## Accessibility

### Keyboard Navigation

- [ ] All transition buttons focusable via Tab key
- [ ] Enter key activates focused button
- [ ] Escape key closes confirmation dialogs
- [ ] Focus indicator visible on all interactive elements
- [ ] Focus returns to appropriate element after transition

### Screen Reader

- [ ] Status changes announced to screen readers
- [ ] Toast notifications announced (aria-live region)
- [ ] Button labels are descriptive
- [ ] Loading states communicated to screen readers

### Visual

- [ ] Color contrast meets WCAG AA standards
- [ ] Status colors distinguishable without relying solely on color
- [ ] Focus indicators have sufficient contrast
- [ ] Text remains readable at 200% zoom

## Performance

- [ ] Transitions complete in under 500ms (typical)
- [ ] No visible flickering during HTMX swap
- [ ] Memory usage stable after multiple transitions
- [ ] No console errors during normal operation

## Test Data Reset

After testing, reset test data:
```bash
uv run manage.py flush_test_data
uv run manage.py loaddata test_data
```

## Reporting Issues

When reporting issues:
1. Note browser and version
2. Include console errors (if any)
3. Describe expected vs actual behavior
4. Include network request/response details
5. Screenshot or video if possible

## Automated Testing

Run automated E2E tests to complement manual testing:

```bash
# Run all FSM E2E tests
pytest backend/tests/e2e/test_moderation_fsm.py
pytest backend/tests/e2e/test_park_ride_fsm.py
pytest backend/tests/e2e/test_fsm_permissions.py
pytest backend/tests/e2e/test_fsm_error_handling.py

# Run with specific browser
pytest --browser firefox backend/tests/e2e/

# Run with headed mode (visible browser)
pytest --headed backend/tests/e2e/

# Run integration tests (faster, no browser)
pytest backend/tests/integration/test_fsm_transition_view.py
```
