senzapaura_es/e2e-estudio/publicacion.e2e.ts

import { test, expect } from '@playwright/test';
import { randomUUID } from 'node:crypto';

test.beforeEach(async ({ page }) => {
	await page.goto('/entrar');
	await page.getByLabel('Código de prueba', { exact: true }).fill('123456');
	await page.getByRole('button', { name: 'Entrar', exact: true }).click();
	await expect(page.getByRole('navigation', { name: 'Administración' })).toBeVisible();
});

test('un fallo de conexión conserva la edición y permite volver a guardar', async ({ page }) => {
	await page.goto('/paginas/nuevo');
	await page.getByLabel('Nombre o título').fill('Conexión ' + randomUUID().slice(0, 8));
	await page.getByRole('button', { name: 'Crear borrador' }).click();
	await page.getByLabel('Contenido', { exact: true }).fill('Este texto debe conservarse.');
	await page.route('**/*?*/guardar', (route) => route.abort('failed'));
	await page.getByRole('button', { name: 'Guardar borrador', exact: true }).click();
	await expect(page.getByRole('alert')).toContainText('Tus cambios siguen en esta pantalla');
	await expect(page.getByLabel('Contenido', { exact: true })).toHaveValue(
		'Este texto debe conservarse.'
	);
	await expect(page.getByRole('button', { name: 'Guardar borrador', exact: true })).toBeEnabled();
	await page.unroute('**/*?*/guardar');
	await page.getByRole('button', { name: 'Guardar borrador', exact: true }).click();
	await expect(page.getByRole('status')).toContainText('Borrador guardado');
});

test('el borrador explica qué falta y permite guardar y publicar desde la edición', async ({
	page
}) => {
	await page.goto('/paginas/nuevo');
	await page.getByLabel('Nombre o título').fill('Flujo editorial ' + randomUUID().slice(0, 8));
	await page.getByRole('button', { name: 'Crear borrador' }).click();
	await expect(page.getByLabel('Contenido', { exact: true })).toBeVisible();
	await expect(page.locator('.estado-editor')).toContainText('Borrador guardado');
	await page.getByRole('button', { name: 'Revisar y publicar', exact: true }).click();
	const revision = page.getByRole('dialog', { name: 'Revisar publicación' });
	await expect(revision).toContainText('Todavía falta completar');
	await expect(revision.getByRole('button', { name: 'Publicar ahora' })).toBeDisabled();
	await revision.getByRole('link', { name: 'Escribir el contenido' }).click();
	await expect(revision).not.toBeVisible();
	await page.getByLabel('Contenido', { exact: true }).fill('Texto que se guarda como borrador.');
	await expect(page.locator('.estado-editor')).toContainText('Cambios sin guardar');
	await page.getByRole('button', { name: 'Guardar borrador', exact: true }).click();
	await expect(page.getByRole('status')).toContainText(
		'Borrador guardado. La publicación no ha cambiado'
	);
	await page
		.getByLabel('Contenido', { exact: true })
		.fill('Texto final que se publica directamente.');
	await page.getByRole('button', { name: 'Revisar y publicar', exact: true }).click();
	await expect(revision).toContainText('Estás en pruebas');
	await revision.getByRole('button', { name: 'Guardar y publicar', exact: true }).click();
	await expect(revision).not.toBeVisible();
	await expect(page.getByRole('status')).toContainText('Publicación completada en pruebas');
	await expect(page.locator('.estado-editor')).toContainText('Publicado · sin cambios pendientes');
	await page.reload();
	await expect(page.getByLabel('Contenido', { exact: true })).toHaveValue(
		'Texto final que se publica directamente.'
	);
	await page.getByLabel('Descripción breve', { exact: true }).fill('Una edición posterior');
	await page.getByRole('button', { name: 'Guardar borrador', exact: true }).click();
	await expect(page.locator('.estado-editor')).toContainText(
		'Publicado · hay cambios sin publicar'
	);
	await expect(page.locator('.estado-editor')).toContainText('versión anterior');
	await page.evaluate(() => window.scrollTo(0, 0));
	await page.screenshot({ path: 'docs/assets/estudio/flujo-publicacion.png', fullPage: true });
	await page.getByRole('button', { name: 'Revisar y publicar', exact: true }).click();
	await revision.getByRole('button', { name: 'Publicar cambios', exact: true }).click();
	await expect(page.getByRole('status')).toContainText('Publicación completada en pruebas');
});

test('la ficha usa la marca pública, texto legible y controles visibles en móvil', async ({
	page
}) => {
	await page.setViewportSize({ width: 375, height: 812 });
	await page.goto('/personas/nuevo');
	await page.getByLabel('Nombre o título').fill('Persona móvil ' + randomUUID().slice(0, 8));
	await page.getByRole('checkbox', { name: 'Letrista', exact: true }).check();
	await page.getByRole('button', { name: 'Crear borrador' }).click();
	await expect(page.getByRole('button', { name: 'Revisar y publicar', exact: true })).toBeVisible();
	await expect(page.locator('aside .marca img')).toHaveAttribute('src', /senza-paura-logo/);
	const medidas = await page.evaluate(() => ({
		ancho: document.documentElement.scrollWidth,
		pantalla: innerWidth,
		fuente: getComputedStyle(document.documentElement).fontFamily,
		color: getComputedStyle(document.documentElement).getPropertyValue('--fondo'),
		pequenos: [...document.querySelectorAll('body *')].filter(
			(e) =>
				e.checkVisibility() &&
				[...e.childNodes].some((n) => n.nodeType === 3 && n.textContent?.trim()) &&
				parseFloat(getComputedStyle(e).fontSize) < 16
		).length
	}));
	expect(medidas.ancho).toBe(medidas.pantalla);
	expect(medidas.fuente).toContain('Archivo');
	expect(medidas.color).toContain('0.16 0.042 264');
	expect(medidas.pequenos).toBe(0);
	await page.getByRole('button', { name: 'Revisar y publicar', exact: true }).click();
	await expect(page.getByRole('dialog', { name: 'Revisar publicación' })).toBeVisible();
	await page.screenshot({ path: 'docs/assets/estudio/revision-movil.png', fullPage: false });
});