Skip to content

PRINT_TEST_GUIDE.md

Latest commit

 

History

History
252 lines (199 loc) · 7.2 KB

PRINT_TEST_GUIDE.md

File metadata and controls

252 lines (199 loc) · 7.2 KB

Reports Print Functionality - Testing Guide

✅ What Was Improved

1. Professional Print Styles

  • A4 page size with proper margins (1.5cm top/bottom, 1cm sides)
  • Black and white optimized for physical printing
  • Proper page breaks to avoid content splitting
  • Table headers repeat on each page
  • All decorative elements hidden for clean output

2. Smart Print Handler

  • Automatically expands all accordion sections before printing
  • Shows complete invoice details and line items
  • 100ms delay ensures DOM updates before print dialog

3. Print-Optimized Layout

  • Hero Section: Compact header with report title, date range, and KPIs
  • Filters: Shows active filters (date range, cashier, payment method, status)
  • Tables: Bordered tables with proper spacing, 8pt font for readability
  • Accordions: All expanded to show full invoice details
  • Buttons/UI Elements: Hidden (toolbar, tabs, action buttons)

🧪 How to Test

Test 1: Basic Print Preview

  1. Go to http://localhost:5173/reports
  2. Wait for data to load (you should see invoices from the last 7 days)
  3. Click the Print button in the toolbar
  4. Expected Result:
    • Print dialog opens
    • Preview shows:
      • Clean header with "Operational Reports" title
      • Date range displayed
      • KPI metrics (Invoices, Gross Total, Average Ticket)
      • All day sections expanded
      • All invoice rows expanded with line items
      • Clean black borders on tables
      • No buttons or colored backgrounds

Test 2: Print with Filters

  1. On the Reports page, set filters:
    • Change date range to "This Week"
    • Select a specific cashier
    • Choose payment method (e.g., "Cash")
  2. Click Print
  3. Expected Result:
    • Print preview shows filtered data only
    • Active filters are visible in the filters section
    • Only matching invoices appear

Test 3: Print Product Sales Tab

  1. Switch to Product Sales tab
  2. Click Print
  3. Expected Result:
    • Product sales table prints with:
      • Product name, quantity sold, revenue, orders count
      • Totals row at bottom
      • Clean table formatting

Test 4: Print Empty State

  1. Set date range to a future date (e.g., tomorrow)
  2. Click Print
  3. Expected Result:
    • Shows "No invoices for this range" message
    • Still prints header and filters section

Test 5: Multi-Page Print

  1. Set date range to "Last 30 Days" (if you have many orders)
  2. Click Print
  3. Expected Result:
    • Content spans multiple pages
    • Table headers repeat on each page
    • No content is cut off mid-row
    • Page numbers appear (if supported by browser)

📋 Print Preview Checklist

Use this checklist when testing the print functionality:

Visual Quality

  • All text is black (no gray or colored text)
  • Tables have clear borders
  • No overlapping content
  • Proper spacing between sections
  • Font sizes are readable (8-10pt for tables, 11-18pt for headers)

Content Completeness

  • Report title and date range visible
  • KPI metrics displayed
  • All accordion sections expanded
  • All invoice line items visible
  • Totals and subtotals included
  • Active filters shown

Hidden Elements

  • No toolbar buttons visible
  • No tab navigation visible
  • No "Refresh" or "Export" buttons
  • No hover effects or shadows
  • No quick range selector pills

Page Layout

  • Content fits within page margins
  • No horizontal scrolling needed
  • Tables don't overflow page width
  • Page breaks occur at logical points
  • Headers repeat on multi-page tables

🖨️ Browser-Specific Testing

Chrome/Edge

  1. Press Ctrl+P (Windows/Linux) or Cmd+P (Mac)
  2. In print dialog:
    • Destination: Save as PDF (for testing) or select printer
    • Layout: Portrait
    • Margins: Default
    • Scale: 100%
    • Background graphics: OFF (for clean print)

Firefox

  1. Press Ctrl+P or Cmd+P
  2. Similar settings as Chrome
  3. Firefox may show page numbers differently

Safari

  1. Press Cmd+P
  2. Check "Print backgrounds" is OFF
  3. Scale should be 100%

🐛 Common Issues & Solutions

Issue 1: Content Cut Off

Problem: Tables or text are cut off at page edges Solution:

  • Check that scale is set to 100% in print dialog
  • Verify margins are set to "Default" or "Normal"
  • If still cut off, the CSS may need adjustment for narrower margins

Issue 2: Accordions Not Expanded

Problem: Some accordion sections are still collapsed Solution:

  • This should be automatic, but if it fails:
  • Manually click to expand all sections before printing
  • Check browser console for JavaScript errors

Issue 3: Colors Still Showing

Problem: Backgrounds or colored text visible in print Solution:

  • Ensure "Background graphics" is turned OFF in print settings
  • The CSS uses !important flags to force black text

Issue 4: Buttons Still Visible

Problem: Action buttons appear in print preview Solution:

  • This indicates the print CSS isn't loading
  • Hard refresh the page: Ctrl+Shift+R or Cmd+Shift+R
  • Check browser console for CSS errors

📊 Sample Test Data

Your database currently has:

  • 68 orders total
  • Latest order: November 7, 2025
  • Default view: Last 7 days (Nov 2-8, 2025)

To test with more data:

  1. Create orders using the POS page (/pos)
  2. Or use the online shop to place test orders
  3. Vary payment methods, cashiers, and dates for comprehensive testing

✨ Advanced Features

Feature 1: Auto-Expand on Print

When you click Print, the system automatically:

  1. Expands all day accordion sections
  2. Expands all invoice detail rows
  3. Waits 100ms for DOM updates
  4. Opens print dialog with complete data

Feature 2: Table Header Repetition

Multi-page prints automatically repeat table headers on each page for easy reading.

Feature 3: Page Break Control

The CSS prevents awkward page breaks:

  • Hero section stays together
  • Filter section stays together
  • Invoice rows don't split across pages
  • Subtables stay with parent rows

🎯 Success Criteria

The print functionality is working correctly if:

  1. ✅ Print preview opens within 1 second of clicking Print
  2. ✅ All accordion sections are expanded automatically
  3. ✅ Content is black and white with clear borders
  4. ✅ No UI buttons or decorative elements visible
  5. ✅ Tables fit within page width without horizontal scroll
  6. ✅ Multi-page prints have proper page breaks
  7. ✅ Printed/PDF output matches the preview
  8. ✅ Report is readable and professional-looking

📞 Support

If you encounter issues:

  1. Check browser console for errors (F12 → Console tab)
  2. Try a different browser (Chrome recommended)
  3. Verify you're on the latest version of the code
  4. Test with a smaller date range first (e.g., "Today" or "Yesterday")

🔄 Quick Test Commands

# Ensure frontend is running
cd /home/naji/Desktop/mern-pos/frontend
npm run dev

# Ensure backend is running
cd /home/naji/Desktop/mern-pos/backend
npm run dev

# Open in browser
# Navigate to: http://localhost:5173/reports
# Click Print button
# Verify output matches this guide

Last Updated: November 8, 2025
Version: 1.0
Status: ✅ Ready for Testing