fix sl-selection-change event not emitted when all items are deselected (#1038)

also added more tests

src/components/tree/tree.test.ts

@@ -12,7 +12,7 @@ describe('<sl-tree>', () => {
       <sl-tree>
         <sl-tree-item>Node 1</sl-tree-item>
         <sl-tree-item>Node 2</sl-tree-item>
-        <sl-tree-item>
+        <sl-tree-item id="expandable">
           Parent Node
           <sl-tree-item>Child Node 1</sl-tree-item>
           <sl-tree-item>
@@ -558,25 +558,101 @@ describe('<sl-tree>', () => {
         });
       });
     });
+
+    describe('when selection is "single"', () => {
+      describe('and user clicks on same item twice', () => {
+        it('should emit `sl-selection-change` event once', async () => {
+          // Arrange
+          el.selection = 'single';
+          await el.updateComplete;
+
+          const selectedChangeSpy = sinon.spy();
+          el.addEventListener('sl-selection-change', selectedChangeSpy);
+
+          const node = el.children[0] as SlTreeItem;
+
+          // Act
+          node.click();
+          await el.updateComplete;
+          node.click();
+          await el.updateComplete;
+
+          // Assert
+          expect(selectedChangeSpy).to.have.been.calledOnce;
+          expect(selectedChangeSpy.args[0][0]).to.deep.include({ detail: { selection: [node] } });
+        });
+      });
+    });
   });
 
-  describe('when an tree item gets selected or deselected', () => {
-    it('should emit a `sl-selection-change` event', async () => {
-      // Arrange
-      el.selection = 'single';
-      await el.updateComplete;
+  describe('when selection is "leaf"', () => {
+    describe('and user clicks on same leaf item twice', () => {
+      it('should emit `sl-selection-change` event once', async () => {
+        // Arrange
+        el.selection = 'leaf';
+        await el.updateComplete;
 
-      const selectedChangeSpy = sinon.spy();
-      el.addEventListener('sl-selection-change', selectedChangeSpy);
+        const selectedChangeSpy = sinon.spy();
+        el.addEventListener('sl-selection-change', selectedChangeSpy);
 
-      const node = el.children[0] as SlTreeItem;
+        const node = el.children[0] as SlTreeItem;
 
-      // Act
-      node.click();
-      await el.updateComplete;
+        // Act
+        node.click();
+        await el.updateComplete;
+        node.click();
+        await el.updateComplete;
 
-      // Assert
-      expect(selectedChangeSpy).to.have.been.called;
+        // Assert
+        expect(selectedChangeSpy).to.have.been.calledOnce;
+        expect(selectedChangeSpy.args[0][0]).to.deep.include({ detail: { selection: [node] } });
+      });
+    });
+
+    describe('and user clicks on expandable item', () => {
+      it('should not emit `sl-selection-change` event', async () => {
+        // Arrange
+        el.selection = 'leaf';
+        await el.updateComplete;
+
+        const selectedChangeSpy = sinon.spy();
+        el.addEventListener('sl-selection-change', selectedChangeSpy);
+
+        const node = el.querySelector<SlTreeItem>('#expandable')!;
+
+        // Act
+        node.click();
+        await el.updateComplete;
+
+        // Assert
+        expect(selectedChangeSpy).to.not.have.been.called;
+      });
+    });
+  });
+
+  describe('when selection is "multiple"', () => {
+    describe('and user clicks on same item twice', () => {
+      it('should emit `sl-selection-change` event twice', async () => {
+        // Arrange
+        el.selection = 'multiple';
+        await el.updateComplete;
+
+        const selectedChangeSpy = sinon.spy();
+        el.addEventListener('sl-selection-change', selectedChangeSpy);
+
+        const node = el.children[0] as SlTreeItem;
+
+        // Act
+        node.click();
+        await el.updateComplete;
+        node.click();
+        await el.updateComplete;
+
+        // Assert
+        expect(selectedChangeSpy).to.have.been.calledTwice;
+        expect(selectedChangeSpy.args[0][0]).to.deep.include({ detail: { selection: [node] } });
+        expect(selectedChangeSpy.args[1][0]).to.deep.include({ detail: { selection: [] } });
+      });
     });
   });
 });

src/components/tree/tree.ts

@@ -196,7 +196,10 @@ export default class SlTree extends ShoelaceElement {
 
     const nextSelection = this.selectedItems;
 
-    if (nextSelection.some(item => !previousSelection.includes(item))) {
+    if (
+      previousSelection.length !== nextSelection.length ||
+      nextSelection.some(item => !previousSelection.includes(item))
+    ) {
       this.emit('sl-selection-change', { detail: { selection: nextSelection } });
     }
   }