# Test Plan: Unificacion de Visibilidad AdSense para Cache

## Test Environment

- **DEV URL**: https://dev.analisisdepreciosunitarios.com
- **PROD URL**: https://analisisdepreciosunitarios.com
- **Browsers**: Chrome, Firefox
- **Tools**: DevTools Console, Network tab, Playwright MCP

---

## Pre-requisitos

1. Habilitar `javascript_first_mode` en settings de adsense-placement
2. Habilitar `hide_for_logged_in` en settings de adsense-placement
3. Tener cuenta de usuario para pruebas de login
4. Limpiar cache del sitio antes de cada prueba

---

## Test Cases

### TC01: HTML se genera para usuarios anonimos (JS-First activo)

**Objetivo**: Verificar que los slots de ads se renderizan en HTML para visitantes anonimos

| Campo | Valor |
|-------|-------|
| Pre-condicion | `javascript_first_mode=true`, `hide_for_logged_in=true`, usuario anonimo |
| Pasos | 1. Limpiar cache del sitio<br>2. Abrir pagina de post en navegacion privada<br>3. Inspeccionar HTML |
| Resultado esperado | Elementos `.roi-adsense-placeholder` presentes en DOM |
| Status | PENDING |
| Notas | |

### TC02: HTML se genera para usuarios logueados (JS-First activo)

**Objetivo**: Verificar que los slots de ads se renderizan en HTML incluso para usuarios logueados

| Campo | Valor |
|-------|-------|
| Pre-condicion | `javascript_first_mode=true`, `hide_for_logged_in=true`, usuario logueado |
| Pasos | 1. Limpiar cache del sitio<br>2. Login como usuario<br>3. Visitar pagina de post<br>4. Inspeccionar HTML |
| Resultado esperado | Elementos `.roi-adsense-placeholder` presentes en DOM (mismo HTML que TC01) |
| Status | PENDING |
| Notas | Clave: el HTML debe ser IDENTICO al de TC01 |

### TC03: Endpoint retorna show_ads=false para usuarios logueados

**Objetivo**: Verificar que el endpoint REST evalua correctamente hide_for_logged_in

| Campo | Valor |
|-------|-------|
| Pre-condicion | `javascript_first_mode=true`, `hide_for_logged_in=true`, usuario logueado |
| Pasos | 1. Login como usuario<br>2. En console ejecutar:<br>`fetch('/wp-json/roi-theme/v1/adsense-placement/visibility?post_id=1', {credentials:'same-origin'}).then(r=>r.json()).then(console.log)` |
| Resultado esperado | Respuesta: `{show_ads: false, reasons: ['hide_for_logged_in'], ...}` |
| Status | PENDING |
| Notas | |

### TC04: JavaScript oculta ads para usuarios logueados

**Objetivo**: Verificar que el JavaScript aplica correctamente la decision del endpoint

| Campo | Valor |
|-------|-------|
| Pre-condicion | `javascript_first_mode=true`, `hide_for_logged_in=true`, usuario logueado |
| Pasos | 1. Login como usuario<br>2. Visitar pagina de post<br>3. Verificar clases CSS de slots<br>4. Verificar evento `roiAdsenseDeactivated` |
| Resultado esperado | Slots tienen clase `roi-adsense-hidden` o altura colapsada |
| Status | PENDING |
| Notas | |

### TC05: JavaScript muestra ads para usuarios anonimos

**Objetivo**: Verificar que el JavaScript muestra correctamente los ads

| Campo | Valor |
|-------|-------|
| Pre-condicion | `javascript_first_mode=true`, `hide_for_logged_in=true`, usuario anonimo |
| Pasos | 1. Navegacion privada<br>2. Visitar pagina de post<br>3. Verificar clases CSS de slots |
| Resultado esperado | Slots tienen clase `roi-adsense-active` |
| Status | PENDING |
| Notas | |

### TC06: Cache sirve mismo HTML a ambos tipos de usuario

**Objetivo**: Verificar compatibilidad con page cache

| Campo | Valor |
|-------|-------|
| Pre-condicion | `javascript_first_mode=true`, page cache activo |
| Pasos | 1. Limpiar cache<br>2. Usuario anonimo visita pagina (genera cache)<br>3. Usuario logueado visita misma pagina<br>4. Comparar HTML de `.roi-adsense-placeholder` |
| Resultado esperado | HTML identico, diferencia solo en comportamiento JS |
| Status | PENDING |
| Notas | Este es el test critico de la spec |

### TC07: Modo legacy funciona sin cambios (JS-First deshabilitado)

**Objetivo**: Verificar backward compatibility

| Campo | Valor |
|-------|-------|
| Pre-condicion | `javascript_first_mode=false`, `hide_for_logged_in=true`, usuario logueado |
| Pasos | 1. Deshabilitar JS-First en settings<br>2. Login como usuario<br>3. Visitar pagina de post<br>4. Inspeccionar HTML |
| Resultado esperado | Elementos `.roi-adsense-placeholder` NO presentes (comportamiento legacy) |
| Status | PENDING |
| Notas | Comportamiento identico al actual |

### TC08: Exclusiones por tipo de pagina funcionan en ambos modos

**Objetivo**: Verificar que exclusiones no relacionadas con login siguen funcionando

| Campo | Valor |
|-------|-------|
| Pre-condicion | `show_on_archives=false` configurado |
| Pasos | 1. Visitar pagina de archivo (categoria)<br>2. Verificar que no hay slots de ads |
| Resultado esperado | Sin slots de ads en paginas de archivo |
| Status | PENDING |
| Notas | |

### TC09: Exclusiones por categoria funcionan en ambos modos

**Objetivo**: Verificar que exclusiones por categoria siguen funcionando

| Campo | Valor |
|-------|-------|
| Pre-condicion | Categoria excluida configurada |
| Pasos | 1. Visitar post de categoria excluida<br>2. Verificar que no hay slots de ads |
| Resultado esperado | Sin slots de ads en posts de categoria excluida |
| Status | PENDING |
| Notas | |

---

## Automated Test Scripts

### Script: Verificar HTML identico para cache

```javascript
// Ejecutar en Playwright o consola
// Compara DOM de slots entre usuario anonimo y logueado

async function verifyCacheCompatibility() {
    const anonSlots = document.querySelectorAll('.roi-adsense-placeholder').length;
    console.log(`Slots encontrados: ${anonSlots}`);

    // El HTML debe existir independientemente del estado de login
    // La diferencia esta en las clases CSS aplicadas por JS
    const activeSlots = document.querySelectorAll('.roi-adsense-active').length;
    const hiddenSlots = document.querySelectorAll('.roi-adsense-hidden').length;

    console.log(`Activos: ${activeSlots}, Ocultos: ${hiddenSlots}`);

    return {
        totalSlots: anonSlots,
        active: activeSlots,
        hidden: hiddenSlots
    };
}

verifyCacheCompatibility();
```

### Script: Verificar respuesta del endpoint

```javascript
// Ejecutar en consola con usuario logueado
async function testEndpoint() {
    const postId = document.querySelector('article')?.id?.replace('post-', '') || '1';
    const url = `/wp-json/roi-theme/v1/adsense-placement/visibility?post_id=${postId}`;

    const response = await fetch(url, { credentials: 'same-origin' });
    const data = await response.json();

    console.log('Respuesta del endpoint:');
    console.log('- show_ads:', data.show_ads);
    console.log('- reasons:', data.reasons);
    console.log('- cache_seconds:', data.cache_seconds);

    return data;
}

testEndpoint();
```

---

## Notas de Implementacion

1. **Orden de ejecucion**: Implementar spec primero, luego ejecutar tests
2. **Rollback**: Si falla TC06, revertir cambios (backward compatible)
3. **Monitoreo**: Despues de deploy, verificar metricas de AdSense por 24h

---

## Results Summary

| Test Case | Status | Date | Tester |
|-----------|--------|------|--------|
| TC01 | PENDING | | |
| TC02 | PENDING | | |
| TC03 | PENDING | | |
| TC04 | PENDING | | |
| TC05 | PENDING | | |
| TC06 | PENDING | | |
| TC07 | PENDING | | |
| TC08 | PENDING | | |
| TC09 | PENDING | | |

---

## Version History

| Version | Date | Changes |
|---------|------|---------|
| 1.0 | 2025-12-11 | Initial test plan |