Client behaviour tests: chips, shortlist storage, escaping, views, back link (#263)

The pure parts of the browser scripts move where tests reach them:
- search.mjs activeFilterChips (app.js renders what it returns)
- lib/client-state.mjs (served as client-state.js): parseShortlist,
  escapeHtml and backLinkHref; shortlist.js and entry.js import it, and
  entry.js is now a module
- views.js readStoredView/storeView are tested with storage stubbed

Checked in a browser: chips and Filters (n) on the homepage, the entry
page's back link and shortlist toggle, no console errors.

Closes #263

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LpkeXQPaUhxjgqdqnk6BrJ

Author: TMHSDigital

site/lib/client-state.mjs

@@ -0,0 +1,44 @@
+/**
+ * Pure helpers the browser scripts share, kept here so the tests can reach
+ * them (#263): the stored shortlist, HTML escaping for pages that do not
+ * load shared.mjs, and the entry page's "back to results" link. Served as
+ * client-state.js.
+ */
+
+/**
+ * The shortlist ids stored as JSON. Anything but an array of strings reads
+ * as empty or loses its bad items. With `byId` (the catalog), ids no longer
+ * in it drop out; `byId` must have no prototype, so "constructor" is not an
+ * entry.
+ */
+export function parseShortlist(raw, byId = null) {
+  let ids;
+  try {
+    ids = JSON.parse(raw || "[]");
+  } catch {
+    return [];
+  }
+  if (!Array.isArray(ids)) return [];
+  ids = ids.filter((id) => typeof id === "string");
+  return byId ? ids.filter((id) => byId[id]) : ids;
+}
+
+/** The same five replacements as esc() in shared.mjs (a test keeps them equal). */
+export function escapeHtml(str) {
+  return String(str)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+/**
+ * Where an entry page's "Catalog" link goes: back to the search the
+ * homepage stored (`qs`, a query string), or null to keep the built link.
+ * Only URL-encoded key=value pairs are accepted.
+ */
+export function backLinkHref(qs) {
+  if (!qs || !/^[\w.~%+=&-]+$/.test(qs)) return null;
+  return `../../?${qs}#catalog`;
+}

site/lib/entry-page.mjs

@@ -184,7 +184,7 @@ export function entryPageHtml({ entry, leadHtml, restHtml, deprecatedReasonHtml,
       ${pager}
     </main>
     ${siteFooterHtml({ root: "../../", stamp, total })}
-    <script src="../../entry.js" defer></script>
+    <script type="module" src="../../entry.js"></script>
     <script type="module" src="../../shortlist.js"></script>
   </body>
 </html>

site/lib/lib.test.mjs

@@ -157,8 +157,8 @@ has("description leads with licence, stance and credit", p, '<meta name="descrip
 has("canonical", p, '<link rel="canonical" href="https://x.test/s/entry/e1/" />');
 eq("one h1", (p.match(/<h1[\s>]/g) || []).length, 1);
 has("credit line escaped", p, "Art by &quot;X&quot; &lt;/script&gt;");
-has("entry script with a credit line", p, '<script src="../../entry.js" defer></script>');
-has("entry script without one, for the back link", page({ attribution_string: undefined }), '<script src="../../entry.js" defer></script>');
+has("entry script with a credit line", p, '<script type="module" src="../../entry.js"></script>');
+has("entry script without one, for the back link", page({ attribution_string: undefined }), '<script type="module" src="../../entry.js"></script>');
 lacks("no copy button without a credit line", page({ attribution_string: undefined }), "copy-attribution");
 has("breadcrumb catalog link can return to the results", p, '<a href="../../#catalog" data-back-to-results>Catalog</a>');
 has("note when credit is required but not canned", page({ attribution_string: undefined }), "no canned credit line");
@@ -2017,9 +2017,7 @@ eq("search: q from the URL is capped", readState(`?q=${"a".repeat(5000)}`, { q:
   has("thumbs flags: a limit needs a value", errOf(() => thumbsOptions(["--limit"])), "argument missing");
 
   const { esc } = await import("./shared.mjs");
-  const short = nodeFs.readFileSync(new URL("../public/shortlist.js", import.meta.url), "utf8");
-  const body = short.match(/function escapeHtml\(str\) \{([\s\S]*?)\n\}/)[1];
-  const escapeHtml = new Function("str", body);
+  const { escapeHtml } = await import("./client-state.mjs");
   const sample = `<a href="x" title='y'>Tom & "Jerry"</a>`;
   eq("shortlist's escapeHtml matches shared esc", escapeHtml(sample), esc(sample));
 }
@@ -2263,6 +2261,57 @@ eq("search: q from the URL is capped", readState(`?q=${"a".repeat(5000)}`, { q:
   lacks("footer without repo does not", siteFooterHtml({ root: "", stamp: "s", total: 1 }), "Contribute on GitHub");
 }
 
+/* client behaviour, pure parts (#263) -------------------------------------- */
+{
+  const { activeFilterChips, FILTER_DEFAULTS: D } = await import("./search.mjs");
+  const labels = { license: { "cc-by": "CC BY" }, category: { "2d": "2D" } };
+  eq("chips: the default state has none", activeFilterChips({ ...D }, D, labels).length, 0);
+  const q = activeFilterChips({ ...D, q: "  x " }, D, labels);
+  eq("chips: a search gives one chip", q.map((c) => `${c.key}=${c.label}`).join(), "q=search: x");
+  eq("chips: the search chip is not a filter", q.filter((c) => c.key !== "q").length, 0);
+  eq("chips: active off reads hiding active", activeFilterChips({ ...D, active: false }, D, labels)[0].label, "hiding active");
+  eq("chips: a known licence uses its label", activeFilterChips({ ...D, license: "cc-by" }, D, labels)[0].label, "licence: CC BY");
+  eq("chips: an unknown licence shows as written", activeFilterChips({ ...D, license: "odd" }, D, labels)[0].label, "licence: odd");
+  eq("chips: the category comes first", activeFilterChips({ ...D, category: "2d", noAttr: true }, D, labels).map((c) => c.key).join(), "category,noAttr");
+
+  const { parseShortlist, backLinkHref } = await import("./client-state.mjs");
+  for (const raw of [null, "{", '{"a":1}']) eq(`shortlist: ${raw} reads as empty`, parseShortlist(raw).length, 0);
+  eq("shortlist: only string ids are kept", parseShortlist('["a",1,null]').join(), "a");
+  const byId = Object.assign(Object.create(null), { a: {}, b: {} });
+  eq("shortlist: constructor is not an entry", parseShortlist('["constructor"]', byId).length, 0);
+  eq("shortlist: a removed id drops out", parseShortlist('["a","gone","b"]', byId).join(), "a,b");
+
+  eq("back link: a stored search returns to it", backLinkHref("q=a&sort=added"), "../../?q=a&sort=added#catalog");
+  eq("back link: nothing stored keeps the built link", backLinkHref(null), null);
+  eq("back link: a value that is not a query string is refused", backLinkHref('"><script>'), null);
+
+  // views.js: the remembered Cards / List choice, with storage stubbed.
+  const had = Object.getOwnPropertyDescriptor(globalThis, "localStorage");
+  const store = new Map();
+  const fake = { getItem: (k) => (store.has(k) ? store.get(k) : null), setItem: (k, v) => store.set(k, String(v)), removeItem: (k) => store.delete(k) };
+  Object.defineProperty(globalThis, "localStorage", { value: fake, configurable: true, writable: true });
+  try {
+    const { readStoredView, storeView } = await import("../public/views.js");
+    for (const v of ["cards", "list"]) {
+      store.set("fgda:view:cards-default", v);
+      eq(`views: ${v} is read back`, readStoredView("cards"), v);
+    }
+    for (const v of ["grid", ""]) {
+      store.set("fgda:view:cards-default", v);
+      eq(`views: "${v}" reads as nothing`, readStoredView("cards"), null);
+    }
+    storeView("cards", "list");
+    eq("views: a non-default view is stored", store.get("fgda:view:cards-default"), "list");
+    storeView("cards", "cards");
+    eq("views: the default view removes the key", store.has("fgda:view:cards-default"), false);
+    Object.defineProperty(globalThis, "localStorage", { get() { throw new Error("blocked"); }, configurable: true });
+    eq("views: blocked storage reads as nothing", readStoredView("cards"), null);
+  } finally {
+    if (had) Object.defineProperty(globalThis, "localStorage", had);
+    else delete globalThis.localStorage;
+  }
+}
+
 /* report (keep last) ------------------------------------------------------ */
 if (failures.length) {
   console.error(`lib.test failed (${failures.length}):`);

site/lib/search.mjs

@@ -284,6 +284,29 @@ export const FILTERS = Object.freeze([
   { field: "noAttr", urlKey: "noattr", kind: "switch", default: false, control: "#filter-no-attr", chipOn: "no attribution only" },
 ]);
 
+/**
+ * The chips for what is filtering the list (#263): the category, the search
+ * words, then one per FILTERS row that differs from its default. `labels`
+ * maps a choice field to { value: label } for choices that come from data;
+ * an unknown value shows as written. The `q` chip is not a filter: callers
+ * leave it out of the Filters (n) count.
+ */
+export function activeFilterChips(state, defaults, labels = {}) {
+  const chips = [];
+  const labelOf = (f, v) => (f.options || labels[f.field] || {})[v] || v;
+  const category = FILTERS[0];
+  if (state.category !== defaults.category) chips.push({ key: "category", label: `${category.chip}: ${labelOf(category, state.category)}` });
+  if (String(state.q || "").trim()) chips.push({ key: "q", label: `search: ${state.q.trim()}` });
+  for (const f of FILTERS.slice(1)) {
+    const v = state[f.field];
+    if (v === defaults[f.field]) continue;
+    if (f.kind === "choice") chips.push({ key: f.field, label: `${f.chip}: ${labelOf(f, v)}` });
+    else if (v && f.chipOn) chips.push({ key: f.field, label: f.chipOn });
+    else if (!v && f.chipOff) chips.push({ key: f.field, label: f.chipOff });
+  }
+  return chips;
+}
+
 /** Days since `verified` each `fresh` choice allows: the freshness page's bands. */
 export const FRESH_DAYS = Object.freeze({ "6m": VERIFIED_FRESH_DAYS, "12m": VERIFIED_AGING_DAYS });
 

site/lib/shared.mjs

@@ -290,6 +290,7 @@ export const BROWSER_MODULES = {
   "search.js": "search.mjs", // the catalog search and the 404 page's guesses
   "cards.mjs": "cards.mjs", // the entry card template, for app.js and the category pages
   "shared.mjs": "shared.mjs",
+  "client-state.js": "client-state.mjs", // shortlist parsing, escaping and the entry back link
 };
 
 /**
@@ -299,9 +300,9 @@ export const BROWSER_MODULES = {
  * lib.test.mjs walks the real import graph and fails if a list drifts.
  */
 export const PAGE_MODULES = {
-  home: ["app.js", "search.js", "cards.mjs", "shared.mjs", "views.js", "shortlist.js", "owes.js"],
-  entry: ["shortlist.js", "owes.js"],
-  category: ["category.js", "views.js", "shortlist.js", "owes.js"],
+  home: ["app.js", "search.js", "cards.mjs", "shared.mjs", "views.js", "shortlist.js", "owes.js", "client-state.js"],
+  entry: ["shortlist.js", "owes.js", "client-state.js"],
+  category: ["category.js", "views.js", "shortlist.js", "owes.js", "client-state.js"],
   notFound: ["not-found.js", "search.js", "shared.mjs"],
 };
 

site/public/app.js

@@ -1,4 +1,4 @@
-import { FILTER_DEFAULTS, FILTERS, gapIssueUrl, closestEntries, computeResults as computeResultsFor, passesFilters as passes, placementKey, queryTests as compileQuery, readState, scoreFields, searchFields, shouldGroup as shouldGroupFor, slugOf, sorterFor, SORTS, stateQuery, ENGINES } from "./search.js";
+import { activeFilterChips, FILTER_DEFAULTS, FILTERS, gapIssueUrl, closestEntries, computeResults as computeResultsFor, passesFilters as passes, placementKey, queryTests as compileQuery, readState, scoreFields, searchFields, shouldGroup as shouldGroupFor, slugOf, sorterFor, SORTS, stateQuery, ENGINES } from "./search.js";
 import { CARD_LIMIT, LIST_LIMIT, entryCardHtml, escapeHtml, groupHeadingHtml, groupMoreHtml, PERSPECTIVE_LABELS } from "./cards.mjs";
 import { installViewToggles } from "./views.js";
 import { isListed, PERSPECTIVES } from "./shared.mjs";
@@ -218,23 +218,7 @@ import { isListed, PERSPECTIVES } from "./shared.mjs";
   /** Chips describing what is currently filtering the list, each removable. */
   function renderActiveFilters() {
     const host = $("#active-filters");
-    const chips = [];
-    if (state.category !== DEFAULTS.category) {
-      chips.push({
-        key: "category",
-        label: `category: ${categoryLabels[state.category]?.label || state.category}`,
-      });
-    }
-    if (state.q.trim()) chips.push({ key: "q", label: `search: ${state.q.trim()}` });
-    // One chip per filter that differs from its default, from the FILTERS table (#252).
-    for (const f of FILTERS) {
-      if (f.field === "category") continue;
-      const v = state[f.field];
-      if (f.kind === "choice") {
-        if (v !== f.default) chips.push({ key: f.field, label: `${f.chip}: ${choicesOf(f)[v] || v}` });
-      } else if (v && f.chipOn && v !== f.default) chips.push({ key: f.field, label: f.chipOn });
-      else if (!v && f.chipOff && v !== f.default) chips.push({ key: f.field, label: f.chipOff });
-    }
+    const chips = activeFilterChips(state, DEFAULTS, CHOICE_LABELS);
 
     // The filter keeps aggregators whose files differ, which a reader
     // filtering for "safe to ship" must see, not find in a tooltip.

site/public/entry.js

@@ -1,4 +1,5 @@
 /** Entry page helpers. The page works without them. */
+import { backLinkHref } from "./client-state.js";
 
 // "Catalog" in the breadcrumb returns to the search and filters the reader
 // left, which the homepage keeps in sessionStorage. Without them it goes to
@@ -13,8 +14,8 @@
     return;
   }
   // Only a query string the homepage wrote: URL-encoded key=value pairs.
-  if (!qs || !/^[\w.~%+=&-]+$/.test(qs)) return;
-  link.setAttribute("href", `../../?${qs}#catalog`);
+  const href = backLinkHref(qs);
+  if (href) link.setAttribute("href", href);
 })();
 
 /** Copy button for an entry page's credit line. */

site/public/shortlist.js

@@ -4,14 +4,15 @@
  * same code as the stack pages' "What this stack owes" (owes.js).
  */
 import { creditsFile, owes } from "./owes.js";
+import { escapeHtml, parseShortlist } from "./client-state.js";
 
 const KEY = "fgda:shortlist";
 
 function load() {
   try {
-    const ids = JSON.parse(localStorage.getItem(KEY) || "[]");
-    return Array.isArray(ids) ? ids.filter((id) => typeof id === "string") : [];
+    return parseShortlist(localStorage.getItem(KEY));
   } catch {
+    // Storage blocked: reading it throws.
     return [];
   }
 }
@@ -77,17 +78,6 @@ function nameOf(id) {
   return byId[id]?.name || document.querySelector(`[data-shortlist="${CSS.escape(id)}"]`)?.getAttribute("data-name") || document.querySelector("main h1")?.textContent.trim() || id;
 }
 
-// The same five replacements as esc() in shared.mjs. Kept local so entry
-// pages, which load only this script and owes.js, do not fetch shared.mjs.
-function escapeHtml(str) {
-  return String(str)
-    .replaceAll("&", "&")
-    .replaceAll("<", "&lt;")
-    .replaceAll(">", "&gt;")
-    .replaceAll('"', "&quot;")
-    .replaceAll("'", "&#39;");
-}
-
 function download(name, text, type) {
   const url = URL.createObjectURL(new Blob([text], { type }));
   const a = document.createElement("a");