@api-client/ui 0.5.21 → 0.5.22

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)
+      })
+    })
   })
 })