diff --git a/.gitignore b/.gitignore
index 4e40db5..9da9db9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -41,6 +41,12 @@ test-results
# despliegue no lleva ffmpeg y no puede regenerarlas.
media/audio/
+# Los originales de las láminas de error, por lo mismo. Lo que se sirve —el
+# webp recortado y el mp3— vive en static/errores y ese sí va en git; aquí solo
+# queda el material del que salió, que es grande y no lo pide el navegador.
+media/errors/
+psp/
+
# La base de datos local
local.db*
diff --git a/e2e/navegacion.e2e.ts b/e2e/navegacion.e2e.ts
index 443f8f9..eb392a5 100644
--- a/e2e/navegacion.e2e.ts
+++ b/e2e/navegacion.e2e.ts
@@ -94,7 +94,62 @@ test.describe('Navegación', () => {
const respuesta = await page.goto('/canciones/no-existe');
expect(respuesta?.status()).toBe(404);
- await expect(page.getByRole('heading', { level: 1 })).toHaveText('Página no encontrada');
+ // El titular no repite lo que la lámina ya lleva dibujado.
+ await expect(page.getByRole('heading', { level: 1 })).toHaveText(
+ 'Esta dirección no lleva a ninguna parte'
+ );
+ // El mensaje que lanzó el `load`, que dice más que la frase de reserva.
+ await expect(page.getByText('Ese tema no existe.')).toBeVisible();
+ await expect(page).toHaveTitle(/Página no encontrada/);
+ });
+});
+
+test.describe('La página de error', () => {
+ test('lleva su lámina y sale del paso', async ({ page }) => {
+ await page.goto('/no-existe-esto');
+
+ const lamina = page.locator('.lamina img');
+ await expect(lamina).toHaveAttribute('src', '/errores/404.webp');
+ // Que exista el archivo, no solo la etiqueta.
+ expect(await lamina.evaluate((i: HTMLImageElement) => i.naturalWidth)).toBeGreaterThan(0);
+
+ await page.getByRole('link', { name: 'Volver al inicio' }).click();
+ await expect(page).toHaveURL('/');
+ });
+
+ /*
+ * Sin esto, todo el que aterrice en un 404 se traería 686 KB de mp3 que a lo
+ * mejor no va a escuchar. Es la razón de ser del `preload="none"`.
+ */
+ test('no se trae el mp3 hasta que se pide', async ({ page }) => {
+ const pedidos: string[] = [];
+ page.on('request', (p) => {
+ if (p.url().includes('/errores/')) pedidos.push(p.url());
+ });
+
+ await page.goto('/no-existe-esto');
+ await expect(page.locator('.lamina img')).toBeVisible();
+ expect(pedidos.some((u) => u.endsWith('.mp3'))).toBe(false);
+
+ await page.getByRole('button', { name: 'Poner música' }).click();
+ await expect(page.getByRole('button', { name: 'Parar' })).toBeVisible();
+
+ expect(pedidos.some((u) => u.endsWith('/errores/404.mp3'))).toBe(true);
+ expect(await page.locator('.musica audio').evaluate((a: HTMLAudioElement) => a.paused)).toBe(
+ false
+ );
+ });
+
+ test('el botón vuelve a su sitio al parar', async ({ page }) => {
+ await page.goto('/no-existe-esto');
+
+ await page.getByRole('button', { name: 'Poner música' }).click();
+ await page.getByRole('button', { name: 'Parar' }).click();
+
+ await expect(page.getByRole('button', { name: 'Poner música' })).toBeVisible();
+ expect(await page.locator('.musica audio').evaluate((a: HTMLAudioElement) => a.paused)).toBe(
+ true
+ );
});
});
diff --git a/src/error.html b/src/error.html
new file mode 100644
index 0000000..58621b9
--- /dev/null
+++ b/src/error.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+ %sveltekit.status% · Senza Paura
+
+
+
+
+
+
+
%sveltekit.status%
+
%sveltekit.error.message%
+
+ El sitio no ha podido cargarse. Vuelve a intentarlo en un momento; si sigue igual,
+ escríbenos a hola@senzapaura.es.
+
- {#if page.status === 404}
- La dirección a la que has llegado no existe o el contenido se ha movido.
- {:else}
- {page.error?.message ?? 'Algo ha fallado por nuestra parte.'}
+
+