@loadbare/app 0.4.0

package/dist/tests/lb-apply.test.js

@@ -0,0 +1,153 @@
+/**
+ * Landing data on a live host — see docs/testing.md, tier 3.
+ *
+ * hub/lb-apply.ts is pure DOM: no fetch, no widget upgrade, no history.
+ * jsdom is real evidence for it, which is not true one file further on.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { applyData, applyTuple } from "../hub/lb-apply";
+import { body, one } from "./helpers/dom";
+import { captured } from "./helpers/console";
+/** An element that is a list widget as far as the hub is concerned. */
+function rowHost(html) {
+    const el = one(html);
+    el.seen = [];
+    el.acceptRows = (result) => void el.seen.push(result);
+    return el;
+}
+// --- One tuple into one scope -------------------------------------------
+describe("applyTuple", () => {
+    it("gives a native element its value as text", () => {
+        const scope = one(`<div><span lb-cell="name"></span></div>`);
+        applyTuple(scope, { name: "Ada" });
+        assert.equal(scope.querySelector("span").textContent, "Ada");
+    });
+    it("gives a widget its value as an attribute", () => {
+        // A custom element owns whatever control it wraps, so it receives the
+        // value and renders it itself. The test is lexical — a hyphen in the tag
+        // name — and the hub holds no knowledge of any particular element.
+        const scope = one(`<div><lb-input lb-cell="name"></lb-input></div>`);
+        applyTuple(scope, { name: "Ada" });
+        const widget = scope.querySelector("lb-input");
+        assert.equal(widget.getAttribute("lb-value"), "Ada");
+        assert.equal(widget.textContent, "", "the widget's children are its own");
+    });
+    it("counts the root as a cell when it carries one", () => {
+        // <option>'s content model is text, so an option row has to be the cell
+        // it displays. Requiring a wrapper would require an element HTML does
+        // not allow.
+        const scope = one(`<option lb-cell="name"></option>`);
+        applyTuple(scope, { name: "Ada" });
+        assert.equal(scope.textContent, "Ada");
+    });
+    it("fills every element naming the same cell", () => {
+        const scope = one(`<div><b lb-cell="name"></b><i lb-cell="name"></i></div>`);
+        applyTuple(scope, { name: "Ada" });
+        assert.equal(scope.querySelector("b").textContent, "Ada");
+        assert.equal(scope.querySelector("i").textContent, "Ada");
+    });
+    it("empties a native root that is a cell, children and all", () => {
+        // A root that is a cell is a leaf, and a native one lands its value as
+        // text — so the children go, because setting textContent is what
+        // replacing an element's content means.
+        //
+        // The case this is for cannot hit it: <option> is a leaf by content
+        // model. But nothing stops an author writing a cell on a <tr> that has
+        // cells inside it, and this is what they would get.
+        const scope = body(`<table><tbody><tr lb-cell="line"><td lb-cell="amount"></td></tr></tbody></table>`).querySelector("tr");
+        applyTuple(scope, { line: "Total", amount: "10" });
+        assert.equal(scope.textContent, "Total");
+        assert.equal(scope.children.length, 0, "the amount cell is gone");
+    });
+    it("keeps the children of a widget root that is a cell", () => {
+        // The same shape with a hyphen in the tag name is unharmed, because a
+        // widget receives its value as an attribute and renders it itself. The
+        // asymmetry follows from what a cell means on each kind of element.
+        const scope = one(`<lb-input lb-cell="line"><input /></lb-input>`);
+        applyTuple(scope, { line: "Total" });
+        assert.equal(scope.getAttribute("lb-value"), "Total");
+        assert.equal(scope.children.length, 1);
+    });
+    it("leaves a cell the tuple did not name alone", () => {
+        const scope = one(`<div><span lb-cell="name">Ada</span><span lb-cell="role">lead</span></div>`);
+        applyTuple(scope, { role: "staff" });
+        assert.equal(scope.querySelector(`[lb-cell="name"]`).textContent, "Ada");
+        assert.equal(scope.querySelector(`[lb-cell="role"]`).textContent, "staff");
+    });
+    it("says nothing about a cell with nowhere to land", () => {
+        const scope = one(`<div><span lb-cell="name"></span></div>`);
+        assert.doesNotThrow(() => applyTuple(scope, { absent: "x" }));
+    });
+    it("lands a value as text, so data cannot become markup", () => {
+        // The same guarantee expansion makes at build time, made here at run
+        // time and by the same means: the DOM API rather than a string.
+        const scope = one(`<div><span lb-cell="name"></span></div>`);
+        applyTuple(scope, { name: `<img src=x onerror=alert(1)>` });
+        assert.equal(scope.querySelectorAll("img").length, 0);
+        assert.equal(scope.querySelector("span").textContent, `<img src=x onerror=alert(1)>`);
+    });
+    it("lands the empty string as the empty string", () => {
+        const scope = one(`<div><span lb-cell="name">Ada</span></div>`);
+        applyTuple(scope, { name: "" });
+        assert.equal(scope.querySelector("span").textContent, "");
+    });
+});
+// --- A whole response ----------------------------------------------------
+describe("applyData", () => {
+    it("lands each result in the scope its query names", async () => {
+        const root = body(`<div lb-query="greeting"><span lb-cell="text"></span></div>` +
+            `<div lb-query="count"><span lb-cell="n"></span></div>`);
+        applyData(root, { greeting: { text: "hello" }, count: { n: "3" } });
+        assert.equal(root.querySelector(`[lb-query="greeting"] span`).textContent, "hello");
+        assert.equal(root.querySelector(`[lb-query="count"] span`).textContent, "3");
+    });
+    it("fills every scope naming the same query", () => {
+        // Two projections of one query on one page: the hub resolves by name and
+        // does not care how many places asked.
+        const root = body(`<div lb-query="total"><span lb-cell="n"></span></div>` +
+            `<p lb-query="total"><span lb-cell="n"></span></p>`);
+        applyData(root, { total: { n: "7" } });
+        for (const el of root.querySelectorAll("span")) {
+            assert.equal(el.textContent, "7");
+        }
+    });
+    it("reports a query with no scope, and lands the rest anyway", async () => {
+        const root = body(`<div lb-query="count"><span lb-cell="n"></span></div>`);
+        const { warn } = await captured(() => applyData(root, { ghost: { x: "1" }, count: { n: "3" } }));
+        assert.match(warn.join("\n"), /no scope for query 'ghost', skipping/);
+        assert.equal(root.querySelector("span").textContent, "3");
+    });
+    it("hands a projection to the widget, whole", () => {
+        const host = rowHost(`<lb-list lb-query="members"></lb-list>`);
+        const root = body("");
+        root.append(host);
+        const result = { op: "rows", rows: [{ id: "1" }] };
+        applyData(root, { members: result });
+        assert.deepEqual(host.seen, [result]);
+    });
+    it("reports a projection landing on something that is not a list", async () => {
+        // A native element has one destination for a value and no way to acquire
+        // children, so a list is not something it can be asked to show.
+        const root = body(`<div lb-query="members"></div>`);
+        const { error } = await captured(() => applyData(root, { members: { op: "rows", rows: [{ id: "1" }] } }));
+        assert.match(error.join("\n"), /query 'members' returned rows, but <div> is not a list widget/);
+    });
+    it("reads a tuple carrying a cell called op as a projection", async () => {
+        // The reserved name, from the browser's side. Stated in
+        // core/lb-types.ts and worth failing loudly if it ever moves.
+        const root = body(`<div lb-query="members"></div>`);
+        const { error } = await captured(() => applyData(root, { members: { op: "rows" } }));
+        assert.match(error.join("\n"), /is not a list widget/);
+    });
+    it("lands a tuple whose op cell is not a projection word", () => {
+        const root = body(`<div lb-query="row"><span lb-cell="op"></span></div>`);
+        applyData(root, { row: { op: "deleted" } });
+        assert.equal(root.querySelector("span").textContent, "deleted");
+    });
+    it("does nothing with an empty response", () => {
+        const root = body(`<div lb-query="count"><span lb-cell="n">3</span></div>`);
+        applyData(root, {});
+        assert.equal(root.querySelector("span").textContent, "3");
+    });
+});

package/dist/tests/lb-express.test.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The Express adapter — see docs/testing.md, tier 2.
+ *
+ * server/lb-express.ts is the only file that knows both HTTP and Hub. What
+ * it owes is small and exact: two endpoints and no third, the page from the
+ * query string, and an operation it does not yet handle refused rather than
+ * half-handled.
+ *
+ * It is tested against a listening server rather than a mocked request,
+ * because the things it can get wrong — a body that never parsed, a route
+ * that swallows another — are things a mock would agree with.
+ */
+export {};
+//# sourceMappingURL=lb-express.test.d.ts.map

package/dist/tests/lb-express.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-express.test.d.ts","sourceRoot":"","sources":["../../tests/lb-express.test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG"}

package/dist/tests/lb-express.test.js

@@ -0,0 +1,238 @@
+/**
+ * The Express adapter — see docs/testing.md, tier 2.
+ *
+ * server/lb-express.ts is the only file that knows both HTTP and Hub. What
+ * it owes is small and exact: two endpoints and no third, the page from the
+ * query string, and an operation it does not yet handle refused rather than
+ * half-handled.
+ *
+ * It is tested against a listening server rather than a mocked request,
+ * because the things it can get wrong — a body that never parsed, a route
+ * that swallows another — are things a mock would agree with.
+ */
+import assert from "node:assert/strict";
+import { after, before, describe, it } from "node:test";
+import express from "express";
+import { LB_DATA_ENDPOINT, LB_REQUEST_ENDPOINT } from "../core/lb-constants";
+import { hubRoutes } from "../server/lb-express";
+import { captured } from "./helpers/console";
+const calls = [];
+let contexts = 0;
+const engine = {
+    async dataForPage(page, ctx) {
+        calls.push({ kind: "data", page, ctx });
+        return { greeting: { text: "hello" } };
+    },
+    async runAction(page, name, where, ctx) {
+        calls.push({ kind: "action", page, name, where, ctx });
+        if (name === "explode")
+            throw new Error("application code failed");
+        return { count: { n: "2" } };
+    },
+    async runCellChange(page, where, ctx) {
+        calls.push({ kind: "cell-change", page, where, ctx });
+        return { members: { n: "3" } };
+    },
+    async runTupleDelete(page, where, ctx) {
+        calls.push({ kind: "tuple-delete", page, where, ctx });
+        return { members: { n: "4" } };
+    },
+    async runTupleInsert(page, where, ctx) {
+        calls.push({ kind: "tuple-insert", page, where, ctx });
+        return { members: { n: "5" } };
+    },
+    async runTupleUpdate(page, where, ctx) {
+        calls.push({ kind: "tuple-update", page, where, ctx });
+        return { members: { n: "6" } };
+    },
+};
+let base;
+let server;
+before(async () => {
+    const app = express();
+    app.use(hubRoutes(engine, () => {
+        contexts += 1;
+        return {};
+    }));
+    await new Promise((done) => {
+        server = app.listen(0, "127.0.0.1", () => done());
+    });
+    base = `http://127.0.0.1:${server.address().port}`;
+});
+after(() => void server.close());
+function post(page, body, raw) {
+    return fetch(`${base}${LB_REQUEST_ENDPOINT}?page=${page}`, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: raw ?? JSON.stringify(body),
+    });
+}
+describe("the data endpoint", () => {
+    it("runs the page named in the query string", async () => {
+        calls.length = 0;
+        const res = await fetch(`${base}${LB_DATA_ENDPOINT}?page=hello`);
+        assert.equal(res.status, 200);
+        assert.deepEqual(await res.json(), { greeting: { text: "hello" } });
+        assert.equal(calls.length, 1);
+        assert.equal(calls[0].kind, "data");
+        assert.equal(calls[0].page, "hello");
+    });
+    it("names the empty page when the query string does not", async () => {
+        // The engine answers for a page it does not have; the route's job is only
+        // to pass on what it was given rather than to invent a default.
+        calls.length = 0;
+        await fetch(`${base}${LB_DATA_ENDPOINT}`);
+        assert.equal(calls[0].page, "");
+    });
+});
+describe("the request endpoint", () => {
+    it("runs the action, with where the interaction happened", async () => {
+        calls.length = 0;
+        const res = await post("roster", {
+            op: "action",
+            name: "pick",
+            query: "members",
+            key: "7",
+            cell: "role",
+            value: "lead",
+        });
+        assert.equal(res.status, 200);
+        assert.deepEqual(await res.json(), { count: { n: "2" } });
+        assert.deepEqual(calls[0].where, {
+            query: "members",
+            key: "7",
+            cell: "role",
+            value: "lead",
+        });
+        assert.equal(calls[0].name, "pick");
+        assert.equal(calls[0].page, "roster");
+    });
+    it("passes on an action carrying no coordinates at all", async () => {
+        // A button carries no value and may sit outside any scope. Undefined
+        // stays undefined rather than becoming the empty string.
+        calls.length = 0;
+        await post("counter", { op: "action", name: "bump" });
+        assert.deepEqual(calls[0].where, {
+            query: undefined,
+            key: undefined,
+            cell: undefined,
+            value: undefined,
+        });
+    });
+    it("refuses an op it does not recognise, rather than guessing", async () => {
+        calls.length = 0;
+        const { result: res, warn } = await captured(() => post("roster", { op: "tuple-upsert", query: "members", key: "1" }));
+        assert.equal(res.status, 400);
+        assert.deepEqual(await res.json(), {});
+        assert.deepEqual(calls, [], "the engine was never reached");
+        assert.match(warn.join("\n"), /operation 'tuple-upsert' not implemented/);
+    });
+    it("runs a cell-change, with where the interaction happened", async () => {
+        calls.length = 0;
+        const res = await post("roster", {
+            op: "cell-change",
+            query: "members",
+            key: "7",
+            cell: "name",
+            value: "Ada",
+        });
+        assert.equal(res.status, 200);
+        assert.deepEqual(await res.json(), { members: { n: "3" } });
+        assert.deepEqual(calls[0].where, {
+            query: "members",
+            key: "7",
+            cell: "name",
+            value: "Ada",
+        });
+        assert.equal(calls[0].kind, "cell-change");
+        assert.equal(calls[0].page, "roster");
+    });
+    it("runs a tuple-delete, with the key of the row", async () => {
+        calls.length = 0;
+        const res = await post("roster", {
+            op: "tuple-delete",
+            query: "members",
+            key: "7",
+        });
+        assert.equal(res.status, 200);
+        assert.deepEqual(await res.json(), { members: { n: "4" } });
+        assert.deepEqual(calls[0].where, { query: "members", key: "7" });
+        assert.equal(calls[0].kind, "tuple-delete");
+        assert.equal(calls[0].page, "roster");
+    });
+    it("runs a tuple-insert, with the gathered values", async () => {
+        calls.length = 0;
+        const res = await post("roster", {
+            op: "tuple-insert",
+            query: "members",
+            values: { name: "Ada", role: "Analyst" },
+        });
+        assert.equal(res.status, 200);
+        assert.deepEqual(await res.json(), { members: { n: "5" } });
+        assert.deepEqual(calls[0].where, {
+            query: "members",
+            values: { name: "Ada", role: "Analyst" },
+        });
+        assert.equal(calls[0].kind, "tuple-insert");
+        assert.equal(calls[0].page, "roster");
+    });
+    it("runs a tuple-update, with the key and the gathered values", async () => {
+        calls.length = 0;
+        const res = await post("roster", {
+            op: "tuple-update",
+            query: "members",
+            key: "7",
+            values: { name: "Ada", role: "Analyst" },
+        });
+        assert.equal(res.status, 200);
+        assert.deepEqual(await res.json(), { members: { n: "6" } });
+        assert.deepEqual(calls[0].where, {
+            query: "members",
+            key: "7",
+            values: { name: "Ada", role: "Analyst" },
+        });
+        assert.equal(calls[0].kind, "tuple-update");
+        assert.equal(calls[0].page, "roster");
+    });
+    it("refuses a body with no op", async () => {
+        calls.length = 0;
+        const { result: res } = await captured(() => post("roster", { name: "pick" }));
+        assert.equal(res.status, 400);
+        assert.deepEqual(calls, []);
+    });
+    it("survives an operation that throws, rather than crashing", async () => {
+        calls.length = 0;
+        const { result: res, error } = await captured(() => post("roster", { op: "action", name: "explode", query: "members" }));
+        assert.equal(res.status, 500);
+        assert.deepEqual(await res.json(), {});
+        assert.match(error.join("\n"), /operation 'action' threw/);
+        // And the process is still serving.
+        const next = await fetch(`${base}${LB_DATA_ENDPOINT}?page=hello`);
+        assert.equal(next.status, 200);
+    });
+    it("survives a body that is not JSON", async () => {
+        calls.length = 0;
+        const res = await post("roster", null, "{ not json");
+        assert.ok(res.status >= 400, `expected a refusal, got ${res.status}`);
+        assert.deepEqual(calls, []);
+        // And the process is still serving. A parse failure is one request's
+        // problem, not the server's.
+        const next = await fetch(`${base}${LB_DATA_ENDPOINT}?page=hello`);
+        assert.equal(next.status, 200);
+    });
+});
+describe("the context", () => {
+    it("is built once per request, by the application", async () => {
+        // Hub's only requirement is that the context is built per request,
+        // after whatever establishes identity. Holding one for the life of the
+        // process is the mistake this asserts against.
+        contexts = 0;
+        calls.length = 0;
+        await fetch(`${base}${LB_DATA_ENDPOINT}?page=hello`);
+        await fetch(`${base}${LB_DATA_ENDPOINT}?page=hello`);
+        await post("counter", { op: "action", name: "bump" });
+        assert.equal(contexts, 3);
+        assert.notEqual(calls[0].ctx, calls[1].ctx);
+        assert.notEqual(calls[1].ctx, calls[2].ctx);
+    });
+});

package/dist/tests/lb-input.test.d.ts

@@ -0,0 +1,9 @@
+/**
+ * lb-input — see docs/testing.md, tier 4.
+ *
+ * The simplest widget there is, and therefore the one that states the leaf
+ * contract on its own: the hub writes one attribute name for every widget
+ * type, and the widget forwards it to the control it owns.
+ */
+export {};
+//# sourceMappingURL=lb-input.test.d.ts.map

package/dist/tests/lb-input.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-input.test.d.ts","sourceRoot":"","sources":["../../tests/lb-input.test.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG"}

package/dist/tests/lb-input.test.js

@@ -0,0 +1,78 @@
+/**
+ * lb-input — see docs/testing.md, tier 4.
+ *
+ * The simplest widget there is, and therefore the one that states the leaf
+ * contract on its own: the hub writes one attribute name for every widget
+ * type, and the widget forwards it to the control it owns.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { ATTR_CELL, ATTR_KEY, ATTR_QUERY, ATTR_VALUE } from "../core/lb-constants";
+import { captured } from "./helpers/console";
+import { change, installWindow, mount, requests } from "./helpers/window";
+installWindow();
+await import("../widgets/lb-input");
+describe("lb-input receiving a value", () => {
+    it("forwards its value to the input it owns", () => {
+        const widget = mount(`<lb-input><input /></lb-input>`);
+        widget.setAttribute(ATTR_VALUE, "Ada");
+        assert.equal(widget.querySelector("input").value, "Ada");
+    });
+    it("takes the value it was already carrying when it upgraded", () => {
+        // Hydration and refresh are one operation. The browser runs
+        // attributeChangedCallback for attributes already present when a widget
+        // upgrades, so a value that landed before the class existed is not lost —
+        // which is what lets applyData fill a row and then insert it.
+        const widget = mount(`<lb-input ${ATTR_VALUE}="Ada"><input /></lb-input>`);
+        assert.equal(widget.querySelector("input").value, "Ada");
+    });
+    it("keeps up with a value that changes", () => {
+        const widget = mount(`<lb-input><input /></lb-input>`);
+        widget.setAttribute(ATTR_VALUE, "Ada");
+        widget.setAttribute(ATTR_VALUE, "Grace");
+        assert.equal(widget.querySelector("input").value, "Grace");
+    });
+    it("reports when there is no input to receive the value", async () => {
+        const widget = mount(`<lb-input></lb-input>`);
+        const { error } = await captured(() => widget.setAttribute(ATTR_VALUE, "Ada"));
+        assert.match(error.join("\n"), /lb-input: no <input> to receive/);
+    });
+    it("watches only the value attribute", async () => {
+        // observedAttributes is the whole of what a widget is told about. A page
+        // author's class or title must not reach the control.
+        const widget = mount(`<lb-input><input /></lb-input>`);
+        const { error } = await captured(() => {
+            widget.setAttribute("class", "wide");
+            widget.setAttribute("title", "Name");
+        });
+        assert.deepEqual(error, []);
+        assert.equal(widget.querySelector("input").value, "");
+    });
+});
+describe("lb-input sending a cell-change", () => {
+    it("sends its coordinates and the input's current value", () => {
+        const seen = requests();
+        const widget = mount(`<div ${ATTR_QUERY}="members" ${ATTR_KEY}="7">` +
+            `<lb-input ${ATTR_CELL}="name"><input /></lb-input></div>`).querySelector("lb-input");
+        widget.querySelector("input").value = "Ada";
+        change(widget.querySelector("input"));
+        assert.deepEqual(seen, [
+            { op: "cell-change", query: "members", key: "7", cell: "name", value: "Ada" },
+        ]);
+    });
+    it("reports a change with no query/key/cell coordinates, and sends nothing", async () => {
+        const seen = requests();
+        const widget = mount(`<lb-input ${ATTR_CELL}="name"><input /></lb-input>`);
+        const { error } = await captured(() => change(widget.querySelector("input")));
+        assert.match(error.join("\n"), /lb-input: change with no query\/key\/cell coordinates/);
+        assert.deepEqual(seen, []);
+    });
+    it("reports a change with no input, and sends nothing", async () => {
+        const seen = requests();
+        const widget = mount(`<div ${ATTR_QUERY}="members" ${ATTR_KEY}="7">` +
+            `<lb-input ${ATTR_CELL}="name"></lb-input></div>`).querySelector("lb-input");
+        const { error } = await captured(() => change(widget));
+        assert.match(error.join("\n"), /lb-input: change with no <input>/);
+        assert.deepEqual(seen, []);
+    });
+});

package/dist/tests/lb-list.test.d.ts

@@ -0,0 +1,12 @@
+/**
+ * lb-list — see docs/testing.md, tier 4.
+ *
+ * The plain repeater: whatever the page author wrote inside is repeated once
+ * per tuple, in the order the server sent. It adds no placement of its own,
+ * so what is worth testing is that it is a row host at all, and the case it
+ * exists for — a <table> that cannot be one, because a custom element written
+ * inside <tbody> is discarded by the parser. The widget goes around the
+ * table, and the template goes inside it.
+ */
+export {};
+//# sourceMappingURL=lb-list.test.d.ts.map

package/dist/tests/lb-list.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-list.test.d.ts","sourceRoot":"","sources":["../../tests/lb-list.test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG"}

package/dist/tests/lb-list.test.js

@@ -0,0 +1,44 @@
+/**
+ * lb-list — see docs/testing.md, tier 4.
+ *
+ * The plain repeater: whatever the page author wrote inside is repeated once
+ * per tuple, in the order the server sent. It adds no placement of its own,
+ * so what is worth testing is that it is a row host at all, and the case it
+ * exists for — a <table> that cannot be one, because a custom element written
+ * inside <tbody> is discarded by the parser. The widget goes around the
+ * table, and the template goes inside it.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { installWindow, mount } from "./helpers/window";
+installWindow();
+await import("../widgets/lb-list");
+const rows = (list) => ({ op: "rows", rows: list });
+describe("lb-list", () => {
+    it("repeats what the page wrote, once per tuple", () => {
+        const widget = mount(`<lb-list><ul><template lb-key="id"><li lb-cell="name"></li></template></ul></lb-list>`);
+        widget.acceptRows(rows([
+            { id: "1", name: "Ada" },
+            { id: "2", name: "Bab" },
+        ]));
+        assert.deepEqual([...widget.querySelectorAll("li")].map((li) => li.textContent), ["Ada", "Bab"]);
+    });
+    it("goes around a table it cannot be inside", () => {
+        // The reason this widget is not the <table> itself. Everything the hub
+        // needs still works: the template is inside <tbody>, where the content
+        // model already allows it, and the rows land there.
+        const widget = mount(`<lb-list><table><tbody>` +
+            `<template lb-key="id"><tr><td lb-cell="name"></td></tr></template>` +
+            `</tbody></table></lb-list>`);
+        widget.acceptRows(rows([{ id: "1", name: "Ada" }]));
+        const row = widget.querySelector("tbody tr");
+        assert.equal(row.textContent, "Ada");
+        assert.equal(widget.getAttribute("data-rows"), "1");
+    });
+    it("survives the parser dropping a widget written inside a tbody", () => {
+        // The failure this design avoids, stated as what the parser actually
+        // does: a lb-list inside <tbody> is not there afterwards.
+        const table = mount(`<table><tbody><lb-list><template lb-key="id"><tr></tr></template></lb-list></tbody></table>`);
+        assert.equal(table.querySelector("tbody lb-list"), null);
+    });
+});

package/dist/tests/lb-options.test.d.ts

@@ -0,0 +1,10 @@
+/**
+ * lb-options — see docs/testing.md, tier 4.
+ *
+ * The case that shows why placement belongs to the widget. The rows arrive
+ * flat and keyed; nothing on the wire knows about <optgroup>, and nothing
+ * needs to. Turning a repeated column value into an element is exactly the
+ * local knowledge a widget has and the hub does not.
+ */
+export {};
+//# sourceMappingURL=lb-options.test.d.ts.map

package/dist/tests/lb-options.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lb-options.test.d.ts","sourceRoot":"","sources":["../../tests/lb-options.test.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG"}