fix(ui): botones alineados al cuerpo, FAB grande en PC y botón superior de propuesta

- FAB y aviso PWA flanquean la columna central (720px): right/left max(16px, calc((100vw - 720px)/2 + 16px)) para acompañar al contenido en pantallas anchas sin pegarse al borde de la ventana - FAB de 64px en PC (54 en móvil); PWA abajo a la izquierda en PC y móvil - Nuevo BotonProponerArriba (solo PC): píldora "Proponer local" arriba a la derecha, alineada al cuerpo, que abre la misma pasarela
2026-08-16 11:50:59 +02:00
parent 003b1e209f
commit 3ce84531d1
8 changed files with 207 additions and 103 deletions
@@ -0,0 +1,45 @@
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import BotonProponerArriba from "../../src/components/BotonProponerArriba.jsx";
+
+const matchMediaMock = (esMovil) => (_query) => ({
+  matches: esMovil,
+  media: _query,
+  addEventListener: () => {},
+  removeEventListener: () => {},
+  addListener: () => {},
+  removeListener: () => {},
+});
+
+beforeEach(() => {
+  // por defecto PC; cada prueba que lo necesite lo sobreescribe
+  vi.stubGlobal("matchMedia", matchMediaMock(false));
+});
+afterEach(() => {
+  vi.unstubAllGlobals();
+  cleanup();
+});
+
+describe("BotonProponerArriba (solo PC)", () => {
+  it("en PC: píldora arriba a la derecha, alineada con el borde del cuerpo, que abre la pasarela", () => {
+    const onClick = vi.fn();
+    render(<BotonProponerArriba onClick={onClick} />);
+    const boton = screen.getByRole("button", { name: /añade un nuevo local al directorio/i });
+    expect(boton.textContent).toContain("Proponer local");
+
+    expect(boton.style.position).toBe("fixed");
+    expect(boton.style.top).toBe("20px");
+    // alineado al borde derecho de la columna de 720px; mínimo 16px
+    expect(boton.getAttribute("style")).toMatch(/right:\s*max\(16px,\s*[^;]*100vw[^;]*720px[^;]*16px[^;]*\)/);
+
+    fireEvent.click(boton);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("en móvil no se renderiza", () => {
+    vi.stubGlobal("matchMedia", matchMediaMock(true));
+    render(<BotonProponerArriba onClick={() => {}} />);
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+});