@oslokommune/punkt-react 15.4.6 → 16.0.0

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

@@ -0,0 +1,469 @@
+import '@testing-library/jest-dom'
+
+import { fireEvent, render, screen } from '@testing-library/react'
+
+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', disabled: true },
+  { value: 'date', label: 'Date' },
+]
+
+const createComboboxTest = (props: Partial<IPktCombobox> = {}) => {
+  const defaultProps: IPktCombobox = {
+    label,
+    id: comboboxId,
+    ...props,
+  }
+
+  return render(<PktCombobox {...defaultProps} />)
+}
+
+describe('PktCombobox', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', () => {
+      const { container } = createComboboxTest()
+
+      const combobox = container.querySelector('.pkt-combobox')
+      expect(combobox).toBeInTheDocument()
+    })
+
+    test('renders with correct structure', () => {
+      const { container } = createComboboxTest()
+
+      const wrapper = container.querySelector('.pkt-inputwrapper')
+      const inputDiv = container.querySelector('.pkt-combobox__input')
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      const listbox = container.querySelector('.pkt-listbox')
+
+      expect(wrapper).toBeInTheDocument()
+      expect(inputDiv).toBeInTheDocument()
+      expect(arrowButton).toBeInTheDocument()
+      expect(listbox).toBeInTheDocument()
+    })
+
+    test('renders select-only combobox with correct ARIA attributes', () => {
+      const { container } = createComboboxTest()
+
+      const comboboxInput = container.querySelector('.pkt-combobox__input')
+
+      expect(comboboxInput?.getAttribute('id')).toBe(`${comboboxId}-combobox`)
+      expect(comboboxInput?.getAttribute('aria-expanded')).toBe('false')
+      expect(comboboxInput?.getAttribute('aria-controls')).toBe(`${comboboxId}-listbox`)
+      expect(comboboxInput?.getAttribute('aria-haspopup')).toBe('listbox')
+      expect(comboboxInput?.getAttribute('aria-labelledby')).toBe(`${comboboxId}-combobox-label`)
+      expect(comboboxInput?.getAttribute('role')).toBe('combobox')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('handles multiple property correctly', () => {
+      const { container } = createComboboxTest({
+        multiple: true,
+        defaultValue: ['apple'],
+        options: getDefaultOptions(),
+      })
+
+      const tags = container.querySelectorAll('.pkt-tag')
+      expect(tags.length).toBeGreaterThan(0)
+    })
+
+    test('handles allowUserInput property correctly', () => {
+      const { container } = createComboboxTest({ allowUserInput: true })
+
+      const textInput = container.querySelector('input[type="text"][role="combobox"]')
+      expect(textInput).toBeInTheDocument()
+      expect(textInput?.getAttribute('role')).toBe('combobox')
+    })
+
+    test('handles typeahead property correctly', () => {
+      const { container } = createComboboxTest({ typeahead: true })
+
+      const textInput = container.querySelector('input[type="text"]')
+      expect(textInput).toBeInTheDocument()
+      expect(textInput?.getAttribute('aria-autocomplete')).toBe('both')
+    })
+
+    test('handles disabled property correctly', () => {
+      const { container } = createComboboxTest({ disabled: true })
+
+      const comboboxInput = container.querySelector('.pkt-combobox__input')
+
+      expect(comboboxInput).toHaveClass('pkt-combobox__input--disabled')
+      expect(comboboxInput?.getAttribute('tabindex')).toBe('-1')
+    })
+
+    test('handles fullwidth property correctly', () => {
+      const { container } = createComboboxTest({ fullwidth: true })
+
+      const inputDiv = container.querySelector('.pkt-combobox__input')
+      expect(inputDiv).toHaveClass('pkt-combobox__input--fullwidth')
+    })
+
+    test('renders with custom className', () => {
+      const { container } = createComboboxTest({ className: 'my-custom-class' })
+
+      const outerDiv = container.querySelector('.pkt-combobox-component')
+      expect(outerDiv).toHaveClass('my-custom-class')
+    })
+  })
+
+  describe('Options handling', () => {
+    test('handles options provided via options prop', () => {
+      const { container } = createComboboxTest({
+        options: getDefaultOptions(),
+      })
+
+      const optionElements = container.querySelectorAll('.pkt-listbox__option')
+      expect(optionElements.length).toBe(4)
+      expect(optionElements[0].getAttribute('data-value')).toBe('apple')
+      expect(optionElements[1].getAttribute('data-value')).toBe('banana')
+    })
+
+    test('handles options provided via children', () => {
+      const { container } = render(
+        <PktCombobox id="test" label="Test">
+          <option value="value1">Label 1</option>
+          <option value="value2">Label 2</option>
+        </PktCombobox>,
+      )
+
+      const optionElements = container.querySelectorAll('.pkt-listbox__option')
+      expect(optionElements.length).toBe(2)
+      expect(optionElements[0].getAttribute('data-value')).toBe('value1')
+      expect(optionElements[1].getAttribute('data-value')).toBe('value2')
+    })
+
+    test('handles defaultOptions property', () => {
+      const defaultOptions: IPktComboboxOption[] = [
+        { value: 'default1', label: 'Default 1' },
+        { value: 'default2', label: 'Default 2' },
+      ]
+
+      const { container } = createComboboxTest({ defaultOptions })
+
+      const optionElements = container.querySelectorAll('.pkt-listbox__option')
+      expect(optionElements.length).toBe(2)
+      expect(optionElements[0].getAttribute('data-value')).toBe('default1')
+    })
+
+    test('handles disabled options', () => {
+      const { container } = createComboboxTest({
+        options: getDefaultOptions(),
+      })
+
+      const disabledOption = container.querySelector('[data-value="cherry"]')
+      expect(disabledOption?.getAttribute('data-disabled')).toBe('true')
+    })
+  })
+
+  describe('Value handling', () => {
+    test('handles single value correctly', () => {
+      const { container } = createComboboxTest({
+        defaultValue: 'apple',
+        options: getDefaultOptions(),
+      })
+
+      const formInput = container.querySelector('input.pkt-visually-hidden') as HTMLInputElement
+      expect(formInput.value).toBe('apple')
+    })
+
+    test('handles multiple values correctly', () => {
+      const { container } = createComboboxTest({
+        defaultValue: ['apple', 'banana'],
+        multiple: true,
+        options: getDefaultOptions(),
+      })
+
+      const formInput = container.querySelector('input.pkt-visually-hidden') as HTMLInputElement
+      expect(formInput.value).toBe('apple,banana')
+    })
+
+    test('handles controlled value correctly', () => {
+      const { container } = createComboboxTest({
+        value: 'apple',
+        options: getDefaultOptions(),
+      })
+
+      const formInput = container.querySelector('input.pkt-visually-hidden') as HTMLInputElement
+      expect(formInput.value).toBe('apple')
+    })
+  })
+
+  describe('Placeholder functionality', () => {
+    test('shows placeholder when no value selected', () => {
+      const { container } = createComboboxTest({ placeholder: 'Select an option' })
+
+      const placeholder = container.querySelector('.pkt-combobox__placeholder')
+      expect(placeholder).toBeInTheDocument()
+      expect(placeholder?.textContent).toBe('Select an option')
+    })
+
+    test('hides placeholder when value is selected', () => {
+      const { container } = createComboboxTest({
+        placeholder: 'Select an option',
+        defaultValue: 'apple',
+        options: getDefaultOptions(),
+      })
+
+      const placeholder = container.querySelector('.pkt-combobox__placeholder')
+      expect(placeholder).not.toBeInTheDocument()
+    })
+
+    test('shows placeholder in multiple mode with outside tag placement', () => {
+      const { container } = createComboboxTest({
+        placeholder: 'Select options',
+        multiple: true,
+        tagPlacement: 'outside',
+      })
+
+      const placeholder = container.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', () => {
+      const { container } = createComboboxTest({
+        multiple: true,
+        defaultValue: ['apple'],
+        options: getDefaultOptions(),
+      })
+
+      const outsideTags = container.querySelector('.pkt-combobox__tags-outside')
+      expect(outsideTags).not.toBeInTheDocument()
+
+      const inlineTags = container.querySelectorAll('.pkt-combobox__input .pkt-tag')
+      expect(inlineTags.length).toBeGreaterThan(0)
+    })
+
+    test('renders tags outside input when tagPlacement is outside', () => {
+      const { container } = createComboboxTest({
+        multiple: true,
+        tagPlacement: 'outside',
+        defaultValue: ['apple', 'banana'],
+        options: getDefaultOptions(),
+      })
+
+      const outsideTags = container.querySelector('.pkt-combobox__tags-outside')
+      expect(outsideTags).toBeInTheDocument()
+
+      const tags = outsideTags?.querySelectorAll('.pkt-tag')
+      expect(tags?.length).toBe(2)
+    })
+  })
+
+  describe('Input field functionality', () => {
+    test('renders hidden input when not allowUserInput or typeahead', () => {
+      const { container } = createComboboxTest({ name: 'test-name' })
+
+      const hiddenInput = container.querySelector('input[type="hidden"]')
+      const textInput = container.querySelector('.pkt-combobox__input input[type="text"]')
+
+      expect(hiddenInput).toBeInTheDocument()
+      expect(textInput).not.toBeInTheDocument()
+      expect(hiddenInput?.getAttribute('id')).toBe(`${comboboxId}-input`)
+      expect(hiddenInput?.getAttribute('name')).toBe('test-name-input')
+    })
+
+    test('renders text input when allowUserInput is true', () => {
+      const { container } = createComboboxTest({
+        allowUserInput: true,
+        name: 'test-name',
+      })
+
+      const textInput = container.querySelector('input[type="text"][role="combobox"]')
+      const hiddenInput = container.querySelector('input[type="hidden"]')
+
+      expect(textInput).toBeInTheDocument()
+      expect(hiddenInput).not.toBeInTheDocument()
+      expect(textInput?.getAttribute('id')).toBe(`${comboboxId}-input`)
+      expect(textInput?.getAttribute('name')).toBe('test-name-input')
+      expect(textInput?.getAttribute('aria-controls')).toBe(`${comboboxId}-listbox`)
+    })
+
+    test('renders text input when typeahead is true', () => {
+      const { container } = createComboboxTest({ typeahead: true })
+
+      const textInput = container.querySelector('input[type="text"]')
+      expect(textInput).toBeInTheDocument()
+      expect(textInput?.getAttribute('aria-autocomplete')).toBe('both')
+    })
+
+    test('sets correct aria-autocomplete for allowUserInput', () => {
+      const { container } = createComboboxTest({ allowUserInput: true })
+
+      const textInput = container.querySelector('input[type="text"]')
+      expect(textInput?.getAttribute('aria-autocomplete')).toBe('list')
+    })
+  })
+
+  describe('Dropdown functionality', () => {
+    test('opens dropdown when arrow button is clicked', () => {
+      const { container } = createComboboxTest()
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+      const inputDiv = container.querySelector('.pkt-combobox__input')
+
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
+      expect(inputDiv).not.toHaveClass('pkt-combobox__input--open')
+
+      fireEvent.click(arrowButton!)
+
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('true')
+      expect(inputDiv).toHaveClass('pkt-combobox__input--open')
+    })
+
+    test('toggles dropdown state with multiple clicks', () => {
+      const { container } = createComboboxTest()
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+
+      fireEvent.click(arrowButton!)
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('true')
+
+      fireEvent.click(arrowButton!)
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
+    })
+
+    test('does not open when disabled', () => {
+      const { container } = createComboboxTest({ disabled: true })
+
+      const arrowButton = container.querySelector('.pkt-combobox__input')
+
+      fireEvent.click(arrowButton!)
+
+      expect(arrowButton?.getAttribute('aria-expanded')).toBe('false')
+    })
+  })
+
+  describe('Search functionality', () => {
+    test('renders search input 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 correctly', () => {
+      const { container } = createComboboxTest({
+        includeSearch: true,
+        searchPlaceholder: 'Search items...',
+      })
+
+      const searchInput = container.querySelector('.pkt-listbox__search input') as HTMLInputElement
+      expect(searchInput.placeholder).toBe('Search items...')
+    })
+  })
+
+  describe('Max length functionality', () => {
+    test('shows counter when maxlength is set in multiple mode', () => {
+      const { container } = createComboboxTest({
+        multiple: true,
+        maxlength: 5,
+        defaultValue: ['apple', 'banana'],
+        options: getDefaultOptions(),
+      })
+
+      const counter = container.querySelector('.pkt-input__counter')
+      expect(counter).toBeInTheDocument()
+    })
+  })
+
+  describe('Error handling', () => {
+    test('applies error styling when hasError is true', () => {
+      const { container } = createComboboxTest({ hasError: true })
+
+      const inputDiv = container.querySelector('.pkt-combobox__input')
+      expect(inputDiv).toHaveClass('pkt-combobox__input--error')
+    })
+
+    test('renders error message text', () => {
+      createComboboxTest({
+        hasError: true,
+        errorMessage: 'Test error',
+      })
+
+      expect(screen.getByText('Test error')).toBeInTheDocument()
+    })
+  })
+
+  describe('Form integration', () => {
+    test('uses id for form input name when no name specified', () => {
+      const { container } = createComboboxTest()
+
+      const formInput = container.querySelector('input.pkt-visually-hidden') as HTMLInputElement
+      expect(formInput).toHaveAttribute('name', comboboxId)
+    })
+
+    test('uses custom name for form input when specified', () => {
+      const { container } = createComboboxTest({
+        name: 'myField',
+        defaultValue: 'apple',
+        options: getDefaultOptions(),
+      })
+
+      const formInput = container.querySelector('input.pkt-visually-hidden') as HTMLInputElement
+      expect(formInput).toHaveAttribute('name', 'myField')
+      expect(formInput.value).toBe('apple')
+    })
+
+    test('renders hidden form input', () => {
+      const { container } = createComboboxTest()
+
+      const formInput = container.querySelector('input.pkt-visually-hidden')
+      expect(formInput).toBeInTheDocument()
+      expect(formInput).toHaveClass('pkt-visually-hidden')
+      expect(formInput?.getAttribute('tabindex')).toBe('-1')
+    })
+  })
+
+  describe('InputWrapper integration', () => {
+    test('renders label text', () => {
+      createComboboxTest({ label: 'Custom Label' })
+
+      expect(screen.getByText('Custom Label')).toBeInTheDocument()
+    })
+
+    test('renders helptext', () => {
+      createComboboxTest({ helptext: 'Help text' })
+
+      expect(screen.getByText('Help text')).toBeInTheDocument()
+    })
+
+    test('renders optional tag', () => {
+      const { container } = createComboboxTest({
+        optionalTag: true,
+        optionalText: 'Valgfritt',
+      })
+
+      expect(container.textContent).toContain('Valgfritt')
+    })
+
+    test('renders required tag', () => {
+      const { container } = createComboboxTest({
+        requiredTag: true,
+        requiredText: 'Må fylles ut',
+      })
+
+      expect(container.textContent).toContain('Må fylles ut')
+    })
+
+    test('renders label as screen-reader-only when useWrapper is false', () => {
+      const { container } = createComboboxTest({ useWrapper: false })
+
+      const labelEl = container.querySelector('label')
+      expect(labelEl).toBeInTheDocument()
+      expect(labelEl).toHaveClass('pkt-sr-only')
+    })
+  })
+})