roi-theme/openspec/changes/refactor-adsense-lazy-loading/sanity-tests.md

# Pruebas Sanitarias - AdSense Lazy Loading

> **Objetivo:** Verificar funcionamiento basico en navegador despues de deploy
> **Tiempo estimado:** 15-20 minutos
> **Entorno:** analisisdepreciosunitarios.com (PRODUCCION)
> **Flujo:** Local (desarrollo) → Deploy → Produccion (pruebas)

---

## PRE-REQUISITOS

### 0. Deploy Completado

- [ ] Cambios commiteados en local
- [ ] Deploy a produccion ejecutado
- [ ] `wp roi-theme sync-component adsense-placement` ejecutado en produccion
- [ ] Cache vaciado (Redis, W3TC, Cloudflare si aplica)

### 1. Verificar Entorno Produccion

- [ ] Sitio accesible en https://analisisdepreciosunitarios.com/
- [ ] DevTools abierto (F12)
- [ ] Consola visible (para ver logs de debug)
- [ ] Network tab visible (para ver requests de AdSense)

### 2. Verificar Configuracion en BD (Produccion)

```bash
# Via SSH al VPS
ssh VPSContabo
cd /var/www/preciosunitarios/public_html
wp db query "SELECT setting_key, setting_value FROM wp_roi_theme_component_settings WHERE component_name = 'adsense-placement' AND setting_key LIKE '%lazy%';" --allow-root
```

**Valores esperados:**
- `lazy_loading_enabled` = `1` (o `true`)
- `lazy_rootmargin` = `200`
- `lazy_fill_timeout` = `5000`

---

## SANITY TEST 1: Carga Inicial (Lazy Enabled)

**Tiempo:** 3 min

### Pasos:
1. Abrir DevTools > Console
2. Navegar a un articulo con ads: https://analisisdepreciosunitarios.com/analisis-de-precios-unitarios/
3. Observar consola

### Verificar:

- [ ] **ST1.1** Aparece `[AdSense Lazy] Inicializando AdSense Lazy Loader v2.0`
- [ ] **ST1.2** Aparece `[AdSense Lazy] Config: lazyEnabled=true, rootMargin=200px 0px, fillTimeout=5000`
- [ ] **ST1.3** Aparece `[AdSense Lazy] Intersection Observer inicializado`
- [ ] **ST1.4** Los slots `.roi-ad-slot` tienen `display: none` inicialmente (inspeccionar CSS)
- [ ] **ST1.5** Solo slots en viewport muestran `[AdSense Lazy] Slot entro al viewport`

### Screenshot Console:
```
Pegar screenshot de consola aqui
```

---

## SANITY TEST 2: Activacion por Scroll

**Tiempo:** 3 min

### Pasos:
1. Continuar en el mismo articulo
2. Hacer scroll lento hacia abajo
3. Observar consola mientras aparecen nuevos slots

### Verificar:

- [ ] **ST2.1** Al scrollear, nuevos mensajes `[AdSense Lazy] Slot entro al viewport`
- [ ] **ST2.2** Mensaje `[AdSense Lazy] Activando slot...` por cada slot visible
- [ ] **ST2.3** En Network tab: requests a `pagead2.googlesyndication.com` aparecen progresivamente
- [ ] **ST2.4** Slots activados reciben clase `roi-ad-filled` o `roi-ad-empty`

### Nota Fill Rate:
```
Slots activados: ___
Slots filled: ___
Slots empty: ___
```

---

## SANITY TEST 3: Deteccion de Fill

**Tiempo:** 3 min

### Pasos:
1. Inspeccionar un slot que recibio ad (clase `roi-ad-filled`)
2. Inspeccionar un slot vacio (clase `roi-ad-empty`)

### Verificar:

- [ ] **ST3.1** Slot filled tiene `display: block` (visible)
- [ ] **ST3.2** Slot empty tiene `display: none` (oculto)
- [ ] **ST3.3** Slot filled contiene `<ins>` con `data-ad-status="filled"`
- [ ] **ST3.4** Consola muestra `[AdSense Lazy] Slot marcado como filled` o `empty`

### Screenshot Slot Filled:
```
Pegar screenshot del inspector aqui
```

---

## SANITY TEST 4: Timeout de Fill

**Tiempo:** 5 min (esperar timeout)

### Pasos:
1. Bloquear requests de AdSense temporalmente:
   - DevTools > Network > Click derecho en request de googlesyndication
   - "Block request URL" o usar extension de bloqueo
2. Recargar pagina
3. Esperar 5 segundos (fillTimeout)

### Verificar:

- [ ] **ST4.1** Slots muestran `[AdSense Lazy] Timeout alcanzado para slot`
- [ ] **ST4.2** Slots reciben clase `roi-ad-empty`
- [ ] **ST4.3** Slots permanecen ocultos (display: none)
- [ ] **ST4.4** No hay errores JS en consola

### Desbloquear AdSense:
- [ ] Remover bloqueo de AdSense despues del test

---

## SANITY TEST 5: Modo Legacy (Lazy Disabled)

**Tiempo:** 4 min

### Pasos:
1. Cambiar configuracion en BD (via SSH):
   ```bash
   ssh VPSContabo
   cd /var/www/preciosunitarios/public_html
   wp db query "UPDATE wp_roi_theme_component_settings SET setting_value = '0' WHERE component_name = 'adsense-placement' AND setting_key = 'lazy_loading_enabled';" --allow-root
   ```
2. Vaciar cache:
   ```bash
   wp cache flush --allow-root
   # Si usa W3TC: wp w3-total-cache flush all --allow-root
   ```
3. Recargar pagina (Ctrl+Shift+R)
4. Observar consola

### Verificar:

- [ ] **ST5.1** Consola muestra `[AdSense Lazy] Config: lazyEnabled=false`
- [ ] **ST5.2** Consola muestra `[AdSense Lazy] Iniciando modo legacy`
- [ ] **ST5.3** Los slots tienen `display: block` desde inicio
- [ ] **ST5.4** Al hacer scroll o click, todos los ads cargan simultaneamente

### Restaurar (IMPORTANTE):
```bash
ssh VPSContabo
cd /var/www/preciosunitarios/public_html
wp db query "UPDATE wp_roi_theme_component_settings SET setting_value = '1' WHERE component_name = 'adsense-placement' AND setting_key = 'lazy_loading_enabled';" --allow-root
wp cache flush --allow-root
```

---

## SANITY TEST 6: Ads Dinamicos (AJAX)

**Tiempo:** 3 min

### Pasos:
1. Buscar pagina con carga dinamica de contenido (si existe)
2. O simular en consola:
   ```javascript
   // Simular nuevo slot dinamico
   var slot = document.createElement('div');
   slot.className = 'roi-ad-slot';
   slot.innerHTML = '<ins class="adsbygoogle" data-ad-client="ca-pub-xxx" data-ad-slot="123"></ins><script data-adsense-push type="text/plain">(adsbygoogle = window.adsbygoogle || []).push({});</script>';
   document.body.appendChild(slot);

   // Disparar evento
   window.dispatchEvent(new Event('roi-adsense-activate'));
   ```

### Verificar:

- [ ] **ST6.1** Consola muestra `[AdSense Lazy] Evento roi-adsense-activate recibido`
- [ ] **ST6.2** Nuevo slot es observado por Intersection Observer
- [ ] **ST6.3** No hay errores JS

---

## SANITY TEST 7: Performance (Core Web Vitals)

**Tiempo:** 3 min

### Pasos:
1. Abrir Lighthouse en DevTools
2. Seleccionar "Performance" solamente
3. Ejecutar audit en modo "Mobile"

### Verificar:

- [ ] **ST7.1** LCP (Largest Contentful Paint) < 2.5s
- [ ] **ST7.2** FID (First Input Delay) < 100ms
- [ ] **ST7.3** CLS (Cumulative Layout Shift) < 0.1
- [ ] **ST7.4** No hay "Avoid enormous network payloads" warning por ads

### Scores:
```
Performance: ___
LCP: ___
FID: ___
CLS: ___
```

---

## RESUMEN DE EJECUCION

| Test | Resultado | Notas |
|------|-----------|-------|
| ST1: Carga Inicial | [ ] PASS / [ ] FAIL | |
| ST2: Scroll Activation | [ ] PASS / [ ] FAIL | |
| ST3: Fill Detection | [ ] PASS / [ ] FAIL | |
| ST4: Timeout | [ ] PASS / [ ] FAIL | |
| ST5: Modo Legacy | [ ] PASS / [ ] FAIL | |
| ST6: Ads Dinamicos | [ ] PASS / [ ] FAIL | |
| ST7: Performance | [ ] PASS / [ ] FAIL | |

**Tests Passed:** ___/7
**Tests Failed:** ___/7

---

## DECISION

- [ ] **APROBADO PARA DEPLOY** - Todos los tests pasan
- [ ] **BLOQUEADO** - Tests criticos fallan (ST1-ST4)
- [ ] **APROBADO CON OBSERVACIONES** - Tests no criticos fallan (ST5-ST7)

**Fecha:** ____________
**Ejecutor:** ____________
**Notas adicionales:**

```
Escribir observaciones aqui
```

---

## COMANDOS UTILES

### Ver logs de consola filtrados:
```javascript
// En consola del navegador
console.filter = '[AdSense';
```

### Verificar config actual:
```javascript
console.log(window.roiAdsenseConfig);
```

### Forzar recarga sin cache:
```
Ctrl + Shift + R (o Cmd + Shift + R en Mac)
```

### Ver slots y su estado:
```javascript
document.querySelectorAll('.roi-ad-slot').forEach((slot, i) => {
    console.log(`Slot ${i}:`, {
        filled: slot.classList.contains('roi-ad-filled'),
        empty: slot.classList.contains('roi-ad-empty'),
        display: getComputedStyle(slot).display
    });
});
```