@schukai/monster 4.153.1 → 4.154.1

package/test/cases/dom/customelement-rebind-baseline.mjs

@@ -0,0 +1,323 @@
+"use strict";
+
+import * as chai from "chai";
+import { customElementUpdaterLinkSymbol } from "../../../source/dom/constants.mjs";
+import { getDocument } from "../../../source/dom/util.mjs";
+import { chaiDom } from "../../util/chai-dom.mjs";
+import { initJSDOM } from "../../util/jsdom.mjs";
+
+let expect = chai.expect;
+chai.use(chaiDom);
+
+/**
+ * Baseline for issue #575.
+ *
+ * Before the base class starts disposing updaters on disconnect and rebinding
+ * on reconnect, this file pins the updater contract on a live element. Every
+ * assertion passes today, and the whole contract is checked twice: once on a
+ * freshly inserted element, and once after the element has been removed and
+ * appended again. The second pass is what proves a rebind actually restores
+ * rendering, event processing and pipe callbacks.
+ */
+describe("CustomElement rebind baseline issue #575", function () {
+	let CustomElement;
+	let registerCustomElement;
+	let updaterTransformerMethodsSymbol;
+	let document;
+
+	const TAG = "monster-rebind-baseline-575";
+	const CHILD_TAG = "monster-rebind-baseline-child-575";
+
+	const html = `
+    <div id="test1"></div>
+`;
+
+	before(function (done) {
+		initJSDOM({})
+			.then(() => import("../../../source/dom/customelement.mjs"))
+			.then((m) => {
+				try {
+					CustomElement = m["CustomElement"];
+					registerCustomElement = m["registerCustomElement"];
+					updaterTransformerMethodsSymbol =
+						m["updaterTransformerMethodsSymbol"];
+					document = getDocument();
+
+					if (!customElements.get(CHILD_TAG)) {
+						class RebindBaselineChild extends CustomElement {
+							static getTag() {
+								return CHILD_TAG;
+							}
+
+							get defaults() {
+								return Object.assign({}, super.defaults, {
+									label: "child-initial",
+									templates: {
+										main: '<span id="child-label" data-monster-replace="path:label"></span>',
+									},
+								});
+							}
+						}
+
+						registerCustomElement(RebindBaselineChild);
+					}
+
+					if (!customElements.get(TAG)) {
+						class RebindBaseline extends CustomElement {
+							static getTag() {
+								return TAG;
+							}
+
+							get defaults() {
+								return Object.assign({}, super.defaults, {
+									eventProcessing: true,
+									headline: "start",
+									shout: "quiet",
+									cssClass: "alpha",
+									inputValue: "typed",
+									checkedFlag: false,
+									patchText: "patch-start",
+									keyed: [
+										{ id: "k1", label: "first" },
+										{ id: "k2", label: "second" },
+									],
+									items: [{ name: "item-a" }, { name: "item-b" }],
+									templates: {
+										main: `
+                                            <template id="rebind-item-575">
+                                                <li data-monster-replace="path:rebind-item-575.name"></li>
+                                            </template>
+                                            <h1 id="headline" data-monster-replace="path:headline"></h1>
+                                            <span id="shouted" data-monster-replace="path:shout | call:shout"></span>
+                                            <div id="classed" data-monster-attributes="class path:cssClass"></div>
+                                            <input id="bound" type="text" data-monster-bind="path:inputValue" data-monster-attributes="value path:inputValue">
+                                            <input id="flag" type="checkbox" data-monster-properties="checked path:checkedFlag">
+                                            <div id="patched" data-monster-patch="path:patchText"></div>
+                                            <div id="keyed" data-monster-patch="path:keyed" data-monster-patch-key="path:id" data-monster-patch-render="path:label"></div>
+                                            <ul id="inserted" data-monster-insert="rebind-item-575 path:items"></ul>
+                                            <select id="native-select"><option>one</option></select>
+                                            <${CHILD_TAG} id="child"></${CHILD_TAG}>
+                                        `,
+									},
+								});
+							}
+
+							[updaterTransformerMethodsSymbol]() {
+								return {
+									shout: (value) => String(value).toUpperCase(),
+								};
+							}
+						}
+
+						registerCustomElement(RebindBaseline);
+					}
+
+					done();
+				} catch (e) {
+					done(e);
+				}
+			})
+			.catch(done);
+	});
+
+	let element;
+
+	beforeEach(async function () {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = html;
+
+		element = document.createElement(TAG);
+		document.getElementById("test1").appendChild(element);
+		await settle();
+	});
+
+	afterEach(function () {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = "";
+	});
+
+	function settle(ms = 30) {
+		return new Promise((resolve) => setTimeout(resolve, ms));
+	}
+
+	function query(id) {
+		return element.shadowRoot.querySelector(`#${id}`);
+	}
+
+	async function reconnect() {
+		const parent = element.parentNode;
+		element.remove();
+		await settle();
+		parent.appendChild(element);
+		await settle();
+	}
+
+	/**
+	 * The whole updater contract. Called once on a fresh element and once after a
+	 * reconnect, so both runs assert exactly the same behaviour.
+	 */
+	async function assertUpdaterContract(label) {
+		const because = ` (${label})`;
+
+		expect(element.hasAttribute("data-monster-error"), `no error${because}`).to
+			.be.false;
+
+		// data-monster-replace
+		element.setOption("headline", `headline-${label}`);
+		await settle();
+		expect(query("headline").textContent, `replace${because}`).to.equal(
+			`headline-${label}`,
+		);
+
+		// pipe callback from updaterTransformerMethodsSymbol
+		element.setOption("shout", `shout-${label}`);
+		await settle();
+		expect(query("shouted").textContent, `pipe${because}`).to.equal(
+			`shout-${label}`.toUpperCase(),
+		);
+
+		// data-monster-attributes
+		element.setOption("cssClass", `class-${label}`);
+		await settle();
+		expect(query("classed").getAttribute("class"), `attributes${because}`).to.
+			equal(`class-${label}`);
+
+		// data-monster-properties
+		element.setOption("checkedFlag", true);
+		await settle();
+		expect(query("flag").checked, `properties on${because}`).to.equal(true);
+		element.setOption("checkedFlag", false);
+		await settle();
+		expect(query("flag").checked, `properties off${because}`).to.equal(false);
+
+		// data-monster-patch
+		element.setOption("patchText", `patch-${label}`);
+		await settle();
+		expect(query("patched").textContent, `patch${because}`).to.equal(
+			`patch-${label}`,
+		);
+
+		// keyed patch renders one node per key and keeps node identity for a key
+		// whose data did not change
+		const keyedNodes = [...query("keyed").childNodes];
+		expect(keyedNodes.length, `keyed count${because}`).to.equal(2);
+		const firstKeyedNode = keyedNodes[0];
+		const firstLabel = element.getOption("keyed.0.label");
+
+		element.setOption("keyed.1.label", `second-${label}`);
+		await settle();
+
+		expect(
+			[...query("keyed").childNodes][0],
+			`keyed identity${because}`,
+		).to.equal(firstKeyedNode);
+		expect(
+			[...query("keyed").childNodes].map((node) => node.textContent),
+			`keyed render${because}`,
+		).to.deep.equal([firstLabel, `second-${label}`]);
+
+		// data-monster-insert
+		expect(query("inserted").children.length, `insert${because}`).to.equal(2);
+		element.setOption("items.0.name", `item-${label}`);
+		await settle();
+		expect(query("inserted").textContent, `insert update${because}`).to.contain(
+			`item-${label}`,
+		);
+
+		// nested component renders its own options
+		const child = query("child");
+		expect(child, `child present${because}`).to.not.equal(null);
+		child.setOption("label", `child-${label}`);
+		await settle();
+		expect(
+			child.shadowRoot.querySelector("#child-label").textContent,
+			`child update${because}`,
+		).to.equal(`child-${label}`);
+
+		// event processing writes a typed value into the updater subject, which is
+		// the options snapshot, not the component options. The one way sync means
+		// getOption() never sees user input, so the snapshot is the only place the
+		// value lives and a rebind must not discard it.
+		const bound = query("bound");
+		bound.value = `typed-${label}`;
+		bound.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+		await settle(150);
+		expect(
+			element.getInternalUpdateCloneData()?.inputValue,
+			`bind writeback${because}`,
+		).to.equal(`typed-${label}`);
+
+		// disabled propagation reaches native controls inside the shadow root
+		element.setOption("disabled", true);
+		await settle();
+		expect(
+			query("native-select").hasAttribute("disabled"),
+			`disabled${because}`,
+		).to.be.true;
+		element.setOption("disabled", false);
+		await settle();
+		expect(
+			query("native-select").hasAttribute("disabled"),
+			`disabled off${because}`,
+		).to.be.false;
+	}
+
+	it("should honor the whole updater contract on a fresh element", async function () {
+		await assertUpdaterContract("fresh");
+	});
+
+	it("should honor the whole updater contract again after a reconnect", async function () {
+		await assertUpdaterContract("before-reconnect");
+		await reconnect();
+		await assertUpdaterContract("after-reconnect");
+	});
+
+	it("should keep the shadow root and its nodes across a reconnect", async function () {
+		const shadowRoot = element.shadowRoot;
+		const headline = query("headline");
+		const childCount = shadowRoot.childNodes.length;
+
+		await reconnect();
+
+		expect(element.shadowRoot).to.equal(shadowRoot);
+		expect(query("headline")).to.equal(headline);
+		expect(element.shadowRoot.childNodes.length).to.equal(childCount);
+		expect(element.children.length).to.equal(0);
+		expect(element.hasAttribute("data-monster-error")).to.be.false;
+	});
+
+	it("should keep option object identity across a reconnect", async function () {
+		const items = element.getOption("items");
+		const keyed = element.getOption("keyed");
+
+		element.setOption("headline", "before");
+		await settle();
+
+		await reconnect();
+
+		expect(element.getOption("items")).to.equal(items);
+		expect(element.getOption("keyed")).to.equal(keyed);
+		expect(element.getOption("headline")).to.equal("before");
+	});
+
+	it("should keep exactly one updater group linked across a reconnect", async function () {
+		function countUpdaters() {
+			let count = 0;
+			for (const group of element[customElementUpdaterLinkSymbol] ?? []) {
+				for (const updater of group) {
+					if (typeof updater?.isDisposed === "function") {
+						count++;
+					}
+				}
+			}
+			return count;
+		}
+
+		const before = countUpdaters();
+		expect(before).to.be.greaterThan(0);
+
+		await reconnect();
+
+		expect(countUpdaters()).to.equal(before);
+	});
+});