fspm-web/tests/02-responsivo.spec.ts

import { expect, test, type Page } from "@playwright/test";
import { ANCHOS, RUTAS_MUESTRA } from "./rutas";

/**
 * Responsividad. Corre en los cuatro proyectos de la configuración, incluidos
 * los dos de WebKit: Safari e iOS son donde de verdad se rompe el diseño, y el
 * cliente lo pidió por nombre.
 *
 * La falla que perseguimos es el desbordamiento horizontal del documento. Una
 * tabla que se desplaza dentro de su contenedor está bien; el cuerpo de la
 * página desplazándose en horizontal no lo está nunca.
 */

/**
 * El barrido de anchos corre en Chromium y en WebKit de escritorio, no en los
 * cuatro proyectos. El desborde horizontal lo produce el CSS, no el motor, así
 * que repetir 5 anchos × 10 rutas en cuatro navegadores multiplicaba el tiempo
 * de la suite sin agregar información. WebKit sigue incluido porque es donde
 * aparecen las diferencias reales de `dvh`, `env()` y flexbox, y los proyectos
 * móviles conservan las pruebas de interacción de más abajo.
 */
test.describe.configure({ mode: "parallel" });

/**
 * Mide el síntoma, no una propiedad intermedia.
 *
 * La primera versión de esta función comparaba `documentElement.scrollWidth`
 * contra `clientWidth`, y producía falsos positivos: en `/evidencia`,
 * `html.scrollWidth` reporta 865px a 320px de ventana mientras
 * `body.scrollWidth` es 320 y la página **no se puede desplazar**. Chromium y
 * WebKit coinciden en ese reporte, así que es comportamiento esperado alrededor
 * del desbordamiento de un contenedor con scroll propio, no un defecto.
 *
 * Lo único que le importa a la persona es si la página se corre de lado. Eso se
 * comprueba intentando desplazarla y viendo si se movió. `body.scrollWidth`
 * queda como dato de apoyo para el diagnóstico.
 */
async function desbordaEnHorizontal(
  page: Page,
): Promise<{ desborda: boolean; ancho: number; visible: number; movio: number }> {
  return page.evaluate(() => {
    const doc = document.documentElement;
    const antes = window.scrollX;
    window.scrollTo(800, window.scrollY);
    const movio = window.scrollX;
    window.scrollTo(antes, window.scrollY);
    return {
      desborda: movio > 2,
      ancho: document.body.scrollWidth,
      visible: doc.clientWidth,
      movio,
    };
  });
}

/** Devuelve los elementos que sobresalen del ancho de la ventana, para poder señalarlos. */
async function culpablesDeDesborde(page: Page): Promise<string[]> {
  return page.evaluate(() => {
    const limite = document.documentElement.clientWidth;
    const malos: string[] = [];
    for (const el of Array.from(document.querySelectorAll<HTMLElement>("body *"))) {
      const r = el.getBoundingClientRect();
      if (r.width === 0 || r.height === 0) continue;
      // solo cuenta lo que sobresale a la DERECHA: un elemento colocado fuera
      // de pantalla a la izquierda, como el salto de contenido, no agranda el
      // área desplazable en escritura de izquierda a derecha
      if (r.right > limite + 2) {
        // ignoramos lo que desborda a propósito dentro de su propio contenedor con scroll
        let padre: HTMLElement | null = el.parentElement;
        let contenido = false;
        while (padre && padre !== document.body) {
          const estilo = getComputedStyle(padre);
          if (estilo.overflowX === "auto" || estilo.overflowX === "scroll" || estilo.overflowX === "hidden") {
            contenido = true;
            break;
          }
          padre = padre.parentElement;
        }
        if (contenido) continue;

        const clases = typeof el.className === "string" ? el.className.slice(0, 60) : "";
        malos.push(`${el.tagName.toLowerCase()}${clases ? "." + clases.trim().split(/\s+/).join(".") : ""}`);
        if (malos.length >= 6) break;
      }
    }
    return malos;
  });
}

for (const ruta of RUTAS_MUESTRA) {
  test(`sin desborde horizontal en ${ruta}`, async ({ page }, info) => {
    test.skip(
      !["escritorio-chromium", "escritorio-webkit"].includes(info.project.name),
      "El barrido de anchos corre solo en los dos proyectos de escritorio; ver la nota de arriba.",
    );

    await page.goto(ruta, { waitUntil: "domcontentloaded" });

    for (const ancho of ANCHOS) {
      await page.setViewportSize({ width: ancho, height: 900 });
      // dar chance al reflow y a las imágenes
      await page.waitForTimeout(220);

      const r = await desbordaEnHorizontal(page);
      if (r.desborda) {
        const culpables = await culpablesDeDesborde(page);
        expect(
          r.desborda,
          `${ruta} se desplaza en horizontal a ${ancho}px de ancho: la página se corrió ${r.movio}px (cuerpo ${r.ancho}px sobre ventana ${r.visible}px). Sospechosos: ${culpables.join(", ") || "no identificados"}`,
        ).toBe(false);
      }
    }
  });
}

test("el menú móvil abre, es navegable y cierra", async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 780 });
  await page.goto("/", { waitUntil: "domcontentloaded" });

  const disparador = page.getByRole("button", { name: /abrir men[úu]/i });
  await expect(disparador).toBeVisible();
  await disparador.click();

  const menu = page.locator("#menu-movil");
  await expect(menu).toBeVisible();
  await expect(menu.getByRole("link").first()).toBeVisible();

  await page.getByRole("button", { name: /cerrar men[úu]/i }).click();
  await expect(menu).toBeHidden();
});

test("el widget de WhatsApp no tapa contenido ni desborda en móvil", async ({ page }) => {
  await page.setViewportSize({ width: 320, height: 640 });
  await page.goto("/", { waitUntil: "domcontentloaded" });

  await page.getByRole("button", { name: /contactar por whatsapp/i }).click();
  const panel = page.locator("#panel-whatsapp");
  await expect(panel).toBeVisible();

  const caja = await panel.boundingBox();
  expect(caja, "el panel debe tener caja").not.toBeNull();
  expect(caja!.x, "el panel se sale por la izquierda").toBeGreaterThanOrEqual(-1);
  expect(caja!.x + caja!.width, "el panel se sale por la derecha").toBeLessThanOrEqual(321);

  const r = await desbordaEnHorizontal(page);
  expect(r.desborda, "el widget abierto no debe hacer que la página se desplace de lado").toBe(false);
});

test("las tablas anchas se desplazan dentro de su contenedor", async ({ page }) => {
  await page.setViewportSize({ width: 375, height: 780 });
  await page.goto("/catalogo", { waitUntil: "domcontentloaded" });

  const r = await desbordaEnHorizontal(page);
  expect(r.desborda, "el comparador debe desplazarse dentro de su contenedor, no mover la página").toBe(false);
});