# 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**: \***\*\_\_\_\*\***