senzapaura_es/e2e/contacto.e2e.ts

import { expect, test, type Locator, type Page } from '@playwright/test';

/**
 * Escribe en un campo y comprueba que se ha quedado escrito.
 *
 * El bucle no es paranoia. `page.goto` vuelve cuando la página ha cargado, no
 * cuando SvelteKit la ha hidratado, y al hidratar, Svelte reescribe el valor de
 * cada `input` con el del componente, que está vacío. Lo que se teclee antes de
 * ese instante desaparece.
 *
 * Solo le pasaba al primer campo —los demás se rellenan milisegundos después,
 * ya hidratada— y solo con la máquina cargada, así que fallaba en la tanda
 * completa y pasaba al repetir la prueba a solas. Es la peor clase de fallo:
 * el que parece un fantasma.
 */
async function escribir(campo: Locator, valor: string) {
	await expect(async () => {
		await campo.fill(valor);
		await expect(campo).toHaveValue(valor, { timeout: 500 });
	}).toPass({ timeout: 10_000 });
}

/** Rellena el formulario con datos válidos, salvo lo que se sobrescriba. */
async function rellenar(
	page: Page,
	campos: Partial<{ nombre: string; email: string; motivo: string; mensaje: string }> = {}
) {
	await escribir(page.getByLabel('Nombre'), campos.nombre ?? 'Ana Ruiz');
	await escribir(page.getByLabel('Correo electrónico'), campos.email ?? 'ana@example.com');
	await page.getByLabel('Motivo').selectOption(campos.motivo ?? 'colaboracion');
	await escribir(
		page.getByLabel('Mensaje'),
		campos.mensaje ?? 'Me gustaría hablar contigo sobre una colaboración para un disco.'
	);
}

test.describe('Formulario de contacto', () => {
	test('la validación del servidor devuelve los errores por campo', async ({ page }) => {
		await page.goto('/contacto');
		// "A" y "Hola" pasan la validación del navegador y fallan en el servidor,
		// que es justo lo que interesa comprobar aquí.
		await rellenar(page, { nombre: 'A', mensaje: 'Hola' });
		await page.getByRole('button', { name: 'Enviar mensaje' }).click();

		await expect(page.getByText('Indica tu nombre.')).toBeVisible();
		await expect(page.getByText(/Cuenta un poco más/)).toBeVisible();
	});

	test('lo escrito no se pierde cuando la validación falla', async ({ page }) => {
		await page.goto('/contacto');
		await rellenar(page, { nombre: 'A' });
		await page.getByRole('button', { name: 'Enviar mensaje' }).click();

		await expect(page.getByText('Indica tu nombre.')).toBeVisible();
		await expect(page.getByLabel('Correo electrónico')).toHaveValue('ana@example.com');
		await expect(page.getByLabel('Motivo')).toHaveValue('colaboracion');
		await expect(page.getByLabel('Mensaje')).not.toBeEmpty();
	});

	test('el campo trampa descarta los envíos automáticos', async ({ page }) => {
		await page.goto('/contacto');
		await rellenar(page);

		// Solo un cliente automático rellena este campo: está fuera de la vista
		// y fuera del recorrido de tabulación.
		await page.evaluate(() => {
			const trampa = document.querySelector('#companiaWeb');
			if (trampa instanceof HTMLInputElement) trampa.value = 'https://spam.example';
		});
		await page.getByRole('button', { name: 'Enviar mensaje' }).click();

		await expect(page.getByText('No se ha podido enviar el mensaje.')).toBeVisible();
	});

	test('un envío válido no muestra errores de campo', async ({ page }) => {
		await page.goto('/contacto');
		await rellenar(page);
		await page.getByRole('button', { name: 'Enviar mensaje' }).click();

		// El resultado final depende de si hay proveedor de correo configurado
		// (ver src/lib/server/correo.ts), así que solo se comprueba que la
		// validación ha quedado atrás.
		await expect(page.getByText('Indica tu nombre.')).toHaveCount(0);
		await expect(page.getByText(/Cuenta un poco más/)).toHaveCount(0);
		await expect(page.getByText('Ese correo no parece válido.')).toHaveCount(0);
	});
});