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.
93 lines
3.7 KiB
93 lines
3.7 KiB
import { expect, test } from '@playwright/test';
|
|
|
|
/*
|
|
* El mapa de la portada de géneros.
|
|
*
|
|
* Todo lo que se comprueba aquí se ha roto al menos una vez, y ninguna de las
|
|
* roturas daba error: el mapa seguía saliendo, solo que mal. Por eso son
|
|
* pruebas y no una mirada.
|
|
*/
|
|
test.describe('Mapa de géneros', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('/generos');
|
|
});
|
|
|
|
test('los puntos se pintan después de todas las tierras', async ({ page }) => {
|
|
// En un SVG no hay `z-index`: manda el orden en que está escrito. Con el
|
|
// punto dentro de su país, el relleno del país siguiente se lo comía por
|
|
// un lado y el punto salía mordido.
|
|
const mordidos = await page.evaluate(() => {
|
|
const fuera: string[] = [];
|
|
|
|
for (const svg of document.querySelectorAll('svg[role="group"]')) {
|
|
const todos = [...svg.querySelectorAll('path, circle.punto')];
|
|
const ultimaTierra = todos.findLastIndex((e) => e.tagName === 'path');
|
|
const primerPunto = todos.findIndex((e) => e.classList.contains('punto'));
|
|
if (primerPunto !== -1 && primerPunto < ultimaTierra) {
|
|
fuera.push(svg.getAttribute('aria-label') ?? '?');
|
|
}
|
|
}
|
|
return fuera;
|
|
});
|
|
|
|
expect(mordidos).toEqual([]);
|
|
});
|
|
|
|
test('el punto mide lo mismo en América que en la Península', async ({ page }) => {
|
|
// Los dos lienzos se dibujan a anchos muy distintos —seiscientas unidades
|
|
// de encuadre uno, ciento diez el otro—, así que un radio en unidades del
|
|
// mapa daba en España la mitad de punto.
|
|
const medir = async (pais: string) => {
|
|
const grupo = page.locator(`g.pais[aria-label^="${pais}"]`).first();
|
|
const diana = (await grupo.locator('circle.golpe').boundingBox())!;
|
|
await page.mouse.move(diana.x + diana.width / 2, diana.y + diana.height / 2);
|
|
|
|
const punto = page.locator('circle.punto.visible').first();
|
|
await expect(punto).toBeAttached();
|
|
return Math.round((await punto.boundingBox())!.width);
|
|
};
|
|
|
|
expect(await medir('España')).toBe(await medir('México'));
|
|
});
|
|
|
|
test('todos los países con géneros llevan el mismo relleno', async ({ page }) => {
|
|
// Hubo una versión con dos verdes, uno para la cuna y otro para donde solo
|
|
// se adoptó, y España —que solo adoptó el bolero— salía de otro color que
|
|
// el resto. Esa diferencia se cuenta en la lista, no en el mapa.
|
|
const rellenos = await page
|
|
.locator('g.pais:not(.elegido) path.tierra')
|
|
.evaluateAll((es) => [...new Set(es.map((e) => getComputedStyle(e).fill))]);
|
|
|
|
expect(rellenos).toHaveLength(1);
|
|
});
|
|
|
|
test('el punto solo sale en el país señalado', async ({ page }) => {
|
|
// En reposo no hay ninguno: el mapa es de países, no de chinchetas.
|
|
await expect(page.locator('circle.punto.visible')).toHaveCount(0);
|
|
|
|
const grupo = page.locator('g.pais[aria-label^="Cuba"]').first();
|
|
const diana = (await grupo.locator('circle.golpe').boundingBox())!;
|
|
await page.mouse.move(diana.x + diana.width / 2, diana.y + diana.height / 2);
|
|
|
|
await expect(page.locator('circle.punto.visible')).toHaveCount(1);
|
|
});
|
|
|
|
test('España se dibuja sin islas', async ({ page }) => {
|
|
// Canarias caía fuera del recuadro y acababa pintada sobre América;
|
|
// las Baleares eran cuatro píxeles sueltos al este.
|
|
const trazados = await page
|
|
.locator('g.pais[aria-label^="España"] path.tierra')
|
|
.first()
|
|
.evaluate((e) => (e.getAttribute('d')?.match(/M/g) ?? []).length);
|
|
|
|
expect(trazados).toBe(1);
|
|
});
|
|
|
|
test('pulsar un país filtra la lista de géneros', async ({ page }) => {
|
|
await page.locator('g.pais[aria-label^="Cuba"]').first().click();
|
|
|
|
await expect(page.getByRole('heading', { name: 'Nació en Cuba' })).toBeVisible();
|
|
await expect(page.getByRole('button', { name: /Quitar el filtro de país/ })).toBeVisible();
|
|
});
|
|
});
|