senzapaura_es/e2e/contenido.e2e.ts

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

test.describe('Fichas de contenido', () => {
	test('la ficha de un tema publica la letra y sus datos', async ({ page }) => {
		await page.goto('/canciones/prometiste');

		await expect(page.getByRole('heading', { level: 1 })).toHaveText('Prometiste');
		await expect(page.getByRole('tab', { name: 'Letra' })).toHaveAttribute('aria-selected', 'true');
		await expect(page.getByRole('tabpanel', { name: 'Letra' }).locator('p').first()).toContainText(
			'Me prometiste besos'
		);
		await expect(page.getByRole('heading', { level: 2, name: 'Ficha' })).toBeVisible();
		await expect(page.getByText('Acceso de escucha')).toBeVisible();
	});

	test('los versos conservan sus saltos de línea', async ({ page }) => {
		// Sin remark-breaks, Markdown juntaría la estrofa en un único párrafo.
		await page.goto('/canciones/prometiste');

		const saltos = await page.locator('.texto br').count();
		expect(saltos).toBeGreaterThan(5);
	});

	test('la bio se publica desde el Markdown de contenido', async ({ page }) => {
		await page.goto('/bio');

		await expect(page.getByRole('heading', { level: 1 })).toHaveText('Biografía');
		await expect(page.getByRole('heading', { level: 2, name: 'Las baladas' })).toBeVisible();
	});
});

test.describe('Tarjetas de canción', () => {
	test('la tarjeta sitúa el tema: disco, año y estilo', async ({ page }) => {
		await page.goto('/musica/baladas-romanticas');

		const tarjeta = page
			.locator('article')
			.filter({ has: page.locator('a[href="/canciones/prometiste"]') });
		await expect(tarjeta.getByRole('heading', { name: 'Prometiste' })).toBeVisible();
		await expect(tarjeta.getByText(/Cupido sin flechas/)).toBeVisible();
		await expect(tarjeta.getByText(/2026/)).toBeVisible();
		await expect(tarjeta.getByText(/Baladas románticas/)).toBeVisible();
	});

	test('la tarjeta no enseña la letra', async ({ page }) => {
		await page.goto('/musica/baladas-romanticas');

		await expect(page.getByText('Me prometiste besos')).toHaveCount(0);
	});

	test('desde la tarjeta se llega a la letra completa', async ({ page }) => {
		await page.goto('/musica/baladas-romanticas');

		const tarjeta = page
			.locator('article')
			.filter({ has: page.locator('a[href="/canciones/prometiste"]') });
		await tarjeta.getByRole('link').first().click();

		await expect(page).toHaveURL(/\/canciones\/prometiste$/);
		await expect(page.getByRole('tab', { name: 'Letra' })).toHaveAttribute('aria-selected', 'true');
	});
});

test.describe('Pestañas de la ficha', () => {
	test('la letra se abre por defecto', async ({ page }) => {
		await page.goto('/canciones/dorina');

		await expect(page.getByRole('tab', { name: 'Letra' })).toHaveAttribute('aria-selected', 'true');
		await expect(page.getByRole('tabpanel', { name: 'Letra' })).toBeVisible();
		await expect(page.getByRole('tabpanel', { name: 'Vídeo' })).toBeHidden();
	});

	test('al pulsar una pestaña se cambia de panel', async ({ page }) => {
		await page.goto('/canciones/dorina');
		await page.getByRole('tab', { name: 'Vídeo' }).click();

		await expect(page.getByRole('tabpanel', { name: 'Vídeo' })).toBeVisible();
		await expect(page.getByRole('tabpanel', { name: 'Letra' })).toBeHidden();
		await expect(page.getByText(/El vídeo se carga solo al pulsarlo/)).toBeVisible();
	});

	test('las flechas mueven entre pestañas', async ({ page }) => {
		await page.goto('/canciones/dorina');
		await page.getByRole('tab', { name: 'Letra' }).focus();
		await page.keyboard.press('ArrowRight');

		await expect(page.getByRole('tab', { name: 'Vídeo' })).toBeFocused();
		await expect(page.getByRole('tabpanel', { name: 'Vídeo' })).toBeVisible();

		const pestanas = page.getByRole('tab');
		await page.keyboard.press('End');
		await expect(pestanas.last()).toBeFocused();
		await page.keyboard.press('ArrowRight');
		await expect(pestanas.first()).toBeFocused();
	});

	test('solo hay pestañas para lo que el tema tiene', async ({ page }) => {
		await page.goto('/canciones/prometiste');

		await expect(page.getByRole('tab', { name: 'Alternativas musicales' })).toHaveCount(0);
		await expect(page.getByRole('tab', { name: 'Vídeo' })).toHaveCount(0);
		await expect(page.getByRole('tab', { name: 'Letra' })).toBeVisible();
	});

	test('se puede enlazar una pestaña concreta', async ({ page }) => {
		await page.goto('/canciones/dorina#panel-videos');

		await expect(page.getByRole('tab', { name: 'Vídeo' })).toHaveAttribute('aria-selected', 'true');
		await expect(page.getByRole('tabpanel', { name: 'Vídeo' })).toBeVisible();
	});

	test('un ancla que no existe deja la pestaña de siempre', async ({ page }) => {
		await page.goto('/canciones/dorina#panel-inventado');

		await expect(page.getByRole('tab', { name: 'Letra' })).toHaveAttribute('aria-selected', 'true');
	});

	test('el contenido de las pestañas cerradas está en el HTML', async ({ page }) => {
		await page.goto('/canciones/dorina');

		await expect(page.getByRole('tabpanel', { name: 'Vídeo' })).toBeHidden();
		await expect(page.getByText(/El vídeo se carga solo al pulsarlo/)).toBeAttached();
	});
});

test.describe('Idioma de la letra', () => {
	test('una letra francesa declara su idioma', async ({ page }) => {
		await page.goto('/canciones/ton-silence-me-libere');

		await expect(page.locator('.letra > .texto')).toHaveAttribute('lang', 'fr');
		await expect(page.getByText('francés', { exact: true })).toBeVisible();
		await expect(page.getByText('Traducción al español')).toHaveCount(0);
	});

	test('la letra francesa conserva el corte de los versos', async ({ page }) => {
		await page.goto('/canciones/ton-silence-me-libere');

		const saltos = await page.locator('.letra > .texto br').count();
		expect(saltos).toBeGreaterThan(4);
	});

	test('un tema en español se queda en una sola columna', async ({ page }) => {
		await page.goto('/canciones/prometiste');

		await expect(page.locator('.letra.pareada')).toHaveCount(0);
		await expect(page.getByText('Traducción al español')).toHaveCount(0);
	});
});