@api-client/ui 0.5.29 → 0.5.30

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

@@ -73,6 +73,40 @@ describe('md', () => {
       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()
@@ -160,6 +194,61 @@ describe('md', () => {
         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', () => {
@@ -663,5 +752,145 @@ describe('md', () => {
         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')
+      })
+    })
   })
 })