fix(wizard): tests e2e sprint6 — cache geo, usabilidad, draft
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
markosbenitez
211
tests/e2e/sprint6-usabilidad.spec.ts
Normal file
211
tests/e2e/sprint6-usabilidad.spec.ts
Normal file
@@ -0,0 +1,211 @@
|
|||||||
|
import { test, expect, type BrowserContext, type Page } from '@playwright/test'
|
||||||
|
|
||||||
|
const DEMO_SURVEY_ID = '30000000-0000-0000-0000-000000000001'
|
||||||
|
const SURVEY_URL = `/?s=${DEMO_SURVEY_ID}`
|
||||||
|
|
||||||
|
// Devuelve el código de la pregunta visible (ej: '2.3'), o null si estamos en una sección.
|
||||||
|
async function currentCode(page: Page): Promise<string | null> {
|
||||||
|
const el = page.locator('.wizard-prompt-code')
|
||||||
|
if (await el.count() === 0) return null
|
||||||
|
return (await el.textContent())?.trim() ?? null
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navega hacia adelante hasta que la pregunta con `targetCode` sea visible.
|
||||||
|
// Maneja preguntas required (Q1.1) y screens de sección intermedias.
|
||||||
|
async function navigateUntil(page: Page, targetCode: string, maxSteps = 30): Promise<void> {
|
||||||
|
for (let i = 0; i < maxSteps; i++) {
|
||||||
|
if (await currentCode(page) === targetCode) return
|
||||||
|
// Si hay error de validación (required sin respuesta), responder primero
|
||||||
|
if (await page.locator('.field-error').count() > 0) {
|
||||||
|
await page.locator('.option-label').first().click()
|
||||||
|
await page.waitForTimeout(150)
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
await page.getByRole('button', { name: 'Siguiente' }).click()
|
||||||
|
// Esperar a que React aplique el state update y re-renderice
|
||||||
|
await page.waitForTimeout(150)
|
||||||
|
}
|
||||||
|
const code = await currentCode(page)
|
||||||
|
if (code !== targetCode) throw new Error(`navigateUntil: llegué a ${code}, esperaba ${targetCode}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Acepta el consent y espera a que el wizard esté visible.
|
||||||
|
async function acceptConsent(page: Page): Promise<void> {
|
||||||
|
await page.check('#consent-operativo')
|
||||||
|
await page.getByRole('button', { name: 'Comenzar la encuesta' }).click()
|
||||||
|
await page.locator('.wizard-shell').waitFor()
|
||||||
|
}
|
||||||
|
|
||||||
|
test.describe.serial('Sprint 6 — usabilidad y cache geo', () => {
|
||||||
|
let context: BrowserContext
|
||||||
|
let page: Page
|
||||||
|
const geoRequests: string[] = []
|
||||||
|
|
||||||
|
test.beforeAll(async ({ browser }) => {
|
||||||
|
context = await browser.newContext()
|
||||||
|
page = await context.newPage()
|
||||||
|
// Interceptar requests geo antes de navegar (para Test 1)
|
||||||
|
page.on('request', (req) => {
|
||||||
|
if (req.url().includes('geo_paraguay_full.json')) geoRequests.push(req.url())
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
test.afterAll(async () => {
|
||||||
|
await context.close()
|
||||||
|
})
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────────────────────
|
||||||
|
// Test 1 — Cache geo: un solo fetch para barrio y ciudad
|
||||||
|
// ─────────────────────────────────────────────────────────────
|
||||||
|
test('1. cache geo: un solo fetch para barrio y ciudad', async () => {
|
||||||
|
await page.goto(SURVEY_URL)
|
||||||
|
await acceptConsent(page)
|
||||||
|
|
||||||
|
// Navegar hasta Q2.2 (CiudadSelectField monta → geo request se dispara aquí)
|
||||||
|
await navigateUntil(page, '2.2')
|
||||||
|
expect(await currentCode(page)).toBe('2.2')
|
||||||
|
|
||||||
|
// Avanzar a Q2.3 (BarrioAutocompleteField monta → debe usar cache, no nueva request)
|
||||||
|
await page.getByRole('button', { name: 'Siguiente' }).click()
|
||||||
|
await page.waitForTimeout(200)
|
||||||
|
expect(await currentCode(page)).toBe('2.3')
|
||||||
|
|
||||||
|
// Solo debe haber habido 1 request al JSON de geo (Q2.2 lo cargó, Q2.3 usó el cache)
|
||||||
|
expect(geoRequests.length).toBe(1)
|
||||||
|
})
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────────────────────
|
||||||
|
// Test 2 — Estado loading del campo geo
|
||||||
|
// ─────────────────────────────────────────────────────────────
|
||||||
|
test('2. estado loading del campo geo', async () => {
|
||||||
|
// Estamos en Q2.3 (del test anterior). Volver a Q2.2 para observar el estado del campo.
|
||||||
|
await page.getByRole('button', { name: 'Anterior' }).click()
|
||||||
|
await page.waitForTimeout(200)
|
||||||
|
expect(await currentCode(page)).toBe('2.2')
|
||||||
|
|
||||||
|
// CiudadSelectField: input con clase .text-short-input
|
||||||
|
const input = page.locator('input.text-short-input').first()
|
||||||
|
await expect(input).toBeVisible()
|
||||||
|
|
||||||
|
const isDisabled = await input.isDisabled()
|
||||||
|
if (isDisabled) {
|
||||||
|
// Estado loading capturado — verificar placeholder correcto
|
||||||
|
const placeholder = await input.getAttribute('placeholder')
|
||||||
|
expect(placeholder).toBe('Cargando opciones...')
|
||||||
|
}
|
||||||
|
// En cualquier caso, el campo debe estar (o volverse) habilitado
|
||||||
|
await expect(input).toBeEnabled({ timeout: 5000 })
|
||||||
|
|
||||||
|
// Volver a Q2.3 para el siguiente test
|
||||||
|
await page.getByRole('button', { name: 'Siguiente' }).click()
|
||||||
|
await page.waitForTimeout(200)
|
||||||
|
expect(await currentCode(page)).toBe('2.3')
|
||||||
|
})
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────────────────────
|
||||||
|
// Test 3 — Texto libre funciona en campo barrio
|
||||||
|
// ─────────────────────────────────────────────────────────────
|
||||||
|
test('3. texto libre funciona en campo barrio', async () => {
|
||||||
|
// Estamos en Q2.3 (BarrioAutocompleteField)
|
||||||
|
expect(await currentCode(page)).toBe('2.3')
|
||||||
|
|
||||||
|
const barrioCampo = page.locator('input.text-short-input')
|
||||||
|
await expect(barrioCampo).toBeVisible()
|
||||||
|
await expect(barrioCampo).toBeEnabled()
|
||||||
|
|
||||||
|
// Escribir un barrio que no existe en el JSON (texto libre)
|
||||||
|
await barrioCampo.fill('Barrio Inexistente XYZ')
|
||||||
|
await expect(barrioCampo).toHaveValue('Barrio Inexistente XYZ')
|
||||||
|
|
||||||
|
// Avanzar — campo es opcional, texto libre debe aceptarse sin error
|
||||||
|
await page.getByRole('button', { name: 'Siguiente' }).click()
|
||||||
|
await page.waitForTimeout(200)
|
||||||
|
await expect(page.locator('.field-error')).toHaveCount(0)
|
||||||
|
await expect(page.locator('.wizard-shell')).toBeVisible()
|
||||||
|
})
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────────────────────
|
||||||
|
// Test 4 — Draft persiste tras recarga
|
||||||
|
// ─────────────────────────────────────────────────────────────
|
||||||
|
test('4. draft persiste tras recarga', async () => {
|
||||||
|
// Volver a Q2.3 para sobreescribir el draft con un valor reconocible
|
||||||
|
await page.getByRole('button', { name: 'Anterior' }).click()
|
||||||
|
await page.waitForTimeout(200)
|
||||||
|
expect(await currentCode(page)).toBe('2.3')
|
||||||
|
|
||||||
|
const barrioCampo = page.locator('input.text-short-input')
|
||||||
|
await barrioCampo.fill('Barrio Test Draft')
|
||||||
|
await expect(barrioCampo).toHaveValue('Barrio Test Draft')
|
||||||
|
|
||||||
|
// Avanzar — handleNext guarda el draft inmediatamente (no debounce)
|
||||||
|
await page.getByRole('button', { name: 'Siguiente' }).click()
|
||||||
|
await page.waitForTimeout(300)
|
||||||
|
|
||||||
|
// Verificar que el draft fue guardado antes de recargar
|
||||||
|
const draftRaw = await page.evaluate(
|
||||||
|
(id) => localStorage.getItem(`survey_draft_${id}`),
|
||||||
|
DEMO_SURVEY_ID,
|
||||||
|
)
|
||||||
|
expect(draftRaw, 'draft debe existir en localStorage antes del reload').not.toBeNull()
|
||||||
|
expect(draftRaw, 'draft debe contener el valor del barrio').toContain('Barrio Test Draft')
|
||||||
|
|
||||||
|
// Recargar
|
||||||
|
await page.reload()
|
||||||
|
|
||||||
|
// Verificar que el draft sobrevive el reload
|
||||||
|
const draftAfterReload = await page.evaluate(
|
||||||
|
(id) => localStorage.getItem(`survey_draft_${id}`),
|
||||||
|
DEMO_SURVEY_ID,
|
||||||
|
)
|
||||||
|
expect(draftAfterReload, 'draft debe persistir después del reload').not.toBeNull()
|
||||||
|
|
||||||
|
await acceptConsent(page)
|
||||||
|
|
||||||
|
// El indicador de restauración es el valor de Q2.3 — navegamos hasta ahí
|
||||||
|
// (navigateUntil funciona desde cualquier pantalla de inicio, incluyendo S1)
|
||||||
|
await navigateUntil(page, '2.3')
|
||||||
|
await expect(page.locator('input.text-short-input')).toHaveValue('Barrio Test Draft')
|
||||||
|
})
|
||||||
|
|
||||||
|
// ─────────────────────────────────────────────────────────────
|
||||||
|
// Test 5 — Submit con error de red muestra estado error del wizard
|
||||||
|
// ─────────────────────────────────────────────────────────────
|
||||||
|
test('5. submit con error de red muestra estado error del wizard', async ({ browser }) => {
|
||||||
|
const ctx5 = await browser.newContext()
|
||||||
|
const page5 = await ctx5.newPage()
|
||||||
|
|
||||||
|
// Pre-rellenar Q1.1 (única pregunta required) para no bloquearnos al avanzar
|
||||||
|
await page5.goto(SURVEY_URL)
|
||||||
|
await page5.evaluate((id) => {
|
||||||
|
localStorage.setItem(`survey_draft_${id}`, JSON.stringify({ '1.1:default': 'true' }))
|
||||||
|
}, DEMO_SURVEY_ID)
|
||||||
|
|
||||||
|
await acceptConsent(page5)
|
||||||
|
|
||||||
|
// Navegar hasta el end screen: todas las preguntas restantes son opcionales
|
||||||
|
let iters = 0
|
||||||
|
while (
|
||||||
|
(await page5.locator('button', { hasText: 'Enviar encuesta' }).count()) === 0 &&
|
||||||
|
iters < 70
|
||||||
|
) {
|
||||||
|
await page5.getByRole('button', { name: 'Siguiente' }).click()
|
||||||
|
await page5.waitForTimeout(100)
|
||||||
|
iters++
|
||||||
|
}
|
||||||
|
|
||||||
|
await expect(page5.getByRole('button', { name: 'Enviar encuesta' })).toBeVisible()
|
||||||
|
|
||||||
|
// Poner el contexto offline para simular error de red en el submit
|
||||||
|
await page5.context().setOffline(true)
|
||||||
|
|
||||||
|
await page5.getByRole('button', { name: 'Enviar encuesta' }).click()
|
||||||
|
|
||||||
|
// El wizard debe mostrar su propio estado de error (no un React error boundary)
|
||||||
|
await expect(page5.locator('.error-container')).toBeVisible({ timeout: 15000 })
|
||||||
|
await expect(page5.getByText(/Application error/i)).toHaveCount(0)
|
||||||
|
await expect(page5.getByRole('button', { name: /Volver e intentar/i })).toBeVisible()
|
||||||
|
|
||||||
|
await page5.context().setOffline(false)
|
||||||
|
await ctx5.close()
|
||||||
|
})
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user