Cada punto se dibujaba dentro del grupo de su pais, y en un SVG no hay `z-index`: manda el orden en que esta escrito. El relleno del pais siguiente se pintaba encima y el punto salia mordido por un lado. Ahora hay dos pasadas, primero todas las tierras y luego todos los puntos, y el que enciende cada uno se anota en `bajoPuntero` y `conFoco`, porque desde la capa de arriba ningun selector alcanza al pais de debajo. De paso, tres cosas que se veian mal y no daban error: - El radio salia de dividir por el ancho de la caja, pero con `max-height` el dibujo se ajusta al alto y en una ventana baja America se pintaba a 0,57 en vez de a 0,70. El punto de Mexico media doce pixeles y el de España quince. Ahora la escala sale del lado que primero se queda corto. - De España ya no se dibujan las islas: Canarias caia fuera del recuadro y las Baleares eran cuatro pixeles sueltos al este. - Un solo verde para todo pais con generos. El segundo tono servia para separar la cuna de lo adoptado y lo unico que conseguia era que España, que solo adopto el bolero, saliera de otro color que el resto. Esa diferencia se cuenta en la lista de al lado. La Peninsula, cuarenta pixeles a la izquierda; en movil no, que ahi su columna mide noventa y se metia encima de America. `e2e/mapa.e2e.ts` fija las cuatro: orden de pintado, tamaño del punto, color unico y España sin islas. Ninguna daba error, el mapa salia igual, solo que mal. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>master
parent
b233673eed
commit
174cf828e7
@ -0,0 +1,92 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
Loading…
Reference in new issue