/* Browser tests for touch screens: phones and tablets, in WebKit (Safari's engine) and Chromium.
     - One tap is enough on the add sheet: while the amount's keypad is up, a tap on any row used to go
       to another row or nowhere (the keypad went as the finger came down, and the rows moved), and iOS
       takes a change on touch for a hover and waits for a second tap.
     - The category row (wide screens) opens its list from anywhere on it; the tags row, its label too,
       goes to the tag field.
     - The icon picker draws only what's near the screen, and keeps working as a grid.
     - No text field or menu iOS would zoom into (under 16px) on any page or sheet it can open.
     - Setup: the starting categories are in the language picked on its first step.
   Needs a dev server with demo data (BASE) and an empty one (EMPTY):
     WALLY_DATA=/tmp/wally-touch DEMO=true python -m uvicorn utils.dev_server:app --port 8891
     WALLY_DATA=/tmp/wally-touch-empty python -m uvicorn utils.dev_server:app --port 8892
   Run:  BASE=http://localhost:8891 EMPTY=http://localhost:8892 node tests/e2e/touch.mjs
   (npx playwright install chromium webkit) */
import { webkit, chromium, devices } from "playwright";

const BASE = process.env.BASE || "http://localhost:8891";
const EMPTY = process.env.EMPTY || "http://localhost:8892";
let failed = 0, passed = 0;
function check(ok, name, extra) {
  if (ok) { passed++; console.log("  ok   " + name); }
  else { failed++; console.log("  FAIL " + name + (extra !== undefined ? "  → " + JSON.stringify(extra) : "")); }
}
function section(name) { console.log("\n" + name); }

async function page(bt, dev, path = "/") {
  const b = await bt.launch();
  const ctx = await b.newContext({ ...dev, serviceWorkers: "block" });
  await ctx.addInitScript(() => localStorage.setItem("wally.person", "1"));
  const p = await ctx.newPage();
  p.errors = [];
  p.on("pageerror", (e) => p.errors.push(e.message));
  p.on("dialog", (d) => d.dismiss());
  await p.goto(BASE + path, { waitUntil: "networkidle" });
  return [b, p];
}
const openAdd = async (p) => { await p.evaluate(async () => (await import("/js/add.js")).openAdd()); await p.waitForSelector("#add-form"); await p.waitForTimeout(350); };
const closeAdd = (p) => p.evaluate(() => { const w = document.getElementById("add-modal"); w.hidden = true; w.innerHTML = ""; document.documentElement.classList.remove("w-addopen"); });
const st = (p) => p.evaluate(() => { const f = document.getElementById("add-form"); const page = [...f.querySelectorAll("[data-pstep]")].find((x) => !x.hidden); return { page: page && page.dataset.pstep, focus: document.activeElement.id, kp: f.classList.contains("kp"), cal: !!document.getElementById("add-cal") && !document.getElementById("add-cal").hidden, who: (document.querySelector('#add-who [aria-checked="true"]') || {}).dataset?.aw }; });

/* ---------- one tap on the add sheet, on a phone ---------- */
for (const [bn, bt, dev] of [["webkit iPhone", webkit, devices["iPhone 14"]], ["chromium Pixel", chromium, devices["Pixel 7"]]]) {
  section(bn + ": one tap, on a sheet just opened (keypad up)");
  const [b, p] = await page(bt, dev);
  await p.waitForSelector("#app:not([hidden])");
  const cases = [
    ["#add-catrow", (s) => s.page === "cat", "Category opens its page"],
    ["#add-name", (s) => s.focus === "add-name" && !s.kp, "the name takes the typing, keypad gone"],
    ["#add-datecell", (s) => s.cal && !s.kp, "Date opens the calendar"],
    ["#add-reprow", (s) => s.page === "repeat", "Repeat opens its page"],
    ["#lbl-tags", (s) => s.focus === "add-tag" && !s.kp, "the Tags label goes to the tag field"],
    ["#add-tagrow", (s) => s.focus === "add-tag" && !s.kp, "anywhere on the tags row goes to the tag field", { position: { x: 120, y: 10 } }],
    ["#add-note", (s) => s.focus === "add-note" && !s.kp, "Note takes the typing"],
  ];
  for (const [sel, ok, name, opts] of cases) {
    await openAdd(p);
    const before = await st(p);
    await p.tap(sel, opts);
    await p.waitForTimeout(350);
    const s = await st(p);
    check(before.kp && ok(s), name, s);
    await closeAdd(p);
  }
  // The keypad stays as it is while the finger is down: nothing appears or moves before the tap lands
  await openAdd(p);
  const during = await p.evaluate(() => {
    const row = document.getElementById("add-reprow"), r = row.getBoundingClientRect(), f = document.getElementById("add-form");
    const o = { pointerId: 1, pointerType: "touch", isPrimary: true, bubbles: true, clientX: r.x + 20, clientY: r.y + 10 };
    row.dispatchEvent(new PointerEvent("pointerdown", o));
    const res = { kp: f.classList.contains("kp"), foot: getComputedStyle(f.querySelector(".w-pfoot")).display, top: Math.round(row.getBoundingClientRect().top) === Math.round(r.top) };
    row.dispatchEvent(new PointerEvent("pointerup", o));
    row.click();
    return res;
  });
  check(during.kp && during.foot === "none" && during.top, "touch down changes nothing (iOS would wait for a second tap)", during);
  await closeAdd(p);
  // Opening, the caret blinks in the amount: right after the 0.00, where the first digit goes
  await openAdd(p);
  const caret = await p.evaluate(() => { const i = document.getElementById("add-amt"), cs = getComputedStyle(i); return { focus: document.activeElement === i, color: cs.caretColor, align: cs.textAlign }; });
  check(caret.focus && !/rgba\(0, 0, 0, 0\)|transparent/.test(caret.color) && caret.align === "right", "the sheet opens with the caret in the amount, after the 0.00", caret);
  await p.tap('[data-k="7"]');
  check(await p.$eval("#add-amt", (i) => getComputedStyle(i).textAlign) === "center", "typed, the amount is centred");
  await closeAdd(p);
  // Tapping the amount again brings the keypad back, also while it has focus
  await openAdd(p);
  await p.tap("#add-note"); await p.waitForTimeout(250);
  await p.tap("#add-amt"); await p.waitForTimeout(250);
  check((await st(p)).kp, "a tap on the amount brings the keypad back");
  await p.tap('[data-k="4"]'); await p.tap('[data-k="2"]');
  check(await p.$eval("#add-amt", (i) => i.value) === "42", "the keypad types");
  await p.tap("#add-knext"); await p.waitForTimeout(250);
  check(await p.$eval('[data-pstep="cat"]', (n) => !n.hidden) && !(await st(p)).kp, "Next goes on to the category");
  await p.tap('[data-pstep="cat"] [data-step="main"]'); await p.waitForTimeout(250);
  await closeAdd(p);
  // A tag: a tap on it keeps it; a tap on its × removes it
  await openAdd(p);
  await p.tap("#add-tagrow .k"); await p.keyboard.type("trip food "); await p.waitForTimeout(150);
  await p.tap("#add-tags .w-chip >> nth=0", { position: { x: 8, y: 10 } }); await p.waitForTimeout(250);
  check(JSON.stringify(await p.$$eval("#add-tags .w-chipx", (l) => l.map((n) => n.dataset.tg))) === '["#trip","#food"]' && (await st(p)).focus === "add-tag", "a tap on a tag keeps it", await p.$$eval("#add-tags .w-chipx", (l) => l.map((n) => n.dataset.tg)));
  await p.tap('#add-tags [data-tg="#trip"]'); await p.waitForTimeout(250);
  check(JSON.stringify(await p.$$eval("#add-tags .w-chipx", (l) => l.map((n) => n.dataset.tg))) === '["#food"]', "a tap on its × removes it");
  const xr = await p.$eval("#add-tags .w-chipx", (n) => { const a = getComputedStyle(n, "::after"), r = n.getBoundingClientRect(); return [r.width - parseFloat(a.left) - parseFloat(a.right), r.height - parseFloat(a.top) - parseFloat(a.bottom)]; });
  check(xr[0] >= 28 && xr[1] >= 32, "the × is big enough for a finger", xr);
  await closeAdd(p);
  // Who, segmented: one tap changes it
  await openAdd(p);
  const was = (await st(p)).who;
  const other = await p.evaluate((w) => [...document.querySelectorAll("#add-who [data-aw]")].map((x) => x.dataset.aw).find((x) => x !== w), was);
  await p.tap('#add-who [data-aw="' + other + '"]'); await p.waitForTimeout(250);
  check((await st(p)).who === other, "Who changes with one tap", [was, other, await st(p)]);
  await closeAdd(p);
  // touch-action: double taps don't zoom, in the sheet as anywhere
  check(await p.evaluate(() => getComputedStyle(document.body).touchAction) === "manipulation", "no double-tap zoom");
  check(!p.errors.length, "no errors", p.errors);
  await b.close();
}

/* ---------- wide screens, mouse and touch: the category row and the tags row ---------- */
for (const [bn, bt, dev] of [["chromium desktop", chromium, { viewport: { width: 1440, height: 900 } }], ["webkit iPad", webkit, devices["iPad (gen 7)"]]]) {
  section(bn + ": the category row and the tags row");
  const [b, p] = await page(bt, dev);
  await p.waitForSelector("#app:not([hidden])");
  const touch = bn.includes("iPad");
  const press = (sel, opts) => (touch ? p.tap(sel, opts) : p.click(sel, opts));
  const cat = () => p.evaluate(() => ({ open: !document.getElementById("add-catlist").hidden, focus: document.activeElement.id, val: document.getElementById("add-cat").value }));
  for (const [sel, name] of [["#lbl-cat", "the Category label"], [".w-catchev", "the chevron"], ["#add-cat", "the field"], ["#add-catrow", "the row's empty space"]]) {
    await openAdd(p);
    await press(sel, sel === "#add-catrow" ? { position: { x: 120, y: 12 } } : undefined); await p.waitForTimeout(250);
    const c = await cat();
    check(c.open && c.focus === "add-cat", name + " opens the list", c);
    await closeAdd(p);
  }
  await openAdd(p);
  await press("#lbl-cat"); await p.waitForTimeout(200);
  await press(".w-catchev"); await p.waitForTimeout(200);
  let c = await cat();
  check(!c.open && c.focus === "add-cat", "the chevron closes it again", c);
  await press(".w-catchev"); await p.waitForTimeout(200);
  check((await cat()).open, "and opens it");
  const who = await p.evaluate(() => (document.querySelector('#add-who [aria-checked="true"]') || {}).dataset.aw);
  const name = await p.$eval('#add-catlist [data-co="2"] b', (n) => n.textContent);
  await press('#add-catlist [data-co="2"]'); await p.waitForTimeout(250);
  c = await cat();
  const who2 = await p.evaluate(() => (document.querySelector('#add-who [aria-checked="true"]') || {}).dataset.aw);
  check(!c.open && c.val === name && who2 === who, "an option picks it, and the click stays there", { c, name, who, who2 });
  await press("#lbl-tags"); await p.waitForTimeout(200);
  check((await cat()).focus === "add-tag", "the Tags label goes to the tag field");
  await p.keyboard.type("trip ");
  await press("#add-tagrow", { position: { x: 200, y: 12 } }); await p.waitForTimeout(200);
  check((await cat()).focus === "add-tag" && await p.$$eval("#add-tags .w-chip", (x) => x.length) === 1, "the tags row's empty space too, keeping the tags", await cat());
  // The tag itself is no button: a click on it keeps it, and goes to the field. Only its × removes it
  await press("#add-tags .w-chip", { position: { x: 10, y: 12 } }); await p.waitForTimeout(200);
  check((await cat()).focus === "add-tag" && await p.$$eval("#add-tags .w-chip", (x) => x.length) === 1, "a click on a tag keeps it", await cat());
  await press("#add-tags .w-chipx"); await p.waitForTimeout(200);
  check((await cat()).focus === "add-tag" && await p.$$eval("#add-tags .w-chip", (x) => x.length) === 0, "its × removes it, the focus staying in the field");
  await closeAdd(p);
  await b.close();
}

/* ---------- the icon picker: drawn as it comes near the screen ---------- */
for (const [bn, bt, dev, slow] of [["chromium Pixel 4x CPU", chromium, devices["Pixel 7"], 4], ["webkit iPhone", webkit, devices["iPhone 14"], 0], ["chromium desktop", chromium, { viewport: { width: 1440, height: 900 } }, 0]]) {
  section(bn + ": the icon picker");
  const [b, p] = await page(bt, dev, "/settings/categories/Groceries");
  const errs = p.errors;
  if (slow) { const cdp = await p.context().newCDPSession(p); await cdp.send("Emulation.setCPUThrottlingRate", { rate: slow }); }
  await p.waitForSelector('[data-act="icon"]');
  const opens = [], searches = [];
  for (let i = 0; i < 3; i++) {
    opens.push(await p.evaluate(() => new Promise((res) => {
      const t0 = performance.now();
      document.querySelector('[data-act="icon"]').click();
      const wait = () => { if (document.querySelector('#ic-list [data-from]:not([data-from="0"])') && !document.getElementById("ic-wait")) requestAnimationFrame(() => setTimeout(() => res({ ms: Math.round(performance.now() - t0), drawn: document.querySelectorAll("#ic-list [data-i]").length, blocks: document.querySelectorAll("#ic-list .w-icons").length, focus: document.activeElement.id || document.activeElement.getAttribute("data-dlg-ok") !== null && "Done" }), 0)); else requestAnimationFrame(wait); };
      wait();
    })));
    for (const q of ["c", "ca", "car", ""]) searches.push(await p.evaluate((q) => new Promise((res) => {
      const i = document.getElementById("ic-q"), list = document.getElementById("ic-list"), t0 = performance.now();
      const done = () => requestAnimationFrame(() => setTimeout(() => res(q + ":" + Math.round(performance.now() - t0) + "ms/" + list.querySelectorAll("[data-i]").length), 0));
      const mo = new MutationObserver(() => { mo.disconnect(); done(); });
      mo.observe(list, { childList: true });
      i.value = q; i.dispatchEvent(new Event("input", { bubbles: true }));
    }), q));
    if (i < 2) { await p.click("[data-dlg-x]"); await p.waitForTimeout(200); }
  }
  console.log("  open:", JSON.stringify(opens));
  console.log("  search:", searches.slice(-4).join("  "));
  const total = await p.evaluate(() => [...document.querySelectorAll("#ic-list .w-icons")].reduce((s, b) => s + +b.dataset.n, 0));
  check(opens.every((o) => o.drawn <= 64 * 3), "opens drawing only the first blocks (" + opens[2].drawn + " of " + total + ")");
  check(opens[2].focus === (bn.includes("desktop") ? "ic-q" : "Done"), "focus on open: " + (bn.includes("desktop") ? "the search" : "not the search, no keyboard"), opens[2].focus);
  // Every block is as tall before it's drawn as after: jumping straight to any of them (dragging the
  // scroll bar), nothing moves
  const sizes = await p.evaluate(async () => {
    const sc = document.getElementById("ic-list").parentElement, wrong = [];
    const blocks = [...document.querySelectorAll("#ic-list .w-icons")];
    for (const b of blocks.slice().reverse()) {
      if (b.dataset.on) continue;
      const h0 = b.getBoundingClientRect().height;
      sc.scrollTop = b.offsetTop - 50;
      // The browser says it's near the screen a frame or a few later (more with a slow CPU)
      for (let t = 0; t < 60 && !b.dataset.on; t++) await new Promise((r) => requestAnimationFrame(r));
      const h1 = b.getBoundingClientRect().height;
      if (!b.dataset.on || Math.abs(h0 - h1) > 0.01) wrong.push([b.dataset.from, h0, h1, !!b.dataset.on]);
    }
    return { wrong, empty: blocks.filter((b) => !b.dataset.on).length, drawn: document.querySelectorAll("#ic-list [data-i]").length };
  });
  check(!sizes.wrong.length && sizes.empty === 0, "every block drawn as it comes, as tall as it was before", sizes);
  // The sheet turned: blocks not drawn yet follow the new rows
  await p.click("[data-dlg-x]"); await p.waitForTimeout(200);
  await p.click('[data-act="icon"]'); await p.waitForTimeout(400);
  const turned = await p.evaluate(async () => {
    const d = document.querySelector(".w-icdlg"); d.style.maxWidth = "300px";
    await new Promise((r) => setTimeout(r, 200));
    const sc = document.getElementById("ic-list").parentElement, b = [...document.querySelectorAll("#ic-list .w-icons:not([data-on])")].pop();
    const h0 = b.getBoundingClientRect().height;
    sc.scrollTop = b.offsetTop - 50;
    for (let t = 0; t < 60 && !b.dataset.on; t++) await new Promise((r) => requestAnimationFrame(r));
    return [h0, b.getBoundingClientRect().height, !!b.dataset.on];
  });
  check(turned[2] && Math.abs(turned[0] - turned[1]) < 0.01, "after the sheet changes width too", turned);
  // Search, Enter, the pick
  await p.fill("#ic-q", "bicycle");
  await p.waitForTimeout(100);
  const found = await p.$$eval("#ic-list [data-i]", (x) => x.map((n) => n.dataset.i));
  check(found[0] === "bike", "search finds Wally's own first", found.slice(0, 4));
  await p.press("#ic-q", "Enter");
  await p.waitForTimeout(500);
  const saved = await p.evaluate(async () => (await (await fetch("/api/categories/icons")).json()).Groceries);
  check(saved === "bike" && await p.evaluate(() => document.getElementById("dlg").hidden), "Enter picks the first one found, and is Done (as before)", saved);
  await p.click('[data-act="icon"]');
  await p.waitForTimeout(400);
  await p.fill("#ic-q", "zzzz");
  await p.waitForTimeout(100);
  check(await p.$eval("#ic-list", (n) => n.textContent.includes("zzzz")), "nothing found says so");
  await p.fill("#ic-q", "");
  await p.waitForTimeout(100);
  // Arrow keys across a block that isn't drawn yet
  const arrow = await p.evaluate(async () => {
    const sc = document.getElementById("ic-list").parentElement; sc.scrollTop = 0;
    await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
    const last = document.querySelector('#ic-list [data-x="63"]');
    last.focus();
    return [!!last, document.querySelector('#ic-list [data-x="71"]') !== null && document.querySelector('#ic-list [data-x="71"]').closest(".w-icons").dataset.on];
  });
  await p.keyboard.press("ArrowDown");
  const af = await p.evaluate(() => [document.activeElement.dataset.x, document.activeElement.getAttribute("aria-checked")]);
  check(af[0] === "71" && af[1] === "true", "↓ from the last row of a block goes to the next, and picks it", { arrow, af });
  // Done saves; open again shows the pick checked, wherever it is
  const picked = await p.evaluate(() => document.activeElement.dataset.i);
  await p.click("[data-dlg-ok]");
  await p.waitForTimeout(400);
  await p.click('[data-act="icon"]');
  await p.waitForTimeout(400);
  check(await p.$eval(".w-icprev use", (u) => u.getAttribute("href")).then((h) => h.endsWith(picked.replace(/^l-/, "")) ), "Done keeps it: " + picked);
  const checked = await p.evaluate(async (id) => { const sc = document.getElementById("ic-list").parentElement; for (let y = 0; y <= sc.scrollHeight; y += sc.clientHeight / 2) { sc.scrollTop = y; await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r))); } return [...document.querySelectorAll('#ic-list [aria-checked="true"]')].map((x) => x.dataset.i); }, picked);
  check(checked.length >= 1 && checked.every((x) => x === picked), "the pick shows checked when its block is drawn", checked);
  await p.click("[data-dlg-x]");
  await p.evaluate(async () => { await fetch("/api/categories/Groceries", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ icon: "" }) }); });
  check(!errs.length, "no errors", errs);
  await b.close();
}

/* ---------- iOS zooms into a text field or a menu under 16px, and stays zoomed: none, anywhere ---------- */
section("no field iOS would zoom into, on every page and every sheet it opens");
const ROUTES = ["/", "/transactions", "/recurring", "/review", "/settings", "/settings/people", "/settings/categories", "/settings/categories/Groceries",
  "/settings/tags", "/settings/region", "/settings/region/currency", "/settings/appearance", "/settings/security", "/settings/import", "/settings/keys", "/settings/people/1", "/settings/people/2", "/transactions?mode=all"];
const SIZES = (process.env.SIZES || "portrait,promax,max").split(",");
const audit = () => {
  const bad = [];
  const sel = 'input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]):not([type=hidden]):not([type=file]):not([type=color]),select,textarea,[contenteditable=""],[contenteditable=true]';
  for (const n of document.querySelectorAll(sel)) {
    const r = n.getBoundingClientRect(), cs = getComputedStyle(n);
    if (n.disabled || cs.visibility === "hidden" || !(r.width || r.height) || n.closest("[hidden]")) continue;
    const fs = parseFloat(cs.fontSize);
    if (fs < 16) bad.push((n.id ? "#" + n.id : n.tagName.toLowerCase() + "." + [...n.classList].join(".") + "(" + (n.closest("[id]") || {}).id + ")") + " " + fs + "px");
  }
  // On a phone a sheet spans the screen
  const sheet = document.querySelector("#dlg:not([hidden]) .w-sheetd");
  if (sheet && innerWidth < 768 && Math.abs(sheet.getBoundingClientRect().width - innerWidth) > 1) bad.push("sheet " + sheet.className + " " + Math.round(sheet.getBoundingClientRect().width) + "px wide on a " + innerWidth + "px screen");
  // ...and takes the whole of it, as the new-transaction sheet does
  if (sheet && innerWidth < 768 && Math.abs(sheet.getBoundingClientRect().height - innerHeight) > 1) bad.push("sheet " + sheet.className + " " + Math.round(sheet.getBoundingClientRect().height) + "px tall");
  // Wider than the screen: iOS lets the page be dragged sideways, or zooms out to fit
  if (document.documentElement.scrollWidth > innerWidth + 1) bad.push("page wider than the screen: " + document.documentElement.scrollWidth + " > " + innerWidth);
  return bad;
};
const found = new Map(), opened = new Set();
const note = (size, where, list) => list.forEach((b) => { const k = size + " " + b; if (!found.has(k)) found.set(k, where); });
for (const size of SIZES) {
  const dev = { portrait: devices["iPhone 14"], promax: devices["iPhone 15 Pro Max"], landscape: devices["iPhone 14 landscape"], max: devices["iPhone 15 Pro Max landscape"], ipad: devices["iPad (gen 7)"] }[size];
  const b = await webkit.launch();
  const ctx = await b.newContext({ ...dev, serviceWorkers: "block" });
  await ctx.addInitScript(() => localStorage.setItem("wally.person", "1"));
  const p = await ctx.newPage();
  p.on("dialog", (d) => d.dismiss());
  await p.goto(BASE + "/", { waitUntil: "networkidle" });
  check(await p.evaluate(() => matchMedia("(pointer:coarse)").matches), size + ": a touch screen, " + await p.evaluate(() => innerWidth) + "px wide");
  // The add sheet: new, and editing a transaction
  for (const how of ["new", "edit"]) {
    await p.evaluate(async (how) => { const m = await import("/js/add.js"), c = await import("/js/core.js"); m.openAdd(how === "edit" ? { tx: c.state.tx[0] } : undefined); }, how);
    await p.waitForTimeout(300);
    note(size, "add " + how, await p.evaluate(audit));
    // its pages
    for (const step of ["cat", "split", "repeat"]) {
      const ok = await p.evaluate((s) => { const b = document.querySelector('#add-form [data-step="' + s + '"]'); if (b && b.offsetParent) { b.click(); return true; } return false; }, step);
      if (ok) { await p.waitForTimeout(200); note(size, "add " + how + " › " + step, await p.evaluate(audit)); await p.evaluate(() => { const b = document.querySelector('#add-form [data-pstep]:not([hidden]) [data-step="main"]'); if (b) b.click(); }); }
    }
    await p.evaluate(async () => { const w = document.getElementById("add-modal"); w.hidden = true; w.innerHTML = ""; document.documentElement.classList.remove("w-addopen"); });
  }
  // The Custom Range sheets, behind menus the clicks below don't open
  for (const [route, open] of [["/", "r.openRange(r.rangeOf(), () => {})"], ["/transactions", "r.openRangeSheet(() => {})"]]) {
    await p.goto(BASE + route, { waitUntil: "networkidle" }); await p.waitForTimeout(300);
    const mod = route === "/" ? "/js/pages/dashboard/range.js" : "/js/pages/transactions/sheets.js";
    await p.evaluate(async ([m, code]) => { const r = await import(m); new Function("r", code)(r); }, [mod, open]);
    await p.waitForTimeout(300);
    const shown = await p.evaluate(() => !document.getElementById("dlg").hidden);
    check(shown, size + ": " + route + " Custom Range opens");
    if (shown) { opened.add(size + " " + route + " ▸ Custom Range"); note(size, route + " ▸ Custom Range", await p.evaluate(audit)); await p.keyboard.press("Escape"); await p.waitForTimeout(150); }
  }
  for (const route of ROUTES) {
    await p.goto(BASE + route, { waitUntil: "networkidle" });
    await p.waitForTimeout(300);
    note(size, route, await p.evaluate(audit));
    const n = await p.evaluate(() => {
      const c = [...document.querySelectorAll("#app button, #app [data-act], #app [role=button], #app summary")].filter((x) => x.offsetParent && !x.closest("nav, .w-tabbar, .w-side"));
      c.forEach((x, i) => x.setAttribute("data-zz", i));
      return c.length;
    });
    for (let i = 0; i < n; i++) {
      const label = await p.evaluate((i) => { const x = document.querySelector('[data-zz="' + i + '"]'); return x && x.offsetParent ? (x.textContent.trim() || x.getAttribute("aria-label") || x.className).slice(0, 40) : null; }, i);
      if (label === null || /sign out|log out|export|download|turn off|reset|delete all/i.test(label)) continue;
      const url = p.url();
      await p.evaluate((i) => document.querySelector('[data-zz="' + i + '"]').click(), i).catch(() => {});
      await p.waitForTimeout(250);
      const open = await p.evaluate(() => !document.getElementById("dlg").hidden || !document.getElementById("add-modal").hidden);
      note(size, route + " ▸ " + label, await p.evaluate(audit));
      if (open) {
        opened.add(size + " " + route + " ▸ " + label);
        await p.keyboard.press("Escape"); await p.waitForTimeout(150);
        await p.evaluate(() => { const d = document.getElementById("dlg"); if (!d.hidden) { const x = d.querySelector("[data-dlg-x]"); if (x) x.click(); } });
        await p.evaluate(() => { const w = document.getElementById("add-modal"); if (!w.hidden) { w.hidden = true; w.innerHTML = ""; document.documentElement.classList.remove("w-addopen"); } });
      }
      if (p.url() !== url) { await p.goto(url, { waitUntil: "networkidle" }); await p.waitForTimeout(200); await p.evaluate(() => { const c = [...document.querySelectorAll("#app button, #app [data-act], #app [role=button], #app summary")].filter((x) => x.offsetParent && !x.closest("nav, .w-tabbar, .w-side")); c.forEach((x, i) => x.setAttribute("data-zz", i)); }); }
    }
  }
  await b.close();
}
console.log("  (" + opened.size + " sheets opened)");
check(found.size === 0, "no field under 16px, and no page wider than the screen", [...found].map(([k, w]) => k + " ← " + w));

/* ---------- a tap on the Split or Paid by menu leaves the amount alone ----------
   The menus kept their options' markup in a data-k, the attribute the keypad's keys use, and a tap on
   one typed that markup into the amount */
for (const [bn, bt, dev] of [["chromium desktop", chromium, { viewport: { width: 1280, height: 900 } }], ["webkit iPhone", webkit, devices["iPhone 14"]]]) {
  section(bn + ": the Split and Paid by menus");
  const [b, p] = await page(bt, dev);
  await p.waitForSelector("#app:not([hidden])");
  const phone = bn.includes("iPhone");
  await openAdd(p);
  if (!phone) await p.fill("#add-amt", "20"); else { await p.tap('[data-k="2"]'); await p.tap('[data-k="0"]'); await p.tap("#add-knext"); await p.keyboard.press("Escape"); }
  await p.waitForTimeout(200);
  await (phone ? p.tap('#add-who [data-aw="shared"]') : p.click('#add-who [data-aw="shared"]')); await p.waitForTimeout(200);
  if (phone) { await p.tap("#add-byrow"); await p.waitForTimeout(300); }
  for (const id of ["add-bysel", "add-smsel"]) await p.evaluate((i) => { const n = document.getElementById(i); if (n) n.click(); }, id);
  await p.selectOption("#add-bysel", "2"); await p.waitForTimeout(200);
  check(await p.$eval("#add-amt", (i) => i.value) === "20", "a tap on the menus, and a pick: the amount stays 20", await p.$eval("#add-amt", (i) => i.value));
  check(await p.$$eval("#add-form [data-k]", (l) => l.every((n) => n.closest("#add-keypad"))), "only the keypad's keys carry data-k");
  // Anywhere on a menu's row opens it: the label, the space, the value and the chevron are all the menu
  const rows = await p.evaluate(() => [...document.querySelectorAll(".w-grpick")].filter((r) => r.offsetParent).map((r) => {
    const sel = r.querySelector("select"), b = r.getBoundingClientRect(), y = b.top + b.height / 2;
    return [sel.id, [b.left + 20, b.left + b.width / 2, b.right - 60, b.right - 14].every((x) => document.elementFromPoint(x, y) === sel), r.querySelector(".v").textContent];
  }));
  check(rows.length >= 1 && rows.every(([, all]) => all), "a tap anywhere on " + rows.map(([id]) => id).join(", ") + " opens its menu", rows);
  check(rows.find(([id]) => id === "add-bysel")[2] === "Ana", "the row shows what was picked", rows);
  check(!p.errors.length, "no errors", p.errors);
  await closeAdd(p);
  await b.close();
}

/* ---------- turning the phone: every page fits the new width, its charts drawn again for it ---------- */
for (const [bn, bt] of [["webkit", webkit], ["chromium", chromium]]) {
  section(bn + ": turning the phone, landscape to portrait and back");
  const [b, p] = await page(bt, devices["iPhone 14 landscape"]);
  const fits = () => p.evaluate(() => ({
    wide: document.documentElement.scrollWidth - innerWidth, scale: visualViewport.scale,
    charts: [...document.querySelectorAll("svg.chart")].filter((c) => c.getClientRects().length).map((c) => Math.abs(+c.getAttribute("width") - Math.floor(c.parentElement.clientWidth))),
  }));
  for (const path of ["/", "/transactions", "/recurring", "/review", "/settings", "/settings/categories/Groceries"]) {
    for (const [from, to] of [[[844, 390], [390, 844]], [[390, 844], [844, 390]]]) {
      await p.setViewportSize({ width: from[0], height: from[1] });
      await p.goto(BASE + path, { waitUntil: "networkidle" }); await p.waitForTimeout(400);
      await p.setViewportSize({ width: to[0], height: to[1] }); await p.waitForTimeout(600);
      const f = await fits();
      check(f.wide <= 0 && f.scale === 1 && f.charts.every((d) => d <= 1), path + " " + (to[0] < to[1] ? "turned to portrait" : "turned to landscape") + ": fits, charts drawn again (" + f.charts.length + ")", f);
    }
  }
  check(!p.errors.length, "no errors", p.errors);
  await b.close();
}

/* ---------- setup: the starting categories in the language picked on its first step ---------- */
{
  section("setup on a phone, in Spanish");
  const SPANISH = ["Ocio", "Comida", "Supermercado", "Salud", "Ingresos", "Varios", "Alquiler", "Compras", "Viajes", "Suministros"].sort();
  const small = () => [...document.querySelectorAll("input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea")]
    .filter((n) => n.getClientRects().length && !n.closest("[hidden]")).map((n) => [n.id || n.className, parseFloat(getComputedStyle(n).fontSize)]).filter(([, f]) => f < 16);
  const cats = (p) => p.evaluate(async () => (await (await fetch("/api/categories")).json()).sort());
  const b = await webkit.launch();
  const p = await (await b.newContext({ ...devices["iPhone 14"], serviceWorkers: "block" })).newPage();
  const errs = [];
  p.on("pageerror", (e) => errs.push(e.message));
  await p.goto(EMPTY + "/", { waitUntil: "networkidle" });
  await p.waitForSelector("#onb-lang");
  check(!(await p.evaluate(small)).length, "first step: no field iOS would zoom into", await p.evaluate(small));
  await p.selectOption("#onb-lang", "es");
  await p.waitForFunction(() => document.documentElement.lang === "es");
  await p.waitForTimeout(300);
  check(JSON.stringify(await cats(p)) === JSON.stringify(SPANISH), "picking Español names the categories in Spanish", await cats(p));
  await p.tap("#onb-next");
  await p.waitForSelector("[data-name]");
  check(!(await p.evaluate(small)).length, "people step: no field iOS would zoom into", await p.evaluate(small));
  await p.fill('[data-name="0"]', "Pol");
  await p.tap("#onb-next");
  await p.waitForSelector("#onb-pwd");
  check(!(await p.evaluate(small)).length, "password step: no field iOS would zoom into", await p.evaluate(small));
  await p.tap("#onb-skip");
  await p.waitForSelector("[data-onb-data]");
  await p.tap('[data-onb-data="add"]');
  await p.tap("#onb-next");
  await p.waitForSelector("#app:not([hidden])");
  await p.waitForTimeout(500);
  const app = await p.evaluate(async () => { const c = await import("/js/core.js"); return c.state.categories.map((n) => [n, c.cat(n).i, c.isIncomeCat(n)]); });
  check(JSON.stringify(app.map(([n]) => n).sort()) === JSON.stringify(SPANISH), "the app has them", app);
  check(JSON.stringify(app.filter(([, , inc]) => inc)) === JSON.stringify([["Ingresos", "income", true]]), "Ingresos is the income category", app);
  check(new Set(app.map(([, i]) => i)).size === 10, "each has its own icon", app);
  await p.goto(EMPTY + "/settings/categories", { waitUntil: "networkidle" });
  await p.waitForTimeout(400);
  const listed = await p.evaluate(() => document.querySelector("#app").innerText);
  check(SPANISH.every((n) => listed.includes(n)), "Settings › Categories lists them");
  // Set up, they're the household's: a language changed later leaves them as they are
  await p.evaluate(() => fetch("/api/language/en", { method: "PUT" }));
  check(JSON.stringify(await cats(p)) === JSON.stringify(SPANISH), "a language changed after setup keeps them", await cats(p));
  check(!errs.length, "no errors", errs);
  await b.close();
}

console.log("\n" + passed + " passed, " + failed + " failed");
process.exit(failed ? 1 : 0);