🧪 Step-by-Step Manual Testing Guide

Purpose: Systematically test all 11 pages of the Communication System
Estimated Time: 2-3 hours
Prerequisites: Dev server running on http://localhost:5173 (or your port)

🚀 BEFORE YOU START

1. Start the Development Server

cd /Users/luisrangel/devLR/rpa/flowpos-workspace/apps/frontend-pwa
pnpm dev

Expected: Server starts on http://localhost:5173

Navigate to http://localhost:5173
Login with your credentials
Verify you reach the main dashboard

3. Open Developer Tools

Chrome/Edge: F12 or Cmd+Option+I
Firefox: F12 or Cmd+Option+K
Safari: Cmd+Option+I

Check Console: Should have no errors on page load ✅

📋 MODULE 1: COMMUNICATIONS (3 Pages)

Page 1: Communications History

Access: Navigate to /main?form=/forms/CommunicationsHistoryPage

Test Cases

TC-CH-001: Page Loads ✅

Page title displays: "Communications"
Subtitle displays
No console errors
Loading spinner appears then disappears

TC-CH-002: Communications List ✅

Communications display as cards
Each card shows: recipient, channel, status, date
Channel icons display correctly (Email=mail, SMS=message)
Status badges have correct colors
Dates are formatted correctly

TC-CH-003: Filters Work ✅

TC-CH-004: Search Works ✅

Enter text in search box
Results filter in real-time
Clear search button (X) works
Search works on: recipient, content, subject

TC-CH-005: Pagination Works ✅

If >20 communications, pagination appears
"Next" button works
"Previous" button works
Page numbers correct

TC-CH-006: View Details ✅

TC-CH-007: Resend Communication ✅

TC-CH-008: Delete Communication ✅

TC-CH-009: Refresh Works ✅

Click "Refresh" button
Loading indicator shows
List updates

TC-CH-010: Responsive Design ✅

Resize to mobile (< 768px)
Cards stack vertically
Filters collapse appropriately
All buttons accessible

Page 2: Communication Stats

Access: Navigate to /main?form=/forms/CommunicationStatsPage

Test Cases

TC-CS-001: Page Loads ✅

Page title: "Communication Statistics"
Date range inputs display
Stats cards load

TC-CS-002: Stats Display ✅

TC-CS-003: Breakdowns Display ✅

"By Channel" section shows
Email, SMS, WhatsApp, Messenger counts
"By Status" section shows
All status counts present
"By Type" section shows
All type counts with percentages

TC-CS-004: Date Range Filter ✅

TC-CS-005: Refresh Works ✅

Click "Refresh" button
Stats reload
No errors

Page 3: Send Communication

Access: Navigate to /main?form=/forms/SendCommunicationPage

Test Cases

TC-SC-001: Page Loads ✅

Page title: "Send Communication"
Form displays
All fields present

TC-SC-002: Channel Selection ✅

TC-SC-003: Form Validation ✅

Try submit empty form
Validation errors show
Required fields marked
Error messages helpful

TC-SC-004: Send Email ✅

TC-SC-005: Send SMS ✅

TC-SC-006: Send WhatsApp ✅

📋 MODULE 2: TEMPLATES (2 Pages)

Page 4: Templates Management

Access: Navigate to /main?form=/forms/TemplatesManagementPage

Test Cases

TC-TM-001: Page Loads ✅

Page title: "Communication Templates"
Subtitle displays
Create button visible
Templates list loads

TC-TM-002: Templates Display ✅

Templates show as cards
Each card shows: name, code, channel, type
Active/Inactive badges display
Channel icons show correct colors

TC-TM-003: Search Templates ✅

TC-TM-004: Filter Templates ✅

TC-TM-005: View Template ✅

TC-TM-006: Edit Template ✅

Click "Edit" on a template
Navigates to Template Editor
Form pre-filled with template data
(Continue with Editor tests below)

TC-TM-007: Duplicate Template ✅

TC-TM-008: Delete Template ✅

TC-TM-009: Create New Template ✅

Click "Create Template" button
Navigates to Template Editor
Form is empty/default values

Page 5: Template Editor

Access: Navigate to /main?form=/forms/TemplateEditorPage

Test Cases

TC-TE-001: Page Loads ✅

Page title: "Create Template" or "Edit Template"
Form displays
Variable picker panel shows
Handlebars helpers panel shows

TC-TE-002: Form Fields Work ✅

TC-TE-003: Channel-Specific Fields ✅

Select Email → Subject field appears
Select SMS → Subject field disappears
Select WhatsApp → Provider Template ID field appears
Select Messenger → Appropriate fields show

TC-TE-004: Variable Picker ✅

Click on a variable in the picker
Variable inserted at cursor position
Cursor repositions after variable
Variable has correct format: {{variableName}}

TC-TE-005: Handlebars Helpers ✅

Helpers list displays
Each helper shows syntax
Each helper shows example
Helpers panel scrollable

TC-TE-006: Form Validation ✅

TC-TE-007: Save Template ✅

TC-TE-008: Cancel Button ✅

Click "Cancel"
Redirects back to Templates Management
No save occurs

TC-TE-009: Active Toggle ✅

Toggle "Active" checkbox
State changes
Save works with inactive state

🔐 MODULE 3: PREFERENCES (2 Pages)

Page 6: Customer Preferences

Access: Navigate to /main?form=/forms/CustomerPreferencesPage (with state)

navigate("/main", {
  state: {
    selectedForm: "/forms/CustomerPreferencesPage",
    entityType: "customer",
    entityId: "your-customer-id-here"
  }
});

Test Cases

TC-CP-001: Page Loads ✅

Page title: "Customer Preferences"
Subtitle displays
Channel toggles display
Back button present

TC-CP-002: Channel Toggles Work ✅

TC-CP-003: Preferred Contacts Display ✅

If email set, shows under Email toggle
If phone set, shows under SMS toggle
If WhatsApp set, shows under WhatsApp toggle

TC-CP-004: Active Channels Summary ✅

Blue info box shows enabled channels
Lists all active channels
Updates when toggles change

TC-CP-005: Save Preferences ✅

TC-CP-006: Opt-Out Flow ✅

TC-CP-007: Restore After Opt-Out ✅

TC-CP-008: Back Button ✅

Click back button
Navigates to previous page
No unsaved changes warning (or shows warning)

Page 7: Global Preferences Management

Access: Navigate to /main?form=/forms/GlobalPreferencesManagementPage

Test Cases

TC-GP-001: Page Loads ✅

Page title: "Global Preferences Management"
Description displays
Refresh button visible

TC-GP-002: Preferences List ✅

All custom preferences display
Each shows entity type (customer/user)
Each shows entity ID
Channel status badges show for each

TC-GP-003: Opted-Out Indicators ✅

Opted-out customers have red banner
Opt-out date shows
Opt-out reason shows (if present)

TC-GP-004: Navigation to Customer ✅

Click "View" on a preference
Navigates to Customer Preferences page
Correct customer loads

TC-GP-005: Pagination ✅

If >20 preferences, pagination shows
Next/Previous buttons work
Page counter correct

TC-GP-006: Empty State ✅

If no custom preferences
Empty state message shows
Helpful description

TC-GP-007: Refresh ✅

Click "Refresh" button
List reloads
No errors

⏱️ MODULE 4: QUEUE (1 Page)

Page 8: Queue Monitoring

Access: Navigate to /main?form=/forms/QueueMonitoringPage

Test Cases

TC-QM-001: Page Loads ✅

Page title: "Communication Queue Monitoring"
Stats cards display
Jobs list displays

TC-QM-002: Stats Cards ✅

TC-QM-003: Filter Jobs ✅

Click "All" filter → Shows all jobs
Click "Pending" → Shows only pending
Click "Failed" → Shows only failed
Click "Completed" → Shows only completed
Filter highlights active

TC-QM-004: View Job Details ✅

TC-QM-005: Retry Failed Job ✅

TC-QM-006: Cancel Pending Job ✅

TC-QM-007: Process Queue Now ✅

TC-QM-008: Auto-Refresh Works ✅

Wait 30 seconds
Stats auto-refresh
Jobs auto-refresh
No page flicker

TC-QM-009: Bulk Select Jobs ✅ (NEW FEATURE!)

Click select-all checkbox in table header
All jobs selected
Selection counter shows: "X selected"
Bulk action toolbar appears
Uncheck select-all → All deselected

TC-QM-010: Bulk Retry ✅ (NEW FEATURE!)

TC-QM-011: Bulk Cancel ✅ (NEW FEATURE!)

TC-QM-012: High Failure Alert ✅

If failed jobs > 20
Red alert banner shows
Warning message displays
Actionable suggestions

TC-QM-013: Mobile View ✅

Resize to mobile
Table becomes cards
Checkboxes visible on cards
All actions accessible

📝 MODULE 5: TEMPLATES EDITOR (Standalone)

Already tested in Page 5 above ✅

👥 MODULE 6: RECIPIENT TARGETING (2 Pages)

Page 9: Recipient Groups

Access: Navigate to /main?form=/forms/RecipientGroupsPage

Test Cases

TC-RG-001: Page Loads ✅

Page title: "Recipient Groups"
Create button visible
Groups list loads

TC-RG-002: Groups Display ✅

Groups show as cards
Each shows: name, description, member count
Active/Inactive badges display

TC-RG-003: Create Group ✅

TC-RG-004: Edit Group ✅

TC-RG-005: Delete Group ✅

TC-RG-006: View Members ✅

Click "View Members" on a group
Members modal opens
Members list displays
"Add Member" button visible

TC-RG-007: Add Member ✅

TC-RG-008: Remove Member ✅

Click "Remove" on a member
Confirmation dialog
Click "Yes"
Member removed from list

Page 10: Recipient Rules

Access: Navigate to /main?form=/forms/RecipientRulesPage

Test Cases

TC-RR-001: Page Loads ✅

Page title: "Recipient Rules"
Create button visible
Rules list loads

TC-RR-002: Rules Display ✅

Rules show as cards
Each shows: communication type, channel, targeting type
Priority badges display
Active/Inactive badges display

TC-RR-003: Create Rule ✅

TC-RR-004: Edit Rule ✅

TC-RR-005: Delete Rule ✅

TC-RR-006: Toggle Active ✅

Click toggle/deactivate on a rule
Rule status changes
Visual feedback immediate

TC-RR-007: Preview Recipients ✅

🎯 CROSS-MODULE INTEGRATION TESTS

INT-001: Template → Communication Flow ✅

Steps:

Create a template with variables
Navigate to Send Communication
(Ideally select the template - if feature exists)
Send communication
View in Communications History
Verify content has variables replaced

Result: ☐ PASS ☐ FAIL

INT-002: Preferences Block Communication ✅

Steps:

Navigate to Customer Preferences
Disable Email channel
Save preferences
Try to send email to that customer
Verify email is blocked or not sent

Result: ☐ PASS ☐ FAIL

INT-003: Queue Processes Communication ✅

Steps:

Send a communication
Navigate to Queue Monitoring
Verify job appears in queue
Wait for processing (or click "Process Now")
Verify job moves to "completed"
Navigate to Communications History
Verify communication shows "sent" or "delivered"

Result: ☐ PASS ☐ FAIL

📱 RESPONSIVE TESTING

Desktop (>1024px)

All pages render correctly
All features accessible
No horizontal scroll
Tables display properly

Tablet (768-1024px)

Pages adapt to width
Tables remain usable or convert
Filters work
Modals centered

Mobile (<768px)

🌓 DARK MODE TESTING

For Each Page:

🔍 ACCESSIBILITY TESTING

All images have alt text
All buttons have labels
All form inputs have labels
ARIA attributes present

⚡ PERFORMANCE TESTING

Page Load Times

Communications History: < 2s
Templates Management: < 2s
Queue Monitoring: < 2s
All others: < 1s

API Response Times

GET requests: < 500ms
POST requests: < 1s
PATCH requests: < 1s

Interaction Responsiveness

Filters: < 100ms
Search: < 200ms
Button clicks: Immediate feedback
Modal open: < 100ms

✅ FINAL CHECKLIST

Before Deploying to Production

Sign-Off: ☐ READY FOR PRODUCTION 🚀

📝 NOTES & OBSERVATIONS

Date: _______________
Time Started: _______________
Time Ended: _______________
Total Duration: _______________

General Notes:
- 
- 
- 

Bugs to File:
1. 
2. 
3. 

Improvements Suggested:
1. 
2. 
3. 

🎯 NEXT STEPS

Based on testing results:

If All Tests Pass:

Deploy to staging
Test in staging
Deploy to production
Monitor production

If Minor Issues:

File bugs
Fix non-blocking issues
Retest
Deploy

If Critical Issues:

Fix immediately
Full retest
Code review
Deploy when stable

Testing Complete! ✅

Tester Signature: _______________
Date: _______________

Document Version: 1.0
Last Updated: October 26, 2025

🚀 BEFORE YOU START​

1. Start the Development Server​

2. Login to the Application​

3. Open Developer Tools​

📋 MODULE 1: COMMUNICATIONS (3 Pages)​

Page 1: Communications History​

Test Cases​

Page 2: Communication Stats​

Test Cases​

Page 3: Send Communication​

Test Cases​

📋 MODULE 2: TEMPLATES (2 Pages)​

Page 4: Templates Management​

Test Cases​

Page 5: Template Editor​

Test Cases​

🔐 MODULE 3: PREFERENCES (2 Pages)​

Page 6: Customer Preferences​

Test Cases​

Page 7: Global Preferences Management​

Test Cases​

⏱️ MODULE 4: QUEUE (1 Page)​

Page 8: Queue Monitoring​

Test Cases​

📝 MODULE 5: TEMPLATES EDITOR (Standalone)​

Already tested in Page 5 above ✅​

👥 MODULE 6: RECIPIENT TARGETING (2 Pages)​

Page 9: Recipient Groups​

Test Cases​

Page 10: Recipient Rules​

Test Cases​

🎯 CROSS-MODULE INTEGRATION TESTS​

INT-001: Template → Communication Flow ✅​

INT-002: Preferences Block Communication ✅​

INT-003: Queue Processes Communication ✅​

📱 RESPONSIVE TESTING​

Desktop (>1024px)​

Tablet (768-1024px)​

Mobile (<768px)​

🌓 DARK MODE TESTING​

🔍 ACCESSIBILITY TESTING​

Keyboard Navigation​

Screen Reader​

⚡ PERFORMANCE TESTING​

Page Load Times​

API Response Times​

Interaction Responsiveness​

✅ FINAL CHECKLIST​

Before Deploying to Production​

📝 NOTES & OBSERVATIONS​

🎯 NEXT STEPS​

🚀 BEFORE YOU START

1. Start the Development Server

2. Login to the Application

3. Open Developer Tools

📋 MODULE 1: COMMUNICATIONS (3 Pages)

Page 1: Communications History

Test Cases

Page 2: Communication Stats

Test Cases

Page 3: Send Communication

Test Cases

📋 MODULE 2: TEMPLATES (2 Pages)

Page 4: Templates Management

Test Cases

Page 5: Template Editor

Test Cases

🔐 MODULE 3: PREFERENCES (2 Pages)

Page 6: Customer Preferences

Test Cases

Page 7: Global Preferences Management

Test Cases

⏱️ MODULE 4: QUEUE (1 Page)

Page 8: Queue Monitoring

Test Cases

📝 MODULE 5: TEMPLATES EDITOR (Standalone)

Already tested in Page 5 above ✅

👥 MODULE 6: RECIPIENT TARGETING (2 Pages)

Page 9: Recipient Groups

Test Cases

Page 10: Recipient Rules

Test Cases

🎯 CROSS-MODULE INTEGRATION TESTS

INT-001: Template → Communication Flow ✅

INT-002: Preferences Block Communication ✅

INT-003: Queue Processes Communication ✅

📱 RESPONSIVE TESTING

Desktop (>1024px)

Tablet (768-1024px)

Mobile (<768px)

🌓 DARK MODE TESTING

🔍 ACCESSIBILITY TESTING

Keyboard Navigation

Screen Reader

⚡ PERFORMANCE TESTING

Page Load Times

API Response Times

Interaction Responsiveness

✅ FINAL CHECKLIST

Before Deploying to Production

📝 NOTES & OBSERVATIONS

🎯 NEXT STEPS