flyer-crawler.projectium.com/docs/QUICK_TEST_CHECKLIST.md

Quick Test Checklist - UI/UX Improvements

Date: 2026-01-20 Estimated Time: 30-45 minutes

---

🚀 Quick Start

1. Start Dev Server

podman exec -it flyer-crawler-dev npm run dev:container

Open browser: http://localhost:5173

2. Open DevTools

Press F12 or Ctrl+Shift+I

---

✅ Critical Tests (15 minutes)

Test A: Onboarding Tour Works

Time: 5 minutes

1. DevTools → Application → Local Storage
2. Delete key: flyer_crawler_onboarding_completed
3. Refresh page (F5)
4. PASS if: Tour modal appears with 6 steps
5. Click through all steps or skip
6. PASS if: Tour closes and localStorage key is saved

Result: [ ] PASS [ ] FAIL

---

Test B: Mobile Tab Bar Works

Time: 5 minutes

1. DevTools → Toggle Device Toolbar (Ctrl+Shift+M)
2. Select "iPhone SE" (375px width)
3. Refresh page
4. PASS if: Bottom tab bar visible with 4 tabs
5. Click each tab: Home, Deals, Lists, Profile
6. PASS if: Each tab navigates correctly and highlights

Result: [ ] PASS [ ] FAIL

---

Test C: Desktop Layout Unchanged

Time: 3 minutes

1. Set browser width to 1440px (exit device mode)
2. Refresh page
3. PASS if:
   • No bottom tab bar visible
   • Left sidebar (flyer list) visible
   • Right sidebar (widgets) visible
   • 3-column layout intact

Result: [ ] PASS [ ] FAIL

---

Test D: Dark Mode Works

Time: 2 minutes

1. Click dark mode toggle in header
2. Navigate: Home → Deals → Lists → Profile
3. PASS if: All pages have dark backgrounds, light text
4. Toggle back to light mode
5. PASS if: All pages return to light theme

Result: [ ] PASS [ ] FAIL

---

🔍 Detailed Tests (30 minutes)

Test 1: Tour Features

Time: 5 minutes

• Tour step 1 points to Flyer Uploader
• Tour step 2 points to Extracted Data Table
• Tour step 3 points to Watch button
• Tour step 4 points to Watched Items List
• Tour step 5 points to Price Chart
• Tour step 6 points to Shopping List
• Skip button works (saves to localStorage)
• Tour doesn't repeat after completion

Result: [ ] PASS [ ] FAIL

---

Test 2: Mobile Navigation

Time: 10 minutes

At 375px (mobile):

• Tab bar visible at bottom
• Sidebars hidden
• Home tab navigates to /
• Deals tab navigates to /deals
• Lists tab navigates to /lists
• Profile tab navigates to /profile
• Active tab highlighted in teal
• Tabs are 44x44px (check DevTools)

At 768px (tablet):

• Tab bar still visible
• Sidebars still hidden

At 1024px+ (desktop):

• Tab bar hidden
• Sidebars visible
• Layout unchanged

Result: [ ] PASS [ ] FAIL

---

Test 3: New Pages Work

Time: 5 minutes

DealsPage (/deals):

• Shows WatchedItemsList component
• Shows PriceChart component
• Shows PriceHistoryChart component
• Can add watched items

ShoppingListsPage (/lists):

• Shows ShoppingList component
• Can create new list
• Can add items to list
• Can delete list

FlyersPage (/flyers):

• Shows FlyerList component
• Shows FlyerUploader component
• Can upload flyer

Result: [ ] PASS [ ] FAIL

---

Test 4: Button Component

Time: 5 minutes

Find buttons and test:

• FlyerUploader: "Upload Another Flyer" (primary variant, teal)
• ShoppingList: "New List" (secondary variant, gray)
• ShoppingList: "Delete List" (danger variant, red)
• FlyerUploader: "Stop Watching" (ghost variant, transparent)
• Loading states show spinner
• Hover states work
• Dark mode variants look correct

Result: [ ] PASS [ ] FAIL

---

Test 5: Admin Routes

Time: 5 minutes

If you have admin access:

• Navigate to /admin
• Tab bar NOT visible on admin pages
• Admin dashboard loads correctly
• Subpages work: /admin/stats, /admin/corrections
• Can navigate back to main app
• Admin pages work in mobile view (no tab bar)

If not admin, skip this test

Result: [ ] PASS [ ] FAIL [ ] SKIPPED

---

🐛 Error Checks (5 minutes)

Console Errors

1. Open DevTools → Console tab
2. Navigate through entire app
3. PASS if: No red error messages
4. Warnings are OK (React 19 peer dependency warnings expected)

Result: [ ] PASS [ ] FAIL

Errors found: ___

---

Visual Glitches

Check for:

• No white boxes in dark mode
• No overlapping elements
• Text is readable (good contrast)
• Images load correctly
• No layout jumping/flickering

Result: [ ] PASS [ ] FAIL

Issues found: ___

---

📊 Quick Summary

Test	Result	Priority
A. Onboarding Tour	[ ]	🔴 Critical
B. Mobile Tab Bar	[ ]	🔴 Critical
C. Desktop Layout	[ ]	🔴 Critical
D. Dark Mode	[ ]	🟡 High
1. Tour Features	[ ]	🟡 High
2. Mobile Navigation	[ ]	🔴 Critical
3. New Pages	[ ]	🟡 High
4. Button Component	[ ]	🟢 Medium
5. Admin Routes	[ ]	🟢 Medium
Console Errors	[ ]	🔴 Critical
Visual Glitches	[ ]	🟡 High

---

✅ Pass Criteria

Minimum to pass (Critical tests only):

• All 4 quick tests (A-D) must pass
• Mobile Navigation (Test 2) must pass
• No critical console errors

Full pass (All tests):

• All tests pass or have minor issues only
• No blocking bugs
• No data loss or crashes

---

🚦 Final Decision

Overall Status: [ ] READY FOR PROD [ ] NEEDS FIXES [ ] BLOCKED

Issues blocking production:

1. ---

2. ---

3. ---

Sign-off: ___ Date: ___