Skip to main content

🚀 Testing Quick Start Guide

Last Updated: October 26, 2025
Purpose: Get started testing the Communication System immediately
Time Required: 5 minutes setup + testing time

🎯 TWO TESTING APPROACHES​

A) Manual Testing (Start Now! - 0 setup)​

✅ No installation required
✅ Test immediately
✅ See features in action
⏱️ 2-3 hours to test everything

B) Automated Testing (Setup required - 30min)​

✅ Repeatable tests
✅ Regression prevention
✅ CI/CD integration
⏱️ 30min setup + 4-6 hours writing tests

Recommendation: Do BOTH! Start with A (manual), then add B (automated)

🚀 OPTION A: MANUAL TESTING​

Step 1: Start Dev Server (1 minute)​

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

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

Step 2: Login & Navigate (1 minute)​

  1. Open browser: http://localhost:5173
  2. Login with your credentials
  3. You should see the main dashboard

Step 3: Test Each Page (2 hours)​

Use the detailed guide: STEP-BY-STEP-TESTING-GUIDE.md

Quick Navigation URLs:

Communications History:
http://localhost:5173/main?form=/forms/CommunicationsHistoryPage

Communication Stats:
http://localhost:5173/main?form=/forms/CommunicationStatsPage

Send Communication:
http://localhost:5173/main?form=/forms/SendCommunicationPage

Templates Management:
http://localhost:5173/main?form=/forms/TemplatesManagementPage

Template Editor:
http://localhost:5173/main?form=/forms/TemplateEditorPage

Queue Monitoring:
http://localhost:5173/main?form=/forms/QueueMonitoringPage

Recipient Groups:
http://localhost:5173/main?form=/forms/RecipientGroupsPage

Recipient Rules:
http://localhost:5173/main?form=/forms/RecipientRulesPage

Global Preferences:
http://localhost:5173/main?form=/forms/GlobalPreferencesManagementPage

For Customer Preferences, navigate from code:

// In browser console or from another page
window.location.href = '/main';
// Then in React code:
navigate("/main", {
  state: {
    selectedForm: "/forms/CustomerPreferencesPage",
    entityType: "customer",
    entityId: "your-customer-id"
  }
});

Step 4: Document Results (30 minutes)​

Use: MANUAL-TESTING-CHECKLIST.md

Fill in:

  • ✅ Test results
  • ❌ Bugs found
  • 💡 Observations
  • 🎯 Recommendations

🧪 OPTION B: AUTOMATED TESTING​

Step 1: Install Dependencies (2 minutes)​

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

# Fix pnpm store if needed
pnpm install

# Install test dependencies
pnpm add -D vitest @vitest/ui @testing-library/react @testing-library/jest-dom @testing-library/user-event happy-dom

Step 2: Verify Setup (1 minute)​

Check that these files exist (✅ Already created!):

✅ vitest.config.ts
✅ src/test/setup.ts
✅ src/test/test-utils.tsx
✅ src/components/forms/communications/__tests__/CommunicationCard.test.tsx
✅ src/components/forms/communication-templates/__tests__/TemplateCard.test.tsx

Step 3: Run Tests (1 minute)​

# Run all tests
pnpm test

# Run with UI (recommended!)
pnpm test:ui

# Run with coverage
pnpm test:coverage

# Run in watch mode (as you code)
pnpm test:watch

Expected Output:

✓ src/components/forms/communications/__tests__/CommunicationCard.test.tsx (15)
✓ src/components/forms/communication-templates/__tests__/TemplateCard.test.tsx (14)

Test Files  2 passed (2)
     Tests  29 passed (29)

Step 4: Write More Tests (4-6 hours)​

Use examples in: TESTING-STRATEGY-AND-EXAMPLES.md

Priority order:

  1. Critical components (Cards, Lists)
  2. Critical hooks (useCommunications, useTemplates)
  3. Critical services (API calls)
  4. Integration tests
  5. E2E tests

🎯 RECOMMENDED TESTING ORDER​

Day 1: Manual Testing (3 hours)​

Morning (1.5h):

  1. Test Communications module (3 pages)
  2. Document issues

Afternoon (1.5h): 3. Test Templates module (2 pages) 4. Test Preferences module (2 pages) 5. Test Queue module (1 page) 6. Test Recipient Targeting (2 pages) 7. Document all findings

Day 2: Fix Issues (2-4 hours)​

Based on Manual Testing:

  1. Fix critical bugs
  2. Fix major issues
  3. Retest affected areas
  4. Document fixes

Day 3: Automated Tests (4-6 hours)​

Setup + Write Tests:

  1. Install dependencies (30min)
  2. Write component tests (2h)
  3. Write hook tests (2h)
  4. Write service tests (1h)
  5. Run full suite (30min)

📊 TESTING DASHBOARD​

Manual Testing Progress​

ModulePagesStatusIssues
Communications3☐ ✅ ☐ ⏳ ☐ ❌___
Templates2☐ ✅ ☐ ⏳ ☐ ❌___
Preferences2☐ ✅ ☐ ⏳ ☐ ❌___
Queue1☐ ✅ ☐ ⏳ ☐ ❌___
Recipient Targeting2☐ ✅ ☐ ⏳ ☐ ❌___

Overall Manual Testing: ☐ Complete ☐ In Progress ☐ Not Started

Automated Testing Progress​

TypeFilesTestsCoverageStatus
Component_________%☐ ✅ ☐ ⏳
Hook_________%☐ ✅ ☐ ⏳
Service_________%☐ ✅ ☐ ⏳
Integration______—☐ ✅ ☐ ⏳
E2E______—☐ ✅ ☐ ⏳

Overall Automated Testing: ☐ Complete ☐ In Progress ☐ Not Started

🎯 QUICK VALIDATION (15 Minutes)​

Smoke Test - Test ONE feature from each module​

5-Minute Smoke Test:

  1. ✅ Open Communications History → Verify list loads
  2. ✅ Open Templates Management → Verify templates load
  3. ✅ Open Customer Preferences → Verify toggles work
  4. ✅ Open Queue Monitoring → Verify stats show
  5. ✅ Open Recipient Groups → Verify groups load

If all 5 pass → Likely everything works! ✅

If any fail → Dig deeper with full tests 🔍

📝 TESTING CHECKLIST​

Pre-Testing Setup​

  • Dev server running
  • Logged in as admin/owner
  • Browser dev tools open
  • No console errors on load
  • Network tab recording (optional)

Manual Testing​

  • Test all 11 pages
  • Test on desktop
  • Test on mobile (resize)
  • Test dark mode
  • Test both languages (EN/ES)
  • Document all issues
  • Fill in MANUAL-TESTING-CHECKLIST.md

Automated Testing​

  • Install dependencies
  • Verify setup files exist
  • Run existing tests (should pass)
  • Write additional tests
  • Aim for 70%+ coverage
  • Fix failing tests

Integration Testing​

  • Test cross-module workflows
  • Template → Communication flow
  • Preferences → Communication blocking
  • Queue → Communication processing

Final Checks​

  • No console errors
  • No 404s in network tab
  • No memory leaks (check dev tools)
  • Acceptable performance
  • All features work

🐛 COMMON ISSUES TO WATCH FOR​

API Issues​

  • 401 Unauthorized (token expired?)
  • 403 Forbidden (permissions?)
  • 404 Not Found (wrong endpoint?)
  • 500 Server Error (backend issue?)
  • Network timeout (slow connection?)

UI Issues​

  • Broken layout on mobile
  • Overlapping elements
  • Cut-off text
  • Invisible text in dark mode
  • Missing icons
  • Broken images

Functional Issues​

  • Button does nothing
  • Form doesn't submit
  • Modal won't close
  • Filter doesn't filter
  • Search doesn't work
  • Pagination broken

Performance Issues​

  • Slow page load (>3s)
  • Laggy interactions
  • Memory leaks
  • Too many API calls
  • Large bundle size

✅ QUICK VALIDATION SCRIPT​

Run This in Browser Console​

// Check if all Communication pages are accessible
const pages = [
  '/main?form=/forms/CommunicationsHistoryPage',
  '/main?form=/forms/CommunicationStatsPage',
  '/main?form=/forms/SendCommunicationPage',
  '/main?form=/forms/TemplatesManagementPage',
  '/main?form=/forms/TemplateEditorPage',
  '/main?form=/forms/QueueMonitoringPage',
  '/main?form=/forms/RecipientGroupsPage',
  '/main?form=/forms/RecipientRulesPage',
  '/main?form=/forms/GlobalPreferencesManagementPage',
];

console.log('Testing page accessibility...');
pages.forEach((page, i) => {
  setTimeout(() => {
    window.location.href = page;
    console.log(`${i+1}/${pages.length}: ${page}`);
  }, i * 3000); // 3 seconds per page
});

// Watch console for errors

This will cycle through all pages automatically!

🎊 CONGRATULATIONS!​

You now have everything you need to test the Communication System:

✅ Manual Testing:

  • STEP-BY-STEP-TESTING-GUIDE.md (detailed walkthrough)
  • MANUAL-TESTING-CHECKLIST.md (results template)

✅ Automated Testing:

  • vitest.config.ts (configuration)
  • src/test/setup.ts (test setup)
  • src/test/test-utils.tsx (utilities + mock data)
  • Example tests (CommunicationCard, TemplateCard)
  • TESTING-STRATEGY-AND-EXAMPLES.md (full guide)

✅ Package Scripts:

  • pnpm test - Run tests
  • pnpm test:ui - Run with UI
  • pnpm test:coverage - Get coverage report
  • pnpm test:watch - Watch mode

🚀 START TESTING NOW!​

Option 1: Quick Validation (15 min)​

# Start server
cd apps/frontend-pwa && pnpm dev

# Open each URL in browser
# Verify page loads without errors

Option 2: Full Manual Test (3h)​

# Follow STEP-BY-STEP-TESTING-GUIDE.md
# Fill in MANUAL-TESTING-CHECKLIST.md

Option 3: Automated Tests (After dependencies)​

# Install dependencies first (resolve pnpm store issue)
pnpm install

# Then install test deps
pnpm add -D vitest @vitest/ui @testing-library/react @testing-library/jest-dom @testing-library/user-event happy-dom

# Run tests
pnpm test

🎯 NEXT STEPS AFTER TESTING​

If Tests Pass (✅)​

  1. Deploy to staging
  2. Test in staging environment
  3. Get user feedback
  4. Deploy to production
  5. Celebrate! 🎉

If Minor Issues (⚠️)​

  1. File bugs
  2. Fix non-blocking issues
  3. Retest
  4. Deploy

If Critical Issues (❌)​

  1. Fix immediately
  2. Full retest
  3. Code review
  4. Deploy when stable

📚 TESTING DOCUMENTS​

DocumentPurposeTime
TESTING-QUICK-START.mdThis file - Get started5min
STEP-BY-STEP-TESTING-GUIDE.mdDetailed test steps2-3h
MANUAL-TESTING-CHECKLIST.mdResults templateFill as you test
TESTING-STRATEGY-AND-EXAMPLES.mdFull testing guideReference

🎊 YOU'RE READY!​

Everything is set up for comprehensive testing:

✅ Test files created (2 examples)
✅ Test configuration ready
✅ Test utilities ready
✅ Manual testing guide ready
✅ Testing checklist ready
✅ Package scripts ready

Just start the dev server and begin testing! 🚀

Happy Testing! 🧪✨

Document Version: 1.0
Last Updated: October 26, 2025