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.
52 lines
2.2 KiB
52 lines
2.2 KiB
import { expect, test } from '@playwright/test';
|
|
import { unflatten } from 'devalue';
|
|
|
|
test('el modal horizontal usa una sola columna y conserva el foco', async ({ page }, info) => {
|
|
await page.setViewportSize({ width: 812, height: 375 });
|
|
await page.goto('/musica');
|
|
await page.getByRole('button', { name: 'Menú' }).click();
|
|
await page.getByRole('link', { name: 'Entrar', exact: true }).click();
|
|
const dialogo = page.getByRole('dialog');
|
|
await expect(dialogo).toBeVisible();
|
|
await expect(dialogo.getByLabel('Correo')).toBeFocused();
|
|
const columnas = await dialogo
|
|
.locator('.marco')
|
|
.evaluate((e) => getComputedStyle(e).gridTemplateColumns.split(' ').length);
|
|
expect(columnas).toBe(1);
|
|
await page.screenshot({ path: info.outputPath('modal-horizontal.png') });
|
|
await page.keyboard.press('Escape');
|
|
await expect(dialogo).not.toBeVisible();
|
|
});
|
|
|
|
test('la primera escucha queda visible en un móvil de 667 píxeles de alto', async ({
|
|
page
|
|
}, info) => {
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
await page.emulateMedia({ reducedMotion: 'reduce' });
|
|
await page.goto('/');
|
|
const boton = page.getByRole('button', { name: 'Poner el disco', exact: true });
|
|
await expect(boton).toBeVisible();
|
|
const caja = (await boton.boundingBox())!;
|
|
expect(caja.y + caja.height).toBeLessThan(667);
|
|
await page.screenshot({ path: info.outputPath('portada-movil.png') });
|
|
});
|
|
|
|
test('el taller recibe un catálogo vacío y la navegación vuelve a cargar la música', async ({
|
|
page,
|
|
request
|
|
}) => {
|
|
const respuesta = await request.get('/taller/__data.json');
|
|
expect(respuesta.status()).toBe(200);
|
|
const nodos = (await respuesta.json()).nodes as { type: string; data?: unknown }[];
|
|
const datos = nodos.filter((n) => n?.type === 'data').map((n) => unflatten(n.data));
|
|
const layout = datos.find((d) => d && typeof d === 'object' && 'catalogo' in d);
|
|
expect(layout.catalogo).toEqual({ estilos: [], albumes: [], canciones: [] });
|
|
await page.goto('/taller');
|
|
await page
|
|
.getByRole('navigation', { name: 'Principal' })
|
|
.getByRole('link', { name: 'Música', exact: true })
|
|
.click();
|
|
await expect(page.getByRole('link', { name: 'Conocer a los intérpretes →' })).toBeVisible();
|
|
await expect(page.getByText('Cupido sin flechas').first()).toBeVisible();
|
|
});
|