@schukai/monster 4.153.0 → 4.154.0

package/test/cases/dom/customelement-teardown.mjs

@@ -0,0 +1,408 @@
+"use strict";
+
+import * as chai from "chai";
+import { hasObjectLink } from "../../../source/dom/attributes.mjs";
+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);
+
+/**
+ * Regressions for issue #575.
+ *
+ * The base class allocated four MutationObservers, a coalescing timer and one
+ * Updater per child node, and released none of them on disconnect. These tests
+ * describe the released state and the rebind that has to restore it. The
+ * companion file customelement-rebind-baseline.mjs pins what must not break.
+ */
+describe("CustomElement teardown issue #575", function () {
+	let CustomElement;
+	let registerCustomElement;
+	let document;
+
+	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"];
+					document = getDocument();
+					done();
+				} catch (e) {
+					done(e);
+				}
+			})
+			.catch(done);
+	});
+
+	beforeEach(function () {
+		document.getElementById("mocks").innerHTML = html;
+	});
+
+	afterEach(function () {
+		document.getElementById("mocks").innerHTML = "";
+	});
+
+	function settle(ms = 30) {
+		return new Promise((resolve) => setTimeout(resolve, ms));
+	}
+
+	function define(tag, build) {
+		if (!customElements.get(tag)) {
+			registerCustomElement(build(tag));
+		}
+	}
+
+	function linkedUpdaters(element) {
+		const found = [];
+		for (const group of element[customElementUpdaterLinkSymbol] ?? []) {
+			for (const updater of group) {
+				found.push(updater);
+			}
+		}
+		return found;
+	}
+
+	describe("observers are released while disconnected", function () {
+		const TAG = "monster-teardown-attribute-575";
+
+		before(function () {
+			define(TAG, (tag) => {
+				return class extends CustomElement {
+					static getTag() {
+						return tag;
+					}
+
+					get defaults() {
+						return Object.assign({}, super.defaults, {
+							headline: "initial",
+							templates: {
+								main: '<span id="headline" data-monster-replace="path:headline"></span>',
+							},
+						});
+					}
+				};
+			});
+		});
+
+		it("should not apply an option attribute change while disconnected", async function () {
+			const element = document.createElement(TAG);
+			document.getElementById("test1").appendChild(element);
+			await settle();
+
+			expect(element.getOption("headline")).to.equal("initial");
+
+			element.remove();
+			await settle();
+
+			element.setAttribute("data-monster-option-headline", "while-detached");
+			await settle();
+
+			expect(element.getOption("headline")).to.equal("initial");
+		});
+
+		it("should apply option attributes again after reconnecting", async function () {
+			const element = document.createElement(TAG);
+			const parent = document.getElementById("test1");
+			parent.appendChild(element);
+			await settle();
+
+			element.remove();
+			await settle();
+			element.setAttribute("data-monster-option-headline", "while-detached");
+			await settle();
+
+			parent.appendChild(element);
+			await settle();
+
+			// the attribute set while detached is picked up by the rebind
+			expect(element.getOption("headline")).to.equal("while-detached");
+			expect(element.shadowRoot.querySelector("#headline").textContent).to.equal(
+				"while-detached",
+			);
+
+			// and live attribute changes work again
+			element.setAttribute("data-monster-option-headline", "after-reconnect");
+			await settle();
+
+			expect(element.getOption("headline")).to.equal("after-reconnect");
+			expect(element.shadowRoot.querySelector("#headline").textContent).to.equal(
+				"after-reconnect",
+			);
+		});
+	});
+
+	describe("updaters are disposed on disconnect", function () {
+		const TAG = "monster-teardown-updater-575";
+
+		before(function () {
+			define(TAG, (tag) => {
+				return class extends CustomElement {
+					static getTag() {
+						return tag;
+					}
+
+					get defaults() {
+						return Object.assign({}, super.defaults, {
+							value: "a",
+							templates: {
+								main: '<span id="value" data-monster-replace="path:value"></span>',
+							},
+						});
+					}
+				};
+			});
+		});
+
+		it("should dispose every linked updater and drop the object link", async function () {
+			const element = document.createElement(TAG);
+			document.getElementById("test1").appendChild(element);
+			await settle();
+
+			const updaters = linkedUpdaters(element);
+			expect(updaters.length).to.be.greaterThan(0);
+			for (const updater of updaters) {
+				expect(updater.isDisposed()).to.be.false;
+			}
+
+			element.remove();
+			await settle();
+
+			for (const updater of updaters) {
+				expect(updater.isDisposed()).to.be.true;
+			}
+			expect(hasObjectLink(element, customElementUpdaterLinkSymbol)).to.be.false;
+		});
+
+		it("should link fresh, working updaters after reconnecting", async function () {
+			const element = document.createElement(TAG);
+			const parent = document.getElementById("test1");
+			parent.appendChild(element);
+			await settle();
+
+			const before = linkedUpdaters(element);
+
+			element.remove();
+			await settle();
+			parent.appendChild(element);
+			await settle();
+
+			const after = linkedUpdaters(element);
+			expect(after.length).to.equal(before.length);
+			for (const updater of after) {
+				expect(updater.isDisposed()).to.be.false;
+			}
+			for (const updater of before) {
+				expect(after).to.not.include(updater);
+			}
+
+			element.setOption("value", "b");
+			await settle();
+			expect(element.shadowRoot.querySelector("#value").textContent).to.equal(
+				"b",
+			);
+		});
+	});
+
+	describe("registerTeardown", function () {
+		const TAG = "monster-teardown-registry-575";
+
+		before(function () {
+			define(TAG, (tag) => {
+				return class extends CustomElement {
+					static getTag() {
+						return tag;
+					}
+
+					get defaults() {
+						return Object.assign({}, super.defaults, {
+							templates: { main: "<span>registry</span>" },
+						});
+					}
+				};
+			});
+		});
+
+		it("should run a registered teardown once per disconnect", async function () {
+			const element = document.createElement(TAG);
+			const parent = document.getElementById("test1");
+			parent.appendChild(element);
+			await settle();
+
+			let calls = 0;
+			element.registerTeardown(() => {
+				calls++;
+			});
+
+			expect(calls).to.equal(0);
+
+			element.remove();
+			await settle();
+			expect(calls).to.equal(1);
+
+			parent.appendChild(element);
+			await settle();
+			expect(calls).to.equal(1);
+
+			element.remove();
+			await settle();
+			expect(calls).to.equal(1);
+		});
+
+		it("should keep tearing down when one callback throws", async function () {
+			const element = document.createElement(TAG);
+			document.getElementById("test1").appendChild(element);
+			await settle();
+
+			let second = 0;
+			element.registerTeardown(() => {
+				throw new Error("teardown failure");
+			});
+			element.registerTeardown(() => {
+				second++;
+			});
+
+			element.remove();
+			await settle();
+
+			expect(second).to.equal(1);
+			expect(hasObjectLink(element, customElementUpdaterLinkSymbol)).to.be.false;
+		});
+	});
+
+	describe("one time assembly steps", function () {
+		const TAG = "monster-teardown-once-575";
+
+		before(function () {
+			define(TAG, (tag) => {
+				return class extends CustomElement {
+					static getTag() {
+						return tag;
+					}
+
+					get defaults() {
+						return Object.assign({}, super.defaults, {
+							templates: { main: "<span>once</span>" },
+						});
+					}
+
+					initCustomControlCallback() {
+						this.initCalls = (this.initCalls || 0) + 1;
+					}
+				};
+			});
+		});
+
+		it("should run the init callback exactly once across two connect cycles", async function () {
+			const element = document.createElement(TAG);
+			const parent = document.getElementById("test1");
+			parent.appendChild(element);
+			await settle();
+
+			expect(element.initCalls).to.equal(1);
+
+			element.remove();
+			await settle();
+			parent.appendChild(element);
+			await settle();
+
+			expect(element.initCalls).to.equal(1);
+			expect(element.hasAttribute("data-monster-error")).to.be.false;
+		});
+	});
+
+	describe("derived classes without an updater link", function () {
+
+		before(async function () {
+			await import("../../../source/components/form/select-link.mjs");
+		});
+
+		// monster-select-link renders no updater bound markup, so it never had an
+		// object link and used to be reassembled on every connect. It also did not
+		// call super.disconnectedCallback() at all.
+		it("should run the base teardown for monster-select-link", async function () {
+			const element = document.createElement("monster-select-link");
+			document.getElementById("test1").appendChild(element);
+			await settle();
+
+			let teardownCalls = 0;
+			element.registerTeardown(() => {
+				teardownCalls++;
+			});
+
+			element.remove();
+			await settle();
+
+			expect(teardownCalls).to.equal(1);
+		});
+
+		it("should survive a disconnect and reconnect cycle", async function () {
+			const parent = document.getElementById("test1");
+
+			const element = document.createElement("monster-select-link");
+			element.setAttribute("data-monster-option-param", "id");
+			parent.appendChild(element);
+			await settle();
+
+			expect(element.hasAttribute("data-monster-error")).to.be.false;
+
+			element.remove();
+			await settle();
+			parent.appendChild(element);
+			await settle();
+
+			// no second assembly, no error, and the option state is still there
+			expect(element.hasAttribute("data-monster-error")).to.be.false;
+			expect(element.getOption("param")).to.equal("id");
+			expect(element.getOption("clearSelection")).to.equal(true);
+		});
+	});
+
+	describe("child mutation observer", function () {
+		const TAG = "monster-teardown-child-observer-575";
+
+		before(function () {
+			define(TAG, (tag) => {
+				return class extends CustomElement {
+					static getTag() {
+						return tag;
+					}
+
+					get defaults() {
+						return Object.assign({}, super.defaults, {
+							features: { mutationObserver: true },
+							templates: { main: "<slot></slot>" },
+						});
+					}
+				};
+			});
+		});
+
+		it("should not run updaters for children added while disconnected", async function () {
+			const element = document.createElement(TAG);
+			document.getElementById("test1").appendChild(element);
+			await settle();
+
+			const updaters = linkedUpdaters(element);
+			element.remove();
+
+			// the coalescing timer is 50ms, so a child added right after the remove
+			// would still fire it
+			element.appendChild(document.createElement("span"));
+			await settle(120);
+
+			for (const updater of updaters) {
+				expect(updater.isDisposed()).to.be.true;
+			}
+			expect(element.hasAttribute("data-monster-error")).to.be.false;
+		});
+	});
+});