# Quick Test Guide - Live Preview

## 🚀 3-Step Quick Test

### Step 1: Test Backend (30 seconds)
```
Open: http://localhost/barcode/public/test-preview-direct.php
```
**✅ PASS**: Shows "ALL TESTS PASSED" with barcode image  
**❌ FAIL**: Shows PHP error → Check error message and fix

---

### Step 2: Test JavaScript (30 seconds)
```
Open: http://localhost/barcode/public/test-js.html
```
**✅ PASS**: Console log shows messages, preview says "JavaScript is working!"  
**❌ FAIL**: No console messages → Check browser console for errors

---

### Step 3: Test Live Form (1 minute)

1. **Open form**:
   ```
   http://localhost/barcode/public/labels/create
   ```

2. **Open browser console**: Press `F12` → Click `Console` tab

3. **Fill in form**:
   - Company: `DEXA`
   - Product: `DBS`
   - Item Code: `5G063TH26`

4. **Check results**:
   
   **✅ PASS if you see**:
   - Console shows: "Preview data: {company: 'DEXA', ...}"
   - Preview section updates with barcode
   - Barcode text shows: `DEXADBS5G063TH26`
   - Title shows: `DEXA * DBS`
   
   **❌ FAIL if**:
   - No console messages → JavaScript not loaded
   - Console shows errors → Check error message
   - Preview doesn't update → Check Network tab for API errors
   - 404 error → Run: `php artisan route:clear`

---

## 🔧 Quick Fixes

### If nothing works:
```bash
cd c:\xampp\htdocs\barcode
php artisan optimize:clear
```

### If JavaScript doesn't load:
1. Clear browser cache: `Ctrl+Shift+Delete`
2. Hard reload: `Ctrl+F5`
3. Try different browser

### If API returns 404:
```bash
php artisan route:list --name=labels.preview
```
Should show: `GET|HEAD  labels/preview`

If not found:
```bash
php artisan route:clear
php artisan cache:clear
```

### If API returns 500:
```bash
type storage\logs\laravel.log
```
Check last error message

---

## 📊 Console Output Reference

**When working correctly, console should show**:
```
Form script loaded
DOM Content Loaded
All form elements found
updateLivePreview called
Preview data: {company: "DEXA", product: "DBS", itemCode: "5G063TH26", ...}
Fetching preview from: http://localhost/barcode/public/labels/preview?...
Response status: 200
Preview HTML received (length): 1234
```

---

## 🎯 Expected Results

### Visual Check ✅
- [ ] Preview section visible on right side of form
- [ ] Preview updates while typing (after 0.5 second pause)
- [ ] Barcode image appears
- [ ] Text below barcode shows: `DEXADBS5G063TH26`
- [ ] Large title shows: `DEXA * DBS`
- [ ] No error messages in preview area

### Console Check ✅
- [ ] "Form script loaded" appears
- [ ] "DOM Content Loaded" appears
- [ ] "All form elements found" appears
- [ ] "updateLivePreview called" appears when typing
- [ ] "Response status: 200" appears
- [ ] No red error messages

### Network Check ✅ (F12 → Network tab)
- [ ] Request to `/labels/preview` appears when typing
- [ ] Status code is 200 (green)
- [ ] Response preview shows HTML with barcode

---

## 📁 Test Files Location

All test files are in:
```
c:\xampp\htdocs\barcode\public\
  ├── test-preview-direct.php  ← Test backend
  └── test-js.html             ← Test JavaScript
```

---

## 📖 Full Documentation

- `LIVE_PREVIEW_IMPLEMENTATION.md` - Complete implementation details
- `TROUBLESHOOTING_LIVE_PREVIEW.md` - Comprehensive troubleshooting
- `DEBUG_PREVIEW.md` - Step-by-step debugging

---

## ⏱️ Total Test Time: ~2 minutes

**If all 3 steps pass → Live preview is working! 🎉**

**If any step fails → See TROUBLESHOOTING_LIVE_PREVIEW.md**