@api-client/ui 0.5.21 → 0.5.23

package/test/md/menu/Menu.test.ts

@@ -505,5 +505,351 @@ describe('md', () => {
         assert.isFalse(hideSpy.called)
       })
     })
+
+    describe('Menu item selection', () => {
+      async function selectionFixture(): Promise<Menu> {
+        return fixture(html`
+          <ui-menu id="selection-menu">
+            <ui-menu-item id="item1">Item 1</ui-menu-item>
+            <ui-menu-item id="item2" selected>Item 2</ui-menu-item>
+            <ui-menu-item id="item3">Item 3</ui-menu-item>
+            <ui-menu-item id="item4" disabled>Item 4 (Disabled)</ui-menu-item>
+          </ui-menu>
+        `)
+      }
+
+      describe('selectedItem getter', () => {
+        it('should return null when no item is selected', async () => {
+          const element = await basicFixture()
+          await nextFrame()
+
+          assert.isNull(element.selectedItem)
+        })
+
+        it('should return the selected menu item', async () => {
+          const element = await selectionFixture()
+          await nextFrame()
+
+          const selectedItem = element.selectedItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+
+          assert.isNotNull(selectedItem)
+          assert.equal(selectedItem, item2)
+          assert.isTrue(selectedItem!.selected)
+        })
+
+        it('should return the first selected item when multiple items are selected', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item3 = element.querySelector('#item3') as UiMenuItem
+          await nextFrame()
+
+          // Manually set multiple items as selected
+          item1.selected = true
+          item3.selected = true
+          await nextFrame()
+
+          const selectedItem = element.selectedItem
+          assert.equal(selectedItem, item1)
+        })
+      })
+
+      describe('setSelectedItem method', () => {
+        it('should select a menu item and clear previous selection', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          await nextFrame()
+
+          // Initially item2 is selected
+          assert.isTrue(item2.selected)
+          assert.isFalse(item1.selected)
+
+          // Select item1
+          element.setSelectedItem(item1)
+          await nextFrame()
+
+          assert.isTrue(item1.selected)
+          assert.isFalse(item2.selected)
+          assert.equal(element.selectedItem, item1)
+        })
+
+        it('should clear all selections when passed null', async () => {
+          const element = await selectionFixture()
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          await nextFrame()
+
+          // Initially item2 is selected
+          assert.isTrue(item2.selected)
+
+          // Clear selection
+          element.setSelectedItem(null)
+          await nextFrame()
+
+          assert.isFalse(item2.selected)
+          assert.isNull(element.selectedItem)
+        })
+
+        it('should handle selecting disabled items', async () => {
+          const element = await selectionFixture()
+          const item4 = element.querySelector('#item4') as UiMenuItem
+          await nextFrame()
+
+          // Should be able to select disabled items programmatically
+          element.setSelectedItem(item4)
+          await nextFrame()
+
+          assert.isTrue(item4.selected)
+          assert.equal(element.selectedItem, item4)
+        })
+
+        it('should not throw when selecting an item not in the menu', async () => {
+          const element = await selectionFixture()
+          const externalItem: UiMenuItem = await fixture(html`<ui-menu-item>External Item</ui-menu-item>`)
+          await nextFrame()
+
+          // Should not throw
+          element.setSelectedItem(externalItem)
+
+          // External item should be selected but not affect the menu's selectedItem
+          assert.isTrue(externalItem.selected)
+          // The menu should return null since the external item is not in assignedMenuItems
+          assert.isNull(element.selectedItem)
+        })
+      })
+
+      describe('Selection clearing functionality', () => {
+        it('should clear selection from all menu items when setting null', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          const item3 = element.querySelector('#item3') as UiMenuItem
+          await nextFrame()
+
+          // Set multiple items as selected
+          item1.selected = true
+          item3.selected = true
+          await nextFrame()
+
+          // Initially item2 is selected from fixture, now item1 and item3 are also selected
+          assert.isTrue(item1.selected)
+          assert.isTrue(item2.selected)
+          assert.isTrue(item3.selected)
+
+          // Clear all selections using the public method
+          element.setSelectedItem(null)
+          await nextFrame()
+
+          assert.isFalse(item1.selected)
+          assert.isFalse(item2.selected)
+          assert.isFalse(item3.selected)
+          assert.isNull(element.selectedItem)
+        })
+
+        it('should clear previous selection when selecting new item', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          const item3 = element.querySelector('#item3') as UiMenuItem
+          await nextFrame()
+
+          // Set multiple items as selected manually
+          item1.selected = true
+          item3.selected = true
+          await nextFrame()
+
+          // Select item2 - this should clear all other selections
+          element.setSelectedItem(item2)
+          await nextFrame()
+
+          assert.isFalse(item1.selected)
+          assert.isTrue(item2.selected)
+          assert.isFalse(item3.selected)
+          assert.equal(element.selectedItem, item2)
+        })
+
+        it('should clear selection when notifySelect is called with MenuItem', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          const item3 = element.querySelector('#item3') as UiMenuItem
+          await nextFrame()
+
+          element.show()
+          await nextFrame()
+
+          // Set multiple items as selected manually
+          item1.selected = true
+          item3.selected = true
+          await nextFrame()
+
+          // Initially item2 is selected from fixture, now all items are selected
+          assert.isTrue(item1.selected)
+          assert.isTrue(item2.selected)
+          assert.isTrue(item3.selected)
+
+          // Call notifySelect on item1 - should clear all other selections
+          element.notifySelect(item1, 0)
+
+          assert.isTrue(item1.selected) // This one should remain selected
+          assert.isFalse(item2.selected) // These should be cleared
+          assert.isFalse(item3.selected)
+        })
+
+        it('should handle empty menu items', async () => {
+          const element: Menu = await fixture(html`<ui-menu></ui-menu>`)
+          await nextFrame()
+
+          // Should not throw - test by setting and clearing selection
+          element.setSelectedItem(null)
+          assert.isNull(element.selectedItem)
+        })
+      })
+
+      describe('notifySelect method', () => {
+        it('should select menu item and hide menu', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          await nextFrame()
+
+          const hideSpy = sinon.spy(element, 'hide')
+          element.show()
+          await nextFrame()
+
+          // Initially item2 is selected
+          assert.isTrue(item2.selected)
+          assert.isFalse(item1.selected)
+
+          // Notify selection of item1
+          const result = element.notifySelect(item1, 0)
+
+          assert.isFalse(result) // Should return false (event not canceled)
+          assert.isTrue(item1.selected)
+          assert.isFalse(item2.selected) // Previous selection should be cleared
+          assert.isTrue(hideSpy.calledOnce)
+        })
+
+        it('should handle non-MenuItem selection', async () => {
+          const element = await selectionFixture()
+          const nonMenuItem = document.createElement('div') as unknown as UiMenuItem
+          await nextFrame()
+
+          const hideSpy = sinon.spy(element, 'hide')
+          element.show()
+          await nextFrame()
+
+          // Should not throw and should still hide menu
+          // When item is not found in items array, notifySelect returns false
+          const result = element.notifySelect(nonMenuItem, 0)
+
+          assert.isFalse(result) // Returns false when item not found in items
+          assert.isTrue(hideSpy.calledOnce)
+        })
+
+        it('should dispatch select event through parent class', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          await nextFrame()
+
+          element.show()
+          await nextFrame()
+
+          setTimeout(() => element.notifySelect(item1, 0))
+          const event = await oneEvent(element, 'select')
+
+          assert.instanceOf(event, CustomEvent)
+          assert.equal((event as CustomEvent).detail.item, item1)
+          assert.equal((event as CustomEvent).detail.index, 0)
+        })
+
+        it('should return true when select event is canceled', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          await nextFrame()
+
+          element.show()
+          await nextFrame()
+
+          // Add event listener that cancels the event
+          element.addEventListener('select', (e) => {
+            e.preventDefault()
+          })
+
+          const result = element.notifySelect(item1, 0)
+
+          assert.isTrue(result) // Should return true when event is canceled
+          assert.isTrue(item1.selected) // Item should still be selected in Menu
+        })
+
+        it('should clear selection from all items before selecting new one', async () => {
+          const element = await selectionFixture()
+          const item1 = element.querySelector('#item1') as UiMenuItem
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          const item3 = element.querySelector('#item3') as UiMenuItem
+          await nextFrame()
+
+          // Manually set multiple items as selected
+          item1.selected = true
+          item3.selected = true
+          await nextFrame()
+
+          element.show()
+          await nextFrame()
+
+          // Notify selection of item2
+          element.notifySelect(item2, 1)
+
+          // Only item2 should be selected
+          assert.isFalse(item1.selected)
+          assert.isTrue(item2.selected)
+          assert.isFalse(item3.selected)
+        })
+      })
+
+      describe('Selection integration with keyboard navigation', () => {
+        it('should maintain selection state when navigating with arrow keys', async () => {
+          const element = await selectionFixture()
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          await nextFrame()
+
+          element.show()
+          await nextFrame()
+
+          // Initially item2 is selected
+          assert.isTrue(item2.selected)
+
+          // Navigate with arrow keys (should not affect selection)
+          const downEvent = new KeyboardEvent('keydown', { key: 'ArrowDown' })
+          element.dispatchEvent(downEvent)
+          await nextFrame()
+
+          // Selection should remain unchanged
+          assert.isTrue(item2.selected)
+        })
+      })
+
+      describe('Selection state preservation', () => {
+        it('should preserve selection when menu is hidden and shown again', async () => {
+          const element = await selectionFixture()
+          const item2 = element.querySelector('#item2') as UiMenuItem
+          await nextFrame()
+
+          // Initially item2 is selected
+          assert.isTrue(item2.selected)
+          assert.equal(element.selectedItem, item2)
+
+          // Show and hide menu
+          element.show()
+          await nextFrame()
+          element.hide()
+          await nextFrame()
+
+          // Selection should be preserved
+          assert.isTrue(item2.selected)
+          assert.equal(element.selectedItem, item2)
+        })
+      })
+    })
   })
 })

package/test/md/menu/MenuItem.test.ts

@@ -14,6 +14,18 @@ describe('md', () => {
       return fixture(html`<ui-menu-item>Test Item</ui-menu-item>`)
     }
 
+    async function selectedFixture(): Promise<UiMenuItem> {
+      return fixture(html`<ui-menu-item selected>Selected Item</ui-menu-item>`)
+    }
+
+    async function withValueFixture(): Promise<UiMenuItem> {
+      return fixture(html`<ui-menu-item value="test-value">Item with Value</ui-menu-item>`)
+    }
+
+    async function withSelectionIconFixture(): Promise<UiMenuItem> {
+      return fixture(html`<ui-menu-item selected showSelectionIcon>Item with Selection Icon</ui-menu-item>`)
+    }
+
     async function withSubmenuFixture(): Promise<HTMLElement> {
       return fixture(html`
         <div>
@@ -357,5 +369,285 @@ describe('md', () => {
         assert.isNotNull(ripple)
       })
     })
+
+    describe('Selection functionality', () => {
+      it('should have selected property with default value false', async () => {
+        const element = await basicFixture()
+        assert.isFalse(element.selected)
+      })
+
+      it('should set selected property from attribute', async () => {
+        const element = await selectedFixture()
+        assert.isTrue(element.selected)
+      })
+
+      it('should reflect selected property to attribute', async () => {
+        const element = await basicFixture()
+
+        element.selected = true
+        await nextFrame()
+        assert.isTrue(element.hasAttribute('selected'))
+
+        element.selected = false
+        await nextFrame()
+        assert.isFalse(element.hasAttribute('selected'))
+      })
+
+      it('should update CSS classes when selected changes', async () => {
+        const element = await basicFixture()
+
+        element.selected = true
+        await nextFrame()
+        assert.isTrue(element.classList.contains('select'))
+
+        element.selected = false
+        await nextFrame()
+        assert.isFalse(element.classList.contains('select'))
+      })
+
+      it('should update aria-selected when selected changes', async () => {
+        const element = await basicFixture()
+
+        element.selected = true
+        await nextFrame()
+        assert.equal(element.getAttribute('aria-selected'), 'true')
+
+        element.selected = false
+        await nextFrame()
+        assert.equal(element.getAttribute('aria-selected'), 'false')
+      })
+
+      it('should initialize selection state on connection', async () => {
+        const element = await selectedFixture()
+        await nextFrame()
+
+        assert.isTrue(element.classList.contains('select'))
+        assert.equal(element.getAttribute('aria-selected'), 'true')
+      })
+
+      it('should update selection state when selected property changes', async () => {
+        const element = await basicFixture()
+        const updateSelectionStateSpy = sinon.spy(
+          element as UiMenuItem & { updateSelectionState: () => void },
+          'updateSelectionState'
+        )
+
+        element.selected = true
+        await nextFrame()
+
+        assert.isTrue(updateSelectionStateSpy.calledOnce)
+      })
+    })
+
+    describe('Value property', () => {
+      it('should have value property with default undefined', async () => {
+        const element = await basicFixture()
+        assert.isUndefined(element.value)
+      })
+
+      it('should set value property from attribute', async () => {
+        const element = await withValueFixture()
+        assert.equal(element.value, 'test-value')
+      })
+
+      it('should update value property dynamically', async () => {
+        const element = await basicFixture()
+
+        element.value = 'new-value'
+        await element.updateComplete
+        assert.equal(element.value, 'new-value')
+        assert.equal(element.getAttribute('value'), 'new-value')
+      })
+    })
+
+    describe('Selection icon functionality', () => {
+      it('should have showSelectionIcon property with default value false', async () => {
+        const element = await basicFixture()
+        assert.isFalse(element.showSelectionIcon)
+      })
+
+      it('should set showSelectionIcon property from attribute', async () => {
+        const element = await withSelectionIconFixture()
+        assert.isTrue(element.showSelectionIcon)
+      })
+
+      it('should show check icon when selected and showSelectionIcon is true', async () => {
+        const element = await withSelectionIconFixture()
+        await nextFrame()
+
+        const checkIcon = element.shadowRoot!.querySelector('.selection-check')
+        assert.isNotNull(checkIcon)
+        assert.equal(checkIcon!.textContent, 'check')
+      })
+
+      it('should not show check icon when not selected', async () => {
+        const element: UiMenuItem = await fixture(
+          html`<ui-menu-item showSelectionIcon>Not Selected Item</ui-menu-item>`
+        )
+        await nextFrame()
+
+        const checkIcon = element.shadowRoot!.querySelector('.selection-check')
+        assert.isNull(checkIcon)
+      })
+
+      it('should not show check icon when selected but showSelectionIcon is false', async () => {
+        const element = await selectedFixture()
+        await nextFrame()
+
+        const checkIcon = element.shadowRoot!.querySelector('.selection-check')
+        assert.isNull(checkIcon)
+      })
+
+      it('should toggle check icon visibility when selection changes', async () => {
+        const element: UiMenuItem = await fixture(html`<ui-menu-item showSelectionIcon>Toggle Item</ui-menu-item>`)
+        await nextFrame()
+
+        // Initially not selected, no icon
+        let checkIcon = element.shadowRoot!.querySelector('.selection-check')
+        assert.isNull(checkIcon)
+
+        // Select the item
+        element.selected = true
+        await nextFrame()
+        checkIcon = element.shadowRoot!.querySelector('.selection-check')
+        assert.isNotNull(checkIcon)
+
+        // Deselect the item
+        element.selected = false
+        await nextFrame()
+        checkIcon = element.shadowRoot!.querySelector('.selection-check')
+        assert.isNull(checkIcon)
+      })
+    })
+
+    describe('Selection events', () => {
+      it('should not dispatch select event when regular menu item is clicked', async () => {
+        const element = await basicFixture()
+        const selectSpy = sinon.spy()
+        element.addEventListener('select', selectSpy)
+
+        element.click()
+        await nextFrame()
+
+        assert.isFalse(selectSpy.called)
+      })
+
+      it('should not dispatch select event when submenu item is clicked', async () => {
+        const container = await withSubmenuFixture()
+        const menuItem = container.querySelector('#parent-item') as UiMenuItem
+        await nextFrame()
+
+        const selectSpy = sinon.spy()
+        menuItem.addEventListener('select', selectSpy)
+
+        menuItem.click()
+        await nextFrame()
+
+        assert.isFalse(selectSpy.called)
+      })
+
+      it('should bubble up select event from sub-menu selections', async () => {
+        const element = await basicFixture()
+        const selectSpy = sinon.spy()
+        element.addEventListener('select', selectSpy)
+
+        // Simulate a sub-menu selection event
+        const subMenuEvent = new CustomEvent('select', {
+          detail: { item: element, index: 0 },
+          bubbles: true,
+          composed: true,
+        })
+
+        // Access the protected method through type assertion
+        element['handleSubMenuSelect'](subMenuEvent)
+
+        assert.isTrue(selectSpy.calledOnce)
+        const dispatchedEvent = selectSpy.args[0][0] as CustomEvent
+        assert.equal(dispatchedEvent.detail.item, element)
+        assert.equal(dispatchedEvent.detail.index, 0)
+        assert.isTrue(dispatchedEvent.bubbles)
+        assert.isTrue(dispatchedEvent.composed)
+      })
+    })
+
+    describe('Accessibility for selection', () => {
+      it('should always have aria-selected attribute', async () => {
+        const element = await basicFixture()
+        await nextFrame()
+
+        assert.isNotNull(element.getAttribute('aria-selected'))
+      })
+
+      it('should have aria-selected="false" by default', async () => {
+        const element = await basicFixture()
+        await nextFrame()
+
+        assert.equal(element.getAttribute('aria-selected'), 'false')
+      })
+
+      it('should have aria-selected="true" when selected', async () => {
+        const element = await selectedFixture()
+        await nextFrame()
+
+        assert.equal(element.getAttribute('aria-selected'), 'true')
+      })
+
+      it('should maintain proper aria-selected state when toggling selection', async () => {
+        const element = await basicFixture()
+        await nextFrame()
+
+        // Initially false
+        assert.equal(element.getAttribute('aria-selected'), 'false')
+
+        // Select
+        element.selected = true
+        await nextFrame()
+        assert.equal(element.getAttribute('aria-selected'), 'true')
+
+        // Deselect
+        element.selected = false
+        await nextFrame()
+        assert.equal(element.getAttribute('aria-selected'), 'false')
+      })
+    })
+
+    describe('Selection state interaction with other properties', () => {
+      it('should maintain selection state when disabled', async () => {
+        const element = await selectedFixture()
+
+        element.disabled = true
+        await nextFrame()
+
+        assert.isTrue(element.selected)
+        assert.equal(element.getAttribute('aria-selected'), 'true')
+        assert.isTrue(element.classList.contains('select'))
+      })
+
+      it('should preserve value when selection changes', async () => {
+        const element = await withValueFixture()
+
+        element.selected = true
+        await nextFrame()
+
+        assert.equal(element.value, 'test-value')
+      })
+
+      it('should work with complex attribute combinations', async () => {
+        const element: UiMenuItem = await fixture(html`
+          <ui-menu-item selected showSelectionIcon value="complex-item" disabled> Complex Item </ui-menu-item>
+        `)
+        await nextFrame()
+
+        assert.isTrue(element.selected)
+        assert.isTrue(element.showSelectionIcon)
+        assert.equal(element.value, 'complex-item')
+        assert.isTrue(element.disabled)
+        assert.equal(element.getAttribute('aria-selected'), 'true')
+        assert.isTrue(element.classList.contains('select'))
+
+        const checkIcon = element.shadowRoot!.querySelector('.selection-check')
+        assert.isNotNull(checkIcon)
+      })
+    })
   })
 })