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.
88 lines
3.4 KiB
88 lines
3.4 KiB
import { expect, test } from '@playwright/test';
|
|
|
|
test('las tablas reproducen sobre la miniatura al pasar por la fila y con teclado', async ({
|
|
page
|
|
}) => {
|
|
await page.setViewportSize({ width: 1440, height: 1000 });
|
|
for (const ruta of ['/albumes/cupido-sin-flechas', '/musica?vista=canciones']) {
|
|
await page.goto(ruta);
|
|
await page.locator('html[data-hidratado]').waitFor();
|
|
if (ruta.startsWith('/musica'))
|
|
await page.getByRole('button', { name: 'Tabla', exact: true }).click();
|
|
const tabla = page.locator('table.tabla-canciones');
|
|
const fila = tabla
|
|
.locator('tbody tr')
|
|
.filter({ has: page.locator('.mini-control button:enabled') })
|
|
.first();
|
|
const mini = fila.locator('.mini');
|
|
const control = fila.locator('.mini-control');
|
|
const play = control.getByRole('button');
|
|
await mini.scrollIntoViewIfNeeded();
|
|
await page.mouse.move(0, 0);
|
|
await expect(control).toHaveCSS('opacity', '0');
|
|
const antes = await mini.boundingBox();
|
|
await fila.locator('.titulo').hover();
|
|
await expect(control).toHaveCSS('opacity', '1');
|
|
const medidas = await mini.evaluate((el) => {
|
|
const imagen = el.querySelector('img')!.getBoundingClientRect();
|
|
const boton = el.querySelector('button')!.getBoundingClientRect();
|
|
return {
|
|
dx: Math.abs(imagen.x - boton.x),
|
|
dy: Math.abs(imagen.y - boton.y),
|
|
ancho: Math.abs(imagen.width - boton.width),
|
|
alto: Math.abs(imagen.height - boton.height),
|
|
celdasPrevias: el.closest('td')!.cellIndex
|
|
};
|
|
});
|
|
expect(medidas).toEqual({ dx: 0, dy: 0, ancho: 0, alto: 0, celdasPrevias: 0 });
|
|
expect(await mini.boundingBox()).toEqual(antes);
|
|
await page.screenshot({
|
|
path: `test-results-publica/tabla-play-${ruta.startsWith('/musica') ? 'catalogo' : 'album'}.png`
|
|
});
|
|
await page.mouse.move(0, 0);
|
|
await play.focus();
|
|
await page.keyboard.press('Tab');
|
|
await page.keyboard.press('Shift+Tab');
|
|
await expect(play).toBeFocused();
|
|
await expect(control).toHaveCSS('opacity', '1');
|
|
await expect(play).toHaveAttribute('title', /Reproducir/);
|
|
await page.keyboard.press('Enter');
|
|
await expect(play).toHaveAttribute('aria-label', 'Pausar');
|
|
await play.evaluate((b: HTMLButtonElement) => b.blur());
|
|
await expect(control).toHaveCSS('opacity', '1');
|
|
await expect(page.getByRole('region', { name: 'Reproductor', exact: true })).toBeVisible();
|
|
await play.click();
|
|
await expect(play).toHaveAttribute('aria-label', /Reproducir/);
|
|
}
|
|
});
|
|
|
|
test('el control sobre la miniatura permanece visible en táctil sin necesitar hover', async ({
|
|
browser
|
|
}) => {
|
|
const context = await browser.newContext({
|
|
viewport: { width: 390, height: 844 },
|
|
isMobile: true,
|
|
hasTouch: true
|
|
});
|
|
try {
|
|
const page = await context.newPage();
|
|
await page.goto('http://127.0.0.1:4180/albumes/cupido-sin-flechas');
|
|
await page.locator('html[data-hidratado]').waitFor();
|
|
const tabla = page.locator('table.tabla-canciones');
|
|
const control = tabla
|
|
.locator('.mini-control')
|
|
.filter({ has: page.locator('button:enabled') })
|
|
.first();
|
|
await control.scrollIntoViewIfNeeded();
|
|
await expect(control).toHaveCSS('opacity', '1');
|
|
await control.getByRole('button').tap();
|
|
await expect(control.getByRole('button')).toHaveAttribute('aria-label', 'Pausar');
|
|
expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(
|
|
true
|
|
);
|
|
await page.screenshot({ path: 'test-results-publica/tabla-play-tactil.png' });
|
|
} finally {
|
|
await context.close();
|
|
}
|
|
});
|