@oslokommune/punkt-elements 15.4.5 → 16.0.2

package/src/components/combobox/{combobox.test.ts → combobox.core.test.ts}

@@ -67,31 +67,31 @@ describe('PktCombobox', () => {
       const wrapper = combobox.querySelector('pkt-input-wrapper')
       const comboboxDiv = wrapper?.querySelector('.pkt-combobox')
       const inputDiv = comboboxDiv?.querySelector('.pkt-combobox__input')
-      const arrowButton = inputDiv?.querySelector('.pkt-combobox__arrow')
+      const arrowIcon = inputDiv?.querySelector('.pkt-combobox__arrow-icon')
       const listbox = comboboxDiv?.querySelector('pkt-listbox')
 
       expect(wrapper).toBeInTheDocument()
       expect(comboboxDiv).toBeInTheDocument()
       expect(inputDiv).toBeInTheDocument()
-      expect(arrowButton).toBeInTheDocument()
+      expect(arrowIcon).toBeInTheDocument()
       expect(listbox).toBeInTheDocument()
     })
 
-    test('renders arrow button with correct attributes', async () => {
+    test('renders select-only combobox with correct ARIA attributes', async () => {
       const container = await createCombobox('id="test-arrow" name="test" label="Test"')
 
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
-      const arrowButton = combobox.querySelector('.pkt-combobox__arrow')
-      const icon = arrowButton?.querySelector('pkt-icon')
+      const comboboxInput = combobox.querySelector('.pkt-combobox__input')
+      const icon = comboboxInput?.querySelector('pkt-icon')
 
-      expect(arrowButton?.getAttribute('id')).toBe('test-arrow-arrow')
-      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
-      expect(arrowButton?.getAttribute('aria-controls')).toBe('test-arrow-listbox')
-      expect(arrowButton?.getAttribute('aria-haspopup')).toBe('listbox')
-      expect(arrowButton?.getAttribute('aria-label')).toBe('Åpne liste')
-      expect(arrowButton?.getAttribute('role')).toBe('button')
+      expect(comboboxInput?.getAttribute('id')).toBe('test-arrow-combobox')
+      expect(comboboxInput?.getAttribute('aria-expanded')).toBe('false')
+      expect(comboboxInput?.getAttribute('aria-controls')).toBe('test-arrow-listbox')
+      expect(comboboxInput?.getAttribute('aria-haspopup')).toBe('listbox')
+      expect(comboboxInput?.getAttribute('aria-labelledby')).toBe('test-arrow-combobox-label')
+      expect(comboboxInput?.getAttribute('role')).toBe('combobox')
       expect(icon?.getAttribute('name')).toBe('chevron-thin-down')
     })
   })
@@ -103,7 +103,7 @@ describe('PktCombobox', () => {
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
-      expect(combobox.value).toBe(undefined)
+      expect(combobox.value).toBe('')
       expect(combobox.allowUserInput).toBe(false)
       expect(combobox.typeahead).toBe(false)
       expect(combobox.includeSearch).toBe(false)
@@ -124,11 +124,11 @@ describe('PktCombobox', () => {
       expect(combobox.multiple).toBe(true)
 
       const listbox = combobox.querySelector('pkt-listbox')
-      expect(listbox?.hasAttribute('ismultiselect')).toBe(true)
+      expect(listbox?.hasAttribute('is-multi-select')).toBe(true)
     })
 
     test('handles allowUserInput property correctly', async () => {
-      const container = await createCombobox('id="test" name="test" allowUserInput')
+      const container = await createCombobox('id="test" name="test" allow-user-input')
 
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
@@ -154,7 +154,7 @@ describe('PktCombobox', () => {
     })
 
     test('handles includeSearch property correctly', async () => {
-      const container = await createCombobox('id="test" name="test" includeSearch')
+      const container = await createCombobox('id="test" name="test" include-search')
 
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
@@ -162,7 +162,7 @@ describe('PktCombobox', () => {
       expect(combobox.includeSearch).toBe(true)
 
       const listbox = combobox.querySelector('pkt-listbox')
-      expect(listbox?.hasAttribute('includesearch')).toBe(true)
+      expect(listbox?.hasAttribute('include-search')).toBe(true)
     })
 
     test('handles disabled property correctly', async () => {
@@ -173,11 +173,9 @@ describe('PktCombobox', () => {
 
       expect(combobox.disabled).toBe(true)
 
-      const inputDiv = combobox.querySelector('.pkt-combobox__input')
-      const arrowButton = combobox.querySelector('.pkt-combobox__arrow')
-      expect(inputDiv).toHaveClass('pkt-combobox__input--disabled')
-      expect(arrowButton?.getAttribute('tabindex')).toBe('-1')
-      expect(arrowButton?.hasAttribute('disabled')).toBe(true)
+      const comboboxInput = combobox.querySelector('.pkt-combobox__input')
+      expect(comboboxInput).toHaveClass('pkt-combobox__input--disabled')
+      expect(comboboxInput?.getAttribute('tabindex')).toBe('-1')
     })
 
     test('handles fullwidth property correctly', async () => {
@@ -256,7 +254,7 @@ describe('PktCombobox', () => {
     })
 
     test('preserves userAdded options when defaultOptions change', async () => {
-      const container = await createCombobox('id="test" name="test" allowUserInput')
+      const container = await createCombobox('id="test" name="test" allow-user-input')
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
@@ -281,7 +279,7 @@ describe('PktCombobox', () => {
     })
 
     test('preserves userAdded option when parent replaces options by overwriting options property', async () => {
-      const container = await createCombobox('id="test" name="test" allowUserInput')
+      const container = await createCombobox('id="test" name="test" allow-user-input')
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
       ;(combobox as any).addNewUserValue('userAdded')
@@ -322,7 +320,7 @@ describe('PktCombobox', () => {
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
-      expect(combobox.value).toEqual(['value1', 'value2'])
+      expect(combobox.value).toBe('value1,value2')
       expect(combobox['_value']).toEqual(['value1', 'value2'])
     })
 
@@ -378,7 +376,7 @@ describe('PktCombobox', () => {
 
     test('shows placeholder in multiple mode with outside tag placement', async () => {
       const container = await createCombobox(
-        'id="test" name="test" placeholder="Select options" multiple tagPlacement="outside"',
+        'id="test" name="test" placeholder="Select options" multiple tag-placement="outside"',
       )
 
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
@@ -407,7 +405,7 @@ describe('PktCombobox', () => {
       const testOptions: IPktComboboxOption[] = [{ value: 'option1', label: 'Option 1' }]
 
       const container = await createCombobox(
-        'id="test" name="test" multiple tagPlacement="outside" value="option1"',
+        'id="test" name="test" multiple tag-placement="outside" value="option1"',
       )
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       combobox.options = testOptions
@@ -435,7 +433,7 @@ describe('PktCombobox', () => {
     })
 
     test('renders text input when allowUserInput is true', async () => {
-      const container = await createCombobox('id="test" name="test-name" allowUserInput')
+      const container = await createCombobox('id="test" name="test-name" allow-user-input')
 
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
@@ -463,7 +461,7 @@ describe('PktCombobox', () => {
     })
 
     test('sets correct aria-autocomplete for allowUserInput', async () => {
-      const container = await createCombobox('id="test" name="test" allowUserInput')
+      const container = await createCombobox('id="test" name="test" allow-user-input')
 
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
@@ -480,7 +478,7 @@ describe('PktCombobox', () => {
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
-      const arrowButton = combobox.querySelector('.pkt-combobox__arrow')
+      const arrowButton = combobox.querySelector('.pkt-combobox__input')
       const inputDiv = combobox.querySelector('.pkt-combobox__input')
 
       expect(combobox['_isOptionsOpen']).toBe(false)
@@ -502,7 +500,7 @@ describe('PktCombobox', () => {
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
-      const arrowButton = combobox.querySelector('.pkt-combobox__arrow')
+      const arrowButton = combobox.querySelector('.pkt-combobox__input')
 
       // Click to open
       fireEvent.click(arrowButton!)
@@ -521,7 +519,7 @@ describe('PktCombobox', () => {
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
-      const arrowButton = combobox.querySelector('.pkt-combobox__arrow')
+      const arrowButton = combobox.querySelector('.pkt-combobox__input')
 
       // Try to click when disabled
       fireEvent.click(arrowButton!)
@@ -533,18 +531,18 @@ describe('PktCombobox', () => {
 
   describe('Search functionality', () => {
     test('handles search input when includeSearch is true', async () => {
-      const container = await createCombobox('id="test" name="test" includeSearch')
+      const container = await createCombobox('id="test" name="test" include-search')
 
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
       const listbox = combobox.querySelector('pkt-listbox')
-      expect(listbox?.hasAttribute('includesearch')).toBe(true)
+      expect(listbox?.hasAttribute('include-search')).toBe(true)
     })
 
     test('sets search placeholder correctly', async () => {
       const container = await createCombobox(
-        'id="test" name="test" includeSearch searchPlaceholder="Search items..."',
+        'id="test" name="test" include-search search-placeholder="Search items..."',
       )
 
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
@@ -564,7 +562,7 @@ describe('PktCombobox', () => {
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
-      const arrowButton = combobox.querySelector('.pkt-combobox__arrow')
+      const arrowButton = combobox.querySelector('.pkt-combobox__input')
 
       // Test Enter key
       fireEvent.keyDown(arrowButton!, { key: 'Enter' })
@@ -580,7 +578,7 @@ describe('PktCombobox', () => {
     })
 
     test('handles input focus for text inputs', async () => {
-      const container = await createCombobox('id="test" name="test" allowUserInput')
+      const container = await createCombobox('id="test" name="test" allow-user-input')
 
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
@@ -621,7 +619,7 @@ describe('PktCombobox', () => {
       ]
 
       const container = await createCombobox(
-        'id="test" name="test" multiple allowUserInput maxlength="2"',
+        'id="test" name="test" multiple allow-user-input maxlength="2"',
       )
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       combobox.options = testOptions
@@ -672,22 +670,23 @@ describe('PktCombobox', () => {
       expect(results).toHaveNoViolations()
     })
 
-    test('sets correct ARIA attributes on arrow button', async () => {
+    test('sets correct ARIA attributes on select-only combobox', async () => {
       const container = await createCombobox('id="test-aria" name="test" label="Test"')
 
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
-      const arrowButton = combobox.querySelector('.pkt-combobox__arrow')
-      expect(arrowButton?.getAttribute('aria-controls')).toBe('test-aria-listbox')
-      expect(arrowButton?.getAttribute('aria-haspopup')).toBe('listbox')
-      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
-      expect(arrowButton?.getAttribute('aria-label')).toBe('Åpne liste')
+      const comboboxInput = combobox.querySelector('.pkt-combobox__input')
+      expect(comboboxInput?.getAttribute('role')).toBe('combobox')
+      expect(comboboxInput?.getAttribute('aria-controls')).toBe('test-aria-listbox')
+      expect(comboboxInput?.getAttribute('aria-haspopup')).toBe('listbox')
+      expect(comboboxInput?.getAttribute('aria-expanded')).toBe('false')
+      expect(comboboxInput?.getAttribute('aria-labelledby')).toBe('test-aria-combobox-label')
     })
 
     test('sets correct ARIA attributes on text input', async () => {
       const container = await createCombobox(
-        'id="test-input" name="test" label="Test Label" allowUserInput',
+        'id="test-input" name="test" label="Test Label" allow-user-input',
       )
 
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
@@ -703,7 +702,9 @@ describe('PktCombobox', () => {
     test('sets correct aria-activedescendant when value is selected', async () => {
       const testOptions: IPktComboboxOption[] = [{ value: 'option1', label: 'Option 1' }]
 
-      const container = await createCombobox('id="test" name="test" allowUserInput value="option1"')
+      const container = await createCombobox(
+        'id="test" name="test" allow-user-input value="option1"',
+      )
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       combobox.options = testOptions
       await combobox.updateComplete
@@ -715,7 +716,7 @@ describe('PktCombobox', () => {
 
   describe('Event handling', () => {
     test('dispatches search event when search value changes', async () => {
-      const container = await createCombobox('id="test" name="test" includeSearch')
+      const container = await createCombobox('id="test" name="test" include-search')
       const combobox = container.querySelector('pkt-combobox') as PktCombobox
       await combobox.updateComplete
 
@@ -747,4 +748,61 @@ describe('PktCombobox', () => {
       expect(combobox['_isOptionsOpen']).toBe(false)
     })
   })
+
+  describe('Dynamic slot options', () => {
+    test('picks up dynamically added <option> children', async () => {
+      const container = await createCombobox(
+        'id="dynamic" name="dynamic"',
+        createOptions([
+          { value: 'a', label: 'A' },
+          { value: 'b', label: 'B' },
+        ]),
+      )
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      expect(combobox['_options']).toHaveLength(2)
+
+      // Add a new option element to the DOM
+      const newOption = document.createElement('option')
+      newOption.value = 'c'
+      newOption.textContent = 'C'
+      combobox.appendChild(newOption)
+
+      // Wait for MutationObserver + Lit update
+      await combobox.updateComplete
+      await new Promise((r) => setTimeout(r, 0))
+      await combobox.updateComplete
+
+      expect(combobox['_options']).toHaveLength(3)
+      expect(combobox['_options'].some((o: IPktComboboxOption) => o.value === 'c')).toBe(true)
+    })
+
+    test('picks up dynamically removed <option> children', async () => {
+      const container = await createCombobox(
+        'id="dynamic" name="dynamic"',
+        createOptions([
+          { value: 'a', label: 'A' },
+          { value: 'b', label: 'B' },
+          { value: 'c', label: 'C' },
+        ]),
+      )
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      expect(combobox['_options']).toHaveLength(3)
+
+      // Remove the last option element
+      const options = combobox.querySelectorAll('option')
+      combobox.removeChild(options[options.length - 1])
+
+      // Wait for MutationObserver + Lit update
+      await combobox.updateComplete
+      await new Promise((r) => setTimeout(r, 0))
+      await combobox.updateComplete
+
+      expect(combobox['_options']).toHaveLength(2)
+      expect(combobox['_options'].some((o: IPktComboboxOption) => o.value === 'c')).toBe(false)
+    })
+  })
 })