Test Matrix: Feedback Widget & Magic Link Fix

Date: 2026-01-13 Status: Ready for Testing Features: Feedback Widget, Magic Link Auth Fix

---

Feature Summary

1. Feedback Widget

Custom feedback widget (Vercel-style) that saves bug reports and feature requests to Supabase.

Files Created:

File	Purpose
database/fleetos/feedback-schema.sql	Database migration
services/fleetos/FeedbackService.ts	CRUD operations
components/fleetos/feedback/FeedbackWidget.tsx	Floating widget
components/fleetos/feedback/FeedbackForm.tsx	Submission form
components/fleetos/feedback/useScreenCapture.ts	Screenshot hook
components/fleetos/feedback/index.ts	Barrel export

2. Magic Link Auth Fix

Fixed issue where clicking magic link redirected to login page instead of dashboard.

Root Causes Fixed:

1. URL not cleared after verification (caused re-verification loop on refresh)

2. Session not restored from localStorage on app load (different storage keys)

Files Modified:

• App.tsx - Added URL clearing and session restoration

---

Test Matrix

Test 1: Feedback Widget Visibility

Path: Any FleetOS page

Step	Action	Expected Result
1	Navigate to /?view=FLEETOS	FleetOS landing loads
2	Look at bottom-right corner	Green circular feedback button visible
3	Hover over button	Button shows tooltip "Send feedback"

Pass Criteria: Floating green button visible on all FleetOS views

---

Test 2: Open Feedback Form

Path: Any FleetOS page → Feedback button

Step	Action	Expected Result
1	Click green feedback button	Form panel slides up
2	Verify panel header	Shows "Send Feedback" with X close button
3	Verify form elements	Bug/Feature toggle, Category dropdown, Title, Description fields

Pass Criteria: Form opens with smooth animation, all fields visible

---

Test 3: Bug Report Submission

Path: Feedback form → Bug tab

Step	Action	Expected Result
1	Click "Bug" toggle (should be default)	Bug tab active (highlighted)
2	Select category from dropdown	Category selected (UI, Performance, Data, Integration, Other)
3	Enter title: "Test bug report"	Title field accepts input
4	Enter description: "Testing feedback widget"	Description field accepts multiline input
5	Click "Submit Feedback"	Loading state shows, then success toast appears
6	Verify success toast	Shows "Thanks for your feedback!" with checkmark

Pass Criteria:

• Form submits without error

• Success toast appears

• Form closes after submission

• Record appears in fleetos_feedback table

Verify in Database:

SELECT * FROM fleetos_feedback WHERE title = 'Test bug report';

---

Test 4: Feature Request Submission

Path: Feedback form → Feature tab

Step	Action	Expected Result
1	Open feedback form	Form panel appears
2	Click "Feature" toggle	Feature tab becomes active
3	Select category: "Integration"	Category selected
4	Enter title: "Test feature request"	Title accepted
5	Enter description: "Would like X feature"	Description accepted
6	Click "Submit Feedback"	Success toast appears

Pass Criteria: Feature request saved with feedback_type = 'feature_request'

---

Test 5: Screenshot Capture

Path: Feedback form → Camera button

Step	Action	Expected Result
1	Open feedback form	Form appears
2	Click camera icon button	Brief loading state, then screenshot preview appears
3	Verify preview	Shows thumbnail of current page (excluding widget)
4	Click X on preview	Screenshot removed
5	Re-capture and submit	Screenshot URL saved with feedback

Pass Criteria:

• Screenshot captures current viewport

• Feedback widget itself excluded from capture

• Preview shows correctly

• Can remove and re-capture

---

Test 6: Optional Email Field

Path: Feedback form → Email field

Step	Action	Expected Result
1	Open feedback form	Form appears
2	Leave email blank, fill other fields	Submit succeeds
3	Open form again	Form appears fresh
4	Enter email: "[e-mail]"	Email field accepts input
5	Submit	Email saved with feedback

Pass Criteria: Email is optional, saved when provided

---

Test 7: Form Validation

Path: Feedback form → Submit with missing fields

Step	Action	Expected Result
1	Open form, leave title empty	n/a
2	Click Submit	Error: title required
3	Enter title, leave description empty	n/a
4	Click Submit	Error: description required
5	Fill all required fields	Submit succeeds

Pass Criteria: Validation prevents incomplete submissions

---

Test 8: Close Form Without Submitting

Path: Feedback form → X button

Step	Action	Expected Result
1	Open feedback form	Form appears
2	Fill in some fields (don't submit)	Fields have content
3	Click X close button	Form closes with animation
4	Re-open form	Form resets to empty state

Pass Criteria: Form can be closed without saving, resets on re-open

---

Test 9: Browser Context Auto-Capture

Path: Feedback form → Submit and verify database

Step	Action	Expected Result
1	Navigate to specific page (e.g., /?view=FLEETOS_SUPPLIER_DIRECTORY)	Page loads
2	Open feedback form	Form appears
3	Submit feedback	Success
4	Check database record	page_url, user_agent, screen_resolution auto-populated

Pass Criteria: Browser context captured automatically

Verify in Database:

SELECT page_url, user_agent, screen_resolution
FROM fleetos_feedback
ORDER BY created_at DESC
LIMIT 1;

---

Test 10: Magic Link - Email Receipt

Path: Login → Request magic link

Step	Action	Expected Result
1	Go to FleetOS login	Login page loads
2	Enter email address	Email field accepts input
3	Click "Send Magic Link"	Success message: "Check your email"
4	Check email inbox	Email received with magic link
5	Verify link format	URL contains /auth/verify?token=...

Pass Criteria: Magic link email sent with correct URL format

---

Test 11: Magic Link - Click Redirects to Dashboard

Path: Email → Click magic link

Step	Action	Expected Result
1	Click magic link in email	Browser opens to /auth/verify?token=...
2	Observe verification screen	Shows "Verifying..." spinner
3	Wait for verification	Shows "Email Verified!" briefly
4	Observe redirect	Dashboard loads (NOT login page)
5	Check URL bar	URL shows /?view=FLEETOS (token cleared)

Pass Criteria:

• User lands on dashboard after clicking magic link

• URL is cleared (no token in URL)

• User state is authenticated

---

Test 12: Magic Link - Session Persists on Refresh

Path: Dashboard → Refresh page

Step	Action	Expected Result
1	Complete magic link login (Test 11)	Dashboard loads
2	Refresh page (F5 or Cmd+R)	Page reloads
3	Observe result	Dashboard loads (still logged in)
4	Check console	Shows "FleetOS session restored from localStorage"

Pass Criteria: Session persists across page refreshes

---

Test 13: Magic Link - Expired Token Handling

Path: Click old/expired magic link

Step	Action	Expected Result
1	Request magic link	Email sent
2	Wait 24+ hours (or manually modify token exp)	Token expires
3	Click expired link	Verification page loads
4	Observe result	Shows "Verification Failed"
5	Click "Back to Login"	Redirects to login page

Pass Criteria: Expired tokens show error, redirect to login

---

Test 14: RLS Policy - Anonymous Submission

Path: Submit feedback without logging in

Step	Action	Expected Result
1	Open app in incognito/private window	Fresh session, no auth
2	Navigate to FleetOS page	Page loads
3	Open feedback form	Form appears
4	Submit bug report	Success (no auth required)
5	Check database	Record created with user_id = NULL

Pass Criteria: Anonymous users can submit feedback

---

Database Verification Queries

Check Feedback Records

SELECT
  feedback_id,
  feedback_type,
  category,
  title,
  status,
  contact_email,
  page_url,
  created_at
FROM fleetos_feedback
ORDER BY created_at DESC
LIMIT 10;

Check RLS Policies

SELECT schemaname, tablename, policyname, cmd, qual
FROM pg_policies
WHERE tablename = 'fleetos_feedback';

Check Total Submissions

SELECT
  feedback_type,
  category,
  COUNT(*) as count
FROM fleetos_feedback
GROUP BY feedback_type, category
ORDER BY count DESC;

---

Known Edge Cases

1. Large Screenshots: Very large viewport screenshots may fail to upload. Consider resizing in useScreenCapture.ts if needed.

2. Rapid Submissions: No rate limiting implemented. Could add client-side throttle if abuse occurs.

3. Storage Bucket: If feedback-screenshots bucket doesn't exist, screenshot upload silently fails. Screenshot is optional, so form still submits.

4. Token Reuse: Magic link tokens are not invalidated after use. Token expiry (24h) is the only protection.

---

Test Environment Setup

1. Start dev server: npm run dev

2. Navigate to: http://localhost:3000/?view=FLEETOS

3. Open browser DevTools Console to monitor logs

4. Use Supabase Dashboard to verify database records

---

Sign-Off

Tester	Date	Status	Notes

---

Generated: 2026-01-13