digital-garbageandClaude Sonnet 5.5
cd9959cb19
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
61 lines
2.9 KiB
JavaScript
61 lines
2.9 KiB
JavaScript
// A gallery keeps the tiles it has: only a tile whose item changed is rebuilt, and a selection change rebuilds nothing.
|
|
import test from "node:test";
|
|
import assert from "node:assert/strict";
|
|
import { setupDom, teardownDom } from "./_dom.js";
|
|
|
|
let composer;
|
|
test.before(async () => { setupDom(); ({ composer } = await import("../composer.js")); });
|
|
test.after(() => teardownDom());
|
|
|
|
const item = (id, extra = {}) => ({ id, label: id, thumb: `/t/${id}`, badge: "image", ...extra });
|
|
const cells = (g) => [...g.node.querySelectorAll(".cx-cell")];
|
|
|
|
for (const view of ["adaptive", "icons", "list"]) {
|
|
test(`${view}: setting the same items again keeps every tile, and a selection change rebuilds none`, () => {
|
|
const g = composer.gallery[view]({ items: [item("a"), item("b"), item("c")] });
|
|
document.body.append(g.node);
|
|
const first = [...g.node.querySelectorAll("button")];
|
|
g.setItems([item("a"), item("b"), item("c")]);
|
|
g.setValue(["b"]);
|
|
const again = [...g.node.querySelectorAll("button")];
|
|
assert.equal(again.length, 3);
|
|
again.forEach((n, i) => assert.equal(n, first[i], "the very same tile, so its picture is not fetched again"));
|
|
assert.deepEqual(again.map((n) => n.getAttribute("aria-selected")), ["false", "true", "false"]);
|
|
assert.ok(again[1].classList.contains("cx-on") && !again[0].classList.contains("cx-on"));
|
|
g.setValue([]);
|
|
assert.deepEqual([...g.node.querySelectorAll("button")].map((n) => n.getAttribute("aria-selected")), ["false", "false", "false"]);
|
|
g.node.remove();
|
|
});
|
|
}
|
|
|
|
test("a changed item rebuilds only its own tile, and a new order moves tiles instead of making new ones", () => {
|
|
const g = composer.gallery.adaptive({ items: [item("a"), item("b"), item("c")] });
|
|
document.body.append(g.node);
|
|
const [a, b, c] = cells(g);
|
|
g.setItems([item("a"), item("b", { flags: [{ text: "R2", title: "slot 2" }] }), item("c")]);
|
|
const [a2, b2, c2] = cells(g);
|
|
assert.equal(a2, a); assert.equal(c2, c);
|
|
assert.notEqual(b2, b, "the one whose flags changed");
|
|
assert.equal(b2.querySelector(".cx-cell-flag").textContent, "R2");
|
|
g.setItems([item("c"), item("a"), item("b", { flags: [{ text: "R2", title: "slot 2" }] })]);
|
|
assert.deepEqual(cells(g), [c, a, b2], "reordered, not rebuilt");
|
|
g.setItems([item("a")]);
|
|
assert.deepEqual(cells(g), [a], "a tile that is gone is gone");
|
|
g.setItems([]);
|
|
assert.equal(g.node.querySelectorAll(".cx-cell").length, 0);
|
|
assert.ok(g.node.querySelector(".cx-list-empty"));
|
|
g.node.remove();
|
|
});
|
|
|
|
test("a click still reaches the item after tiles were kept across redraws", () => {
|
|
const seen = [];
|
|
const g = composer.gallery.adaptive({ items: [item("a"), item("b")], onActivate: (it) => seen.push(it.id) });
|
|
document.body.append(g.node);
|
|
g.setItems([item("a"), item("b")]);
|
|
g.setValue(["a"]);
|
|
cells(g)[1].click();
|
|
cells(g)[0].click();
|
|
assert.deepEqual(seen, ["b", "a"]);
|
|
g.node.remove();
|
|
});
|