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

test.describe('Juke-box', () => {
	test('está en las acciones de cabecera y no dentro del menú editorial', async ({ page }) => {
		await page.goto('/juke-box');
		await page.locator('html[data-hidratado]').waitFor();

		const cabecera = page.getByRole('banner');
		const jukebox = cabecera.getByRole('link', { name: 'Juke-box' });
		const carrito = cabecera.getByRole('link', { name: /Carrito/ });
		await expect(jukebox).toBeVisible();
		await expect(carrito).toBeVisible();
		const accionesCabecera = page.locator('header .cuenta');
		await expect(accionesCabecera.locator('.jukebox')).toHaveCount(1);
		await expect(accionesCabecera.locator('.carrito')).toHaveCount(1);
		await expect(
			cabecera.getByRole('navigation', { name: 'Principal' }).getByText('Juke-box')
		).toHaveCount(0);
	});

	test('el acceso anónimo abre el login desde el hero sin mostrar gestión debajo', async ({
		page
	}) => {
		await page.goto('/juke-box');
		await page.locator('html[data-hidratado]').waitFor();

		await expect(page.getByRole('heading', { level: 1, name: 'Juke-box' })).toBeVisible();
		await expect(page.getByRole('heading', { name: 'Mis jukebox' })).toHaveCount(0);
		await expect(page.getByRole('contentinfo')).toHaveCount(1);
		await page.getByRole('link', { name: 'Configura tu Jukebox', exact: true }).click();
		await expect(page.getByRole('dialog', { name: 'Entrar o crear cuenta' })).toBeVisible();
		await expect(page).toHaveURL('/juke-box');
	});

	test('no desborda en una pantalla estrecha', async ({ page }) => {
		await page.setViewportSize({ width: 390, height: 844 });
		await page.goto('/juke-box');
		await page.locator('html[data-hidratado]').waitFor();
		await expect(page.getByRole('heading', { level: 1, name: 'Juke-box' })).toBeVisible();

		expect(
			await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
		).toBe(true);
	});
});