more fixin logging, UI update #1, source maps fix
Some checks failed
Deploy to Test Environment / deploy-to-test (push) Failing after 12s
Some checks failed
Deploy to Test Environment / deploy-to-test (push) Failing after 12s
This commit is contained in:
275
docs/QUICK_TEST_CHECKLIST.md
Normal file
275
docs/QUICK_TEST_CHECKLIST.md
Normal file
@@ -0,0 +1,275 @@
|
||||
# Quick Test Checklist - UI/UX Improvements
|
||||
|
||||
**Date**: 2026-01-20
|
||||
**Estimated Time**: 30-45 minutes
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
### 1. Start Dev Server
|
||||
|
||||
```bash
|
||||
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**: ****\_\_\_****
|
||||
Reference in New Issue
Block a user