@loadbare/app 0.4.0

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

@@ -0,0 +1,121 @@
+/**
+ * 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.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { ATTR_ACTION } from "../core/lb-constants";
+import { change, installWindow, mount, requests } from "./helpers/window";
+installWindow();
+await import("../widgets/lb-options");
+const ROW = `<option lb-cell="name"></option>`;
+/** A lb-options with the row template a page author would write. */
+function options(template) {
+    return mount(`<lb-options ${ATTR_ACTION}="pick"><label><select>${template}</select></label></lb-options>`);
+}
+const flat = `<template lb-key="id">${ROW}</template>`;
+const grouped = `<template lb-key="id" lb-group="team">${ROW}</template>`;
+const rows = (list) => ({ op: "rows", rows: list });
+const patch = (change) => ({ op: "patch", ...change });
+/** Every option showing, as label and value. */
+function shown(widget) {
+    return [...widget.querySelectorAll("option")].map((o) => [
+        o.textContent,
+        o.value,
+    ]);
+}
+/** The groups showing, as label and the options in each. */
+function groups(widget) {
+    return [...widget.querySelectorAll("optgroup")].map((g) => [
+        g.label,
+        [...g.querySelectorAll("option")].map((o) => o.textContent),
+    ]);
+}
+describe("lb-options without grouping", () => {
+    it("lands one option per tuple, in the order sent", () => {
+        const widget = options(flat);
+        widget.acceptRows(rows([
+            { id: "1", name: "Ada" },
+            { id: "2", name: "Bab" },
+        ]));
+        assert.deepEqual(shown(widget), [
+            ["Ada", "1"],
+            ["Bab", "2"],
+        ]);
+    });
+    it("makes the key the value, so the page says it once", () => {
+        // The identity of the row is the value of the option.
+        const widget = options(flat);
+        widget.acceptRows(rows([{ id: "7", name: "Ada" }]));
+        const option = widget.querySelector("option");
+        assert.equal(option.value, "7");
+        assert.equal(option.getAttribute("lb-key"), "7");
+    });
+    it("puts the options inside the select, not beside it", () => {
+        const widget = options(flat);
+        widget.acceptRows(rows([{ id: "1", name: "Ada" }]));
+        assert.equal(widget.querySelector("option").parentElement.localName, "select");
+    });
+});
+describe("lb-options grouping", () => {
+    it("builds one optgroup per distinct value of the grouping column", () => {
+        const widget = options(grouped);
+        widget.acceptRows(rows([
+            { id: "1", name: "Ada", team: "Core" },
+            { id: "2", name: "Bab", team: "Ops" },
+            { id: "3", name: "Cai", team: "Core" },
+        ]));
+        assert.deepEqual(groups(widget), [
+            ["Core", ["Ada", "Cai"]],
+            ["Ops", ["Bab"]],
+        ]);
+    });
+    it("removes a group when its last row goes", () => {
+        // A group is derived, so it goes when the thing it was derived from does.
+        const widget = options(grouped);
+        widget.acceptRows(rows([
+            { id: "1", name: "Ada", team: "Core" },
+            { id: "2", name: "Bab", team: "Ops" },
+        ]));
+        widget.acceptRows(rows([{ id: "1", name: "Ada", team: "Core" }]));
+        assert.deepEqual(groups(widget), [["Core", ["Ada"]]]);
+    });
+    it("removes a group emptied by a patch", () => {
+        const widget = options(grouped);
+        widget.acceptRows(rows([
+            { id: "1", name: "Ada", team: "Core" },
+            { id: "2", name: "Bab", team: "Ops" },
+        ]));
+        widget.acceptRows(patch({ drop: ["2"] }));
+        assert.deepEqual(groups(widget), [["Core", ["Ada"]]]);
+    });
+    it("groups a tuple with no value for the column under the empty label", () => {
+        const widget = options(grouped);
+        widget.acceptRows(rows([{ id: "1", name: "Ada" }]));
+        assert.deepEqual(groups(widget), [["", ["Ada"]]]);
+    });
+    it("keeps the template as the marker the groups sit in front of", () => {
+        const widget = options(grouped);
+        widget.acceptRows(rows([{ id: "1", name: "Ada", team: "Core" }]));
+        const select = widget.querySelector("select");
+        assert.equal(select.lastElementChild.localName, "template");
+    });
+});
+describe("lb-options sending an action", () => {
+    it("sends the declared action carrying the choice", () => {
+        const seen = requests();
+        const widget = options(flat);
+        widget.acceptRows(rows([
+            { id: "1", name: "Ada" },
+            { id: "2", name: "Bab" },
+        ]));
+        const select = widget.querySelector("select");
+        select.value = "2";
+        change(select);
+        assert.deepEqual(seen, [{ op: "action", name: "pick", value: "2" }]);
+    });
+});

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

@@ -0,0 +1,14 @@
+/**
+ * lb-picker — see docs/testing.md, tier 4.
+ *
+ * The same select as lb-options, with the row template supplied by the
+ * definition instead of by the page. The behavior is inherited whole, because
+ * it is the same behavior; a distinct class exists only because
+ * customElements.define requires one constructor per name.
+ *
+ * So what is worth testing is exactly that: that nothing was written twice,
+ * and that the expanded definition drives the inherited machinery. The
+ * template below is what widgets/lb-picker.html expands to.
+ */
+export {};
+//# sourceMappingURL=lb-picker.test.d.ts.map

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

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

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

@@ -0,0 +1,59 @@
+/**
+ * lb-picker — see docs/testing.md, tier 4.
+ *
+ * The same select as lb-options, with the row template supplied by the
+ * definition instead of by the page. The behavior is inherited whole, because
+ * it is the same behavior; a distinct class exists only because
+ * customElements.define requires one constructor per name.
+ *
+ * So what is worth testing is exactly that: that nothing was written twice,
+ * and that the expanded definition drives the inherited machinery. The
+ * template below is what widgets/lb-picker.html expands to.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { ATTR_ACTION } from "../core/lb-constants";
+import { change, installWindow, mount, requests } from "./helpers/window";
+installWindow();
+const { LbOptions } = await import("../widgets/lb-options");
+await import("../widgets/lb-picker");
+/** lb-picker as expansion leaves it, given exp-key, exp-cell and exp-group. */
+function picker() {
+    return mount(`<lb-picker ${ATTR_ACTION}="pick"><label>Member:` +
+        `<select><template lb-key="id" lb-group="team">` +
+        `<option lb-cell="name"></option>` +
+        `</template></select></label></lb-picker>`);
+}
+const rows = (list) => ({
+    op: "rows",
+    rows: list,
+});
+describe("lb-picker", () => {
+    it("is a lb-options", () => {
+        assert.ok(picker() instanceof LbOptions);
+    });
+    it("lands rows in groups, from the template its definition supplied", () => {
+        const widget = picker();
+        widget.acceptRows(rows([
+            { id: "1", name: "Ada", team: "Core" },
+            { id: "2", name: "Bab", team: "Ops" },
+        ]));
+        assert.deepEqual([...widget.querySelectorAll("optgroup")].map((g) => g.label), ["Core", "Ops"]);
+        assert.deepEqual([...widget.querySelectorAll("option")].map((o) => [
+            o.textContent,
+            o.value,
+        ]), [
+            ["Ada", "1"],
+            ["Bab", "2"],
+        ]);
+    });
+    it("sends the declared action on a change", () => {
+        const seen = requests();
+        const widget = picker();
+        widget.acceptRows(rows([{ id: "1", name: "Ada", team: "Core" }]));
+        const select = widget.querySelector("select");
+        select.value = "1";
+        change(select);
+        assert.deepEqual(seen, [{ op: "action", name: "pick", value: "1" }]);
+    });
+});

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

@@ -0,0 +1,12 @@
+/**
+ * The row machinery — see docs/testing.md, tier 3.
+ *
+ * This is the most intricate code in the framework and the most likely to
+ * break in ways nobody notices, because what it gets wrong is a row in the
+ * wrong place rather than an exception.
+ *
+ * The last describe holds the two properties. Reconciliation's contract is
+ * convergence, and two properties state it better than twenty examples.
+ */
+export {};
+//# sourceMappingURL=lb-rows.test.d.ts.map

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

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

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

@@ -0,0 +1,336 @@
+/**
+ * The row machinery — see docs/testing.md, tier 3.
+ *
+ * This is the most intricate code in the framework and the most likely to
+ * break in ways nobody notices, because what it gets wrong is a row in the
+ * wrong place rather than an exception.
+ *
+ * The last describe holds the two properties. Reconciliation's contract is
+ * convergence, and two properties state it better than twenty examples.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { applyRows } from "../hub/lb-rows";
+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.
+ */
+function list(template = `<template lb-key="id"><p><span lb-cell="name"></span></p></template>`) {
+    return body(`<lb-list>${template}</lb-list>`).firstElementChild;
+}
+/** 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"));
+}
+/** 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());
+}
+const rows = (list) => ({ op: "rows", rows: list });
+const patch = (change) => ({ op: "patch", ...change });
+// --- The whole set -------------------------------------------------------
+describe("a rows result", () => {
+    it("clones the template once per tuple and fills it", () => {
+        const scope = list();
+        applyRows(scope, rows([
+            { id: "1", name: "Ada" },
+            { id: "2", name: "Bab" },
+        ]));
+        assert.deepEqual(keys(scope), ["1", "2"]);
+        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.
+        const scope = list();
+        applyRows(scope, rows([{ id: "7", name: "Ada" }]));
+        const row = scope.querySelector("p");
+        assert.equal(row.getAttribute("lb-key"), "7");
+    });
+    it("leaves the template where it was, after the rows", () => {
+        const scope = list();
+        applyRows(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([
+            { id: "1", name: "Ada" },
+            { id: "2", name: "Bab" },
+        ]));
+        applyRows(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([
+            { id: "1", name: "Ada" },
+            { id: "2", name: "Bab" },
+        ]));
+        applyRows(scope, rows([
+            { id: "2", name: "Bab" },
+            { id: "1", name: "Ada" },
+        ]));
+        assert.deepEqual(keys(scope), ["2", "1"]);
+    });
+    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" }]));
+        const before = scope.querySelector("p");
+        applyRows(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([]));
+        assert.deepEqual(keys(scope), []);
+        assert.equal(scope.querySelector("template"), scope.firstElementChild);
+    });
+});
+// --- Only what changed ---------------------------------------------------
+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" }] }));
+        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" }] }));
+        assert.deepEqual(shown(scope), ["Grace"]);
+    });
+    it("drops a row it names", () => {
+        const scope = list();
+        applyRows(scope, rows([
+            { id: "1", name: "Ada" },
+            { id: "2", name: "Bab" },
+        ]));
+        applyRows(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([
+            { id: "1", name: "Ada" },
+            { id: "2", name: "Bab" },
+            { id: "3", name: "Cai" },
+        ]));
+        applyRows(scope, patch({ rows: [{ id: "2", name: "Grace" }] }));
+        assert.deepEqual(keys(scope), ["1", "2", "3"]);
+        assert.deepEqual(shown(scope), ["Ada", "Grace", "Cai"]);
+    });
+    it("does not re-place a row that already exists", () => {
+        // Today's behavior, and exactly the gap NEEDED-FOR-1.0 names: a row whose
+        // 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([
+            { id: "1", name: "Ada" },
+            { id: "2", name: "Bab" },
+        ]), place);
+        placed.length = 0;
+        applyRows(scope, patch({ rows: [{ id: "1", name: "Grace" }] }), place);
+        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);
+        placed.length = 0;
+        applyRows(scope, patch({ rows: [{ id: "2", name: "Bab" }] }), place);
+        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"] })));
+        assert.deepEqual(keys(scope), ["1"]);
+    });
+    it("naming nothing changes nothing", () => {
+        const scope = list();
+        applyRows(scope, rows([{ id: "1", name: "Ada" }]));
+        const before = scope.innerHTML;
+        applyRows(scope, patch({}));
+        assert.equal(scope.innerHTML, before);
+    });
+});
+// --- Placement -----------------------------------------------------------
+describe("placement", () => {
+    it("hands the widget the row, the tuple 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);
+        assert.deepEqual(seen, [["p", { id: "1", name: "Ada" }, "template"]]);
+    });
+    it("fills the row before the widget places it", () => {
+        // The attributes are already there when the row upgrades, which is the
+        // same thing that makes hydration and refresh one operation everywhere
+        // 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);
+        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);
+        assert.equal(connected, false, "the row arrives detached");
+    });
+});
+// --- How many are showing ------------------------------------------------
+describe("the row count", () => {
+    it("is stamped on the widget", () => {
+        // The one conditional a page cannot be sent: the server answers with rows
+        // and says nothing about how many survived reconciliation. It is here so
+        // that "no members yet" is a stylesheet rule rather than code in every
+        // list widget.
+        const scope = list();
+        applyRows(scope, rows([
+            { id: "1", name: "Ada" },
+            { id: "2", name: "Bab" },
+        ]));
+        assert.equal(scope.getAttribute("data-rows"), "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");
+    });
+    it("reports the same fact the same way after a set and after a patch", () => {
+        const viaRows = list();
+        applyRows(viaRows, rows([
+            { id: "1", name: "Ada" },
+            { id: "2", name: "Bab" },
+        ]));
+        const viaPatch = list();
+        applyRows(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"));
+    });
+});
+// --- 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/);
+        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" }])));
+        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);
+    });
+    it("when a tuple has no key cell, and lands its siblings anyway", async () => {
+        const scope = list();
+        const { error } = await captured(() => applyRows(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.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
+        // 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" }])));
+        assert.deepEqual(keys(scope), ["1"]);
+    });
+});
+// --- The properties ------------------------------------------------------
+describe("reconciliation converges", () => {
+    const SET = [
+        { id: "1", name: "Ada" },
+        { id: "2", name: "Bab" },
+        { id: "3", name: "Cai" },
+    ];
+    it("so applying the same set twice is applying it once", () => {
+        const once = list();
+        applyRows(once, rows(SET));
+        const twice = list();
+        applyRows(twice, rows(SET));
+        applyRows(twice, rows(SET));
+        assert.equal(twice.innerHTML, once.innerHTML);
+        assert.equal(twice.getAttribute("data-rows"), once.getAttribute("data-rows"));
+    });
+    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
+        // it forgot to remove, an order it kept from before, a count it stamped
+        // from the wrong branch — fails here and nowhere else.
+        const histories = [
+            [],
+            [rows([])],
+            [rows([{ id: "9", name: "Zed" }])],
+            [rows(SET.slice().reverse())],
+            [
+                rows([{ id: "1", name: "Wrong" }]),
+                patch({ rows: [{ id: "5", name: "Eve" }] }),
+            ],
+            [rows(SET), patch({ drop: ["2"] })],
+            [
+                rows(SET),
+                patch({ rows: [{ id: "3", name: "Changed" }] }),
+                patch({ drop: ["1"] }),
+            ],
+            [patch({ rows: [{ id: "4", name: "Dot" }] }), patch({ drop: ["4"] })],
+        ];
+        const fresh = list();
+        applyRows(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));
+            assert.equal(scope.innerHTML, expected, `history ${index} did not converge`);
+            assert.equal(scope.getAttribute("data-rows"), String(SET.length));
+        }
+    });
+});

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

@@ -0,0 +1,9 @@
+/**
+ * lb-select — see docs/testing.md, tier 4.
+ *
+ * The request vocabulary and the addressing vocabulary running in both
+ * directions on one widget: it receives its value like any other cell, and on
+ * change it sends the action the page declared for it.
+ */
+export {};
+//# sourceMappingURL=lb-select.test.d.ts.map

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

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

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

@@ -0,0 +1,71 @@
+/**
+ * lb-select — see docs/testing.md, tier 4.
+ *
+ * The request vocabulary and the addressing vocabulary running in both
+ * directions on one widget: it receives its value like any other cell, and on
+ * change it sends the action the page declared for it.
+ */
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { ATTR_ACTION, ATTR_VALUE } from "../core/lb-constants";
+import { captured } from "./helpers/console";
+import { change, installWindow, mount, requests } from "./helpers/window";
+installWindow();
+await import("../widgets/lb-select");
+const OPTIONS = `<option value="lead">Lead</option><option value="staff">Staff</option>`;
+describe("lb-select receiving a value", () => {
+    it("forwards it to the select it owns", () => {
+        const widget = mount(`<lb-select><select>${OPTIONS}</select></lb-select>`);
+        widget.setAttribute(ATTR_VALUE, "staff");
+        assert.equal(widget.querySelector("select").value, "staff");
+    });
+    it("takes the value it was already carrying when it upgraded", () => {
+        const widget = mount(`<lb-select ${ATTR_VALUE}="staff"><select>${OPTIONS}</select></lb-select>`);
+        assert.equal(widget.querySelector("select").value, "staff");
+    });
+    it("reports when there is no select to receive it", async () => {
+        const widget = mount(`<lb-select></lb-select>`);
+        const { error } = await captured(() => widget.setAttribute(ATTR_VALUE, "staff"));
+        assert.match(error.join("\n"), /lb-select: no <select> to receive/);
+    });
+});
+describe("lb-select sending an action", () => {
+    it("sends the declared action carrying the choice", () => {
+        // The choice is the interaction, so this is the case where an action
+        // carries a value. The server still decides what that choice means.
+        const seen = requests();
+        const widget = mount(`<lb-select ${ATTR_ACTION}="setRole"><select>${OPTIONS}</select></lb-select>`);
+        const select = widget.querySelector("select");
+        select.value = "staff";
+        change(select);
+        assert.deepEqual(seen, [{ op: "action", name: "setRole", value: "staff" }]);
+    });
+    it("carries no argument list beyond that one value", () => {
+        // What keeps this from being an RPC endpoint: a name the page declared,
+        // and at most the one value a control has.
+        const seen = requests();
+        const widget = mount(`<lb-select ${ATTR_ACTION}="setRole"><select>${OPTIONS}</select></lb-select>`);
+        change(widget.querySelector("select"));
+        assert.deepEqual(Object.keys(seen[0]), ["op", "name", "value"]);
+    });
+    it("sends an event that bubbles, because the hub is an ancestor", () => {
+        const seen = requests();
+        const widget = mount(`<lb-select ${ATTR_ACTION}="setRole"><select>${OPTIONS}</select></lb-select>`);
+        change(widget.querySelector("select"));
+        assert.equal(seen.length, 1, "the request reached the body");
+    });
+    it("reports a change it has no action for, and sends nothing", async () => {
+        const seen = requests();
+        const widget = mount(`<lb-select><select>${OPTIONS}</select></lb-select>`);
+        const { error } = await captured(() => change(widget.querySelector("select")));
+        assert.match(error.join("\n"), /lb-select: no lb-action/);
+        assert.deepEqual(seen, []);
+    });
+    it("reports a change with no select, and sends nothing", async () => {
+        const seen = requests();
+        const widget = mount(`<lb-select ${ATTR_ACTION}="setRole"></lb-select>`);
+        const { error } = await captured(() => change(widget));
+        assert.match(error.join("\n"), /lb-select: change with no <select>/);
+        assert.deepEqual(seen, []);
+    });
+});

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

@@ -0,0 +1,9 @@
+/**
+ * The engine — see docs/testing.md, tier 2.
+ *
+ * `createHub` takes a plain object and returns an object. Nothing in
+ * server/lb-server.ts opens a socket or knows what a request is, so every
+ * fixture here is a counting stub and the whole tier runs in node.
+ */
+export {};
+//# sourceMappingURL=lb-server.test.d.ts.map

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

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