# 🧪 Database Integration Testing Guide

## Testing services.php Dynamic Database Connection

---

## ✅ Pre-Test Checklist

- [ ] XAMPP is running (Apache + MySQL)
- [ ] Database `powerzone_db` exists
- [ ] Table `services` has been created
- [ ] Browser is set to http://localhost (not HTTPS)
- [ ] Cache cleared (Ctrl+Shift+Delete)

---

## 🔍 Test 1: Initial Load (Auto-Populate)

### Scenario
First time visiting `services.php` with empty services table

### Steps
1. **Clear Database**
   ```sql
   DELETE FROM services;  -- Remove all services
   ```

2. **Visit Services Page**
   ```
   URL: http://localhost/fitness/services.php
   ```

3. **Expected Result**
   - Page loads successfully
   - 6 service cards display:
     1. Gym Training - $49
     2. Personal Training - $60
     3. Strength Training - $55
     4. Weight Training - $50
     5. Functional Training - $45
     6. CrossFit Training - $65

4. **Verification**
   ```sql
   -- Check database has 6 services
   SELECT COUNT(*) FROM services;  -- Should return 6
   SELECT * FROM services;  -- Should show all 6
   ```

### ✅ Test Passes If
- All 6 services visible on page
- Correct prices displayed
- Database has 6 new records
- Page loaded without errors

---

## 🔄 Test 2: Real-Time Updates

### Scenario
Change service data in database and verify page updates instantly

### Steps

#### 2a: Change Price
1. **Update Database**
   ```sql
   UPDATE services SET price = 99.99 WHERE name = 'Personal Training';
   ```

2. **Refresh Page** (F5)
   ```
   http://localhost/fitness/services.php
   ```

3. **Expected Result**
   - Personal Training now shows $99.99
   - No code changes needed

#### 2b: Change Description
1. **Update Database**
   ```sql
   UPDATE services 
   SET description = 'Premium one-on-one coaching with elite trainers' 
   WHERE name = 'Personal Training';
   ```

2. **Refresh Page** (F5)

3. **Expected Result**
   - Personal Training description updated
   - Shows new text instantly

#### 2c: Change Duration
1. **Update Database**
   ```sql
   UPDATE services SET duration = '2 sessions' WHERE name = 'Personal Training';
   ```

2. **Refresh Page** (F5)

3. **Expected Result**
   - Shows "per 2 sessions" instead of "per 1 session"

### ✅ Test Passes If
- All changes visible immediately after refresh
- No code modification needed
- Multiple updates work correctly

---

## ➕ Test 3: Add New Service

### Scenario
Add a new service to database and verify it appears on page

### Steps
1. **Add Service to Database**
   ```sql
   INSERT INTO services (name, description, price, duration, icon, status) 
   VALUES (
       'Boxing Training',
       'High-energy boxing training combining cardio, technique, and conditioning for total body fitness.',
       45.00,
       '1 session',
       '🥊',
       'active'
   );
   ```

2. **Refresh Services Page** (F5)

3. **Expected Result**
   - Boxing Training card appears
   - Shows $45 per 1 session
   - Display includes icon 🥊

4. **Verify Multiple Times**
   ```sql
   -- Add another service
   INSERT INTO services (name, description, price, duration, icon, status) 
   VALUES ('Pilates', 'Core strengthening and flexibility training.', 42.00, '1 session', '🤸', 'active');
   
   -- Refresh page - should now show 8 services total
   SELECT COUNT(*) FROM services;  -- Should return 8
   ```

### ✅ Test Passes If
- New services appear on page
- Multiple additions work
- Grid layout adapts to more cards
- All data displays correctly

---

## 🔒 Test 4: Status Control (Active/Inactive)

### Scenario
Hide and show services by changing status

### Steps
1. **Deactivate Service**
   ```sql
   UPDATE services SET status = 'inactive' WHERE name = 'Gym Training';
   ```

2. **Refresh Page** (F5)

3. **Expected Result**
   - Gym Training card is HIDDEN
   - Other 5 services still visible
   - Page shows only active services

4. **Reactivate Service**
   ```sql
   UPDATE services SET status = 'active' WHERE name = 'Gym Training';
   ```

5. **Refresh Page** (F5)

6. **Expected Result**
   - Gym Training card reappears

### ✅ Test Passes If
- Status control works perfectly
- Services hide/show without deletion
- No database errors

---

## ❌ Test 5: Error Handling

### Scenario
Test error handling for edge cases

#### 5a: Empty String Values
```sql
INSERT INTO services (name, description, price, duration, icon, status) 
VALUES ('Test', '', 50, '', '', 'active');
```
**Expected**: Page handles empty descriptions gracefully

#### 5b: Very Long Description
```sql
UPDATE services SET description = REPEAT('This is a very long description. ', 50) 
WHERE name = 'Personal Training';
```
**Expected**: Text displays correctly, no overflow

#### 5c: Special Characters
```sql
UPDATE services SET name = 'Personal Training & More' 
WHERE name = 'Personal Training';
```
**Expected**: Special characters escaped properly (XSS safe)

#### 5d: Very High Price
```sql
UPDATE services SET price = 9999.99 WHERE name = 'Personal Training';
```
**Expected**: Displays as $9999.99 correctly

### ✅ Test Passes If
- All edge cases handled gracefully
- No JavaScript errors in console
- Content displays safely

---

## 📱 Test 6: Responsive Design

### Scenario
Verify services display correctly on all devices

### Steps

#### Desktop (1024px+)
1. Open DevTools (F12)
2. Set viewport to 1200px width
3. Expected: 3-4 service cards per row

#### Tablet (768px-1023px)
1. Set viewport to 800px width
2. Expected: 2-3 service cards per row

#### Mobile (576px-767px)
1. Set viewport to 600px width
2. Expected: 1-2 service cards per row

#### Extra Small (<480px)
1. Set viewport to 375px width
2. Expected: 1 service card per row

### ✅ Test Passes If
- Grid adapts to all screen sizes
- No horizontal scrolling
- Text readable at all sizes
- Buttons accessible

---

## 🔐 Test 7: Security

### Scenario
Verify XSS and SQL injection protections

#### Test XSS Prevention
```sql
UPDATE services SET name = '<img src=x onerror=alert("XSS")>' 
WHERE id = 1;
```
**Expected**: Image tag appears as text, no alert fires

#### Test XSS in Description
```sql
UPDATE services SET description = '<script>alert("XSS")</script>' 
WHERE id = 1;
```
**Expected**: Script appears as text, no alert fires

#### Verify in Browser
1. Visit services.php
2. Open DevTools Console (F12 → Console)
3. Expected: NO JavaScript errors or alert boxes

### ✅ Test Passes If
- No security vulnerabilities found
- XSS attempts fail safely
- Content displays as intended

---

## 🎨 Test 8: Visual Verification

### Scenario
Verify page renders correctly with database services

### Visual Checklist
- [ ] Service icons display correctly (emojis visible)
- [ ] Service titles readable
- [ ] Descriptions truncate nicely (no overlap)
- [ ] Prices show with currency symbol ($)
- [ ] Duration text displays correctly
- [ ] Feature list shows 4 items per service
- [ ] "Join Now" buttons visible and clickable
- [ ] Pricing table displays correctly
- [ ] Benefits section visible
- [ ] CTA section shows at bottom
- [ ] No broken images
- [ ] No layout shifting

---

## 🚨 Troubleshooting During Tests

### Issue: Services Not Showing
**Solution**:
1. Check browser console for errors (F12)
2. Verify XAMPP MySQL is running
3. Verify `services` table exists: `SHOW TABLES;`
4. Verify table has 'active' services: `SELECT * FROM services WHERE status = 'active';`

### Issue: Database Connection Error
**Solution**:
1. Check `includes/db.php` connection string
2. Verify database name: `powerzone_db`
3. Verify MySQL user: `root` with no password
4. Try: `SELECT * FROM services;` in MySQL client

### Issue: Changes Not Reflecting
**Solution**:
1. Clear browser cache (Ctrl+F5)
2. Verify update actually saved: `SELECT * FROM services WHERE id = 1;`
3. Check service status is 'active'

### Issue: Duplicate Services Appear
**Solution**:
```sql
-- Find duplicates
SELECT name, COUNT(*) as count FROM services GROUP BY name HAVING count > 1;

-- Delete duplicates (keep first one)
DELETE FROM services WHERE id NOT IN (SELECT MIN(id) FROM services GROUP BY name);
```

---

## 📋 Test Summary Report

After completing all tests, fill in this summary:

```
Test Date: ______________
Tester: _______________

Test 1 (Auto-Populate): [ ] PASS [ ] FAIL
Test 2 (Real-Time Updates): [ ] PASS [ ] FAIL
Test 3 (Add New Service): [ ] PASS [ ] FAIL
Test 4 (Status Control): [ ] PASS [ ] FAIL
Test 5 (Error Handling): [ ] PASS [ ] FAIL
Test 6 (Responsive): [ ] PASS [ ] FAIL
Test 7 (Security): [ ] PASS [ ] FAIL
Test 8 (Visual): [ ] PASS [ ] FAIL

Overall Status: [ ] ALL PASS [ ] NEEDS FIXES

Notes:
_________________________________________________________________
_________________________________________________________________
```

---

## ✨ Completion Criteria

✅ **All 8 tests pass**
✅ **No console errors**
✅ **No security vulnerabilities**
✅ **Database changes reflect instantly**
✅ **All services display correctly**
✅ **Responsive on all devices**
✅ **Ready for production**

---

**Database Integration Testing Complete!**

When ready to deploy to production:
1. Keep backup of current database
2. Verify all services have active status
3. Test on actual server
4. Monitor error logs for 24 hours

---

**Questions?** Check DATABASE_INTEGRATION_GUIDE.md for full documentation.
