vjrj
b0ca838788
/zones y /fires usan el mismo componente con las mismas props y en staging uno pinta 18 teselas y el otro cero, con el mapa inicializado y con vista en ambos. Hay que mirar cómo FiresMap monta los hijos del MapContainer, no el componente de capas. Y el detalle de fuego pide `satellite`, una capa de Google que ni existe hasta que se resuelve la clave. Además el script de QA deja de usar selectores por id: TestUtils.testId() devuelve el id SOLO en desarrollo, así que en staging y producción no existen — cualquier prueba de navegador escrita con ids pasa en local y falla en staging.
79 lines
4 KiB
JavaScript
79 lines
4 KiB
JavaScript
import { test, expect } from '@playwright/test';
|
|
import { waitForMap } from '../support/app.js';
|
|
|
|
// ⛔ BUG ABIERTO: el mapa de /fires se queda EN GRIS cuando hay clave de Google
|
|
// Maps configurada — ni teselas, ni fuegos, ni suscripción por viewport, con el
|
|
// "Actualizando…" eterno. Es lo que se ve en staging.
|
|
//
|
|
// Lo que SÍ está establecido (2026-08-01):
|
|
//
|
|
// 1. NO es el navegador sin pantalla. El mismo Playwright headless pinta la
|
|
// portada y /zones de staging, y pinta /fires perfectamente contra un
|
|
// servidor local sin clave. La nota del plan que lo achacaba a eso es falsa.
|
|
// 2. Depende de la clave de Google. Basta con poner una clave (aunque sea
|
|
// falsa) en settings-ci.json para reproducirlo en local: 15 teselas sin
|
|
// clave, 0 con ella. Por eso settings-ci.json lleva una: para que esto se
|
|
// vea aquí y no solo en staging.
|
|
// 3. El control de capas se monta con dos capas base y, al resolverse la clave,
|
|
// se le añaden tres de Google. En esa segunda pasada react-leaflet se deja
|
|
// por el camino la capa base marcada.
|
|
// 4. Montar el control UNA sola vez, esperando a la clave, arregla el caso
|
|
// local pero ROMPE staging todavía más: allí la portada y /zones —que
|
|
// funcionaban— se quedan también sin teselas, porque entonces el control
|
|
// aparece después de que el mapa ya esté montado. Probado en staging,
|
|
// revertido: no basta con mover el momento del montaje.
|
|
// 5. Y el culpable NO es DefMapLayers: /zones (SubscriptionsMap) y /fires
|
|
// (FiresMap) usan el MISMO componente con las MISMAS props
|
|
// (`<DefMapLayers gray />`), y en staging /zones pinta 18 teselas con su
|
|
// capa en el pane mientras /fires se queda con CERO capas. En los dos casos
|
|
// el mapa está inicializado y con vista (el `.leaflet-proxy` está ahí y el
|
|
// pane tiene su transform): lo que falta en /fires es que se le añada la
|
|
// capa base.
|
|
//
|
|
// O sea que hay que mirar cómo FiresMap monta y re-renderiza los hijos del
|
|
// MapContainer (tiene shouldComponentUpdate y un manejo de viewport con
|
|
// debounce), no DefMapLayers. La página de detalle de fuego es un caso aparte y
|
|
// además pide `satellite`, que es una capa de Google y por tanto ni siquiera
|
|
// existe hasta que la clave se resuelve.
|
|
//
|
|
// Quedan como test.fixme para que salgan como pendientes en cada ejecución en
|
|
// vez de desaparecer en una nota. Quitar el .fixme al arreglarlo.
|
|
test.describe('mapa de fuegos activos', () => {
|
|
test.fixme('paints its tiles', async ({ page }) => {
|
|
await page.goto('/fires');
|
|
await waitForMap(page);
|
|
|
|
await expect(page.locator('.leaflet-tile-loaded').first()).toBeVisible({ timeout: 60000 });
|
|
expect(await page.locator('.leaflet-tile').count()).toBeGreaterThan(0);
|
|
});
|
|
|
|
test.fixme('offers every base layer and keeps the checked one', async ({ page }) => {
|
|
await page.goto('/fires');
|
|
await waitForMap(page);
|
|
|
|
const layers = page.locator('.leaflet-control-layers-base input');
|
|
expect(await layers.count()).toBeGreaterThanOrEqual(2);
|
|
// Exactamente una marcada, y el mapa con teselas: si la marcada se hubiera
|
|
// perdido, seguiría marcada en el control pero no habría teselas.
|
|
const checked = await page.locator('.leaflet-control-layers-base input:checked').count();
|
|
expect(checked).toEqual(1);
|
|
expect(await page.locator('.leaflet-tile').count()).toBeGreaterThan(0);
|
|
});
|
|
|
|
test.fixme('subscribes to the fires of the current viewport', async ({ page }) => {
|
|
await page.goto('/fires');
|
|
await waitForMap(page);
|
|
|
|
const names = await page.evaluate(() => Object.values(window.Meteor.connection._subscriptions).map(s => s.name));
|
|
expect(names).toContain('activefiresmyloc');
|
|
expect(names).toContain('activefiresunionmyloc');
|
|
});
|
|
|
|
test.fixme('does not get stuck on "Actualizando…"', async ({ page }) => {
|
|
await page.goto('/fires');
|
|
await waitForMap(page);
|
|
await page.waitForTimeout(5000);
|
|
|
|
await expect(page.getByText('Actualizando...', { exact: false })).toHaveCount(0);
|
|
});
|
|
});
|