notes
28 sept 2024 · 2 min read

Escribiendo mi primera suite de tests de verdad

El sitio tuvo exactamente un test durante la mayor parte de su vida: un paso de GitHub Actions que corría astro build y verificaba el código de salida. Si el build no fallaba, publicaba. Eso atrapaba errores de tipeo en el frontmatter y poco más —un layout roto, un atributo alt faltante, un enlace que devuelve 404 en silencio, nada de eso hace fallar un build.

Por dónde empecé

Elegí Playwright sobre todo porque podía manejar un navegador real sin mucha configuración, y porque lo había usado una vez en un trabajo anterior y recordaba que me había gustado el visor de trazas. El primer test que escribí fue casi insultantemente simple:

test('home page loads and has a heading', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
});

Ese único test no atrapó nada en sus primeras diez corridas. Después refactoricé el componente de header y atrapó un <h1> faltante al minuto de que lo rompiera, que es el momento exacto en que una suite de tests pasa de “cosa que escribí porque debía” a “cosa en la que confío”.

Lo que agregué después de eso

Una vez que el primer test demostró su valor, agregar más se sintió menos como una obligación:

  • Un smoke test que visita cada ruta generada desde las colecciones de contenido, no solo las que recuerdo que existen.
  • Una verificación de que cada enlace interno en la página principal resuelve a un 200, corrida contra la salida ya construida.
  • Un escaneo con axe-core sobre la plantilla de artículo, que es donde han vivido de verdad la mayoría de los bugs de accesibilidad de este sitio.

La parte que me sorprendió

El escaneo de axe-core encontró un fallo de contraste en un componente de badge en la primera corrida —un fondo coral con texto blanco que a mí me parecía bien en mi monitor y fallaba WCAG AA por un pelo. Había mirado esa badge probablemente cincuenta veces mientras la construía. El test la miró una vez y atrapó lo que yo no podía ver, que es un buen argumento de una sola frase para por qué existe esta suite: no para atrapar los bugs que eventualmente notaría, sino los que estructuralmente no puedo, porque ya sé cómo se supone que se ve la página.