SkyArtShop/docs/TESTING_GUIDE.md

🎯 Cart & Wishlist - Quick Test Guide

Visual Flow

┌─────────────────────────────────────────────────────────┐
│                    SHOP PAGE                             │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
│  │   Product 1   │  │   Product 2   │  │   Product 3   │  │
│  │  [Image]      │  │  [Image]      │  │  [Image]      │  │
│  │  $29.99       │  │  $39.99       │  │  $49.99       │  │
│  │  ❤️ [🛒 Cart] │  │  ❤️ [🛒 Cart] │  │  ❤️ [🛒 Cart] │  │
│  └──────────────┘  └──────────────┘  └──────────────┘  │
└─────────────────────────────────────────────────────────┘
                            ↓
                    CLICK "Add to Cart"
                            ↓
┌─────────────────────────────────────────────────────────┐
│  ✅ Product 1 added to cart                              │  ← Toast Notification
└─────────────────────────────────────────────────────────┘
                            ↓
┌─────────────────────────────────────────────────────────┐
│  Navigation Bar:  [🛒 ③]  [❤️ ①]                        │  ← Badges Updated
└─────────────────────────────────────────────────────────┘
                            ↓
                    CLICK Cart Icon 🛒
                            ↓
┌─────────────────────────────────────────────────────────┐
│  Shopping Cart                                     [X]   │
│  ───────────────────────────────────────────────────    │
│  │ [Image] Product 1      │ [-] 2 [+]  │ $59.98 │ [X]  │
│  │ [Image] Product 2      │ [-] 1 [+]  │ $39.99 │ [X]  │
│  ───────────────────────────────────────────────────    │
│                                    Total: $99.97         │
│  [Continue Shopping]  [Proceed to Checkout]             │
└─────────────────────────────────────────────────────────┘

🧪 Test Checklist

Shop Page Tests

• Page loads without errors
• Console shows: [ShopSystem] Ready!
• Products display correctly
• Cart icon shows badge "0"
• Wishlist icon shows badge "0"

Add to Cart Tests

• Click "Add to Cart" on any product
• Green notification appears
• Cart badge updates to "1"
• Click same product again → badge becomes "2"
• Click different product → badge increases

Cart Dropdown Tests

• Click cart icon in navbar
• Dropdown slides out from right
• See product image (small thumbnail)
• See product name
• See price
• See quantity with +/- buttons
• See subtotal
• See total at bottom
• Click "-" button → quantity decreases
• Click "+" button → quantity increases
• Click "X" button → item removed
• Cart badge updates when quantity changes

Add to Wishlist Tests

• Click heart ❤️ icon on any product
• Green notification appears
• Wishlist badge updates to "1"
• Click same product again → "Already in wishlist" message
• Click different product → badge increases

Wishlist Dropdown Tests

• Click wishlist icon in navbar
• Dropdown slides out from right
• See product image
• See product name
• See price
• See "Add to Cart" button
• Click "Add to Cart" → item added to cart
• Cart badge increases
• Click "X" button → item removed from wishlist
• Wishlist badge updates

Persistence Tests

• Add items to cart
• Add items to wishlist
• Note the badge numbers
• Press F5 (refresh page)
• Badges show same numbers
• Click cart icon → items still there
• Click wishlist icon → items still there

Product Page Tests

• Navigate to any product detail page
• Click "Add to Cart" button
• Notification appears
• Cart badge updates
• Click "Add to Wishlist" button
• Notification appears
• Wishlist badge updates

Mobile Tests (Optional)

• Resize browser to mobile width
• Cart icon still visible
• Wishlist icon still visible
• Click icons → dropdowns work
• Items display correctly on narrow screen

Edge Cases

• Add 10+ of same item (quantity shows correctly)
• Add item to wishlist → add to cart → still in wishlist
• Remove last item from cart → shows "Cart is empty"
• Remove last item from wishlist → shows "Wishlist is empty"
• Click outside dropdown → closes automatically

🐛 Common Issues & Solutions

Issue: Nothing happens when clicking buttons

Solution:

1. Open Console (F12)
2. Look for red error messages
3. Type window.ShopSystem and press Enter
4. Should show object, not undefined

Issue: Badges don't update

Solution:

1. Check console for errors
2. Hard refresh: Ctrl+Shift+R
3. Clear localStorage: localStorage.clear() in console

Issue: Images not showing

Solution:

1. Right-click broken image → Inspect
2. Check src attribute
3. Verify URL is correct
4. Check Network tab for 404 errors

Issue: Dropdowns don't open

Solution:

1. Check console errors
2. Verify HTML has id="cartPanel" and id="wishlistPanel"
3. Check CSS - dropdown might be hidden

Issue: Items disappear on refresh

Solution:

1. Open DevTools → Application tab
2. Check Local Storage
3. Look for skyart_cart and skyart_wishlist
4. If not there, localStorage might be disabled
5. Check browser privacy settings

📋 Verification Checklist

Before reporting success, verify:

• ✅ All tests pass
• ✅ No console errors
• ✅ Badges update correctly
• ✅ Dropdowns display items with images
• ✅ Quantity controls work
• ✅ Remove buttons work
• ✅ Items persist after refresh
• ✅ Notifications appear and auto-dismiss
• ✅ Both shop page and product page work
• ✅ Mobile responsive (if testing mobile)

🎨 What You Should See

Empty State

Cart Dropdown:
┌─────────────────────┐
│  Shopping Cart  [X] │
├─────────────────────┤
│   🛒                │
│   Your cart is      │
│   empty             │
├─────────────────────┤
│ [Continue Shopping] │
└─────────────────────┘

With Items

Cart Dropdown:
┌─────────────────────────────┐
│  Shopping Cart         [X]  │
├─────────────────────────────┤
│ [Img] Product Name          │
│       $29.99                │
│       [-] 2 [+]             │
│       Subtotal: $59.98  [X] │
├─────────────────────────────┤
│ Total: $59.98               │
│ [Continue Shopping]         │
│ [Proceed to Checkout]       │
└─────────────────────────────┘

🚀 Success Criteria

Your cart and wishlist system is working perfectly when:

1. Buttons respond instantly (no delays)
2. Notifications appear after every action
3. Badges show correct counts at all times
4. Dropdowns display items with images
5. Quantity controls work smoothly
6. Items persist across page refreshes
7. No errors in browser console
8. Works on all pages (shop, product, home)

---

Ready to test?

1. Open http://localhost:5000/shop
2. Follow the test checklist above
3. Report any issues you find!