@oslokommune/punkt-react 15.4.6 → 16.0.0

package/src/components/combobox/Combobox.interaction.test.tsx

@@ -0,0 +1,607 @@
+import '@testing-library/jest-dom'
+
+import { act, fireEvent, render } from '@testing-library/react'
+import { vi } from 'vitest'
+
+import type { IPktComboboxOption } from 'shared-types/combobox'
+import { PktCombobox } from './Combobox'
+import type { IPktCombobox } from './types'
+
+const comboboxId = 'test-combobox'
+const label = 'Test Combobox'
+
+const getDefaultOptions = (): IPktComboboxOption[] => [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'date', label: 'Date' },
+]
+
+const createComboboxTest = (props: Partial<IPktCombobox> = {}) => {
+  const defaultProps: IPktCombobox = {
+    label,
+    id: comboboxId,
+    ...props,
+  }
+
+  return render(<PktCombobox {...defaultProps} />)
+}
+
+const getFormInputValue = (container: HTMLElement) => {
+  return (container.querySelector('input.pkt-visually-hidden') as HTMLInputElement)?.value ?? ''
+}
+
+describe('PktCombobox', () => {
+  describe('Keyboard navigation', () => {
+    test('opens dropdown with Enter on arrow button', () => {
+      const { container } = createComboboxTest()
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.keyDown(arrowButton!, { key: 'Enter' })
+
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('true')
+    })
+
+    test('opens dropdown with Space on arrow button', () => {
+      const { container } = createComboboxTest()
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.keyDown(arrowButton!, { key: ' ' })
+
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('true')
+    })
+
+    test('opens dropdown with ArrowDown on arrow button', () => {
+      const { container } = createComboboxTest()
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.keyDown(arrowButton!, { key: 'ArrowDown' })
+
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('true')
+    })
+
+    test('toggles dropdown closed with Enter on arrow button', () => {
+      const { container } = createComboboxTest()
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+
+      // Open
+      fireEvent.keyDown(arrowButton!, { key: 'Enter' })
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('true')
+
+      // Close
+      fireEvent.keyDown(arrowButton!, { key: 'Enter' })
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
+    })
+
+    test('does not toggle on non-toggle keys', () => {
+      const { container } = createComboboxTest()
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.keyDown(arrowButton!, { key: 'Escape' })
+
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
+    })
+
+    test('submits value with Enter in text input', () => {
+      const handleValueChange = vi.fn()
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        options: getDefaultOptions(),
+        onValueChange: handleValueChange,
+      })
+
+      const textInput = container.querySelector('input[type="text"]') as HTMLInputElement
+      fireEvent.focus(textInput)
+
+      textInput.value = 'apple'
+      fireEvent.change(textInput, { target: { value: 'apple' } })
+      fireEvent.keyDown(textInput, { key: 'Enter' })
+
+      expect(handleValueChange).toHaveBeenCalledWith(['apple'])
+    })
+
+    test('closes dropdown with Escape in text input', () => {
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        options: getDefaultOptions(),
+      })
+
+      const textInput = container.querySelector('input[type="text"]') as HTMLInputElement
+      fireEvent.focus(textInput)
+
+      expect(textInput.getAttribute('aria-expanded')).toBe('true')
+
+      fireEvent.keyDown(textInput, { key: 'Escape' })
+
+      expect(textInput.getAttribute('aria-expanded')).toBe('false')
+    })
+
+    test('does not open dropdown when disabled', () => {
+      const { container } = createComboboxTest({ disabled: true })
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.keyDown(arrowButton!, { key: 'Enter' })
+
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
+    })
+
+    test('selects option with Enter key on option element', () => {
+      const handleValueChange = vi.fn()
+      const { container } = createComboboxTest({
+        options: getDefaultOptions(),
+        onValueChange: handleValueChange,
+      })
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.click(arrowButton!)
+
+      const option = container.querySelector('[data-value="apple"][role="option"]')
+      fireEvent.keyDown(option!, { key: 'Enter' })
+
+      expect(handleValueChange).toHaveBeenCalledWith(['apple'])
+    })
+
+    test('selects option with Space key on option element', () => {
+      const handleValueChange = vi.fn()
+      const { container } = createComboboxTest({
+        options: getDefaultOptions(),
+        onValueChange: handleValueChange,
+      })
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.click(arrowButton!)
+
+      const option = container.querySelector('[data-value="banana"][role="option"]')
+      fireEvent.keyDown(option!, { key: ' ' })
+
+      expect(handleValueChange).toHaveBeenCalledWith(['banana'])
+    })
+
+    test('closes dropdown with Escape on option element', () => {
+      const { container } = createComboboxTest({
+        options: getDefaultOptions(),
+      })
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.click(arrowButton!)
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('true')
+
+      const option = container.querySelector('[data-value="apple"][role="option"]')
+      fireEvent.keyDown(option!, { key: 'Escape' })
+
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
+    })
+
+    test('adds value with comma separator in multiple mode', () => {
+      const handleValueChange = vi.fn()
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        multiple: true,
+        options: getDefaultOptions(),
+        onValueChange: handleValueChange,
+      })
+
+      const textInput = container.querySelector('input[type="text"]') as HTMLInputElement
+      fireEvent.focus(textInput)
+
+      textInput.value = 'apple'
+      fireEvent.change(textInput, { target: { value: 'apple' } })
+      fireEvent.keyDown(textInput, { key: ',' })
+
+      expect(handleValueChange).toHaveBeenCalledWith(['apple'])
+    })
+  })
+
+  describe('Focus handling', () => {
+    test('opens dropdown on input focus', () => {
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        options: getDefaultOptions(),
+      })
+
+      const textInput = container.querySelector('input[type="text"]') as HTMLInputElement
+      fireEvent.focus(textInput)
+
+      expect(textInput.getAttribute('aria-expanded')).toBe('true')
+    })
+
+    test('populates input with current value on focus in single-select', () => {
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        defaultValue: 'apple',
+        options: getDefaultOptions(),
+      })
+
+      const textInput = container.querySelector('input[type="text"]') as HTMLInputElement
+      fireEvent.focus(textInput)
+
+      expect(textInput.value).toBe('Apple')
+    })
+
+    test('opens dropdown on input container click (hidden input mode)', () => {
+      const { container } = createComboboxTest({
+        options: getDefaultOptions(),
+      })
+
+      const inputDiv = container.querySelector('.pkt-combobox__input')
+      fireEvent.click(inputDiv!)
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('true')
+    })
+
+    test('toggles dropdown on input container click (hidden input mode)', () => {
+      const { container } = createComboboxTest({
+        options: getDefaultOptions(),
+      })
+
+      const inputDiv = container.querySelector('.pkt-combobox__input')
+
+      fireEvent.click(inputDiv!)
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('true')
+
+      fireEvent.click(inputDiv!)
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
+    })
+
+    test('does not open when disabled and input container is clicked', () => {
+      const { container } = createComboboxTest({ disabled: true })
+
+      const inputDiv = container.querySelector('.pkt-combobox__input')
+      fireEvent.click(inputDiv!)
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
+    })
+
+    test('focuses text input when placeholder is clicked', () => {
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        placeholder: 'Select...',
+      })
+
+      const textInput = container.querySelector('input[type="text"]') as HTMLInputElement
+      expect(textInput.placeholder).toBe('Select...')
+      fireEvent.click(textInput)
+
+      expect(document.activeElement).toBe(textInput)
+    })
+  })
+
+  describe('Focus-out behavior', () => {
+    test('closes dropdown when clicking outside combobox', () => {
+      const { container } = createComboboxTest({
+        options: getDefaultOptions(),
+      })
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.click(arrowButton!)
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('true')
+
+      fireEvent.click(document.body)
+
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
+    })
+
+    test('adds custom value on focus-out when allowUserInput is on', () => {
+      const handleValueChange = vi.fn()
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        options: getDefaultOptions(),
+        onValueChange: handleValueChange,
+      })
+
+      const textInput = container.querySelector('input[type="text"]') as HTMLInputElement
+      fireEvent.focus(textInput)
+
+      textInput.value = 'NewFruit'
+      fireEvent.change(textInput, { target: { value: 'NewFruit' } })
+
+      // Click outside to trigger close and process input
+      fireEvent.click(document.body)
+
+      expect(handleValueChange).toHaveBeenCalledWith(['NewFruit'])
+    })
+
+    test('selects matching option on focus-out when typeahead', () => {
+      const handleValueChange = vi.fn()
+      const { container } = createComboboxTest({
+        typeahead: true,
+        options: getDefaultOptions(),
+        onValueChange: handleValueChange,
+      })
+
+      const textInput = container.querySelector('input[type="text"]') as HTMLInputElement
+      fireEvent.focus(textInput)
+
+      textInput.value = 'Apple'
+      fireEvent.change(textInput, { target: { value: 'Apple' } })
+
+      // Click outside to trigger close and process input
+      fireEvent.click(document.body)
+
+      expect(handleValueChange).toHaveBeenCalledWith(['apple'])
+    })
+  })
+
+  describe('Search and filtering', () => {
+    test('shows add-value banner when search has no exact match and allowUserInput is on', () => {
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        options: getDefaultOptions(),
+      })
+
+      const textInput = container.querySelector('input[type="text"]') as HTMLInputElement
+      fireEvent.focus(textInput)
+
+      fireEvent.input(textInput, { target: { value: 'NewFruit' } })
+
+      const addBanner = container.querySelector('.pkt-listbox__banner--new-option')
+      expect(addBanner).toBeInTheDocument()
+    })
+
+    test('renders search input in listbox when includeSearch is true', () => {
+      const { container } = createComboboxTest({ includeSearch: true })
+
+      const searchInput = container.querySelector('.pkt-listbox__search input')
+      expect(searchInput).toBeInTheDocument()
+      expect(searchInput?.getAttribute('role')).toBe('searchbox')
+    })
+
+    test('sets search placeholder in listbox', () => {
+      const { container } = createComboboxTest({
+        includeSearch: true,
+        searchPlaceholder: 'Søk her...',
+      })
+
+      const searchInput = container.querySelector('.pkt-listbox__search input') as HTMLInputElement
+      expect(searchInput.placeholder).toBe('Søk her...')
+    })
+
+    test('filters options via listbox search', () => {
+      const { container } = createComboboxTest({
+        includeSearch: true,
+        options: getDefaultOptions(),
+      })
+
+      // Open dropdown
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.click(arrowButton!)
+
+      // Type in listbox search
+      const searchInput = container.querySelector('.pkt-listbox__search input') as HTMLInputElement
+      fireEvent.change(searchInput, { target: { value: 'app' } })
+
+      // Options should be filtered
+      const visibleOptions = container.querySelectorAll('.pkt-listbox__option')
+      expect(visibleOptions.length).toBeLessThan(4)
+    })
+
+    test('search input navigates to first option with ArrowDown', () => {
+      const { container } = createComboboxTest({
+        includeSearch: true,
+        options: getDefaultOptions(),
+      })
+
+      // Open dropdown
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.click(arrowButton!)
+
+      const searchInput = container.querySelector('.pkt-listbox__search input') as HTMLInputElement
+
+      // ArrowDown in search should not throw
+      fireEvent.keyDown(searchInput, { key: 'ArrowDown' })
+
+      expect(searchInput).toBeInTheDocument()
+    })
+
+    test('search input closes dropdown with Escape', () => {
+      const { container } = createComboboxTest({
+        includeSearch: true,
+        options: getDefaultOptions(),
+      })
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.click(arrowButton!)
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('true')
+
+      const searchInput = container.querySelector('.pkt-listbox__search input') as HTMLInputElement
+      fireEvent.keyDown(searchInput, { key: 'Escape' })
+
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
+    })
+  })
+
+  describe('New option banner interaction', () => {
+    test('adds new option when clicking add-value banner', () => {
+      const handleValueChange = vi.fn()
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        options: getDefaultOptions(),
+        onValueChange: handleValueChange,
+      })
+
+      const textInput = container.querySelector('input[type="text"]') as HTMLInputElement
+      fireEvent.focus(textInput)
+
+      fireEvent.input(textInput, { target: { value: 'NewFruit' } })
+
+      const addBanner = container.querySelector('.pkt-listbox__banner--new-option')
+      expect(addBanner).toBeInTheDocument()
+
+      fireEvent.click(addBanner!)
+
+      expect(handleValueChange).toHaveBeenCalledWith(['NewFruit'])
+    })
+
+    test('adds new option when pressing Enter on add-value banner', () => {
+      const handleValueChange = vi.fn()
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        options: getDefaultOptions(),
+        onValueChange: handleValueChange,
+      })
+
+      const textInput = container.querySelector('input[type="text"]') as HTMLInputElement
+      fireEvent.focus(textInput)
+
+      fireEvent.input(textInput, { target: { value: 'NewFruit' } })
+
+      const addBanner = container.querySelector('.pkt-listbox__banner--new-option')
+      expect(addBanner).toBeInTheDocument()
+
+      fireEvent.keyDown(addBanner!, { key: 'Enter' })
+
+      expect(handleValueChange).toHaveBeenCalledWith(['NewFruit'])
+    })
+  })
+
+  describe('Children as options', () => {
+    test('handles options from children correctly', () => {
+      const handleValueChange = vi.fn()
+      const { container } = render(
+        <PktCombobox id={comboboxId} label={label} onValueChange={handleValueChange}>
+          <option value="opt1">Option 1</option>
+          <option value="opt2">Option 2</option>
+          <option value="opt3">Option 3</option>
+        </PktCombobox>,
+      )
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.click(arrowButton!)
+
+      const option = container.querySelector('[data-value="opt2"][role="option"]')
+      fireEvent.click(option!)
+
+      expect(handleValueChange).toHaveBeenCalledWith(['opt2'])
+    })
+
+    test('handles children with defaultValue', () => {
+      const { container } = render(
+        <PktCombobox id={comboboxId} label={label} defaultValue="opt1">
+          <option value="opt1">Option 1</option>
+          <option value="opt2">Option 2</option>
+        </PktCombobox>,
+      )
+
+      const valueSpan = container.querySelector('.pkt-combobox__value')
+      expect(valueSpan?.textContent?.trim()).toBe('Option 1')
+      expect(getFormInputValue(container)).toBe('opt1')
+    })
+
+    test('handles children re-render with new options', () => {
+      const { container, rerender } = render(
+        <PktCombobox id={comboboxId} label={label}>
+          <option value="a">A</option>
+          <option value="b">B</option>
+        </PktCombobox>,
+      )
+
+      let options = container.querySelectorAll('.pkt-listbox__option')
+      expect(options.length).toBe(2)
+
+      rerender(
+        <PktCombobox id={comboboxId} label={label}>
+          <option value="a">A</option>
+          <option value="b">B</option>
+          <option value="c">C</option>
+        </PktCombobox>,
+      )
+
+      options = container.querySelectorAll('.pkt-listbox__option')
+      expect(options.length).toBe(3)
+    })
+  })
+
+  describe('Form reset', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+    })
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    test('resets single value to defaultValue on form reset', () => {
+      const { container } = render(
+        <form>
+          <PktCombobox id={comboboxId} label={label} defaultValue="apple" options={getDefaultOptions()} />
+        </form>,
+      )
+
+      // Select a different value
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.click(arrowButton!)
+      const bananaOption = container.querySelector('[data-value="banana"][role="option"]')
+      fireEvent.click(bananaOption!)
+
+      expect(getFormInputValue(container)).toBe('banana')
+
+      // Reset the form
+      const form = container.querySelector('form')!
+      act(() => {
+        fireEvent.reset(form)
+        vi.advanceTimersByTime(10)
+      })
+
+      expect(getFormInputValue(container)).toBe('apple')
+    })
+
+    test('resets multiple values to defaultValue on form reset', () => {
+      const { container } = render(
+        <form>
+          <PktCombobox
+            id={comboboxId}
+            label={label}
+            defaultValue={['apple', 'banana']}
+            multiple
+            options={getDefaultOptions()}
+          />
+        </form>,
+      )
+
+      // Select an additional value
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.click(arrowButton!)
+      const dateOption = container.querySelector('[data-value="date"][role="option"]')
+      fireEvent.click(dateOption!)
+
+      expect(getFormInputValue(container)).toBe('apple,banana,date')
+
+      // Reset the form
+      const form = container.querySelector('form')!
+      act(() => {
+        fireEvent.reset(form)
+        vi.advanceTimersByTime(10)
+      })
+
+      expect(getFormInputValue(container)).toBe('apple,banana')
+    })
+
+    test('resets to empty when no defaultValue on form reset', () => {
+      const { container } = render(
+        <form>
+          <PktCombobox id={comboboxId} label={label} options={getDefaultOptions()} />
+        </form>,
+      )
+
+      // Select a value
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      fireEvent.click(arrowButton!)
+      const appleOption = container.querySelector('[data-value="apple"][role="option"]')
+      fireEvent.click(appleOption!)
+
+      expect(getFormInputValue(container)).toBe('apple')
+
+      // Reset the form
+      const form = container.querySelector('form')!
+      act(() => {
+        fireEvent.reset(form)
+        vi.advanceTimersByTime(10)
+      })
+
+      expect(getFormInputValue(container)).toBe('')
+    })
+  })
+})