You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
3.0 KiB
72 lines
3.0 KiB
import { expect, test } from '@playwright/test';
|
|
|
|
test.describe('Reproductor', () => {
|
|
/** El título del tema dentro de la barra, por su enlace exacto. */
|
|
const temaEnBarra = (page: import('@playwright/test').Page, slug: string) =>
|
|
page.getByRole('group', { name: 'Sonando ahora' }).locator(`a[href="/canciones/${slug}"]`);
|
|
|
|
test('la barra aparece al reproducir un álbum y anuncia el tema', async ({ page }) => {
|
|
await page.goto('/albumes/como-si-nada');
|
|
|
|
const barra = page.getByRole('region', { name: 'Reproductor' });
|
|
await expect(barra).toBeHidden();
|
|
|
|
await page.getByRole('button', { name: 'Reproducir', exact: true }).first().click();
|
|
|
|
await expect(barra).toBeVisible();
|
|
await expect(temaEnBarra(page, 'como-si-nada')).toBeVisible();
|
|
|
|
// Y sigue sonando de verdad, no solo pintada: la posición avanza. Sin esto
|
|
// el test pasaría igual con una barra congelada.
|
|
const posicion = page.getByLabel('Posición de reproducción');
|
|
const antes = Number(await posicion.inputValue());
|
|
await page.waitForTimeout(1500);
|
|
expect(Number(await posicion.inputValue())).toBeGreaterThan(antes);
|
|
});
|
|
|
|
test('el paso al tema siguiente carga el orden del disco', async ({ page }) => {
|
|
await page.goto('/albumes/como-si-nada');
|
|
await page.getByRole('button', { name: 'Reproducir', exact: true }).first().click();
|
|
|
|
const barra = page.getByRole('region', { name: 'Reproductor' });
|
|
await barra.getByRole('button', { name: 'Tema siguiente' }).click();
|
|
|
|
await expect(temaEnBarra(page, 'media-verdad')).toBeVisible();
|
|
});
|
|
|
|
test('la reproducción sobrevive al cambiar de página', async ({ page }) => {
|
|
// Es la razón de que la barra viva en el layout raíz: navegar por la web
|
|
// no puede cortar lo que se está escuchando.
|
|
await page.goto('/albumes/como-si-nada');
|
|
await page.getByRole('button', { name: 'Reproducir', exact: true }).first().click();
|
|
|
|
const barra = page.getByRole('region', { name: 'Reproductor' });
|
|
await expect(temaEnBarra(page, 'como-si-nada')).toBeVisible();
|
|
|
|
await page
|
|
.getByRole('navigation', { name: 'Principal' })
|
|
.getByRole('link', { name: 'Bio' })
|
|
.click();
|
|
await expect(page).toHaveURL('/bio');
|
|
|
|
await expect(barra).toBeVisible();
|
|
await expect(temaEnBarra(page, 'como-si-nada')).toBeVisible();
|
|
});
|
|
|
|
test('la cola muestra los temas pendientes', async ({ page }) => {
|
|
await page.goto('/albumes/como-si-nada');
|
|
await page.getByRole('button', { name: 'Reproducir', exact: true }).first().click();
|
|
|
|
const barra = page.getByRole('region', { name: 'Reproductor' });
|
|
await barra.getByRole('button', { name: 'Ver la cola de reproducción' }).click();
|
|
|
|
const cola = page.getByRole('complementary', { name: 'Cola de reproducción' });
|
|
await expect(cola).toBeVisible();
|
|
await expect(cola.getByRole('button', { name: /El último tren/ })).toBeVisible();
|
|
|
|
// Saltar desde la cola cambia lo que suena.
|
|
await cola.getByRole('button', { name: /El último tren/ }).click();
|
|
await expect(temaEnBarra(page, 'el-ultimo-tren')).toBeVisible();
|
|
});
|
|
});
|