diff --git a/deploy.sh b/deploy.sh index b56ade1..fe2eff7 100755 --- a/deploy.sh +++ b/deploy.sh @@ -21,6 +21,9 @@ CONF=$HOME/.config/agent-market set -a [ -f "$CONF/llm.env" ] && . "$CONF/llm.env" [ -f "$CONF/$ENVN.env" ] && . "$CONF/$ENVN.env" +# Optional extra env file for offline test runs, e.g. point the LLM at tests/mock_llm.py so no real model calls are made: +# AM_EXTRA_ENV=/path/offline.env ./deploy.sh staging my-branch +[ -n "${AM_EXTRA_ENV:-}" ] && . "$AM_EXTRA_ENV" set +a # Build the React frontend (web/ -> static/dist) BEFORE stopping the running server, so a failed build # leaves the current version up. Reproducible: exact versions from web/package-lock.json via `npm ci`. diff --git a/tests/browser_e2e.js b/tests/browser_e2e.js index bb2d09c..0390896 100644 --- a/tests/browser_e2e.js +++ b/tests/browser_e2e.js @@ -15,6 +15,7 @@ const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); await page.goto(BASE + "/", { waitUntil: "networkidle0" }); await page.waitForSelector(".card", { timeout: 15000 }); check("landing renders agent-chosen cards", (await page.$$(".card")).length >= 4); + check("React app mounted in #root", await page.evaluate(() => !!document.querySelector("#root > .testbar") && !!document.querySelector("#root main#page #stage [data-component=cards]"))); const badge = await page.$eval("#agentBadge", (n) => n.textContent); check("agent mode badge shown", /fallback|built-in|AI:|LLM/.test(badge), badge); @@ -82,6 +83,21 @@ const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); await page.waitForSelector("[data-component=compare]", { timeout: 15000 }); check("compare view renders", (await page.$$("[data-component=compare] th")).length >= 3); + // compare via card checkboxes + compare bar + await ask("show me everything"); + await page.$$eval("#stage .card input[aria-label=compare]", (ns) => ns.slice(0, 2).forEach((n) => n.click())); + const bar = await page.$eval(".cmpbar", (n) => ({ t: n.textContent, d: getComputedStyle(n).display })); + await page.click(".cmpbar button"); + await page.waitForFunction(() => document.querySelectorAll("[data-component=compare] tr:first-child th").length === 3, { timeout: 15000 }).catch(() => {}); + check("compare bar: 2 selected -> compare view", bar.d === "flex" && /^2 selected/.test(bar.t) && (await page.$$("[data-component=compare] tr:first-child th")).length === 3, bar.t); + + // chat popup close / reopen + await page.click("#chatClose"); + const closed = await page.evaluate(() => document.getElementById("chat").classList.contains("hidden") && getComputedStyle(document.getElementById("chatLauncher")).display !== "none"); + await page.click("#chatLauncher"); + const reopened = await page.evaluate(() => !document.getElementById("chat").classList.contains("hidden") && document.querySelectorAll("#log .msg").length > 5); + check("chat popup closes and reopens with history", closed && reopened); + check("no page JS errors", errors.length === 0, errors.join("; ")); await browser.close(); const passed = results.filter(Boolean).length; diff --git a/tests/fake_model_browser.js b/tests/fake_model_browser.js new file mode 100644 index 0000000..0f6fb17 --- /dev/null +++ b/tests/fake_model_browser.js @@ -0,0 +1,67 @@ +// React UI against the fake OpenAI-compatible model (tests/mock_llm.py): model badge + chat mode text, fallback badge +// texts, quota badge, rate-limit toast, and a model-sent set_theme that the server sanitised. No real model calls. +// Usage: NODE_PATH= node tests/fake_model_browser.js +const puppeteer = require("puppeteer-core"); +const [OK, BUSY, DAILY, RL] = process.argv.slice(2, 6); +const results = []; +const check = (name, ok, d = "") => { results.push(!!ok); console.log((ok ? "PASS " : "FAIL ") + name + (d ? ` [${d}]` : "")); }; +const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); + +(async () => { + const browser = await puppeteer.launch({ executablePath: process.env.CHROME || "/usr/bin/google-chrome", headless: "new", + args: ["--no-sandbox", "--disable-gpu", "--user-data-dir=/tmp/am-fake-model-" + Date.now()] }); + const errors = []; + const open = async (base) => { + const ctx = await browser.createBrowserContext(); const page = await ctx.newPage(); + await page.setViewport({ width: 1280, height: 860 }); page.on("pageerror", (e) => errors.push(e.message)); + await page.goto(base + "/", { waitUntil: "networkidle0" }); await page.waitForSelector(".card", { timeout: 15000 }); + return page; + }; + const ask = async (page, text) => { + const n = (await page.$$(".msg.bot")).length; + if (await page.$eval("#chat", (c) => c.classList.contains("hidden"))) await page.click("#chatLauncher"); + await page.type("#chatInput", text); await page.keyboard.press("Enter"); + await page.waitForFunction((n) => document.querySelectorAll(".msg.bot").length > n, { timeout: 30000 }, n); + await sleep(300); + return page.$$eval(".msg.bot", (ns) => ns[ns.length - 1].textContent); + }; + const text = (page, sel) => page.$eval(sel, (n) => n.textContent); + + // 1) model answers: badge + chat mode show the model; tool-hydrated cards render; unknown component ignored + let p = await open(OK); + check("badge shows configured model on load", (await text(p, "#agentBadge")) === "AI: mock-model", await text(p, "#agentBadge")); + await ask(p, "show me bikes"); + const mode = await text(p, "#chatMode"), badge = await text(p, "#agentBadge"), title = await p.$eval("#agentBadge", (n) => n.title); + check("model reply: badge + chat mode", badge === "AI: mock-model" && /^AI agent · mock-model · \d+\.\ds$/.test(mode) && title === "mock-model via OpenRouter (free tier)", `${badge} | ${mode} | ${title}`); + const titles = await p.$$eval("#stage .card h3", (ns) => ns.map((n) => n.textContent)); + check("model-chosen cards rendered through the registry", titles.length > 0 && titles.every((t) => /bike/i.test(t)) && (await p.$$("#stage > section")).length === 1, titles.join(" | ")); + // 2) model restyle: server-sanitised set_theme applied; HTML in copy rendered as text; customCss scoped + const reply = await ask(p, "make the background a sunset gradient"); + const st = await p.evaluate(() => ({ bg: getComputedStyle(document.body).backgroundImage, img: !!document.querySelector("#headline img"), + h: document.getElementById("headline").textContent, css: document.getElementById("user-css").textContent, + toast: [...document.querySelectorAll("#toasts .toast")].map((t) => t.textContent).join("|"), ls: JSON.parse(localStorage.getItem("am_theme_v1") || "{}") })); + check("model set_theme applied (gradient, toast, saved)", /gradient/.test(st.bg) && /Look updated/.test(st.toast) && st.ls.background, st.bg.slice(0, 60)); + check("model copy/CSS sanitised in the page", !st.img && /Sunset/.test(st.h) && !/ built-in agent answers, fallback badge text + p = await open(BUSY); + await ask(p, "show me bikes"); + check("fallback badge + chat mode text", (await text(p, "#agentBadge")) === "agent: built-in (AI unavailable)" && (await text(p, "#chatMode")) === "built-in agent answered (AI model unavailable)" && (await p.$$("#stage .card")).length > 0, + `${await text(p, "#agentBadge")} | ${await text(p, "#chatMode")}`); + // 4) daily quota used up -> after reload the badge says so (from /api/status) + p = await open(DAILY); + await ask(p, "show me bikes"); + await p.reload({ waitUntil: "networkidle0" }); await sleep(300); + check("quota badge after reload", (await text(p, "#agentBadge")) === "agent: built-in (AI quota used up)" && /resets/.test(await p.$eval("#agentBadge", (n) => n.title)), await text(p, "#agentBadge")); + // 5) per-IP rate limit -> warning toast + p = await open(RL); + await ask(p, "show me bikes"); await ask(p, "show me bikes"); + const toasts = await p.$$eval("#toasts .toast.warn", (ns) => ns.map((n) => n.textContent)); + check("rate-limit warning toast", toasts.some((t) => /quickly/.test(t)), toasts.join("|")); + + check("no page JS errors", errors.length === 0, errors.join("; ")); + await browser.close(); + const passed = results.filter(Boolean).length; + console.log(`\n${passed}/${results.length} passed`); + process.exit(passed === results.length ? 0 : 1); +})().catch((e) => { console.error(e); process.exit(2); }); diff --git a/tests/fake_model_browser.sh b/tests/fake_model_browser.sh new file mode 100755 index 0000000..c07543c --- /dev/null +++ b/tests/fake_model_browser.sh @@ -0,0 +1,15 @@ +#!/usr/bin/env bash +# Browser checks of the React UI against the fake model (no real key, no real model calls). Needs a built frontend +# (cd web && npm ci && npm run build) and puppeteer-core on NODE_PATH. +set -euo pipefail +cd "$(dirname "$0")/.." +[ -f static/dist/index.html ] || { echo "build the frontend first (cd web && npm run build)"; exit 1; } +D=$(mktemp -d); KEYF=$D/key; printf 'test-dummy-key' > $KEYF; chmod 600 $KEYF +python3 tests/mock_llm.py 18803 & M=$! +start() { # port models rpm burst + AGENT_MARKET_PORT=$1 AGENT_MARKET_DATA=$D/d$1 AGENT_MARKET_LLM_API_KEY_FILE=$KEYF AGENT_MARKET_CHAT_RPM=$3 AGENT_MARKET_CHAT_BURST=$4 \ + AGENT_MARKET_LLM_BASE_URL=http://127.0.0.1:18803/v1 AGENT_MARKET_LLM_MODELS=$2 python3 server.py >/dev/null 2>&1 & echo $!; } +S1=$(start 18804 mock-model 0 6); S2=$(start 18805 busy-model,busy-model-2 0 6); S3=$(start 18806 daily-model 0 6); S4=$(start 18807 mock-model 1 1) +trap 'kill $M $S1 $S2 $S3 $S4 2>/dev/null; rm -rf $D' EXIT +sleep 1.5 +node tests/fake_model_browser.js http://127.0.0.1:18804 http://127.0.0.1:18805 http://127.0.0.1:18806 http://127.0.0.1:18807 diff --git a/tests/theme_check.js b/tests/theme_check.js index 31e34e3..9b4c7fd 100644 --- a/tests/theme_check.js +++ b/tests/theme_check.js @@ -109,6 +109,11 @@ const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); const h = await page.$eval("#headline", (n) => n.textContent); check("headline changed", /buy and sell anything nearby/i.test(h), h); + // The look is stored per browser: a reload keeps it. + await page.reload({ waitUntil: "networkidle0" }); await page.waitForSelector(".card", { timeout: 15000 }); + check("look persists across reload (localStorage)", /buy and sell anything nearby/i.test(await page.$eval("#headline", (n) => n.textContent)) && (await cs("#bullets", "display")) === "none"); + await page.click("#chatLauncher"); + // A second, fresh session must still see the default look. const ctx2 = await browser.createBrowserContext(); const p2 = await ctx2.newPage(); await p2.goto(BASE + "/", { waitUntil: "networkidle0" }); @@ -120,6 +125,22 @@ const sleep = (ms) => new Promise((r) => setTimeout(r, ms)); const t5 = await theme(); const h2 = await page.$eval("#headline", (n) => n.textContent); check("reset the look", Object.keys(t5).length === 0 && /just talk to/.test(h2), JSON.stringify(t5)); + // A hostile stored theme (tampered localStorage) can't hide or recolour protected parts, and a hidden results + // section is shown again when the agent renders a panel. Then the "Reset look" button restores the default. + await page.evaluate(() => localStorage.setItem("am_theme_v1", JSON.stringify({ + palette: { bg: "#ffffff", surface: "#fefefe", text: "#fdfdfd", muted: "#fefefe", accent: "#ffff00" }, sections: { hidden: ["results"] }, + customCss: ".testbar{display:none!important;opacity:0} #agentBadge{visibility:hidden;color:#fff} [data-component=checkout] *{color:#fff!important;background:#fff} body{--p-ink:#fff} .card{border-width:3px}" }))); + await page.reload({ waitUntil: "networkidle0" }); await page.waitForSelector(".card", { timeout: 15000 }); await sleep(300); + const hv = await page.evaluate(() => ({ stage: getComputedStyle(document.getElementById("stage")).display, css: document.getElementById("user-css").textContent, + toast: [...document.querySelectorAll("#toasts .toast")].map((t) => t.textContent).join("|"), hidden: (JSON.parse(localStorage.getItem("am_theme_v1") || "{}").sections || {}).hidden })); + check("hidden results shown again for agent panels", hv.stage !== "none" && /Results section shown again/.test(hv.toast) && !hv.hidden.includes("results"), hv.toast); + check("stored customCss sanitised (scoped to #page, no !important / custom properties)", /^@layer user/.test(hv.css) && !/!important|--p-ink/.test(hv.css) && /#page \.card\{border-width:3px\}/.test(hv.css.replace(/\s+/g, " ").replace(/ \{/g, "{")), hv.css.replace(/\s+/g, " ").slice(0, 120)); + await guardrails("hostile stored theme"); + await page.click("#resetLook"); await sleep(300); + const rs = await page.evaluate(() => ({ ls: localStorage.getItem("am_theme_v1"), h: document.getElementById("headline").textContent, css: document.getElementById("user-css").textContent, + toast: [...document.querySelectorAll("#toasts .toast")].map((t) => t.textContent).join("|") })); + check("Reset look button restores the default", rs.ls === null && /just talk to/.test(rs.h) && rs.css === "" && /Look reset to default/.test(rs.toast), JSON.stringify(rs).slice(0, 120)); + check("no internal ids in replies", replies.every((x) => !/\b(lst|pi|cash|ord)_[0-9a-f]{6,}/.test(x.reply))); const who = [...new Set(replies.map((x) => (/AI agent/.test(x.mode) ? x.mode.split(" · ")[1] : "built-in agent")))].join(", "); if (process.env.REQUIRE_LLM) check("all restyles answered by the real model", replies.every((x) => /AI agent/.test(x.mode)), who);