@schukai/monster 4.127.1 → 4.128.1

package/test/cases/dom/updater.mjs

@@ -2,6 +2,8 @@
 
 import * as chai from "chai";
 
+import { addToObjectLink } from "../../../source/dom/attributes.mjs";
+import { customElementUpdaterLinkSymbol } from "../../../source/dom/constants.mjs";
 import { ID } from "../../../source/types/id.mjs";
 import { Observer } from "../../../source/types/observer.mjs";
 import { ProxyObserver } from "../../../source/types/proxyobserver.mjs";
@@ -123,6 +125,49 @@ let htmlNested = `
     </div>
 `;
 
+let htmlStatefulReplace = `
+    <div id="test-stateful">
+        <div data-monster-replace="path:content"></div>
+    </div>
+`;
+
+let htmlPatch = `
+    <template id="patch-item">
+        <li data-monster-patch="path:patch-item.label"></li>
+    </template>
+    <div id="test-patch">
+        <div id="patch-text" data-monster-patch="path:text"></div>
+        <div id="patch-node" data-monster-patch="path:contentNode"></div>
+        <div id="patch-fragment" data-monster-patch="path:fragmentNode"></div>
+        <div id="patch-array" data-monster-patch="path:itemsArray"></div>
+        <div id="patch-keyed" data-monster-patch="path:keyedItems" data-monster-patch-key="call:getPatchKey"></div>
+        <div id="patch-keyed-render" data-monster-patch="path:keyedDataItems" data-monster-patch-key="path:id" data-monster-patch-render="path:label"></div>
+        <ul id="patch-list" data-monster-insert="patch-item path:items"></ul>
+    </div>
+`;
+
+let htmlPatchVsReplace = `
+    <div id="test-patch-vs-replace">
+        <div id="replace-target" data-monster-replace="path:replaceHtml"></div>
+        <div
+            id="patch-target"
+            data-monster-patch="path:patchItems"
+            data-monster-patch-key="path:id"
+            data-monster-patch-render="call:renderPatchItem"
+        ></div>
+        <div
+            id="replace-race-target"
+            data-monster-replace="path:replaceRaceHtml"
+        ></div>
+        <div
+            id="patch-race-target"
+            data-monster-patch="path:patchRaceItems"
+            data-monster-patch-key="path:id"
+            data-monster-patch-render="call:renderPatchRaceItem"
+        ></div>
+    </div>
+`;
+
 describe("DOM", function () {
   let Updater = null;
 
@@ -193,6 +238,100 @@ describe("DOM", function () {
             );
           }
 
+          if (!customElements.get("monster-test-churn-item")) {
+            class MonsterTestChurnItem extends HTMLElement {
+              static stats = {
+                replace: { created: 0, connected: 0, disconnected: 0 },
+                patch: { created: 0, connected: 0, disconnected: 0 },
+              };
+
+              connectedCallback() {
+                const mode = this.getAttribute("data-mode") || "replace";
+                if (this.__countedCreated !== true) {
+                  this.__countedCreated = true;
+                  MonsterTestChurnItem.stats[mode].created++;
+                }
+                MonsterTestChurnItem.stats[mode].connected++;
+              }
+
+              disconnectedCallback() {
+                const mode = this.getAttribute("data-mode") || "replace";
+                MonsterTestChurnItem.stats[mode].disconnected++;
+              }
+
+              static resetStats() {
+                MonsterTestChurnItem.stats = {
+                  replace: { created: 0, connected: 0, disconnected: 0 },
+                  patch: { created: 0, connected: 0, disconnected: 0 },
+                };
+              }
+            }
+
+            customElements.define(
+              "monster-test-churn-item",
+              MonsterTestChurnItem,
+            );
+          }
+
+          if (!customElements.get("monster-test-race-item")) {
+            class MonsterTestRaceItem extends HTMLElement {
+              static stats = {
+                replace: {
+                  connected: 0,
+                  disconnected: 0,
+                  firedConnected: 0,
+                  firedDisconnected: 0,
+                },
+                patch: {
+                  connected: 0,
+                  disconnected: 0,
+                  firedConnected: 0,
+                  firedDisconnected: 0,
+                },
+              };
+
+              connectedCallback() {
+                const mode = this.getAttribute("data-mode") || "replace";
+                MonsterTestRaceItem.stats[mode].connected++;
+
+                setTimeout(() => {
+                  if (this.isConnected) {
+                    MonsterTestRaceItem.stats[mode].firedConnected++;
+                  } else {
+                    MonsterTestRaceItem.stats[mode].firedDisconnected++;
+                  }
+                }, 10);
+              }
+
+              disconnectedCallback() {
+                const mode = this.getAttribute("data-mode") || "replace";
+                MonsterTestRaceItem.stats[mode].disconnected++;
+              }
+
+              static resetStats() {
+                MonsterTestRaceItem.stats = {
+                  replace: {
+                    connected: 0,
+                    disconnected: 0,
+                    firedConnected: 0,
+                    firedDisconnected: 0,
+                  },
+                  patch: {
+                    connected: 0,
+                    disconnected: 0,
+                    firedConnected: 0,
+                    firedDisconnected: 0,
+                  },
+                };
+              }
+            }
+
+            customElements.define(
+              "monster-test-race-item",
+              MonsterTestRaceItem,
+            );
+          }
+
           done();
         })
         .catch((e) => {
@@ -222,7 +361,7 @@ describe("DOM", function () {
       element = document.getElementById("test1");
     });
 
-    describe("Configuration Methods", function () {
+	    describe("Configuration Methods", function () {
       it("setEventTypes() should be chainable", function () {
         const u = new Updater(element);
         expect(u.setEventTypes(["touch"])).to.be.instanceof(Updater);
@@ -239,11 +378,42 @@ describe("DOM", function () {
         expect(u.enableEventProcessing()).to.be.instanceof(Updater);
       });
 
-      it("disableEventProcessing() should be chainable", function () {
-        const u = new Updater(element);
-        expect(u.disableEventProcessing()).to.be.instanceof(Updater);
-      });
-    });
+	      it("disableEventProcessing() should be chainable", function () {
+	        const u = new Updater(element);
+	        expect(u.disableEventProcessing()).to.be.instanceof(Updater);
+	      });
+
+	      it("dispose() should stop future DOM updates", function (done) {
+	        const subject = { text: "first" };
+	        const target = document.createElement("div");
+	        target.innerHTML = `<div data-monster-replace="path:text"></div>`;
+	        document.getElementById("mocks").appendChild(target);
+
+	        const u = new Updater(target, subject);
+	        u.run()
+	          .then(() => {
+	            setTimeout(() => {
+	              try {
+	                expect(target).contain.html("<div data-monster-replace=\"path:text\">first</div>");
+	                u.dispose();
+	                u.getSubject().text = "second";
+
+	                setTimeout(() => {
+	                  try {
+	                    expect(target).contain.html("<div data-monster-replace=\"path:text\">first</div>");
+	                    done();
+	                  } catch (e) {
+	                    done(e);
+	                  }
+	                }, 20);
+	              } catch (e) {
+	                done(e);
+	              }
+	            }, 0);
+	          })
+	          .catch((e) => done(e));
+	      });
+	    });
 
     describe("Constructor Error Handling", function () {
       it("should throw a TypeError if no HTMLElement is provided", function () {
@@ -332,6 +502,199 @@ describe("DOM", function () {
     });
   });
 
+  describe("Updater()", function () {
+    beforeEach(() => {
+      let mocks = document.getElementById("mocks");
+      mocks.innerHTML = htmlPatchVsReplace;
+      customElements.get("monster-test-churn-item").resetStats();
+      customElements.get("monster-test-race-item").resetStats();
+    });
+
+    describe("Patch versus Replace", function () {
+      it("should show less lifecycle churn for keyed patch than for replace under repeated updates", function (done) {
+        const buildReplaceHtml = (items) =>
+          items
+            .map(
+              ({ id, label }) =>
+                `<monster-test-churn-item data-mode="replace" data-id="${id}">${label}</monster-test-churn-item>`,
+            )
+            .join("");
+
+        const patchNodes = new Map();
+        const renderPatchItem = (item) => {
+          let node = patchNodes.get(item.id);
+          if (!(node instanceof HTMLElement)) {
+            node = document.createElement("monster-test-churn-item");
+            node.setAttribute("data-mode", "patch");
+            node.setAttribute("data-id", item.id);
+            patchNodes.set(item.id, node);
+          }
+          node.textContent = item.label;
+          return node;
+        };
+
+        const createItems = (suffix = "") => [
+          { id: "a", label: `Alpha${suffix}` },
+          { id: "b", label: `Beta${suffix}` },
+          { id: "c", label: `Gamma${suffix}` },
+          { id: "d", label: `Delta${suffix}` },
+        ];
+
+        const subject = {
+          replaceHtml: buildReplaceHtml(createItems()),
+          patchItems: createItems(),
+        };
+
+        const updater = new Updater(
+          document.getElementById("test-patch-vs-replace"),
+          subject,
+        );
+        updater.setCallback("renderPatchItem", renderPatchItem);
+
+        updater
+          .run()
+          .then(() => {
+            setTimeout(() => {
+              try {
+                const sequences = [
+                  ["d", "a", "b", "c"],
+                  ["c", "d", "a", "b"],
+                  ["b", "c", "d", "a"],
+                  ["a", "b", "c", "d"],
+                ];
+
+                for (let i = 0; i < 6; i++) {
+                  const next = sequences[i % sequences.length].map((id) => {
+                    const labelMap = {
+                      a: "Alpha",
+                      b: "Beta",
+                      c: "Gamma",
+                      d: "Delta",
+                    };
+                    return {
+                      id,
+                      label: `${labelMap[id]}-${i}`,
+                    };
+                  });
+                  updater.getSubject().replaceHtml = buildReplaceHtml(next);
+                  updater.getSubject().patchItems = next;
+                }
+
+                setTimeout(() => {
+                  try {
+                    const churnStats =
+                      customElements.get("monster-test-churn-item").stats;
+                    expect(churnStats.patch.created).to.equal(4);
+                    expect(churnStats.replace.created).to.be.greaterThan(
+                      churnStats.patch.created,
+                    );
+                    expect(churnStats.replace.disconnected).to.be.greaterThan(0);
+                    expect(churnStats.replace.created).to.be.greaterThan(
+                      churnStats.replace.disconnected / 2,
+                    );
+                    done();
+                  } catch (e) {
+                    done(e);
+                  }
+                }, 40);
+              } catch (e) {
+                done(e);
+              }
+            }, 20);
+          })
+          .catch((e) => done(new Error(e)));
+      });
+
+      it("should reduce disconnected async callback surface with patch compared to replace", function (done) {
+        const buildReplaceRaceHtml = (items) =>
+          items
+            .map(
+              ({ id, label }) =>
+                `<monster-test-race-item data-mode="replace" data-id="${id}">${label}</monster-test-race-item>`,
+            )
+            .join("");
+
+        const patchNodes = new Map();
+        const renderPatchRaceItem = (item) => {
+          let node = patchNodes.get(item.id);
+          if (!(node instanceof HTMLElement)) {
+            node = document.createElement("monster-test-race-item");
+            node.setAttribute("data-mode", "patch");
+            node.setAttribute("data-id", item.id);
+            patchNodes.set(item.id, node);
+          }
+          node.textContent = item.label;
+          return node;
+        };
+
+        const sequences = [
+          [
+            { id: "a", label: "Alpha-0" },
+            { id: "b", label: "Beta-0" },
+            { id: "c", label: "Gamma-0" },
+          ],
+          [
+            { id: "c", label: "Gamma-1" },
+            { id: "a", label: "Alpha-1" },
+            { id: "b", label: "Beta-1" },
+          ],
+          [
+            { id: "b", label: "Beta-2" },
+            { id: "c", label: "Gamma-2" },
+            { id: "a", label: "Alpha-2" },
+          ],
+        ];
+
+        const updater = new Updater(
+          document.getElementById("test-patch-vs-replace"),
+          {
+            replaceRaceHtml: buildReplaceRaceHtml(sequences[0]),
+            patchRaceItems: sequences[0],
+          },
+        );
+        updater.setCallback("renderPatchRaceItem", renderPatchRaceItem);
+
+        updater
+          .run()
+          .then(() => {
+            setTimeout(() => {
+              try {
+                updater.getSubject().replaceRaceHtml = buildReplaceRaceHtml(
+                  sequences[1],
+                );
+                updater.getSubject().patchRaceItems = sequences[1];
+
+                updater.getSubject().replaceRaceHtml = buildReplaceRaceHtml(
+                  sequences[2],
+                );
+                updater.getSubject().patchRaceItems = sequences[2];
+
+                setTimeout(() => {
+                  try {
+                    const raceStats =
+                      customElements.get("monster-test-race-item").stats;
+                    expect(raceStats.patch.firedDisconnected).to.equal(0);
+                    expect(raceStats.replace.firedDisconnected).to.be.greaterThan(
+                      0,
+                    );
+                    expect(raceStats.replace.firedDisconnected).to.be.greaterThan(
+                      raceStats.patch.firedDisconnected,
+                    );
+                    done();
+                  } catch (e) {
+                    done(e);
+                  }
+                }, 50);
+              } catch (e) {
+                done(e);
+              }
+            }, 0);
+          })
+          .catch((e) => done(new Error(e)));
+      });
+    });
+  });
+
   describe("Updater()", function () {
     describe("Repeat", function () {
       it("should build 6 li elements from an array", function (done) {
@@ -750,6 +1113,485 @@ describe("DOM", function () {
             done(new Error(e));
           });
       });
+
+      it("should dispose linked updaters when replacing a mounted stateful subtree", function (done) {
+        let mocks = document.getElementById("mocks");
+        mocks.innerHTML = htmlStatefulReplace;
+
+        const statefulElement = document.createElement("div");
+        statefulElement.innerHTML = "<span>stateful</span>";
+
+        let disposeCount = 0;
+        addToObjectLink(
+          statefulElement,
+          customElementUpdaterLinkSymbol,
+          new Set([
+            {
+              dispose() {
+                disposeCount++;
+              },
+            },
+          ]),
+        );
+
+        let d = new Updater(document.getElementById("test-stateful"), {
+          content: statefulElement,
+        });
+
+        d.run()
+          .then(() => {
+            setTimeout(() => {
+              try {
+                expect(statefulElement.isConnected).to.equal(true);
+                d.getSubject().content = "<div>replaced</div>";
+
+                setTimeout(() => {
+                  try {
+                    expect(disposeCount).to.equal(1);
+                    expect(statefulElement.isConnected).to.equal(false);
+                    expect(document.getElementById("test-stateful")).contain.html(
+                      "<div>replaced</div>",
+                    );
+                    done();
+                  } catch (e) {
+                    done(e);
+                  }
+                }, 40);
+              } catch (e) {
+                done(e);
+              }
+            }, 0);
+          })
+          .catch((e) => {
+            done(new Error(e));
+          });
+      });
+    });
+  });
+
+  describe("Updater()", function () {
+    beforeEach(() => {
+      let mocks = document.getElementById("mocks");
+      mocks.innerHTML = htmlPatch;
+    });
+
+    describe("Patch", function () {
+      it("should patch primitive values as text content without parsing HTML", function (done) {
+        let element = document.getElementById("test-patch");
+        let d = new Updater(element, {
+          text: "<strong>Hello</strong>",
+          fragmentNode: document.createDocumentFragment(),
+          itemsArray: [],
+          keyedItems: [],
+          keyedDataItems: [],
+          items: [],
+        });
+
+        d.run()
+          .then(() => {
+            setTimeout(() => {
+              try {
+                const target = document.getElementById("patch-text");
+                expect(target.innerHTML).to.equal("&lt;strong&gt;Hello&lt;/strong&gt;");
+                expect(target.textContent).to.equal("<strong>Hello</strong>");
+                done();
+              } catch (e) {
+                done(e);
+              }
+            }, 20);
+          })
+          .catch((e) => done(new Error(e)));
+      });
+
+      it("should patch HTMLElement values without reparsing HTML", function (done) {
+        let element = document.getElementById("test-patch");
+        const stateful = document.createElement("monster-message-state-button");
+        stateful.innerHTML = "Save";
+
+        let d = new Updater(element, {
+          text: "",
+          contentNode: stateful,
+          fragmentNode: document.createDocumentFragment(),
+          itemsArray: [],
+          keyedItems: [],
+          keyedDataItems: [],
+          items: [],
+        });
+
+        d.run()
+          .then(() => {
+            setTimeout(() => {
+              try {
+                const target = document.getElementById("patch-node");
+                expect(target.firstElementChild).to.equal(stateful);
+                expect(stateful.isConnected).to.equal(true);
+                done();
+              } catch (e) {
+                done(e);
+              }
+            }, 20);
+          })
+          .catch((e) => done(new Error(e)));
+      });
+
+      it("should rewrite nested patch paths in inserted templates", function (done) {
+        let element = document.getElementById("test-patch");
+        let d = new Updater(element, {
+          text: "",
+          contentNode: document.createElement("div"),
+          fragmentNode: document.createDocumentFragment(),
+          itemsArray: [],
+          keyedItems: [],
+          keyedDataItems: [],
+          items: [{ label: "One" }, { label: "Two" }],
+        });
+
+        d.run()
+          .then(() => {
+            setTimeout(() => {
+              try {
+                const list = document.getElementById("patch-list");
+                expect(list.children.length).to.equal(2);
+                expect(list.children[0].getAttribute("data-monster-patch")).to.equal(
+                  "path:items.0.label",
+                );
+                expect(list.children[0].textContent).to.equal("One");
+                expect(list.children[1].getAttribute("data-monster-patch")).to.equal(
+                  "path:items.1.label",
+                );
+                expect(list.children[1].textContent).to.equal("Two");
+                done();
+              } catch (e) {
+                done(e);
+              }
+            }, 20);
+          })
+          .catch((e) => done(new Error(e)));
+      });
+
+      it("should patch DocumentFragment values without reparsing HTML", function (done) {
+        let element = document.getElementById("test-patch");
+        const fragment = document.createDocumentFragment();
+        const first = document.createElement("span");
+        const second = document.createElement("strong");
+        first.textContent = "Alpha";
+        second.textContent = "Beta";
+        fragment.appendChild(first);
+        fragment.appendChild(second);
+
+        let d = new Updater(element, {
+          text: "",
+          contentNode: document.createElement("div"),
+          fragmentNode: fragment,
+          itemsArray: [],
+          keyedItems: [],
+          keyedDataItems: [],
+          items: [],
+        });
+
+        d.run()
+          .then(() => {
+            setTimeout(() => {
+              try {
+                const target = document.getElementById("patch-fragment");
+                expect(target.children.length).to.equal(2);
+                expect(target.children[0].textContent).to.equal("Alpha");
+                expect(target.children[1].textContent).to.equal("Beta");
+                done();
+              } catch (e) {
+                done(e);
+              }
+            }, 20);
+          })
+          .catch((e) => done(new Error(e)));
+      });
+
+      it("should patch arrays of primitives and nodes without using innerHTML", function (done) {
+        let element = document.getElementById("test-patch");
+        const badge = document.createElement("span");
+        badge.textContent = "Node";
+
+        let d = new Updater(element, {
+          text: "",
+          contentNode: document.createElement("div"),
+          fragmentNode: document.createDocumentFragment(),
+          itemsArray: ["Alpha", badge, "Omega"],
+          keyedItems: [],
+          keyedDataItems: [],
+          items: [],
+        });
+
+        d.run()
+          .then(() => {
+            setTimeout(() => {
+              try {
+                const target = document.getElementById("patch-array");
+                expect(target.childNodes.length).to.equal(3);
+                expect(target.childNodes[0].textContent).to.equal("Alpha");
+                expect(target.childNodes[1]).to.equal(badge);
+                expect(target.childNodes[2].textContent).to.equal("Omega");
+                expect(target.innerHTML).to.equal("Alpha<span>Node</span>Omega");
+                done();
+              } catch (e) {
+                done(e);
+              }
+            }, 20);
+          })
+          .catch((e) => done(new Error(e)));
+      });
+
+      it("should reorder keyed nodes without recreating them", function (done) {
+        let element = document.getElementById("test-patch");
+        const a = document.createElement("span");
+        const b = document.createElement("span");
+        const c = document.createElement("span");
+        a.dataset.key = "a";
+        b.dataset.key = "b";
+        c.dataset.key = "c";
+        a.textContent = "A";
+        b.textContent = "B";
+        c.textContent = "C";
+
+        let d = new Updater(element, {
+          text: "",
+          contentNode: document.createElement("div"),
+          fragmentNode: document.createDocumentFragment(),
+          itemsArray: [],
+          keyedItems: [a, b, c],
+          keyedDataItems: [],
+          items: [],
+        });
+        d.setCallback("getPatchKey", (value) => value?.dataset?.key);
+
+        d.run()
+          .then(() => {
+            setTimeout(() => {
+              try {
+                const target = document.getElementById("patch-keyed");
+                expect(Array.from(target.children)).to.deep.equal([a, b, c]);
+
+                d.getSubject().keyedItems = [c, a, b];
+
+                setTimeout(() => {
+                  try {
+                    expect(Array.from(target.children)).to.deep.equal([c, a, b]);
+                    expect(target.children[0]).to.equal(c);
+                    expect(target.children[1]).to.equal(a);
+                    expect(target.children[2]).to.equal(b);
+                    done();
+                  } catch (e) {
+                    done(e);
+                  }
+                }, 20);
+              } catch (e) {
+                done(e);
+              }
+            }, 20);
+          })
+          .catch((e) => done(new Error(e)));
+      });
+
+      it("should remove stale keyed nodes and keep surviving node identity", function (done) {
+        let element = document.getElementById("test-patch");
+        const a = document.createElement("span");
+        const b = document.createElement("span");
+        const dNode = document.createElement("span");
+        a.dataset.key = "a";
+        b.dataset.key = "b";
+        dNode.dataset.key = "d";
+        a.textContent = "A";
+        b.textContent = "B";
+        dNode.textContent = "D";
+
+        let d = new Updater(element, {
+          text: "",
+          contentNode: document.createElement("div"),
+          fragmentNode: document.createDocumentFragment(),
+          itemsArray: [],
+          keyedItems: [a, b],
+          keyedDataItems: [],
+          items: [],
+        });
+        d.setCallback("getPatchKey", (value) => value?.dataset?.key);
+
+        d.run()
+          .then(() => {
+            setTimeout(() => {
+              try {
+                const target = document.getElementById("patch-keyed");
+                d.getSubject().keyedItems = [b, dNode];
+
+                setTimeout(() => {
+                  try {
+                    expect(Array.from(target.children)).to.deep.equal([b, dNode]);
+                    expect(b.isConnected).to.equal(true);
+                    expect(a.isConnected).to.equal(false);
+                    done();
+                  } catch (e) {
+                    done(e);
+                  }
+                }, 20);
+              } catch (e) {
+                done(e);
+              }
+            }, 20);
+          })
+          .catch((e) => done(new Error(e)));
+      });
+
+      it("should reorder keyed data items via patch-render without recreating text nodes", function (done) {
+        let element = document.getElementById("test-patch");
+
+        let d = new Updater(element, {
+          text: "",
+          contentNode: document.createElement("div"),
+          fragmentNode: document.createDocumentFragment(),
+          itemsArray: [],
+          keyedItems: [],
+          keyedDataItems: [
+            { id: "a", label: "Alpha" },
+            { id: "b", label: "Beta" },
+            { id: "c", label: "Gamma" },
+          ],
+          items: [],
+        });
+
+        d.run()
+          .then(() => {
+            setTimeout(() => {
+              try {
+                const target = document.getElementById("patch-keyed-render");
+                const initialNodes = Array.from(target.childNodes);
+                expect(initialNodes.map((node) => node.textContent)).to.deep.equal([
+                  "Alpha",
+                  "Beta",
+                  "Gamma",
+                ]);
+
+                d.getSubject().keyedDataItems = [
+                  { id: "c", label: "Gamma" },
+                  { id: "a", label: "Alpha" },
+                  { id: "b", label: "Beta" },
+                ];
+
+                setTimeout(() => {
+                  try {
+                    const reorderedNodes = Array.from(target.childNodes);
+                    expect(reorderedNodes.map((node) => node.textContent)).to.deep.equal([
+                      "Gamma",
+                      "Alpha",
+                      "Beta",
+                    ]);
+                    expect(reorderedNodes[0]).to.equal(initialNodes[2]);
+                    expect(reorderedNodes[1]).to.equal(initialNodes[0]);
+                    expect(reorderedNodes[2]).to.equal(initialNodes[1]);
+                    done();
+                  } catch (e) {
+                    done(e);
+                  }
+                }, 20);
+              } catch (e) {
+                done(e);
+              }
+            }, 20);
+          })
+          .catch((e) => done(new Error(e)));
+      });
+
+      it("should update keyed data item text in place via patch-render", function (done) {
+        let element = document.getElementById("test-patch");
+
+        let d = new Updater(element, {
+          text: "",
+          contentNode: document.createElement("div"),
+          fragmentNode: document.createDocumentFragment(),
+          itemsArray: [],
+          keyedItems: [],
+          keyedDataItems: [
+            { id: "a", label: "Alpha" },
+            { id: "b", label: "Beta" },
+          ],
+          items: [],
+        });
+
+        d.run()
+          .then(() => {
+            setTimeout(() => {
+              try {
+                const target = document.getElementById("patch-keyed-render");
+                const betaNode = target.childNodes[1];
+
+                d.getSubject().keyedDataItems = [
+                  { id: "a", label: "Alpha" },
+                  { id: "b", label: "Bravo" },
+                ];
+
+                setTimeout(() => {
+                  try {
+                    expect(target.childNodes[1]).to.equal(betaNode);
+                    expect(target.childNodes[1].textContent).to.equal("Bravo");
+                    done();
+                  } catch (e) {
+                    done(e);
+                  }
+                }, 20);
+              } catch (e) {
+                done(e);
+              }
+            }, 20);
+          })
+          .catch((e) => done(new Error(e)));
+      });
+
+      it("should remove stale keyed data items and append new ones via patch-render", function (done) {
+        let element = document.getElementById("test-patch");
+
+        let d = new Updater(element, {
+          text: "",
+          contentNode: document.createElement("div"),
+          fragmentNode: document.createDocumentFragment(),
+          itemsArray: [],
+          keyedItems: [],
+          keyedDataItems: [
+            { id: "a", label: "Alpha" },
+            { id: "b", label: "Beta" },
+          ],
+          items: [],
+        });
+
+        d.run()
+          .then(() => {
+            setTimeout(() => {
+              try {
+                const target = document.getElementById("patch-keyed-render");
+                const alphaNode = target.childNodes[0];
+                const betaNode = target.childNodes[1];
+
+                d.getSubject().keyedDataItems = [
+                  { id: "b", label: "Beta" },
+                  { id: "d", label: "Delta" },
+                ];
+
+                setTimeout(() => {
+                  try {
+                    expect(Array.from(target.childNodes).map((node) => node.textContent)).to.deep.equal([
+                      "Beta",
+                      "Delta",
+                    ]);
+                    expect(target.childNodes[0]).to.equal(betaNode);
+                    expect(alphaNode.isConnected).to.equal(false);
+                    done();
+                  } catch (e) {
+                    done(e);
+                  }
+                }, 20);
+              } catch (e) {
+                done(e);
+              }
+            }, 20);
+          })
+          .catch((e) => done(new Error(e)));
+      });
     });
   });