@loadbare/app 0.5.6 → 0.6.0

package/dist/tests/{lb-rows.test.js → lb-list.test.js}

@@ -10,36 +10,40 @@
  */
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
-import { applyRows } from "../hub/lb-rows";
+import { applyList } from "../hub/lb-apply";
 import { body } from "./helpers/dom";
 import { captured } from "./helpers/console";
 /**
- * A list widget's subtree: the template a page author wrote, and nothing
- * else. The default `place` puts rows in front of the template, so the
- * template staying put is part of what is under test.
+ * A list scope: the template a developer wrote, and nothing else. No widget,
+ * because the hub reconciles a list itself and the default placement puts
+ * rows in front of the template — so the template staying put is part of
+ * what is under test.
  */
 function list(template = `<template lb-key="id"><p><span lb-cell="name"></span></p></template>`) {
-    return body(`<lb-list>${template}</lb-list>`).firstElementChild;
+    return body(`<div lb-list="members">${template}</div>`).firstElementChild;
+}
+/** The same scope, with a widget's placement hook on it. */
+function placing(lbPlaceRow, template) {
+    const scope = list(template);
+    scope.lbPlaceRow = lbPlaceRow;
+    return scope;
 }
 /** The keys of the rows showing, in document order. */
 function keys(scope) {
-    return [...scope.querySelectorAll(`[lb-key]`)]
-        .filter((el) => el.localName !== "template")
-        .map((el) => el.getAttribute("lb-key"));
+    return [...scope.querySelectorAll(`[lb-key-value]`)].map((el) => el.getAttribute("lb-key-value"));
 }
 /** What each row is showing, in document order. */
 function shown(scope) {
-    return [...scope.querySelectorAll(`[lb-key]`)]
-        .filter((el) => el.localName !== "template")
-        .map((el) => el.textContent.trim());
+    return [...scope.querySelectorAll(`[lb-key-value]`)].map((el) => el.textContent.trim());
 }
-const rows = (list) => ({ op: "rows", rows: list });
-const patch = (change) => ({ op: "patch", ...change });
+/** A whole set is the array itself; `Array.isArray` is the discriminant. */
+const rows = (set) => set;
+const patch = (change) => change;
 // --- The whole set -------------------------------------------------------
 describe("a rows result", () => {
-    it("clones the template once per tuple and fills it", () => {
+    it("clones the template once per row and fills it", () => {
         const scope = list();
-        applyRows(scope, rows([
+        applyList(scope, rows([
             { id: "1", name: "Ada" },
             { id: "2", name: "Bab" },
         ]));
@@ -47,35 +51,34 @@ describe("a rows result", () => {
         assert.deepEqual(shown(scope), ["Ada", "Bab"]);
     });
     it("carries the key value on the live row", () => {
-        // lb-key names the key column on the template and carries the key value
-        // on a row. One name in two positions, never ambiguous, because a
-        // template is not a row.
+        // lb-key names the key column on the template; lb-key-value is
+        // stamped on the row with that row's value of it.
         const scope = list();
-        applyRows(scope, rows([{ id: "7", name: "Ada" }]));
+        applyList(scope, rows([{ id: "7", name: "Ada" }]));
         const row = scope.querySelector("p");
-        assert.equal(row.getAttribute("lb-key"), "7");
+        assert.equal(row.getAttribute("lb-key-value"), "7");
     });
     it("leaves the template where it was, after the rows", () => {
         const scope = list();
-        applyRows(scope, rows([{ id: "1", name: "Ada" }]));
+        applyList(scope, rows([{ id: "1", name: "Ada" }]));
         assert.equal(scope.lastElementChild.localName, "template");
     });
     it("decides membership: a key that did not arrive is gone", () => {
         const scope = list();
-        applyRows(scope, rows([
+        applyList(scope, rows([
             { id: "1", name: "Ada" },
             { id: "2", name: "Bab" },
         ]));
-        applyRows(scope, rows([{ id: "2", name: "Bab" }]));
+        applyList(scope, rows([{ id: "2", name: "Bab" }]));
         assert.deepEqual(keys(scope), ["2"]);
     });
     it("decides order: a row that already exists is placed again", () => {
         const scope = list();
-        applyRows(scope, rows([
+        applyList(scope, rows([
             { id: "1", name: "Ada" },
             { id: "2", name: "Bab" },
         ]));
-        applyRows(scope, rows([
+        applyList(scope, rows([
             { id: "2", name: "Bab" },
             { id: "1", name: "Ada" },
         ]));
@@ -84,16 +87,16 @@ describe("a rows result", () => {
     it("updates a row it keeps rather than replacing it", () => {
         // The row is the same element, so anything a widget put on it survives.
         const scope = list();
-        applyRows(scope, rows([{ id: "1", name: "Ada" }]));
+        applyList(scope, rows([{ id: "1", name: "Ada" }]));
         const before = scope.querySelector("p");
-        applyRows(scope, rows([{ id: "1", name: "Grace" }]));
+        applyList(scope, rows([{ id: "1", name: "Grace" }]));
         assert.equal(scope.querySelector("p"), before, "same element");
         assert.deepEqual(shown(scope), ["Grace"]);
     });
     it("empties the list when the set is empty", () => {
         const scope = list();
-        applyRows(scope, rows([{ id: "1", name: "Ada" }]));
-        applyRows(scope, rows([]));
+        applyList(scope, rows([{ id: "1", name: "Ada" }]));
+        applyList(scope, rows([]));
         assert.deepEqual(keys(scope), []);
         assert.equal(scope.querySelector("template"), scope.firstElementChild);
     });
@@ -102,33 +105,33 @@ describe("a rows result", () => {
 describe("a patch result", () => {
     it("adds a row it names", () => {
         const scope = list();
-        applyRows(scope, rows([{ id: "1", name: "Ada" }]));
-        applyRows(scope, patch({ rows: [{ id: "2", name: "Bab" }] }));
+        applyList(scope, rows([{ id: "1", name: "Ada" }]));
+        applyList(scope, patch({ rows: [{ id: "2", name: "Bab" }] }));
         assert.deepEqual(keys(scope), ["1", "2"]);
     });
     it("updates a row it names", () => {
         const scope = list();
-        applyRows(scope, rows([{ id: "1", name: "Ada" }]));
-        applyRows(scope, patch({ rows: [{ id: "1", name: "Grace" }] }));
+        applyList(scope, rows([{ id: "1", name: "Ada" }]));
+        applyList(scope, patch({ rows: [{ id: "1", name: "Grace" }] }));
         assert.deepEqual(shown(scope), ["Grace"]);
     });
     it("drops a row it names", () => {
         const scope = list();
-        applyRows(scope, rows([
+        applyList(scope, rows([
             { id: "1", name: "Ada" },
             { id: "2", name: "Bab" },
         ]));
-        applyRows(scope, patch({ drop: ["1"] }));
+        applyList(scope, patch({ drop: ["1"] }));
         assert.deepEqual(keys(scope), ["2"]);
     });
     it("leaves a row it did not name, in contents and in place", () => {
         const scope = list();
-        applyRows(scope, rows([
+        applyList(scope, rows([
             { id: "1", name: "Ada" },
             { id: "2", name: "Bab" },
             { id: "3", name: "Cai" },
         ]));
-        applyRows(scope, patch({ rows: [{ id: "2", name: "Grace" }] }));
+        applyList(scope, patch({ rows: [{ id: "2", name: "Grace" }] }));
         assert.deepEqual(keys(scope), ["1", "2", "3"]);
         assert.deepEqual(shown(scope), ["Ada", "Grace", "Cai"]);
     });
@@ -137,55 +140,52 @@ describe("a patch result", () => {
         // sort column changed stays where it was. This test states what is true
         // now, and is the one that flips when that item closes.
         const placed = [];
-        const place = (row, _tuple, template) => {
-            placed.push(row.getAttribute("lb-key"));
-            template.parentElement.insertBefore(row, template);
-        };
-        const scope = list();
-        applyRows(scope, rows([
+        const scope = placing((el, _row, template) => {
+            placed.push(el.getAttribute("lb-key-value"));
+            template.parentElement.insertBefore(el, template);
+        });
+        applyList(scope, rows([
             { id: "1", name: "Ada" },
             { id: "2", name: "Bab" },
-        ]), place);
+        ]));
         placed.length = 0;
-        applyRows(scope, patch({ rows: [{ id: "1", name: "Grace" }] }), place);
+        applyList(scope, patch({ rows: [{ id: "1", name: "Grace" }] }));
         assert.deepEqual(placed, [], "an existing row is filled, never placed");
     });
     it("places a row it has not seen before", () => {
         const placed = [];
-        const place = (row, _tuple, template) => {
-            placed.push(row.getAttribute("lb-key"));
-            template.parentElement.insertBefore(row, template);
-        };
-        const scope = list();
-        applyRows(scope, rows([{ id: "1", name: "Ada" }]), place);
+        const scope = placing((el, _row, template) => {
+            placed.push(el.getAttribute("lb-key-value"));
+            template.parentElement.insertBefore(el, template);
+        });
+        applyList(scope, rows([{ id: "1", name: "Ada" }]));
         placed.length = 0;
-        applyRows(scope, patch({ rows: [{ id: "2", name: "Bab" }] }), place);
+        applyList(scope, patch({ rows: [{ id: "2", name: "Bab" }] }));
         assert.deepEqual(placed, ["2"]);
     });
     it("ignores a drop for a row that is not showing", () => {
         const scope = list();
-        applyRows(scope, rows([{ id: "1", name: "Ada" }]));
-        assert.doesNotThrow(() => applyRows(scope, patch({ drop: ["9"] })));
+        applyList(scope, rows([{ id: "1", name: "Ada" }]));
+        assert.doesNotThrow(() => applyList(scope, patch({ drop: ["9"] })));
         assert.deepEqual(keys(scope), ["1"]);
     });
     it("naming nothing changes nothing", () => {
         const scope = list();
-        applyRows(scope, rows([{ id: "1", name: "Ada" }]));
+        applyList(scope, rows([{ id: "1", name: "Ada" }]));
         const before = scope.innerHTML;
-        applyRows(scope, patch({}));
+        applyList(scope, patch({}));
         assert.equal(scope.innerHTML, before);
     });
 });
 // --- Placement -----------------------------------------------------------
 describe("placement", () => {
-    it("hands the widget the row, the tuple and the template", () => {
+    it("hands the widget the element, the row and the template", () => {
         const seen = [];
-        const place = (row, tuple, template) => {
-            seen.push([row.localName, tuple, template.localName]);
-            template.parentElement.insertBefore(row, template);
-        };
-        const scope = list();
-        applyRows(scope, rows([{ id: "1", name: "Ada" }]), place);
+        const scope = placing((el, row, template) => {
+            seen.push([el.localName, row, template.localName]);
+            template.parentElement.insertBefore(el, template);
+        });
+        applyList(scope, rows([{ id: "1", name: "Ada" }]));
         assert.deepEqual(seen, [["p", { id: "1", name: "Ada" }, "template"]]);
     });
     it("fills the row before the widget places it", () => {
@@ -194,20 +194,20 @@ describe("placement", () => {
         // else. A widget that reads a cell to decide where the row goes — every
         // sorting or grouping widget — depends on this ordering.
         let atPlacement = "";
-        const place = (row, _tuple, template) => {
-            atPlacement = row.textContent.trim();
-            template.parentElement.insertBefore(row, template);
-        };
-        applyRows(list(), rows([{ id: "1", name: "Ada" }]), place);
+        const scope = placing((el, _row, template) => {
+            atPlacement = el.textContent.trim();
+            template.parentElement.insertBefore(el, template);
+        });
+        applyList(scope, rows([{ id: "1", name: "Ada" }]));
         assert.equal(atPlacement, "Ada");
     });
     it("hands the widget a row that is not yet in the document", () => {
         let connected = true;
-        const place = (row, _tuple, template) => {
-            connected = row.parentElement !== null;
-            template.parentElement.insertBefore(row, template);
-        };
-        applyRows(list(), rows([{ id: "1", name: "Ada" }]), place);
+        const scope = placing((el, _row, template) => {
+            connected = el.parentElement !== null;
+            template.parentElement.insertBefore(el, template);
+        });
+        applyList(scope, rows([{ id: "1", name: "Ada" }]));
         assert.equal(connected, false, "the row arrives detached");
     });
 });
@@ -219,68 +219,71 @@ describe("the row count", () => {
         // that "no members yet" is a stylesheet rule rather than code in every
         // list widget.
         const scope = list();
-        applyRows(scope, rows([
+        applyList(scope, rows([
             { id: "1", name: "Ada" },
             { id: "2", name: "Bab" },
         ]));
-        assert.equal(scope.getAttribute("data-rows"), "2");
+        assert.equal(scope.getAttribute("lb-row-count"), "2");
     });
     it("is zero for an empty set", () => {
         const scope = list();
-        applyRows(scope, rows([{ id: "1", name: "Ada" }]));
-        applyRows(scope, rows([]));
-        assert.equal(scope.getAttribute("data-rows"), "0");
+        applyList(scope, rows([{ id: "1", name: "Ada" }]));
+        applyList(scope, rows([]));
+        assert.equal(scope.getAttribute("lb-row-count"), "0");
     });
     it("reports the same fact the same way after a set and after a patch", () => {
         const viaRows = list();
-        applyRows(viaRows, rows([
+        applyList(viaRows, rows([
             { id: "1", name: "Ada" },
             { id: "2", name: "Bab" },
         ]));
         const viaPatch = list();
-        applyRows(viaPatch, rows([
+        applyList(viaPatch, rows([
             { id: "1", name: "Ada" },
             { id: "3", name: "Cai" },
         ]));
-        applyRows(viaPatch, patch({ rows: [{ id: "2", name: "Bab" }], drop: ["3"] }));
-        assert.equal(viaPatch.getAttribute("data-rows"), viaRows.getAttribute("data-rows"));
+        applyList(viaPatch, patch({ rows: [{ id: "2", name: "Bab" }], drop: ["3"] }));
+        assert.equal(viaPatch.getAttribute("lb-row-count"), viaRows.getAttribute("lb-row-count"));
     });
 });
 // --- What it refuses to guess at ----------------------------------------
-describe("applyRows reports and stops", () => {
-    it("when the widget has no template to clone", async () => {
-        const scope = body(`<lb-list></lb-list>`).firstElementChild;
-        const { error } = await captured(() => applyRows(scope, rows([{ id: "1" }])));
-        assert.match(error.join("\n"), /<lb-list> has no <template> to clone/);
+describe("applyList reports and stops", () => {
+    it("says nothing about a scope with no row template", async () => {
+        // Bound to the list without displaying it: an insert form names the list
+        // it adds a row to, and has no rows of its own. Not a mistake, so not a
+        // message.
+        const scope = body(`<div></div>`).firstElementChild;
+        const { error } = await captured(() => applyList(scope, rows([{ id: "1" }])));
+        assert.deepEqual(error, []);
         assert.equal(scope.children.length, 0, "nothing was invented");
     });
     it("when the template does not name the key column", async () => {
         const scope = list(`<template><p></p></template>`);
-        const { error } = await captured(() => applyRows(scope, rows([{ id: "1" }])));
+        const { error } = await captured(() => applyList(scope, rows([{ id: "1" }])));
         assert.match(error.join("\n"), /has no lb-key naming the column that identifies a row/);
         assert.deepEqual(keys(scope), []);
     });
     it("does not stamp a count it could not compute", async () => {
-        const scope = body(`<lb-list></lb-list>`).firstElementChild;
-        await captured(() => applyRows(scope, rows([{ id: "1" }])));
-        assert.equal(scope.hasAttribute("data-rows"), false);
+        const scope = body(`<div></div>`).firstElementChild;
+        await captured(() => applyList(scope, rows([{ id: "1" }])));
+        assert.equal(scope.hasAttribute("lb-row-count"), false);
     });
-    it("when a tuple has no key cell, and lands its siblings anyway", async () => {
+    it("when a row has no key cell, and lands its siblings anyway", async () => {
         const scope = list();
-        const { error } = await captured(() => applyRows(scope, rows([
+        const { error } = await captured(() => applyList(scope, rows([
             { id: "1", name: "Ada" },
             { name: "nameless" },
             { id: "2", name: "Bab" },
         ])));
-        assert.match(error.join("\n"), /a tuple for <lb-list> has no 'id' cell/);
+        assert.match(error.join("\n"), /a row for <div> has no 'id' column/);
         assert.deepEqual(keys(scope), ["1", "2"]);
     });
-    it("and a keyless tuple does not take a surviving row down with it", async () => {
-        // A tuple with no key contributes no key to the arrived set, so the
+    it("and a keyless row does not take a surviving row down with it", async () => {
+        // A row with no key contributes no key to the arrived set, so the
         // reconciliation that follows must not read its absence as a removal.
         const scope = list();
-        applyRows(scope, rows([{ id: "1", name: "Ada" }]));
-        await captured(() => applyRows(scope, rows([{ id: "1", name: "Ada" }, { name: "nameless" }])));
+        applyList(scope, rows([{ id: "1", name: "Ada" }]));
+        await captured(() => applyList(scope, rows([{ id: "1", name: "Ada" }, { name: "nameless" }])));
         assert.deepEqual(keys(scope), ["1"]);
     });
 });
@@ -293,12 +296,12 @@ describe("reconciliation converges", () => {
     ];
     it("so applying the same set twice is applying it once", () => {
         const once = list();
-        applyRows(once, rows(SET));
+        applyList(once, rows(SET));
         const twice = list();
-        applyRows(twice, rows(SET));
-        applyRows(twice, rows(SET));
+        applyList(twice, rows(SET));
+        applyList(twice, rows(SET));
         assert.equal(twice.innerHTML, once.innerHTML);
-        assert.equal(twice.getAttribute("data-rows"), once.getAttribute("data-rows"));
+        assert.equal(twice.getAttribute("lb-row-count"), once.getAttribute("lb-row-count"));
     });
     it("so a set reached through any patches is the set reached from empty", () => {
         // Every history below ends at SET. A reconciler that leaks state — a row
@@ -322,15 +325,15 @@ describe("reconciliation converges", () => {
             [patch({ rows: [{ id: "4", name: "Dot" }] }), patch({ drop: ["4"] })],
         ];
         const fresh = list();
-        applyRows(fresh, rows(SET));
+        applyList(fresh, rows(SET));
         const expected = fresh.innerHTML;
         for (const [index, history] of histories.entries()) {
             const scope = list();
             for (const step of history)
-                applyRows(scope, step);
-            applyRows(scope, rows(SET));
+                applyList(scope, step);
+            applyList(scope, rows(SET));
             assert.equal(scope.innerHTML, expected, `history ${index} did not converge`);
-            assert.equal(scope.getAttribute("data-rows"), String(SET.length));
+            assert.equal(scope.getAttribute("lb-row-count"), String(SET.length));
         }
     });
 });