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)

# 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):

   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:

   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):

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:

   // 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:

// En consola del navegador
console.filter = '[AdSense';

Verificar config actual:

console.log(window.roiAdsenseConfig);

Forzar recarga sin cache:

Ctrl + Shift + R (o Cmd + Shift + R en Mac)

Ver slots y su estado:

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
    });
});