diff --git a/README.md b/README.md index b63629e..96af0ce 100644 --- a/README.md +++ b/README.md @@ -59,6 +59,15 @@ npm start # sirve la API y el frontend estático en http://localhost:300 - Validación local: ejecuta `npm.cmd run build`, inicia producción con `npm.cmd start` y después ejecuta `npm.cmd run test:pwa`. - La validación de producción requiere el dominio HTTPS de Coolify, no una dirección IP HTTP. +`npm.cmd run test:pwa` usa estas variables opcionales para los flujos autenticados; +si no se definen, usa las cuentas demo locales: + +```text +PWA_OWNER_EMAIL=owner@agendamax.demo +PWA_ADMIN_EMAIL=admin@agendamax.demo +PWA_PASSWORD=demo1234 +``` + ## Tests y auditoría visual ```bash diff --git a/public/sw.js b/public/sw.js index f717f50..834f6a0 100644 --- a/public/sw.js +++ b/public/sw.js @@ -10,7 +10,11 @@ self.addEventListener("install", (event) => { self.addEventListener("activate", (event) => { event.waitUntil( caches.keys() - .then((keys) => Promise.all(keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key)))) + .then((keys) => Promise.all( + keys + .filter((key) => key.startsWith("agendamax-shell-") && key !== CACHE_NAME) + .map((key) => caches.delete(key)) + )) .then(() => self.clients.claim()) ); }); @@ -24,7 +28,7 @@ self.addEventListener("fetch", (event) => { event.respondWith( fetch(request) .then((response) => { - if (response.ok) { + if (request.credentials === "omit" && response.ok) { const copy = response.clone(); void caches.open(CACHE_NAME).then((cache) => cache.put(request, copy)); } @@ -36,7 +40,7 @@ self.addEventListener("fetch", (event) => { } const cacheableDestination = new Set(["script", "style", "image", "font", "manifest", "worker"]); - if (!cacheableDestination.has(request.destination)) return; + if (request.credentials !== "omit" || !cacheableDestination.has(request.destination)) return; event.respondWith( caches.match(request).then((cached) => { diff --git a/pwa-e2e.mjs b/pwa-e2e.mjs index 550896c..745e9ec 100644 --- a/pwa-e2e.mjs +++ b/pwa-e2e.mjs @@ -3,6 +3,9 @@ import { chromium } from "playwright"; const BASE = process.env.PWA_BASE_URL || "http://localhost:3000"; const baseUrl = BASE.endsWith("/") ? BASE : `${BASE}/`; +const OWNER_EMAIL = process.env.PWA_OWNER_EMAIL || "owner@agendamax.demo"; +const ADMIN_EMAIL = process.env.PWA_ADMIN_EMAIL || "admin@agendamax.demo"; +const PWA_PASSWORD = process.env.PWA_PASSWORD || "demo1234"; const NETWORK_TIMEOUT_MS = 8000; const UI_TIMEOUT_MS = 8000; @@ -113,9 +116,18 @@ async function dispatchInstallPrompt(page) { }, undefined, { timeout: UI_TIMEOUT_MS }); } +async function dispatchDismissedInstallPrompt(page) { + await page.evaluate(() => { + const event = new Event("beforeinstallprompt", { cancelable: true }); + event.prompt = async () => { window.__installPromptCalls += 1; }; + event.userChoice = Promise.resolve({ outcome: "dismissed", platform: "web" }); + window.dispatchEvent(event); + }); +} + async function login(page, email, expectedPath) { await page.fill('input[type="email"]', email); - await page.fill('input[type="password"]', "demo1234"); + await page.fill('input[type="password"]', PWA_PASSWORD); await page.click('button[type="submit"]'); await page.waitForURL(expectedPath, { timeout: UI_TIMEOUT_MS }); await page.waitForSelector("header", { state: "attached", timeout: UI_TIMEOUT_MS }); @@ -179,6 +191,23 @@ async function main() { await chromiumPage.waitForFunction(() => window.__installPromptCalls === 1); assert.equal(await chromiumPage.evaluate(() => window.__installPromptCalls), 1); + const dismissalContext = await browser.newContext(); + contexts.push(dismissalContext); + dismissalContext.setDefaultTimeout(UI_TIMEOUT_MS); + dismissalContext.setDefaultNavigationTimeout(UI_TIMEOUT_MS); + await dismissalContext.addInitScript(() => { window.__installPromptCalls = 0; }); + const dismissalPage = await dismissalContext.newPage(); + await dismissalPage.goto(baseUrl, { waitUntil: "networkidle" }); + await dispatchDismissedInstallPrompt(dismissalPage); + const dismissalAction = await assertInstallAction(dismissalPage, true, "dismissal"); + await dismissalAction.click(); + await assertInstallAction(dismissalPage, false, "dismissed prompt"); + assert.equal(await dismissalPage.evaluate(() => sessionStorage.getItem("agendamax-install-dismissed")), "1"); + await dismissalPage.reload({ waitUntil: "networkidle" }); + assert.equal(await dismissalPage.evaluate(() => sessionStorage.getItem("agendamax-install-dismissed")), "1"); + await dispatchDismissedInstallPrompt(dismissalPage); + await assertInstallAction(dismissalPage, false, "dismissed prompt after reload"); + const apiResult = await chromiumPage.evaluate(async () => { const controller = new AbortController(); const timeout = setTimeout(() => controller.abort(), 8000); @@ -199,7 +228,7 @@ async function main() { const businessPage = await chromiumContext.newPage(); await businessPage.setViewportSize({ width: 375, height: 720 }); await businessPage.goto(baseUrl, { waitUntil: "networkidle" }); - await login(businessPage, "owner@agendamax.demo", /\/dashboard/); + await login(businessPage, OWNER_EMAIL, /\/dashboard/); await dispatchInstallPrompt(businessPage); const businessAction = await assertInstallAction(businessPage, true, "business shell"); await businessAction.click(); @@ -231,7 +260,7 @@ async function main() { await adminContext.addInitScript(() => { window.__installPromptCalls = 0; }); const adminPage = await adminContext.newPage(); await adminPage.goto(baseUrl, { waitUntil: "networkidle" }); - await login(adminPage, "admin@agendamax.demo", /\/admin/); + await login(adminPage, ADMIN_EMAIL, /\/admin/); await dispatchInstallPrompt(adminPage); const adminAction = await assertInstallAction(adminPage, true, "admin shell"); await adminAction.click(); @@ -262,6 +291,8 @@ async function main() { const swSource = (await assertEndpoint("/sw.js")).body; assert.match(swSource, /pathname\s*\.\s*startsWith\s*\(\s*["']\/api\/["']\s*\)/, "Service worker lacks API bypass"); assert.match(swSource, /request\s*\.\s*method\s*!==\s*["']GET["']/, "Service worker lacks non-GET guard"); + assert.match(swSource, /request\.credentials\s*!==\s*["']omit["']/, "Service worker lacks credential bypass"); + assert.match(swSource, /key\.startsWith\(["']agendamax-shell-["']\)/, "Service worker cleanup is not scoped to AgendaMax caches"); console.log("PWA checks passed"); } finally { try { diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index 642b89c..26538dc 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,4 +1,4 @@ -import { useEffect } from "react"; +import { useEffect, useId } from "react"; import { createPortal } from "react-dom"; import { X } from "lucide-react"; import { cn } from "../lib/format"; @@ -14,6 +14,7 @@ interface ModalProps { } export function Modal({ open, onClose, title, subtitle, children, size = "md", footer }: ModalProps) { + const titleId = useId(); useEffect(() => { if (!open) return; const onKey = (e: KeyboardEvent) => { @@ -35,6 +36,9 @@ export function Modal({ open, onClose, title, subtitle, children, size = "md", f
- {title &&

{title}

} + {title &&

{title}

} {subtitle &&

{subtitle}

}