fix(rux-tree-node): emit ruxtreenodeselected once when selected via setSelected

.changeset/quiet-trees-select.md

@@ -0,0 +1,8 @@
+---
+"angular-workspace": patch
+"@astrouxds/astro-web-components": patch
+"@astrouxds/angular": patch
+"@astrouxds/react": patch
+---
+
+Fixed rux-tree-node emitting `ruxtreenodeselected` twice when `setSelected(true)` is called on (or the Enter key selects) a node that was not already selected.

packages/web-components/src/components/rux-tree-node/rux-tree-node.tsx

@@ -74,7 +74,9 @@ export class RuxTreeNode {
 
     @Watch('selected')
     handleSelectedChange(newValue: boolean) {
-        this.setSelected(newValue)
+        if (newValue) {
+            this.ruxTreeNodeSelected.emit(this.componentId)
+        }
     }
 
     @Listen('keydown', { passive: false })
@@ -143,8 +145,11 @@ export class RuxTreeNode {
      */
     @Method()
     async setSelected(value: boolean) {
+        // A change of value emits from the `selected` watcher, so only
+        // emit here when re-selecting a node that is already selected.
+        const unchanged = this.selected === value
         this.selected = value
-        if (value) {
+        if (value && unchanged) {
             this.ruxTreeNodeSelected.emit(this.componentId)
         }
     }

packages/web-components/src/components/rux-tree-node/test/tree-node.spec.ts

@@ -115,4 +115,105 @@ test.describe('Tree Node', () => {
         await btn.click()
         expect(eventSpy).toHaveReceivedEventTimes(0)
     })
+    test('emits ruxtreenodeselected once when setSelected(true) is called on an unselected node', async ({
+        page,
+    }) => {
+        const template = `<rux-tree-node>Node</rux-tree-node>`
+        await page.setContent(template)
+        const el = await page.locator('rux-tree-node')
+        const eventSpy = await page.spyOnEvent('ruxtreenodeselected')
+
+        await el.evaluate(async (node: HTMLRuxTreeNodeElement) => {
+            await node.setSelected(true)
+        })
+
+        await expect(el).toHaveAttribute('selected', '')
+        expect(eventSpy).toHaveReceivedEventTimes(1)
+    })
+
+    test('emits ruxtreenodeselected once when setSelected(true) is called on a node in a tree', async ({
+        page,
+    }) => {
+        const template = `
+            <rux-tree>
+                <rux-tree-node data-test-id="first" selected>First</rux-tree-node>
+                <rux-tree-node data-test-id="second">Second</rux-tree-node>
+            </rux-tree>
+        `
+        await page.setContent(template)
+        const first = await page.locator('[data-test-id="first"]')
+        const second = await page.locator('[data-test-id="second"]')
+        const eventSpy = await page.spyOnEvent('ruxtreenodeselected')
+
+        await second.evaluate(async (node: HTMLRuxTreeNodeElement) => {
+            await node.setSelected(true)
+        })
+
+        await expect(second).toHaveAttribute('selected', '')
+        await expect(first).not.toHaveAttribute('selected', '')
+        expect(eventSpy).toHaveReceivedEventTimes(1)
+    })
+
+    test('emits ruxtreenodeselected once when an already selected node is set selected again', async ({
+        page,
+    }) => {
+        const template = `<rux-tree-node selected>Node</rux-tree-node>`
+        await page.setContent(template)
+        const el = await page.locator('rux-tree-node')
+        const eventSpy = await page.spyOnEvent('ruxtreenodeselected')
+
+        await el.evaluate(async (node: HTMLRuxTreeNodeElement) => {
+            await node.setSelected(true)
+        })
+
+        await expect(el).toHaveAttribute('selected', '')
+        expect(eventSpy).toHaveReceivedEventTimes(1)
+    })
+
+    test('emits ruxtreenodeselected once when the selected prop is set', async ({
+        page,
+    }) => {
+        const template = `<rux-tree-node>Node</rux-tree-node>`
+        await page.setContent(template)
+        const el = await page.locator('rux-tree-node')
+        const eventSpy = await page.spyOnEvent('ruxtreenodeselected')
+
+        await el.evaluate((node: HTMLRuxTreeNodeElement) => {
+            node.selected = true
+        })
+
+        await expect(el).toHaveAttribute('selected', '')
+        expect(eventSpy).toHaveReceivedEventTimes(1)
+    })
+
+    test('emits ruxtreenodeselected once when selected with the Enter key', async ({
+        page,
+    }) => {
+        const template = `<rux-tree-node>Node</rux-tree-node>`
+        await page.setContent(template)
+        const el = await page.locator('rux-tree-node')
+        const eventSpy = await page.spyOnEvent('ruxtreenodeselected')
+
+        await el.locator('.parent').focus()
+        await page.keyboard.press('Enter')
+
+        await expect(el).toHaveAttribute('selected', '')
+        expect(eventSpy).toHaveReceivedEventTimes(1)
+    })
+
+    test('does not emit ruxtreenodeselected when setSelected(false) is called', async ({
+        page,
+    }) => {
+        const template = `<rux-tree-node selected>Node</rux-tree-node>`
+        await page.setContent(template)
+        const el = await page.locator('rux-tree-node')
+        const eventSpy = await page.spyOnEvent('ruxtreenodeselected')
+
+        await el.evaluate(async (node: HTMLRuxTreeNodeElement) => {
+            await node.setSelected(false)
+        })
+
+        await expect(el).not.toHaveAttribute('selected', '')
+        expect(eventSpy).toHaveReceivedEventTimes(0)
+    })
 })