pantry/docs/E2E_TESTING.md

End-to-End Testing Guide

Overview

This guide covers manual end-to-end testing of the Pantry MVP. These tests ensure all critical user flows work correctly before release.

Test Environment

Requirements:

• Browser: Chrome/Edge, Firefox, or Safari
• Resolution: 1920x1080 (desktop) and 390x844 (mobile)
• Network: Both online and offline modes
• Data: Fresh database with seed data

Critical User Flows

1. Authentication Flow

Test 1.1: Sign Up

Priority: HIGH

1. Navigate to app home page
2. Click "Sign Up" or similar
3. Enter email: test@example.com
4. Enter password: SecurePass123!
5. Confirm password
6. Submit form

Expected Results:

• ✅ Validation errors if password too weak
• ✅ Account created successfully
• ✅ Redirected to home/dashboard
• ✅ Welcome message shown (optional)

Test 1.2: Sign In

Priority: HIGH

1. Sign out if signed in
2. Navigate to home page
3. Click "Sign In"
4. Enter correct credentials
5. Submit form

Expected Results:

• ✅ Successfully signed in
• ✅ Redirected to dashboard
• ✅ User menu shows email/name

Test 1.3: Sign In (Wrong Credentials)

Priority: MEDIUM

1. Try signing in with wrong password
2. Try signing in with non-existent email

Expected Results:

• ✅ Error message shown
• ✅ Form not cleared (email retained)
• ✅ No redirect
• ✅ Try again allowed

Test 1.4: Sign Out

Priority: HIGH

1. While signed in, click user menu
2. Click "Sign Out"

Expected Results:

• ✅ Signed out successfully
• ✅ Redirected to sign-in page
• ✅ Cannot access protected pages

2. Inventory Management

Test 2.1: View Inventory List

Priority: HIGH

1. Sign in
2. Navigate to home/inventory page

Expected Results:

• ✅ List of pantry items displayed
• ✅ Items show: name, quantity, unit, location tags
• ✅ Empty state if no items
• ✅ Loading state while fetching

Test 2.2: Add Item Manually

Priority: HIGH

1. Navigate to inventory
2. Click "Add Item" button
3. Enter item details:
   • Name: "Olive Oil"
   • Quantity: 1
   • Unit: L (liter)
   • Tags: pantry, cooking-oil
4. Submit

Expected Results:

• ✅ Form validation works
• ✅ Item appears in list immediately
• ✅ Success message shown
• ✅ Form cleared for next entry

Test 2.3: Edit Item

Priority: HIGH

1. Click on an existing item
2. Click "Edit" button
3. Change quantity from 1 to 0.5
4. Save changes

Expected Results:

• ✅ Modal/form opens with current values
• ✅ Changes saved successfully
• ✅ List updated immediately
• ✅ No page reload needed

Test 2.4: Delete Item

Priority: HIGH

1. Click on an item
2. Click "Delete" button
3. Confirm deletion

Expected Results:

• ✅ Confirmation dialog shown
• ✅ Item removed from list
• ✅ Success message shown
• ✅ Can undo (optional)

Test 2.5: Filter by Tag

Priority: MEDIUM

1. View inventory list
2. Click on a tag filter (e.g., "fridge")

Expected Results:

• ✅ Only items with that tag shown
• ✅ Filter state persists
• ✅ Clear filter button available
• ✅ Item count updated

3. Barcode Scanning

Test 3.1: Scan Known Product

Priority: HIGH

1. Navigate to Scan page
2. Allow camera permissions
3. Scan a barcode (e.g., Coca-Cola)

Expected Results:

• ✅ Camera opens
• ✅ Barcode detected
• ✅ Product info fetched from Open Food Facts
• ✅ Pre-filled add form shown
• ✅ Can edit before adding

Test 3.2: Scan Unknown Product

Priority: MEDIUM

1. Scan a barcode not in database
2. Manual entry form shown

Expected Results:

• ✅ "Product not found" message
• ✅ Option to add manually
• ✅ Barcode pre-filled
• ✅ Can still save item

Test 3.3: Camera Permission Denied

Priority: MEDIUM

1. Block camera permission
2. Try to scan

Expected Results:

• ✅ Permission prompt shown
• ✅ Helpful error message
• ✅ Instructions to enable camera
• ✅ Option to add manually

4. Tag Management

Test 4.1: Create Tag

Priority: MEDIUM

1. Go to Settings → Tags
2. Click "Add Tag"
3. Enter name: "freezer"
4. Pick color: blue
5. Save

Expected Results:

• ✅ Tag created successfully
• ✅ Appears in tag list
• ✅ Available in item forms
• ✅ Color applied correctly

Test 4.2: Edit Tag

Priority: LOW

1. Click on existing tag
2. Change name or color
3. Save

Expected Results:

• ✅ Tag updated
• ✅ All items with tag reflect changes
• ✅ No broken references

Test 4.3: Delete Tag

Priority: LOW

1. Click delete on a tag
2. Confirm

Expected Results:

• ✅ Confirmation shown if tag in use
• ✅ Tag removed
• ✅ Items keep other tags
• ✅ No app crashes

5. PWA Installation

Test 5.1: Install Prompt (Desktop)

Priority: MEDIUM

1. Visit app on Chrome (desktop)
2. Wait 3 seconds

Expected Results:

• ✅ Install banner appears
• ✅ Shows app icon and name
• ✅ Install button works
• ✅ Can dismiss and won't show for 7 days

Test 5.2: Install from Settings

Priority: MEDIUM

1. Go to Settings → App
2. Click "Install App" button

Expected Results:

• ✅ Browser install dialog opens
• ✅ App installs to desktop/home screen
• ✅ Launches in standalone mode
• ✅ Icon and name correct

Test 5.3: iOS Safari Add to Home Screen

Priority: HIGH (iOS users)

1. Open app in Safari (iOS)
2. Tap Share button
3. Tap "Add to Home Screen"
4. Confirm

Expected Results:

• ✅ Icon added to home screen
• ✅ Opens in standalone mode
• ✅ Splash screen shown
• ✅ No Safari UI

6. Offline Functionality

Test 6.1: Work Offline

Priority: HIGH

1. Load app while online
2. Navigate to all pages
3. Disconnect internet
4. Try navigating again

Expected Results:

• ✅ Offline banner appears
• ✅ Previously visited pages load
• ✅ Cached data visible
• ✅ No white screens or errors

Test 6.2: Offline Indicator

Priority: MEDIUM

1. Go offline
2. Check for visual feedback

Expected Results:

• ✅ "You're offline" banner at top
• ✅ Banner is amber/warning color
• ✅ Icon indicates offline status

Test 6.3: Return Online

Priority: MEDIUM

1. Go offline
2. Wait a few seconds
3. Go online

Expected Results:

• ✅ "Back online!" banner (green)
• ✅ Auto-hides after 3 seconds
• ✅ Data syncs (if pending changes)

7. Responsive Design

Test 7.1: Mobile View

Priority: HIGH

1. Resize browser to 390px wide
2. Navigate all pages

Expected Results:

• ✅ Navigation adapts (hamburger menu)
• ✅ Lists stack vertically
• ✅ Buttons are touch-friendly
• ✅ No horizontal scroll
• ✅ Text readable without zoom

Test 7.2: Tablet View

Priority: MEDIUM

1. Resize to 768px wide

Expected Results:

• ✅ Layout adapts
• ✅ 2-column grids where appropriate
• ✅ Navigation hybrid or drawer

Test 7.3: Desktop View

Priority: MEDIUM

1. View at 1920px wide

Expected Results:

• ✅ Full navigation visible
• ✅ Multi-column layouts
• ✅ Content not stretched too wide
• ✅ Whitespace used effectively

8. Performance

Test 8.1: Page Load Time

Priority: HIGH

1. Clear cache
2. Load home page
3. Measure time to interactive

Expected Results:

• ✅ < 3 seconds on 4G
• ✅ < 1 second on repeat visit
• ✅ Loading indicators shown

Test 8.2: Lighthouse Score

Priority: MEDIUM

1. Open DevTools → Lighthouse
2. Run "Progressive Web App" audit

Expected Results:

• ✅ PWA score: 90+
• ✅ Performance: 80+
• ✅ Accessibility: 90+
• ✅ Best Practices: 90+

9. Accessibility

Test 9.1: Keyboard Navigation

Priority: HIGH

1. Use only keyboard (Tab, Enter, Esc)
2. Navigate entire app

Expected Results:

• ✅ All interactive elements reachable
• ✅ Focus indicators visible
• ✅ Modals can be closed with Esc
• ✅ Logical tab order

Test 9.2: Screen Reader

Priority: MEDIUM

1. Enable VoiceOver (Mac) or NVDA (Windows)
2. Navigate app

Expected Results:

• ✅ All text announced
• ✅ Images have alt text
• ✅ Form labels read correctly
• ✅ Buttons have meaningful labels

10. Error Handling

Test 10.1: Network Error

Priority: HIGH

1. Start action (add item)
2. Disable network mid-request
3. Check behavior

Expected Results:

• ✅ Error message shown
• ✅ Action can be retried
• ✅ Data not lost
• ✅ No crash

Test 10.2: Server Error (500)

Priority: MEDIUM

1. Trigger server error (if possible)

Expected Results:

• ✅ User-friendly error message
• ✅ No stack traces visible
• ✅ Option to try again
• ✅ Logs sent to monitoring (optional)

Test Data Setup

Seed Data Script

-- Run in Supabase SQL Editor
-- Insert test household
INSERT INTO households (id, name) VALUES 
  ('test-household-1', 'Test Household');

-- Insert test tags
INSERT INTO tags (id, household_id, name, color) VALUES
  ('tag-1', 'test-household-1', 'fridge', '#3b82f6'),
  ('tag-2', 'test-household-1', 'pantry', '#10b981'),
  ('tag-3', 'test-household-1', 'freezer', '#6366f1');

-- Insert test units
INSERT INTO units (id, household_id, name, abbreviation, base_unit, conversion_factor) VALUES
  ('unit-1', 'test-household-1', 'liter', 'L', 'L', 1),
  ('unit-2', 'test-household-1', 'milliliter', 'mL', 'L', 0.001),
  ('unit-3', 'test-household-1', 'kilogram', 'kg', 'kg', 1);

-- Insert test items
INSERT INTO pantry_items (household_id, name, quantity, unit_id) VALUES
  ('test-household-1', 'Milk', 1, 'unit-1'),
  ('test-household-1', 'Rice', 2, 'unit-3'),
  ('test-household-1', 'Olive Oil', 0.5, 'unit-1');

Test Execution Checklist

Before Testing:

• Fresh database with seed data
• Clear browser cache
• Clear localStorage
• Unregister service workers
• Sign out all accounts

Test Environments:

• Chrome (Windows/Mac/Linux)
• Firefox (Windows/Mac/Linux)
• Safari (Mac/iOS)
• Mobile Chrome (Android)
• Mobile Safari (iOS)

Test Scenarios:

• Authentication (4 tests)
• Inventory Management (5 tests)
• Barcode Scanning (3 tests)
• Tag Management (3 tests)
• PWA Installation (3 tests)
• Offline Functionality (3 tests)
• Responsive Design (3 tests)
• Performance (2 tests)
• Accessibility (2 tests)
• Error Handling (2 tests)

Bug Report Template

**Title:** Short description

**Priority:** High / Medium / Low

**Environment:**
- Browser: Chrome 120.0
- OS: Windows 11
- Device: Desktop 1920x1080

**Steps to Reproduce:**
1. Navigate to...
2. Click on...
3. Enter...

**Expected Result:**
What should happen

**Actual Result:**
What actually happened

**Screenshots/Video:**
[Attach if applicable]

**Console Errors:**
[Copy any errors from DevTools console]

**Workaround:**
[If known]

Sign-off

Tested by: [Name]
Date: [Date]
Environment: [Browser, OS]
Total Tests: [X]
Passed: [X]
Failed: [X]
Blocked: [X]

Critical Issues Found: [List or "None"]
Recommendation: ✅ Ready for Release / ❌ Needs Fixes

---

Next Steps:

• Fix critical issues
• Retest failed scenarios
• Document known limitations
• Prepare release notes