@api-client/ui 0.5.39 → 0.5.41

package/test/md/select/Select.test.ts

@@ -1,925 +0,0 @@
-import { assert, fixture, html, nextFrame, oneEvent } from '@open-wc/testing'
-import sinon from 'sinon'
-import UiSelect from '../../../src/md/select/internals/Select.js'
-import UiOption from '../../../src/md/select/internals/Option.js'
-import type { UiSelectChangeEvent } from '../../../src/md/select/internals/Select.js'
-
-import '../../../src/md/select/ui-select.js'
-import '../../../src/md/select/ui-option.js'
-import '../../../src/md/icons/ui-icon.js'
-
-describe('md', () => {
-  describe('UiSelect', () => {
-    async function basicFixture(): Promise<UiSelect> {
-      return fixture(html`
-        <ui-select label="Select an option">
-          <ui-option value="apple">Apple</ui-option>
-          <ui-option value="banana">Banana</ui-option>
-          <ui-option value="cherry">Cherry</ui-option>
-        </ui-select>
-      `)
-    }
-
-    async function withValueFixture(): Promise<UiSelect> {
-      return fixture(html`
-        <ui-select label="Select an option" value="banana">
-          <ui-option value="apple">Apple</ui-option>
-          <ui-option value="banana">Banana</ui-option>
-          <ui-option value="cherry">Cherry</ui-option>
-        </ui-select>
-      `)
-    }
-
-    async function requiredFixture(): Promise<UiSelect> {
-      return fixture(html`
-        <ui-select label="Required field" required>
-          <ui-option value="apple">Apple</ui-option>
-          <ui-option value="banana">Banana</ui-option>
-        </ui-select>
-      `)
-    }
-
-    async function disabledFixture(): Promise<UiSelect> {
-      return fixture(html`
-        <ui-select label="Disabled select" disabled>
-          <ui-option value="apple">Apple</ui-option>
-          <ui-option value="banana">Banana</ui-option>
-        </ui-select>
-      `)
-    }
-
-    async function formFixture(): Promise<HTMLFormElement> {
-      return fixture(html`
-        <form>
-          <input name="text" value="test" />
-          <ui-select name="fruit" label="Select fruit">
-            <ui-option value="apple">Apple</ui-option>
-            <ui-option value="banana">Banana</ui-option>
-          </ui-select>
-        </form>
-      `)
-    }
-
-    async function invalidFixture(): Promise<UiSelect> {
-      return fixture(html`
-        <ui-select label="Invalid select" invalid invalidText="This field is required">
-          <ui-option value="apple">Apple</ui-option>
-          <ui-option value="banana">Banana</ui-option>
-        </ui-select>
-      `)
-    }
-
-    async function emptyFixture(): Promise<UiSelect> {
-      return fixture(html`<ui-select label="Empty select"></ui-select>`)
-    }
-
-    async function selectedAttributeFixture(): Promise<UiSelect> {
-      return fixture(html`
-        <ui-select label="Select with pre-selected option">
-          <ui-option value="apple">Apple</ui-option>
-          <ui-option value="banana" selected>Banana</ui-option>
-          <ui-option value="cherry">Cherry</ui-option>
-        </ui-select>
-      `)
-    }
-
-    async function multipleSelectedFixture(): Promise<UiSelect> {
-      return fixture(html`
-        <ui-select label="Select with multiple selected">
-          <ui-option value="apple" selected>Apple</ui-option>
-          <ui-option value="banana" selected>Banana</ui-option>
-          <ui-option value="cherry">Cherry</ui-option>
-        </ui-select>
-      `)
-    }
-
-    async function selectedWithValueFixture(): Promise<UiSelect> {
-      return fixture(html`
-        <ui-select label="Select with both value and selected" value="cherry">
-          <ui-option value="apple">Apple</ui-option>
-          <ui-option value="banana" selected>Banana</ui-option>
-          <ui-option value="cherry">Cherry</ui-option>
-        </ui-select>
-      `)
-    }
-
-    async function dynamicOptionsFixture(): Promise<UiSelect> {
-      return fixture(html` <ui-select label="Dynamic options"> </ui-select> `)
-    }
-
-    describe('Basic functionality', () => {
-      it('should create select element', async () => {
-        const element = await basicFixture()
-        assert.instanceOf(element, UiSelect)
-        assert.equal(element.tagName.toLowerCase(), 'ui-select')
-      })
-
-      it('has formAssociated set', async () => {
-        assert.isTrue(UiSelect.formAssociated)
-      })
-
-      it('should have correct default properties', async () => {
-        const element = await basicFixture()
-        assert.isUndefined(element.value)
-        assert.isUndefined(element.name)
-        assert.equal(element.label, 'Select an option')
-        assert.isFalse(element.required)
-        assert.isUndefined(element.invalid)
-        assert.isUndefined(element.invalidText)
-        assert.isFalse(element.disabled)
-        assert.isFalse(element.open)
-        assert.isNull(element.selectedItem)
-        assert.equal(element.renderValue, '')
-      })
-
-      it('should set correct ARIA attributes', async () => {
-        const element = await basicFixture()
-        assert.equal(element.getAttribute('role'), 'combobox')
-        assert.equal(element.getAttribute('aria-haspopup'), 'listbox')
-        assert.equal(element.getAttribute('aria-controls'), 'menu')
-        assert.equal(element.getAttribute('aria-label'), 'Select an option')
-        assert.equal(element.tabIndex, 0)
-      })
-
-      it('should not have tabindex when disabled', async () => {
-        const element = await disabledFixture()
-        assert.equal(element.tabIndex, -1)
-      })
-    })
-
-    describe('Value and selection', () => {
-      it('should set value and select corresponding option', async () => {
-        const element = await basicFixture()
-        element.value = 'banana'
-        await element.updateComplete
-        // We need it here because the observer also awaits updateComplete
-        await nextFrame()
-
-        assert.equal(element.value, 'banana')
-        assert.isNotNull(element.selectedItem)
-        assert.equal(element.selectedItem!.value, 'banana')
-        assert.equal(element.renderValue, 'Banana')
-      })
-
-      it('should initialize with preselected value', async () => {
-        const element = await withValueFixture()
-        await element.updateComplete
-
-        assert.equal(element.value, 'banana')
-        assert.isNotNull(element.selectedItem)
-        assert.equal(element.selectedItem!.value, 'banana')
-        assert.equal(element.renderValue, 'Banana')
-      })
-
-      it('should handle invalid value gracefully', async () => {
-        const element = await basicFixture()
-        element.value = 'nonexistent'
-        await element.updateComplete
-
-        assert.equal(element.value, 'nonexistent')
-        assert.isNull(element.selectedItem)
-        assert.equal(element.renderValue, '')
-      })
-
-      it('should clear selection when value is undefined', async () => {
-        const element = await withValueFixture()
-        await element.updateComplete
-
-        element.value = undefined
-        await element.updateComplete
-        // We need it here because the observer also awaits updateComplete
-        await nextFrame()
-
-        assert.isUndefined(element.value, 'the value should be undefined')
-        assert.isNull(element.selectedItem, 'selected item should be null')
-        assert.equal(element.renderValue, '')
-      })
-
-      it('should discover selected attribute on options', async () => {
-        const element = await selectedAttributeFixture()
-        await element.updateComplete
-
-        assert.equal(element.value, 'banana')
-        assert.isNotNull(element.selectedItem)
-        assert.equal(element.selectedItem!.value, 'banana')
-        assert.equal(element.renderValue, 'Banana')
-      })
-
-      it('should handle multiple selected options by selecting the first one', async () => {
-        const element = await multipleSelectedFixture()
-        await element.updateComplete
-        await nextFrame()
-
-        // When multiple options have selected attribute, only the first one should be selected
-        assert.equal(element.value, 'apple')
-        assert.isNotNull(element.selectedItem)
-        assert.equal(element.selectedItem!.value, 'apple') // First selected item
-        assert.equal(element.renderValue, 'Apple') // Display value should match the first selected item
-      })
-
-      it('should prioritize value over selected attribute', async () => {
-        const element = await selectedWithValueFixture()
-        await element.updateComplete
-
-        assert.equal(element.value, 'cherry')
-        assert.isNotNull(element.selectedItem)
-        assert.equal(element.selectedItem!.value, 'cherry')
-        assert.equal(element.renderValue, 'Cherry')
-      })
-
-      it('should update value when options change dynamically', async () => {
-        const element = await dynamicOptionsFixture()
-        await element.updateComplete
-
-        // Initially, there are no options, so value should be undefined
-        assert.isUndefined(element.value)
-
-        // Add options dynamically
-        element.innerHTML = `
-          <ui-option value="apple">Apple</ui-option>
-          <ui-option value="banana" selected>Banana</ui-option>
-          <ui-option value="cherry">Cherry</ui-option>
-        `
-        await element.updateComplete
-        await nextFrame()
-
-        // The value should now reflect the selected option
-        assert.equal(element.value, 'banana')
-        assert.isNotNull(element.selectedItem)
-        assert.equal(element.selectedItem!.value, 'banana')
-        assert.equal(element.renderValue, 'Banana')
-      })
-    })
-
-    describe('Form integration', () => {
-      it('should have no form when not in form', async () => {
-        const element = await basicFixture()
-        assert.isNull(element.form)
-      })
-
-      it('should have form when in a form', async () => {
-        const form = await formFixture()
-        const select = form.querySelector('ui-select')!
-        assert.ok(select.form, 'has a form')
-        assert.isTrue(select.form === form, 'has the parent form')
-      })
-
-      it('should participate in form submission', async () => {
-        const form = await formFixture()
-        const select = form.querySelector('ui-select')!
-        select.value = 'apple'
-        await select.updateComplete
-
-        const formData = new FormData(form)
-        assert.equal(formData.get('fruit'), 'apple')
-      })
-
-      it('should update form value on selection change', async () => {
-        const form = await formFixture()
-        const select = form.querySelector('ui-select')!
-
-        // Simulate selection of 'banana'
-        const bananaOption = select.querySelector('ui-option[value="banana"]') as UiOption
-        select.handleSelect(new CustomEvent('select', { detail: { item: bananaOption } }))
-        await select.updateComplete
-
-        const formData = new FormData(form)
-        assert.equal(formData.get('fruit'), 'banana', 'Form data should be "banana" after selection')
-      })
-
-      it('should clear form value when value is set to undefined', async () => {
-        const form = await formFixture()
-        const select = form.querySelector('ui-select')!
-        select.value = 'apple'
-        await select.updateComplete
-
-        let formData = new FormData(form)
-        assert.equal(formData.get('fruit'), 'apple', 'Form data should be "apple" initially')
-
-        select.value = undefined
-        await select.updateComplete
-
-        formData = new FormData(form)
-        assert.isNull(formData.get('fruit'), 'Form data should be null after clearing value')
-      })
-
-      it('should not submit when no value selected', async () => {
-        const form = await formFixture()
-        const formData = new FormData(form)
-        assert.isNull(formData.get('fruit'))
-      })
-
-      it('should reset value on form reset', async () => {
-        const form = await formFixture()
-        const select = form.querySelector('ui-select')!
-        select.value = 'apple'
-        await select.updateComplete
-
-        select.formResetCallback()
-        assert.isUndefined(select.value)
-      })
-
-      it('should restore state', async () => {
-        const element = await basicFixture()
-        element.formStateRestoreCallback('cherry')
-        assert.equal(element.value, 'cherry')
-
-        element.formStateRestoreCallback(null)
-        assert.isUndefined(element.value)
-      })
-    })
-
-    describe('Validation', () => {
-      it('should be valid by default', async () => {
-        const element = await basicFixture()
-        assert.isTrue(element.checkValidity())
-        assert.isTrue(element.validity.valid)
-        assert.equal(element.validationMessage, '')
-      })
-
-      it('should be invalid when required and no value', async () => {
-        const element = await requiredFixture()
-        element.validate()
-        await element.updateComplete
-
-        assert.isFalse(element.checkValidity())
-        assert.isFalse(element.validity.valid)
-        assert.isTrue(element.validity.valueMissing)
-        assert.equal(element.validationMessage, 'Please select an item.')
-        assert.isTrue(element.invalid)
-        assert.equal(element.invalidText, 'Please select an item.')
-      })
-
-      it('should be valid when required and has value', async () => {
-        const element = await requiredFixture()
-        element.value = 'apple'
-        await element.updateComplete
-
-        assert.isTrue(element.checkValidity())
-        assert.isTrue(element.validity.valid)
-        assert.equal(element.validationMessage, '')
-        assert.isFalse(element.invalid)
-      })
-
-      it('should display invalid state', async () => {
-        const element = await invalidFixture()
-        assert.isTrue(element.invalid)
-        assert.equal(element.invalidText, 'This field is required')
-      })
-    })
-
-    describe('Keyboard interaction', () => {
-      it('should open dropdown on Enter key', async () => {
-        const element = await basicFixture()
-        assert.isFalse(element.open)
-
-        element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
-        await nextFrame()
-
-        assert.isTrue(element.open)
-      })
-
-      it('should open dropdown on Space key', async () => {
-        const element = await basicFixture()
-        assert.isFalse(element.open)
-
-        element.dispatchEvent(new KeyboardEvent('keydown', { key: ' ' }))
-        await nextFrame()
-
-        assert.isTrue(element.open)
-      })
-
-      it('should open dropdown on ArrowDown key', async () => {
-        const element = await basicFixture()
-        assert.isFalse(element.open)
-
-        element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
-        await nextFrame()
-
-        assert.isTrue(element.open)
-      })
-
-      it('should open dropdown on ArrowUp key', async () => {
-        const element = await basicFixture()
-        assert.isFalse(element.open)
-
-        element.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
-        await nextFrame()
-
-        assert.isTrue(element.open)
-      })
-
-      it('should close dropdown on Escape key', async () => {
-        const element = await basicFixture()
-        element.open = true
-        await element.updateComplete
-
-        element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
-        await nextFrame()
-
-        assert.isFalse(element.open)
-      })
-
-      it('should not respond to keyboard when disabled', async () => {
-        const element = await disabledFixture()
-        element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))
-        await nextFrame()
-
-        assert.isFalse(element.open)
-      })
-
-      it('should handle Tab key when menu is open', async () => {
-        const element = await basicFixture()
-        element.open = true
-        await element.updateComplete
-
-        element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }))
-        await element.updateComplete
-
-        assert.isFalse(element.open)
-      })
-    })
-
-    describe('Mouse interaction', () => {
-      it('should open dropdown on click', async () => {
-        const element = await basicFixture()
-        assert.isFalse(element.open)
-
-        element.click()
-        await nextFrame()
-
-        assert.isTrue(element.open)
-      })
-
-      it('should not respond to click when disabled', async () => {
-        const element = await disabledFixture()
-        element.click()
-        await nextFrame()
-
-        assert.isFalse(element.open)
-      })
-
-      it('should close on blur when focus leaves component', async () => {
-        const element = await basicFixture()
-        element.open = true
-        await element.updateComplete
-
-        // Simulate blur event with no related target (focus leaving completely)
-        element.dispatchEvent(new FocusEvent('blur', { relatedTarget: null }))
-        await nextFrame()
-
-        assert.isFalse(element.open)
-      })
-
-      it('should not close on blur when focus moves to menu', async () => {
-        const element = await basicFixture()
-        element.open = true
-        await element.updateComplete
-
-        const menu = element.shadowRoot!.querySelector('.menu')!
-        // Simulate blur event with menu as related target
-        element.dispatchEvent(new FocusEvent('blur', { relatedTarget: menu as HTMLElement }))
-        await nextFrame()
-
-        assert.isTrue(element.open)
-      })
-    })
-
-    describe('Selection events', () => {
-      it('should dispatch change event when selection changes', async () => {
-        const element = await basicFixture()
-        element.open = true
-        await element.updateComplete
-
-        const changePromise = oneEvent(element, 'change')
-
-        // Simulate option selection
-        const option = element.querySelector('ui-option[value="apple"]') as UiOption
-        element.handleSelect(new CustomEvent('select', { detail: { item: option } }))
-
-        const changeEvent = (await changePromise) as CustomEvent<UiSelectChangeEvent>
-        assert.equal(changeEvent.detail.value, 'apple')
-        assert.equal(changeEvent.detail.item, option)
-        assert.isFalse(changeEvent.bubbles)
-        assert.isTrue(changeEvent.composed)
-        assert.isFalse(element.open) // Should close after selection
-      })
-
-      it('should dispatch open event when opening', async () => {
-        const element = await basicFixture()
-        await element.updateComplete
-
-        const openPromise = oneEvent(element, 'open')
-        element.open = true
-        await element.updateComplete
-
-        const openEvent = await openPromise
-        assert.isFalse(openEvent.bubbles)
-        assert.isTrue(openEvent.composed)
-      })
-
-      it('should dispatch close event when closing', async () => {
-        const element = await basicFixture()
-        element.open = true
-        await element.updateComplete
-
-        const closePromise = oneEvent(element, 'close')
-        element.open = false
-        await element.updateComplete
-
-        const closeEvent = await closePromise
-        assert.isFalse(closeEvent.bubbles)
-        assert.isTrue(closeEvent.composed)
-      })
-    })
-
-    describe('Menu integration', () => {
-      it('should highlight selected item when menu opens', async () => {
-        const element = await withValueFixture()
-        await element.updateComplete
-
-        // Check that menu shows popover when opened
-        element.open = true
-        await element.updateComplete
-
-        const menu = element.shadowRoot!.querySelector('ui-menu')!
-        assert.isTrue(menu.matches(':popover-open'))
-      })
-
-      it('should highlight first item when no selection and menu opens', async () => {
-        const element = await basicFixture()
-        await element.updateComplete
-
-        // Check that menu opens correctly
-        element.open = true
-        await element.updateComplete
-
-        const menu = element.shadowRoot!.querySelector('ui-menu')!
-        assert.isTrue(menu.matches(':popover-open'))
-      })
-
-      it('should handle menu close event', async () => {
-        const element = await basicFixture()
-        element.open = true
-        await element.updateComplete
-
-        element.handleMenuClose()
-        assert.isFalse(element.open)
-      })
-
-      it('should handle highlight change events', async () => {
-        const element = await basicFixture()
-        const option = element.querySelector('ui-option') as UiOption
-        option.id = 'test-option'
-
-        element.handleHighlightChange(
-          new CustomEvent('highlightchange', {
-            detail: { item: option },
-          })
-        )
-
-        await element.updateComplete
-
-        // Check that the highlight change was processed
-        // by verifying the DOM reflects the active descendant
-        const container = element.shadowRoot!.querySelector('.ui-select')!
-        assert.equal(container.getAttribute('aria-activedescendant'), 'test-option')
-      })
-
-      it('should clear aria-activedescendant when no item highlighted', async () => {
-        const element = await basicFixture()
-        element.handleHighlightChange(
-          new CustomEvent('highlightchange', {
-            detail: { item: null },
-          })
-        )
-
-        // Check that aria-activedescendant is cleared
-        const container = element.shadowRoot!.querySelector('.ui-select')!
-        assert.equal(container.getAttribute('aria-activedescendant'), '')
-      })
-    })
-
-    describe('Accessibility', () => {
-      it('should update aria-expanded when opening/closing', async () => {
-        const element = await basicFixture()
-        await element.updateComplete
-
-        element.open = true
-        await element.updateComplete
-        assert.equal(element.getAttribute('aria-expanded'), 'true')
-
-        element.open = false
-        await element.updateComplete
-        assert.equal(element.getAttribute('aria-expanded'), 'false')
-      })
-
-      it('should set aria-label from label property', async () => {
-        const element = await basicFixture()
-        element.label = 'Test label'
-        await element.updateComplete
-
-        assert.equal(element.getAttribute('aria-label'), 'Test label')
-      })
-
-      it('should remove aria-label when label is cleared', async () => {
-        const element = await basicFixture()
-        element.label = undefined
-        await element.updateComplete
-
-        assert.isFalse(element.hasAttribute('aria-label'))
-      })
-
-      it('should support aria-activedescendant', async () => {
-        const element = await basicFixture()
-        const option = element.querySelector('ui-option') as UiOption
-        option.id = 'test-id'
-
-        // Simulate highlight change to set aria-activedescendant
-        element.handleHighlightChange(
-          new CustomEvent('highlightchange', {
-            detail: { item: option },
-          })
-        )
-        await element.updateComplete
-
-        const container = element.shadowRoot!.querySelector('.ui-select')!
-        assert.equal(container.getAttribute('aria-activedescendant'), 'test-id')
-      })
-    })
-
-    describe('Edge cases', () => {
-      it('should handle empty option list', async () => {
-        const element = await emptyFixture()
-        element.value = 'nonexistent'
-        await element.updateComplete
-
-        assert.equal(element.value, 'nonexistent')
-        assert.isNull(element.selectedItem)
-        assert.equal(element.renderValue, '')
-      })
-
-      it('should handle setting open before menu is rendered', async () => {
-        const element = await basicFixture()
-        await element.updateComplete
-
-        // This should not throw an error even with timing issues
-        element.open = true
-        await element.updateComplete
-
-        assert.isTrue(element.open)
-
-        element.open = false
-        await element.updateComplete
-
-        assert.isFalse(element.open)
-      })
-
-      it('should maintain focus during interaction', async () => {
-        const element = await basicFixture()
-        const focusSpy = sinon.spy(element, 'focus')
-
-        // Simulate selection
-        const option = element.querySelector('ui-option[value="apple"]') as UiOption
-        element.handleSelect(new CustomEvent('select', { detail: { item: option } }))
-
-        assert.isTrue(focusSpy.called)
-      })
-
-      it('should handle selection with prevented event', async () => {
-        const element = await basicFixture()
-        element.open = true
-        await element.updateComplete
-
-        const event = new CustomEvent('select', {
-          detail: { item: element.querySelector('ui-option') as UiOption },
-        })
-        const stopPropagationSpy = sinon.spy(event, 'stopPropagation')
-
-        element.handleSelect(event)
-        assert.isTrue(stopPropagationSpy.called)
-      })
-    })
-
-    describe('Rendering', () => {
-      it('should render with correct classes', async () => {
-        const element = await basicFixture()
-        await element.updateComplete
-
-        const container = element.shadowRoot!.querySelector('.ui-select')!
-        assert.isTrue(container.classList.contains('ui-select'))
-        assert.isFalse(container.classList.contains('open'))
-        assert.isFalse(container.classList.contains('disabled'))
-      })
-
-      it('should render with open class when open', async () => {
-        const element = await basicFixture()
-        element.open = true
-        await element.updateComplete
-
-        const container = element.shadowRoot!.querySelector('.ui-select')!
-        assert.isTrue(container.classList.contains('open'))
-      })
-
-      it('should render with disabled class when disabled', async () => {
-        const element = await disabledFixture()
-        await element.updateComplete
-
-        const container = element.shadowRoot!.querySelector('.ui-select')!
-        assert.isTrue(container.classList.contains('disabled'))
-      })
-
-      it('should render focus ring', async () => {
-        const element = await basicFixture()
-        await element.updateComplete
-
-        const focusRing = element.shadowRoot!.querySelector('md-focus-ring')!
-        assert.isNotNull(focusRing)
-        assert.equal(focusRing.getAttribute('part'), 'focus-ring')
-      })
-
-      it('should render text field with correct properties', async () => {
-        const element = await withValueFixture()
-        await element.updateComplete
-
-        const textField = element.shadowRoot!.querySelector('ui-outlined-text-field')!
-        assert.equal(textField.label, 'Select an option')
-        // The text field should show the render value of the selected option
-        assert.equal(textField.value, element.renderValue)
-        assert.isTrue(textField.hasAttribute('readonly'))
-        assert.equal(textField.tabIndex, -1)
-        assert.isTrue(textField.hasAttribute('inert'))
-        assert.equal(textField.getAttribute('aria-hidden'), 'true')
-      })
-
-      it('should render dropdown icon', async () => {
-        const element = await basicFixture()
-        await element.updateComplete
-
-        const icon = element.shadowRoot!.querySelector('ui-icon[slot="suffix"]')!
-        assert.equal(icon.textContent!.trim(), 'arrow_drop_down')
-      })
-
-      it('should render menu with correct attributes', async () => {
-        const element = await basicFixture()
-        await element.updateComplete
-
-        const menu = element.shadowRoot!.querySelector('ui-menu')!
-        assert.equal(menu.id, 'menu')
-        assert.equal(menu.getAttribute('popover'), 'auto')
-        assert.equal(menu.getAttribute('selector'), 'ui-option')
-      })
-
-      it('should slot options correctly', async () => {
-        const element = await basicFixture()
-        await element.updateComplete
-
-        const options = element.querySelectorAll('ui-option')
-        assert.equal(options.length, 3)
-        assert.equal(options[0].value, 'apple')
-        assert.equal(options[1].value, 'banana')
-        assert.equal(options[2].value, 'cherry')
-      })
-    })
-
-    describe('Selected attribute discovery', () => {
-      it('should discover and set value from selected attribute on initialization', async () => {
-        const element = await selectedAttributeFixture()
-        await element.updateComplete
-        await nextFrame()
-
-        assert.equal(element.value, 'banana', 'value should be set from selected option')
-        assert.isNotNull(element.selectedItem, 'selected item should not be null')
-        assert.equal(element.selectedItem!.value, 'banana', 'selected item should be the banana option')
-        assert.equal(element.renderValue, 'Banana', 'render value should match selected option')
-      })
-
-      it('should handle case with no selected options', async () => {
-        const element = await basicFixture()
-        await element.updateComplete
-        await nextFrame()
-
-        assert.isUndefined(element.value, 'value should be undefined when no options are selected')
-        assert.isNull(element.selectedItem, 'selected item should be null when no options are selected')
-        assert.equal(element.renderValue, '', 'render value should be empty when no options are selected')
-      })
-
-      it('should select the first option when multiple options have selected attribute', async () => {
-        const element = await multipleSelectedFixture()
-        await element.updateComplete
-        await nextFrame()
-
-        assert.equal(element.value, 'apple', 'should select the first option with selected attribute')
-        assert.isNotNull(element.selectedItem, 'selected item should not be null')
-        assert.equal(element.selectedItem!.value, 'apple', 'selected item should be the first selected option')
-        assert.equal(element.renderValue, 'Apple', 'render value should match first selected option')
-      })
-
-      it('should prioritize explicit value property over selected attribute', async () => {
-        const element = await selectedWithValueFixture()
-        await element.updateComplete
-        await nextFrame()
-
-        assert.equal(element.value, 'cherry', 'value property should take precedence')
-        assert.isNotNull(element.selectedItem, 'selected item should not be null')
-        assert.equal(element.selectedItem!.value, 'cherry', 'selected item should match value property')
-        assert.equal(element.renderValue, 'Cherry', 'render value should match value property')
-      })
-
-      it('should rediscover selected options when value is cleared', async () => {
-        const element = await selectedAttributeFixture()
-        await element.updateComplete
-        await nextFrame()
-
-        // First, verify it's initialized correctly
-        assert.equal(element.value, 'banana')
-
-        // Now clear the value and it should fall back to selected attribute
-        element.value = undefined
-        await element.updateComplete
-        await nextFrame()
-
-        assert.equal(element.value, 'banana', 'should rediscover selected option when value is cleared')
-        assert.isNotNull(element.selectedItem, 'selected item should not be null')
-        assert.equal(element.selectedItem!.value, 'banana', 'selected item should be rediscovered')
-      })
-
-      it('should handle dynamically added options with selected attribute', async () => {
-        const element = await dynamicOptionsFixture()
-        await element.updateComplete
-        await nextFrame()
-
-        // Initially no options
-        assert.isUndefined(element.value)
-        assert.isNull(element.selectedItem)
-
-        // Add options dynamically
-        element.innerHTML = `
-          <ui-option value="apple">Apple</ui-option>
-          <ui-option value="banana" selected>Banana</ui-option>
-          <ui-option value="cherry">Cherry</ui-option>
-        `
-
-        await element.updateComplete
-        await nextFrame()
-
-        assert.equal(element.value, 'banana', 'should discover selected option from dynamically added content')
-        assert.isNotNull(element.selectedItem, 'selected item should not be null')
-        assert.equal(
-          (element.selectedItem as UiOption)!.value,
-          'banana',
-          'selected item should be the dynamically added selected option'
-        )
-      })
-
-      it('should update when selected attribute is added to existing option', async () => {
-        const element = await basicFixture()
-        await element.updateComplete
-        await nextFrame()
-
-        // Initially no selection
-        assert.isUndefined(element.value)
-        assert.isNull(element.selectedItem)
-
-        // Add selected attribute to an option
-        const bananaOption = element.querySelector('ui-option[value="banana"]') as UiOption
-        bananaOption.selected = true
-
-        // Trigger setCurrentOption manually since we changed the DOM
-        await (element as UiSelect & { setCurrentOption(): Promise<void> }).setCurrentOption()
-        await element.updateComplete
-        await nextFrame()
-
-        assert.equal(element.value, 'banana', 'should discover newly selected option')
-        assert.isNotNull(element.selectedItem, 'selected item should not be null')
-        assert.equal(
-          (element.selectedItem as UiOption)!.value,
-          'banana',
-          'selected item should be the newly selected option'
-        )
-      })
-
-      it('should clear selection when selected attribute is removed from all options', async () => {
-        const element = await selectedAttributeFixture()
-        await element.updateComplete
-        await nextFrame()
-
-        // Initially has selection
-        assert.equal(element.value, 'banana')
-
-        // Remove selected attribute
-        const bananaOption = element.querySelector('ui-option[value="banana"]') as UiOption
-        bananaOption.selected = false
-
-        // Clear the value to trigger rediscovery
-        element.value = undefined
-        await element.updateComplete
-        await nextFrame()
-
-        assert.isUndefined(element.value, 'value should be undefined when no options are selected')
-        assert.isNull(element.selectedItem, 'selected item should be null when no options are selected')
-        assert.equal(element.renderValue, '', 'render value should be empty when no options are selected')
-      })
-    })
-  })
-})