@oslokommune/punkt-elements 13.5.4 → 13.5.6

package/src/components/radiobutton/radiobutton.test.ts

@@ -0,0 +1,272 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import './radiobutton'
+
+export interface RadioButtonTestConfig extends BaseTestConfig {
+  value?: string
+  checkHelptext?: string | null
+  defaultChecked?: boolean
+  hasTile?: boolean
+  checked?: boolean | string | null
+  type?: string
+  tagText?: string | null
+  optionalTag?: boolean
+  optionalText?: string
+  requiredTag?: boolean
+  requiredText?: string
+
+  id?: string
+  name?: string
+  label?: string
+  disabled?: boolean
+  readonly?: boolean
+  required?: boolean
+  hasError?: boolean
+  inline?: boolean
+  ariaDescribedBy?: string | null
+  ariaLabelledby?: string | null
+}
+
+export const createRadioButtonTest = async (config: RadioButtonTestConfig = {}) => {
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-radiobutton'>,
+    RadioButtonTestConfig
+  >('pkt-radiobutton', config)
+
+  if (config.label) {
+    element.label = config.label
+    await element.updateComplete
+  }
+
+  return {
+    container,
+    radiobutton: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+describe('pkt-radiobutton', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('renders with basic properties', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      id: 'test',
+      name: 'test',
+      value: 'test',
+    })
+
+    expect(radiobutton).toBeInTheDocument()
+    expect(radiobutton.tagName).toBe('PKT-RADIOBUTTON')
+  })
+
+  test('renders input element with correct attributes', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      id: 'test',
+      name: 'test',
+      value: 'test',
+    })
+
+    const input = radiobutton.querySelector('input[type="radio"]') as HTMLInputElement
+    expect(input).toBeInTheDocument()
+    expect(input.type).toBe('radio')
+    expect(input.id).toBe('test-internal')
+    expect(input.name).toBe('test-internal')
+  })
+
+  test('displays label correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      id: 'test',
+      label: 'Test Radio',
+    })
+
+    const label = radiobutton.querySelector('label')
+    expect(label).toBeInTheDocument()
+    expect(label?.textContent?.trim()).toContain('Test Radio')
+    expect(label?.getAttribute('for')).toBe('test-internal')
+  })
+
+  test('handles checked state correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest()
+
+    expect(radiobutton.checked).toBe(null)
+
+    radiobutton.checked = true
+    await radiobutton.updateComplete
+
+    const input = radiobutton.querySelector('input') as HTMLInputElement
+    expect(input.checked).toBe(true)
+    expect(radiobutton.checked).toBe(true)
+  })
+
+  test('updates checked state on user interaction', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      label: 'Test Option',
+    })
+
+    const input = radiobutton.querySelector('input') as HTMLInputElement
+    expect(input.checked).toBe(false)
+    expect(radiobutton.touched).toBe(false)
+
+    fireEvent.click(input)
+    await radiobutton.updateComplete
+
+    expect(input.checked).toBe(true)
+    expect(radiobutton.touched).toBe(true)
+  })
+
+  test('handles disabled state correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      disabled: true,
+    })
+
+    const input = radiobutton.querySelector('input') as HTMLInputElement
+    expect(input.disabled).toBe(true)
+
+    const label = radiobutton.querySelector('.pkt-input-check__input-label')
+    expect(label).toHaveClass('pkt-input-check__input-label--disabled')
+  })
+
+  test('renders tile variant correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      hasTile: true,
+    })
+
+    const container = radiobutton.querySelector('.pkt-input-check__input')
+    expect(container).toHaveClass('pkt-input-check__input--tile')
+  })
+
+  test('renders disabled tile variant correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      hasTile: true,
+      disabled: true,
+    })
+
+    const container = radiobutton.querySelector('.pkt-input-check__input')
+    expect(container).toHaveClass('pkt-input-check__input--tile-disabled')
+  })
+
+  test('renders helptext when provided', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      checkHelptext: 'This is helpful information',
+    })
+
+    const helptext = radiobutton.querySelector('.pkt-input-check__input-helptext')
+    expect(helptext).toBeInTheDocument()
+    expect(helptext?.textContent).toBe('This is helpful information')
+  })
+
+  test('handles error state correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      hasError: true,
+    })
+
+    const input = radiobutton.querySelector('input')
+    expect(input).toHaveClass('pkt-input-check__input-checkbox--error')
+  })
+
+  test('renders tag text when provided', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      tagText: 'Tag',
+    })
+
+    const tag = radiobutton.querySelector('.pkt-tag--gray')
+    expect(tag).toBeInTheDocument()
+    expect(tag?.textContent).toBe('Tag')
+  })
+
+  test('renders optional tag when enabled', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      optionalTag: true,
+    })
+
+    const tag = radiobutton.querySelector('.pkt-tag--blue-light')
+    expect(tag).toBeInTheDocument()
+    expect(tag?.textContent).toBe('Valgfritt')
+  })
+
+  test('renders required tag when enabled', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      requiredTag: true,
+    })
+
+    const tag = radiobutton.querySelector('.pkt-tag--beige')
+    expect(tag).toBeInTheDocument()
+    expect(tag?.textContent).toBe('Må fylles ut')
+  })
+
+  test('manages focus events correctly', async () => {
+    const { radiobutton } = await createRadioButtonTest()
+
+    const focusSpy = jest.fn()
+    const blurSpy = jest.fn()
+    radiobutton.addEventListener('focus', focusSpy)
+    radiobutton.addEventListener('blur', blurSpy)
+
+    const input = radiobutton.querySelector('input') as HTMLInputElement
+
+    fireEvent.focus(input)
+    expect(focusSpy).toHaveBeenCalled()
+
+    fireEvent.blur(input)
+    expect(blurSpy).toHaveBeenCalled()
+  })
+
+  test('works with radio button groups', async () => {
+    const container = document.createElement('form')
+    document.body.appendChild(container)
+
+    const radio1Container = document.createElement('div')
+    radio1Container.innerHTML = '<pkt-radiobutton name="group" value="1"></pkt-radiobutton>'
+    container.appendChild(radio1Container)
+    await customElements.whenDefined('pkt-radiobutton')
+    const radio1 = radio1Container.querySelector(
+      'pkt-radiobutton',
+    ) as CustomElementFor<'pkt-radiobutton'>
+    radio1.label = 'Option 1'
+    await radio1.updateComplete
+
+    const radio2Container = document.createElement('div')
+    radio2Container.innerHTML = '<pkt-radiobutton name="group" value="2"></pkt-radiobutton>'
+    container.appendChild(radio2Container)
+    const radio2 = radio2Container.querySelector(
+      'pkt-radiobutton',
+    ) as CustomElementFor<'pkt-radiobutton'>
+    radio2.label = 'Option 2'
+    await radio2.updateComplete
+
+    const input1 = radio1.querySelector('input') as HTMLInputElement
+    const input2 = radio2.querySelector('input') as HTMLInputElement
+
+    expect(input1.checked).toBe(false)
+    expect(input2.checked).toBe(false)
+
+    fireEvent.click(input1)
+    await radio1.updateComplete
+
+    expect(input1.checked).toBe(true)
+    expect(radio1.touched).toBe(true)
+
+    fireEvent.click(input2)
+    await radio2.updateComplete
+
+    expect(input2.checked).toBe(true)
+    expect(radio2.touched).toBe(true)
+
+    document.body.removeChild(container)
+  })
+
+  test('meets accessibility standards', async () => {
+    const { radiobutton } = await createRadioButtonTest({
+      label: 'Accessible Radio Button',
+    })
+
+    const results = await axe(radiobutton)
+    expect(results).toHaveNoViolations()
+  })
+})

package/src/components/select/select.test.ts

@@ -0,0 +1,227 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
+import { CustomElementFor } from '../../tests/component-registry'
+import { type IPktSelect, type TSelectOption } from './select'
+import './select'
+
+export interface SelectTestConfig extends Partial<IPktSelect>, BaseTestConfig {
+  id?: string
+  label?: string
+  disabled?: boolean
+  required?: boolean
+  hasError?: boolean
+  errorMessage?: string
+  helptext?: string
+  fullwidth?: boolean
+  ariaLabelledby?: string | null
+  ariaDescribedBy?: string | null
+  counter?: boolean
+  inline?: boolean
+  useWrapper?: boolean | string
+}
+
+export const createSelectTest = async (config: SelectTestConfig = {}) => {
+  const { options, ...htmlConfig } = config
+
+  const { container, element } = await createElementTest<
+    CustomElementFor<'pkt-select'>,
+    Omit<SelectTestConfig, 'options'>
+  >('pkt-select', htmlConfig)
+
+  if (options) {
+    element.options = options
+    await element.updateComplete
+  }
+
+  return {
+    container,
+    select: element,
+  }
+}
+
+expect.extend(toHaveNoViolations)
+
+describe('pkt-select', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  test('renders with basic properties', async () => {
+    const { select } = await createSelectTest({
+      label: 'Test Select',
+      id: 'test-select',
+    })
+
+    expect(select).toBeInTheDocument()
+    expect(select.getAttribute('id')).toBe('test-select')
+    expect(select.label).toBe('Test Select')
+  })
+
+  test('displays correct label in input wrapper', async () => {
+    const { select } = await createSelectTest({
+      label: 'Choose Option',
+    })
+
+    const inputWrapper = select.querySelector('pkt-input-wrapper')
+    expect(inputWrapper).toBeInTheDocument()
+    expect(inputWrapper?.getAttribute('label')).toBe('Choose Option')
+  })
+
+  test('renders select element with correct attributes', async () => {
+    const { select } = await createSelectTest({
+      id: 'my-select',
+      disabled: true,
+      value: 'option2',
+    })
+
+    const selectElement = select.querySelector('select')
+    expect(selectElement).toBeInTheDocument()
+    expect(selectElement?.getAttribute('id')).toBe('my-select-input')
+    expect(selectElement?.hasAttribute('disabled')).toBe(true)
+    expect(selectElement?.getAttribute('value')).toBe('option2')
+  })
+
+  test('handles options array property', async () => {
+    const options: TSelectOption[] = [
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3', disabled: true },
+    ]
+
+    const { select } = await createSelectTest({ options })
+
+    const optionElements = select.querySelectorAll('option')
+    expect(optionElements).toHaveLength(3)
+
+    expect(optionElements[0].value).toBe('1')
+    expect(optionElements[0].textContent?.trim()).toBe('Option 1')
+
+    expect(optionElements[2].hasAttribute('disabled')).toBe(true)
+  })
+
+  test('updates value on selection', async () => {
+    const options: TSelectOption[] = [
+      { value: 'a', label: 'Option A' },
+      { value: 'b', label: 'Option B' },
+    ]
+
+    const { select } = await createSelectTest({ options })
+
+    const selectElement = select.querySelector('select') as HTMLSelectElement
+
+    expect(selectElement.options.length).toBe(2)
+    expect(selectElement.options[0].value).toBe('a')
+    expect(selectElement.options[1].value).toBe('b')
+
+    expect(select.value).toBe('a')
+
+    selectElement.selectedIndex = 1
+    selectElement.dispatchEvent(new Event('change', { bubbles: true }))
+    await select.updateComplete
+
+    expect(select.value).toBe('b')
+    expect(select.touched).toBe(true)
+  })
+
+  test('handles error state correctly', async () => {
+    const { select } = await createSelectTest({
+      hasError: true,
+      errorMessage: 'Selection required',
+    })
+
+    const inputWrapper = select.querySelector('pkt-input-wrapper')
+    expect(inputWrapper?.hasAttribute('hasError')).toBe(true)
+    expect(inputWrapper?.getAttribute('errorMessage')).toBe('Selection required')
+
+    const selectElement = select.querySelector('select')
+    expect(selectElement?.getAttribute('aria-invalid')).toBe('true')
+  })
+
+  test('renders helptext when provided', async () => {
+    const { select } = await createSelectTest({
+      helptext: 'Choose your preferred option',
+    })
+
+    const inputWrapper = select.querySelector('pkt-input-wrapper')
+    expect(inputWrapper?.getAttribute('helptext')).toBe('Choose your preferred option')
+  })
+
+  test('handles fullwidth styling', async () => {
+    const { select } = await createSelectTest({
+      fullwidth: true,
+    })
+
+    const selectElement = select.querySelector('select')
+    expect(selectElement?.className).toContain('pkt-input--fullwidth')
+  })
+
+  test('manages focus events correctly', async () => {
+    const { select } = await createSelectTest()
+
+    const focusSpy = jest.spyOn(select, 'onFocus')
+    const blurSpy = jest.spyOn(select, 'onBlur')
+
+    const selectElement = select.querySelector('select') as HTMLSelectElement
+
+    selectElement.dispatchEvent(new FocusEvent('focus'))
+    expect(focusSpy).toHaveBeenCalled()
+
+    selectElement.dispatchEvent(new FocusEvent('blur'))
+    expect(blurSpy).toHaveBeenCalled()
+  })
+
+  test('passes through accessibility attributes', async () => {
+    const { select } = await createSelectTest({
+      ariaLabelledby: 'external-label',
+      ariaDescribedBy: 'external-description',
+    })
+
+    const selectElement = select.querySelector('select')
+    expect(selectElement?.getAttribute('aria-labelledby')).toBe('external-label')
+
+    const inputWrapper = select.querySelector('pkt-input-wrapper')
+    expect(inputWrapper?.getAttribute('ariaDescribedBy')).toBe('external-description')
+  })
+
+  test('handles input wrapper properties', async () => {
+    const { select } = await createSelectTest({
+      counter: true,
+      inline: true,
+    })
+
+    const inputWrapper = select.querySelector('pkt-input-wrapper')
+    expect(inputWrapper?.hasAttribute('counter')).toBe(true)
+    expect(inputWrapper?.hasAttribute('inline')).toBe(true)
+  })
+
+  test('handles useWrapper false', async () => {
+    const { select } = await createSelectTest()
+
+    // Set useWrapper property directly on the element
+    select.useWrapper = false
+    await select.updateComplete
+
+    // When useWrapper is false, verify the behavior
+    expect(select.useWrapper).toBe(false)
+
+    // Confirm that there's a label with class pkt-sr-only in the markup
+    const srOnlyLabel = select.querySelector('label.pkt-sr-only')
+    expect(srOnlyLabel).toBeInTheDocument()
+  })
+
+  test('meets accessibility standards', async () => {
+    const options: TSelectOption[] = [
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+    ]
+
+    const { select } = await createSelectTest({
+      label: 'Accessible Select',
+      options,
+    })
+
+    const results = await axe(select)
+    expect(results).toHaveNoViolations()
+  })
+})

package/src/components/select/select.ts

@@ -150,6 +150,16 @@ export class PktSelect extends PktInputElement implements IPktSelect {
 
   update(changedProperties: PropertyValues) {
     super.update(changedProperties)
+    if (changedProperties.has('options')) {
+      this._options = this.options
+      this.requestUpdate('_options')
+
+      // If no value is set and we have options, set to first option
+      if (!this.value && this._options.length > 0) {
+        this.value = this._options[0].value
+        this.selectedIndex = 0
+      }
+    }
     if (changedProperties.has('value') && this.value !== changedProperties.get('value')) {
       this.selectedIndex = this.touched
         ? this.returnNumberOrNull(this.inputRef.value?.selectedIndex)
@@ -230,18 +240,19 @@ export class PktSelect extends PktInputElement implements IPktSelect {
           }}
           ${ref(this.inputRef)}
         >
-          ${this._options.length > 0 &&
-          this._options.map(
-            (option) =>
-              html`<option
-                value=${option.value}
-                ?selected=${this.value == option.value || option.selected}
-                ?disabled=${option.disabled}
-                ?hidden=${option.hidden}
-              >
-                ${option.label}
-              </option>`,
-          )}
+          ${this._options.length > 0
+            ? this._options.map(
+                (option) =>
+                  html`<option
+                    value=${option.value}
+                    ?selected=${this.value == option.value || option.selected}
+                    ?disabled=${option.disabled}
+                    ?hidden=${option.hidden}
+                  >
+                    ${option.label}
+                  </option>`,
+              )
+            : ''}
         </select>
         <div class="pkt-contents" ${ref(this.helptextSlot)} name="helptext" slot="helptext"></div>
       </pkt-input-wrapper>