refactor: include current nodes in slot observer callback (#7428)

vaadin · May 20, 2024 · dc5c7e2 · dc5c7e2
1 parent f35f093
commit dc5c7e2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/packages/component-base/src/slot-observer.d.ts b/packages/component-base/src/slot-observer.d.ts
@@ -10,7 +10,7 @@
 export class SlotObserver {
   constructor(
     slot: HTMLSlotElement,
-    callback: (info: { addedNodes: Node[]; movedNodes: Node[]; removedNodes: Node[] }) => void,
+    callback: (info: { addedNodes: Node[]; currentNodes: Node[]; movedNodes: Node[]; removedNodes: Node[] }) => void,
   );
 
   /**

diff --git a/packages/component-base/src/slot-observer.js b/packages/component-base/src/slot-observer.js
@@ -97,7 +97,7 @@ export class SlotObserver {
     }
 
     if (addedNodes.length || removedNodes.length || movedNodes.length) {
-      this.callback({ addedNodes, movedNodes, removedNodes });
+      this.callback({ addedNodes, currentNodes, movedNodes, removedNodes });
     }
 
     this._storedNodes = currentNodes;

diff --git a/packages/component-base/test/slot-observer.test.js b/packages/component-base/test/slot-observer.test.js
@@ -162,4 +162,28 @@ describe('SlotObserver', () => {
 
     expect(spy.calledOnce).to.be.true;
   });
+
+  it('should include current nodes in the callback', async () => {
+    spy = sinon.spy();
+    observer = new SlotObserver(slot, spy);
+    expect(spy.called).to.be.false;
+
+    await Promise.resolve();
+
+    const childNodes = [...host.childNodes];
+    const currentNodes = spy.firstCall.args[0].currentNodes;
+
+    expect(currentNodes).to.be.an('array');
+    expect(currentNodes.length).to.equal(3);
+    expect(currentNodes).to.eql(childNodes);
+
+    spy.resetHistory();
+
+    childNodes[1].remove();
+    observer.flush();
+
+    const newCurrentNodes = spy.firstCall.args[0].currentNodes;
+    expect(newCurrentNodes.length).to.equal(2);
+    expect(newCurrentNodes).to.eql([childNodes[0], childNodes[2]]);
+  });
 });