@oslokommune/punkt-elements 13.4.1 → 13.4.2

package/src/components/combobox/combobox.test.ts

@@ -0,0 +1,737 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+
+expect.extend(toHaveNoViolations)
+
+import './combobox'
+import { PktCombobox } from './combobox'
+import type { IPktComboboxOption } from './combobox'
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-combobox')
+}
+
+// Helper function to create combobox markup
+const createCombobox = async (comboboxProps = '', options = '') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-combobox ${comboboxProps}>
+      ${options}
+    </pkt-combobox>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Helper function to create options
+const createOptions = (optionData: { value: string; label?: string; disabled?: boolean }[]) => {
+  return optionData
+    .map(
+      (opt) =>
+        `<option value="${opt.value}" ${opt.disabled ? 'disabled' : ''}>${opt.label || opt.value}</option>`,
+    )
+    .join('')
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktCombobox', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const container = await createCombobox('id="test-combobox" name="test" label="Test Combobox"')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      expect(combobox).toBeInTheDocument()
+
+      await combobox.updateComplete
+      expect(combobox).toBeTruthy()
+
+      const wrapper = combobox.querySelector('pkt-input-wrapper')
+      const comboboxDiv = combobox.querySelector('.pkt-combobox')
+      expect(wrapper).toBeInTheDocument()
+      expect(comboboxDiv).toBeInTheDocument()
+    })
+
+    test('renders with correct structure', async () => {
+      const container = await createCombobox('id="test" name="test" label="Test Label"')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      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 listbox = comboboxDiv?.querySelector('pkt-listbox')
+
+      expect(wrapper).toBeInTheDocument()
+      expect(comboboxDiv).toBeInTheDocument()
+      expect(inputDiv).toBeInTheDocument()
+      expect(arrowButton).toBeInTheDocument()
+      expect(listbox).toBeInTheDocument()
+    })
+
+    test('renders arrow button with correct 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')
+
+      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(icon?.getAttribute('name')).toBe('chevron-thin-down')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const container = await createCombobox('id="test" name="test"')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      expect(combobox.value).toBe(undefined)
+      expect(combobox.allowUserInput).toBe(false)
+      expect(combobox.typeahead).toBe(false)
+      expect(combobox.includeSearch).toBe(false)
+      expect(combobox.multiple).toBe(false)
+      expect(combobox.disabled).toBe(false)
+      expect(combobox.options).toEqual([])
+      expect(combobox.tagPlacement).toBe(null)
+      expect(combobox.maxlength).toBe(null)
+      expect(combobox.displayValueAs).toBe('label')
+    })
+
+    test('handles multiple property correctly', async () => {
+      const container = await createCombobox('id="test" name="test" multiple')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      expect(combobox.multiple).toBe(true)
+
+      const listbox = combobox.querySelector('pkt-listbox')
+      expect(listbox?.hasAttribute('ismultiselect')).toBe(true)
+    })
+
+    test('handles allowUserInput property correctly', async () => {
+      const container = await createCombobox('id="test" name="test" allowUserInput')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      expect(combobox.allowUserInput).toBe(true)
+
+      const input = combobox.querySelector('input[type="text"]')
+      expect(input).toBeInTheDocument()
+      expect(input?.getAttribute('role')).toBe('combobox')
+    })
+
+    test('handles typeahead property correctly', async () => {
+      const container = await createCombobox('id="test" name="test" typeahead')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      expect(combobox.typeahead).toBe(true)
+
+      const input = combobox.querySelector('input[type="text"]')
+      expect(input).toBeInTheDocument()
+      expect(input?.getAttribute('aria-autocomplete')).toBe('both')
+    })
+
+    test('handles includeSearch property correctly', async () => {
+      const container = await createCombobox('id="test" name="test" includeSearch')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      expect(combobox.includeSearch).toBe(true)
+
+      const listbox = combobox.querySelector('pkt-listbox')
+      expect(listbox?.hasAttribute('includesearch')).toBe(true)
+    })
+
+    test('handles disabled property correctly', async () => {
+      const container = await createCombobox('id="test" name="test" disabled')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      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)
+    })
+
+    test('handles fullwidth property correctly', async () => {
+      const container = await createCombobox('id="test" name="test" fullwidth')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      expect(combobox.fullwidth).toBe(true)
+
+      const inputDiv = combobox.querySelector('.pkt-combobox__input')
+      expect(inputDiv).toHaveClass('pkt-combobox__input--fullwidth')
+    })
+  })
+
+  describe('Options handling', () => {
+    test('handles options provided via property', async () => {
+      const testOptions: IPktComboboxOption[] = [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3', disabled: true },
+      ]
+
+      const container = await createCombobox('id="test" name="test"')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+
+      // Set options via property
+      combobox.options = testOptions
+      await combobox.updateComplete
+
+      // Ensure listbox has also updated
+      const listbox = combobox.querySelector('pkt-listbox') as any
+      await listbox?.updateComplete
+
+      expect(combobox.options).toHaveLength(3)
+      expect(combobox.options[0].value).toBe('option1')
+      expect(combobox.options[0].label).toBe('Option 1')
+      expect(combobox.options[2].disabled).toBe(true)
+
+      expect(listbox?.options).toEqual(
+        expect.arrayContaining([expect.objectContaining({ value: 'option1', label: 'Option 1' })]),
+      )
+    })
+
+    test('handles options provided via slot', async () => {
+      const optionsMarkup = createOptions([
+        { value: 'value1', label: 'Label 1' },
+        { value: 'value2', label: 'Label 2' },
+      ])
+
+      const container = await createCombobox('id="test" name="test"', optionsMarkup)
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      // Options should be extracted from slot
+      expect(combobox.options.length).toBeGreaterThan(0)
+      expect(combobox.options.some((opt) => opt.value === 'value1')).toBe(true)
+      expect(combobox.options.some((opt) => opt.value === 'value2')).toBe(true)
+    })
+
+    test('handles defaultOptions property', async () => {
+      const defaultOptions: IPktComboboxOption[] = [
+        { value: 'default1', label: 'Default 1' },
+        { value: 'default2', label: 'Default 2' },
+      ]
+
+      const container = await createCombobox('id="test" name="test"')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+
+      combobox.defaultOptions = defaultOptions
+      await combobox.updateComplete
+
+      expect(combobox.options).toHaveLength(2)
+      expect(combobox.options[0].value).toBe('default1')
+      expect(combobox.options[1].value).toBe('default2')
+    })
+
+    test('preserves userAdded options when defaultOptions change', async () => {
+      const container = await createCombobox('id="test" name="test" allowUserInput')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      // Add a user option
+      const userOption: IPktComboboxOption = {
+        value: 'user-added',
+        label: 'User Added',
+        userAdded: true,
+      }
+      combobox.options = [userOption]
+      await combobox.updateComplete
+
+      // Set default options
+      const defaultOptions: IPktComboboxOption[] = [{ value: 'default1', label: 'Default 1' }]
+      combobox.defaultOptions = defaultOptions
+      await combobox.updateComplete
+
+      // Should have both user-added and default options
+      expect(combobox.options).toHaveLength(2)
+      expect(combobox.options.some((opt) => opt.userAdded)).toBe(true)
+      expect(combobox.options.some((opt) => opt.value === 'default1')).toBe(true)
+    })
+  })
+
+  describe('Value handling', () => {
+    test('handles single value correctly', async () => {
+      const container = await createCombobox('id="test" name="test" value="test-value"')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      expect(combobox.value).toBe('test-value')
+
+      // Internal _value should be an array with single item
+      expect(combobox['_value']).toEqual(['test-value'])
+    })
+
+    test('handles multiple values correctly', async () => {
+      const container = await createCombobox('id="test" name="test" value="value1,value2" multiple')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      expect(combobox.value).toEqual(['value1', 'value2'])
+      expect(combobox['_value']).toEqual(['value1', 'value2'])
+    })
+
+    test('handles array value correctly', async () => {
+      const container = await createCombobox('id="test" name="test" multiple')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+
+      combobox.value = ['array1', 'array2']
+      await combobox.updateComplete
+
+      expect(combobox['_value']).toEqual(['array1', 'array2'])
+    })
+
+    test('limits to single value when not multiple', async () => {
+      const container = await createCombobox('id="test" name="test"')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+
+      combobox.value = ['value1', 'value2']
+      await combobox.updateComplete
+
+      // Should only keep the first value when not multiple
+      expect(combobox['_value']).toEqual(['value1'])
+    })
+  })
+
+  describe('Placeholder functionality', () => {
+    test('shows placeholder when no value selected', async () => {
+      const container = await createCombobox('id="test" name="test" placeholder="Select an option"')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      expect(combobox.placeholder).toBe('Select an option')
+
+      const placeholder = combobox.querySelector('.pkt-combobox__placeholder')
+      expect(placeholder).toBeInTheDocument()
+      expect(placeholder?.textContent).toBe('Select an option')
+    })
+
+    test('hides placeholder when value is selected', async () => {
+      const testOptions: IPktComboboxOption[] = [{ value: 'option1', label: 'Option 1' }]
+
+      const container = await createCombobox(
+        'id="test" name="test" placeholder="Select an option" value="option1"',
+      )
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = testOptions
+      await combobox.updateComplete
+
+      const placeholder = combobox.querySelector('.pkt-combobox__placeholder')
+      expect(placeholder).not.toBeInTheDocument()
+    })
+
+    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"',
+      )
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const placeholder = combobox.querySelector('.pkt-combobox__placeholder')
+      expect(placeholder).toBeInTheDocument()
+      expect(placeholder?.textContent).toBe('Select options')
+    })
+  })
+
+  describe('Tag placement functionality', () => {
+    test('renders tags inside input by default in multiple mode', async () => {
+      const testOptions: IPktComboboxOption[] = [{ value: 'option1', label: 'Option 1' }]
+
+      const container = await createCombobox('id="test" name="test" multiple value="option1"')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = testOptions
+      await combobox.updateComplete
+
+      const outsideTags = combobox.querySelector('.pkt-combobox__tags-outside')
+      expect(outsideTags).not.toBeInTheDocument()
+    })
+
+    test('renders tags outside input when tagPlacement is outside', async () => {
+      const testOptions: IPktComboboxOption[] = [{ value: 'option1', label: 'Option 1' }]
+
+      const container = await createCombobox(
+        'id="test" name="test" multiple tagPlacement="outside" value="option1"',
+      )
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = testOptions
+      await combobox.updateComplete
+
+      const outsideTags = combobox.querySelector('.pkt-combobox__tags-outside')
+      expect(outsideTags).toBeInTheDocument()
+    })
+  })
+
+  describe('Input field functionality', () => {
+    test('renders hidden input when not allowUserInput or typeahead', async () => {
+      const container = await createCombobox('id="test" name="test-name"')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const hiddenInput = combobox.querySelector('input[type="hidden"]')
+      const textInput = combobox.querySelector('input[type="text"]')
+
+      expect(hiddenInput).toBeInTheDocument()
+      expect(textInput).not.toBeInTheDocument()
+      expect(hiddenInput?.getAttribute('id')).toBe('test-input')
+      expect(hiddenInput?.getAttribute('name')).toBe('test-name-input')
+    })
+
+    test('renders text input when allowUserInput is true', async () => {
+      const container = await createCombobox('id="test" name="test-name" allowUserInput')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const textInput = combobox.querySelector('input[type="text"]')
+      const hiddenInput = combobox.querySelector('input[type="hidden"]')
+
+      expect(textInput).toBeInTheDocument()
+      expect(hiddenInput).not.toBeInTheDocument()
+      expect(textInput?.getAttribute('id')).toBe('test-input')
+      expect(textInput?.getAttribute('name')).toBe('test-name-input')
+      expect(textInput?.getAttribute('role')).toBe('combobox')
+      expect(textInput?.getAttribute('aria-controls')).toBe('test-listbox')
+    })
+
+    test('renders text input when typeahead is true', async () => {
+      const container = await createCombobox('id="test" name="test" typeahead')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const textInput = combobox.querySelector('input[type="text"]')
+      expect(textInput).toBeInTheDocument()
+      expect(textInput?.getAttribute('aria-autocomplete')).toBe('both')
+    })
+
+    test('sets correct aria-autocomplete for allowUserInput', async () => {
+      const container = await createCombobox('id="test" name="test" allowUserInput')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const textInput = combobox.querySelector('input[type="text"]')
+      expect(textInput?.getAttribute('aria-autocomplete')).toBe('list')
+    })
+  })
+
+  describe('Dropdown functionality', () => {
+    test('opens dropdown when arrow button is clicked', async () => {
+      const container = await createCombobox('id="test" name="test"')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const arrowButton = combobox.querySelector('.pkt-combobox__arrow')
+      const inputDiv = combobox.querySelector('.pkt-combobox__input')
+
+      expect(combobox['_isOptionsOpen']).toBe(false)
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
+      expect(inputDiv).not.toHaveClass('pkt-combobox__input--open')
+
+      // Click arrow to open
+      fireEvent.click(arrowButton!)
+      await combobox.updateComplete
+
+      expect(combobox['_isOptionsOpen']).toBe(true)
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('true')
+      expect(inputDiv).toHaveClass('pkt-combobox__input--open')
+    })
+
+    test('toggles dropdown state with multiple clicks', async () => {
+      const container = await createCombobox('id="test" name="test"')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const arrowButton = combobox.querySelector('.pkt-combobox__arrow')
+
+      // Click to open
+      fireEvent.click(arrowButton!)
+      await combobox.updateComplete
+      expect(combobox['_isOptionsOpen']).toBe(true)
+
+      // Click to close
+      fireEvent.click(arrowButton!)
+      await combobox.updateComplete
+      expect(combobox['_isOptionsOpen']).toBe(false)
+    })
+
+    test('does not open when disabled', async () => {
+      const container = await createCombobox('id="test" name="test" disabled')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const arrowButton = combobox.querySelector('.pkt-combobox__arrow')
+
+      // Try to click when disabled
+      fireEvent.click(arrowButton!)
+      await combobox.updateComplete
+
+      expect(combobox['_isOptionsOpen']).toBe(false)
+    })
+  })
+
+  describe('Search functionality', () => {
+    test('handles search input when includeSearch is true', async () => {
+      const container = await createCombobox('id="test" name="test" includeSearch')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const listbox = combobox.querySelector('pkt-listbox')
+      expect(listbox?.hasAttribute('includesearch')).toBe(true)
+    })
+
+    test('sets search placeholder correctly', async () => {
+      const container = await createCombobox(
+        'id="test" name="test" includeSearch searchPlaceholder="Search items..."',
+      )
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      expect(combobox.searchPlaceholder).toBe('Search items...')
+
+      const listbox = combobox.querySelector('pkt-listbox') as any
+      expect(listbox?.searchPlaceholder).toBe('Search items...')
+    })
+  })
+
+  describe('Keyboard navigation', () => {
+    test('handles keyboard events on arrow button', async () => {
+      const container = await createCombobox('id="test" name="test"')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const arrowButton = combobox.querySelector('.pkt-combobox__arrow')
+
+      // Test Enter key
+      fireEvent.keyDown(arrowButton!, { key: 'Enter' })
+      await combobox.updateComplete
+
+      expect(combobox['_isOptionsOpen']).toBe(true)
+
+      // Test Space key
+      fireEvent.keyDown(arrowButton!, { key: ' ' })
+      await combobox.updateComplete
+
+      expect(combobox['_isOptionsOpen']).toBe(false)
+    })
+
+    test('handles input focus for text inputs', async () => {
+      const container = await createCombobox('id="test" name="test" allowUserInput')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const textInput = combobox.querySelector('input[type="text"]')
+
+      // Test focus event
+      fireEvent.focus(textInput!)
+      await combobox.updateComplete
+
+      // Test blur event
+      fireEvent.blur(textInput!)
+      await combobox.updateComplete
+
+      // Should not throw errors
+      expect(combobox).toBeInTheDocument()
+    })
+  })
+
+  describe('Max length functionality', () => {
+    test('handles maxlength property correctly', async () => {
+      const container = await createCombobox('id="test" name="test" multiple maxlength="3"')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      expect(combobox.maxlength).toBe(3)
+
+      const listbox = combobox.querySelector('pkt-listbox') as any
+      expect(listbox?.maxLength).toBe(3)
+    })
+
+    test('disables user input when max is reached', async () => {
+      const testOptions: IPktComboboxOption[] = [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' },
+      ]
+
+      const container = await createCombobox(
+        'id="test" name="test" multiple allowUserInput maxlength="2"',
+      )
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = testOptions
+      combobox.value = ['option1', 'option2'] // Set to max
+      await combobox.updateComplete
+
+      const listbox = combobox.querySelector('pkt-listbox') as any
+      await listbox?.updateComplete
+
+      expect(listbox?.maxIsReached).toBe(true)
+    })
+  })
+
+  describe('Error handling', () => {
+    test('applies error styling when hasError is true', async () => {
+      const container = await createCombobox('id="test" name="test"')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.hasError = true
+      await combobox.updateComplete
+
+      const inputDiv = combobox.querySelector('.pkt-combobox__input')
+      expect(inputDiv).toHaveClass('pkt-combobox__input--error')
+    })
+
+    test('passes error state to input wrapper', async () => {
+      const container = await createCombobox('id="test" name="test" error-message="Test error"')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.hasError = true
+      await combobox.updateComplete
+
+      const wrapper = combobox.querySelector('pkt-input-wrapper')
+      expect(wrapper?.hasAttribute('haserror')).toBe(true)
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('has no accessibility violations', async () => {
+      const container = await createCombobox(
+        'id="accessible-combobox" name="test" label="Accessible Combobox"',
+      )
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const results = await axe(combobox)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('sets correct ARIA attributes on arrow button', 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')
+    })
+
+    test('sets correct ARIA attributes on text input', async () => {
+      const container = await createCombobox(
+        'id="test-input" name="test" label="Test Label" allowUserInput',
+      )
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const textInput = combobox.querySelector('input[type="text"]')
+      expect(textInput?.getAttribute('role')).toBe('combobox')
+      expect(textInput?.getAttribute('aria-controls')).toBe('test-input-listbox')
+      expect(textInput?.getAttribute('aria-label')).toBe('Test Label')
+      expect(textInput?.getAttribute('aria-autocomplete')).toBe('list')
+    })
+
+    test('sets correct ARIA attributes for multiple selection', async () => {
+      const container = await createCombobox('id="test" name="test" allowUserInput multiple')
+
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const textInput = combobox.querySelector('input[type="text"]')
+      expect(textInput?.getAttribute('aria-multiselectable')).toBe('true')
+    })
+
+    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 combobox = container.querySelector('pkt-combobox') as PktCombobox
+      combobox.options = testOptions
+      await combobox.updateComplete
+
+      const textInput = combobox.querySelector('input[type="text"]')
+      expect(textInput?.getAttribute('aria-activedescendant')).toBe('test-listbox--1')
+    })
+  })
+
+  describe('Event handling', () => {
+    test('dispatches search event when search value changes', async () => {
+      const container = await createCombobox('id="test" name="test" includeSearch')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const searchEventSpy = jest.fn()
+      combobox.addEventListener('search', searchEventSpy)
+
+      // Simulate search change
+      combobox['_search'] = 'test search'
+      await combobox.updateComplete
+
+      expect(searchEventSpy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          detail: 'test search',
+        }),
+      )
+    })
+
+    test('handles listbox events correctly', async () => {
+      const container = await createCombobox('id="test" name="test"')
+      const combobox = container.querySelector('pkt-combobox') as PktCombobox
+      await combobox.updateComplete
+
+      const listbox = combobox.querySelector('pkt-listbox')
+
+      // Test close-options event
+      fireEvent(listbox!, new CustomEvent('close-options'))
+      await combobox.updateComplete
+
+      expect(combobox['_isOptionsOpen']).toBe(false)
+    })
+  })
+})