@oslokommune/punkt-elements 19.8.0 → 19.10.0

package/src/components/radio-group/radio-group.test.ts

@@ -0,0 +1,530 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+import { vi } from 'vitest'
+import type { LitElement } from 'lit'
+import { CustomElementFor } from '../../tests/component-registry'
+import '@/components/textinput'
+import './radio-group'
+
+expect.extend(toHaveNoViolations)
+
+type TRadioGroup = CustomElementFor<'pkt-radio-group'>
+type TRadio = CustomElementFor<'pkt-radiobutton'> & {
+  internals: { validity: ValidityState; ariaRequired: string | null }
+}
+
+const settle = async () => {
+  for (let i = 0; i < 2; i++) {
+    const elements = Array.from(
+      document.querySelectorAll<LitElement>('pkt-radio-group, pkt-input-wrapper, pkt-radiobutton'),
+    )
+    await Promise.all(elements.map((el) => el.updateComplete))
+    await new Promise((resolve) => setTimeout(resolve, 0))
+  }
+}
+
+const mount = async (markup: string) => {
+  document.body.innerHTML = markup
+  await settle()
+  return document.querySelector('pkt-radio-group') as TRadioGroup
+}
+
+const radio = (id: string) => document.getElementById(id) as TRadio
+const inner = (id: string) => radio(id).querySelector('input') as HTMLInputElement
+
+const select = async (id: string) => {
+  fireEvent.click(inner(id))
+  await settle()
+}
+
+const options = `
+  <pkt-radiobutton id="buss" value="buss" label="Buss"></pkt-radiobutton>
+  <pkt-radiobutton id="tog" value="tog" label="Tog"></pkt-radiobutton>
+`
+
+describe('pkt-radio-group', () => {
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  describe('rendering', () => {
+    test('renders the radios inside the fieldset options of an input wrapper', async () => {
+      const group = await mount(
+        `<pkt-radio-group id="reise" label="Reisemåte">${options}</pkt-radio-group>`,
+      )
+
+      const fieldset = group.querySelector('fieldset.pkt-inputwrapper__fieldset')
+      expect(fieldset).toBeInTheDocument()
+      expect(fieldset?.querySelector('legend')).toHaveTextContent('Reisemåte')
+      const container = fieldset?.querySelector('.pkt-inputwrapper__options')
+      expect(radio('buss').parentElement).toBe(container)
+      expect(radio('tog').parentElement).toBe(container)
+    })
+
+    test('uses the group id for the wrapper ids', async () => {
+      const group = await mount(
+        `<pkt-radio-group id="reise" label="Reisemåte" helptext="Velg én">${options}</pkt-radio-group>`,
+      )
+
+      expect(group.querySelector('legend')).toHaveAttribute('id', 'reise-label')
+      expect(group.querySelector('fieldset')).toHaveAttribute('aria-describedby', 'reise-helptext')
+    })
+
+    test('passes layout and size to the input wrapper', async () => {
+      const group = await mount(
+        `<pkt-radio-group label="Reisemåte" layout="horizontal" input-size="small">${options}</pkt-radio-group>`,
+      )
+
+      const wrapper = group.querySelector('pkt-input-wrapper')
+      expect(wrapper).toHaveClass('pkt-inputwrapper--small')
+      expect(group.querySelector('.pkt-inputwrapper__options')).toHaveClass(
+        'pkt-inputwrapper__options--horizontal',
+      )
+    })
+
+    test('forwards slotted helptext to the input wrapper', async () => {
+      const group = await mount(
+        `<pkt-radio-group id="reise" label="Reisemåte">
+          <div slot="helptext">Fra slot</div>
+          ${options}
+        </pkt-radio-group>`,
+      )
+
+      expect(group.querySelector('.pkt-inputwrapper__helptext')).toHaveTextContent('Fra slot')
+      expect(group.querySelector('fieldset')).toHaveAttribute('aria-describedby', 'reise-helptext')
+    })
+
+    test('renders the error message and links it to the fieldset', async () => {
+      const group = await mount(
+        `<pkt-radio-group id="reise" label="Reisemåte" hasError errorMessage="Velg en reisemåte">${options}</pkt-radio-group>`,
+      )
+
+      expect(group.querySelector('#reise-error')).toHaveTextContent('Velg en reisemåte')
+      expect(group.querySelector('fieldset')?.getAttribute('aria-describedby')).toContain(
+        'reise-error',
+      )
+    })
+  })
+
+  describe('name', () => {
+    test('gives radios without a name the group name', async () => {
+      await mount(`<pkt-radio-group name="reise" label="Reisemåte">${options}</pkt-radio-group>`)
+
+      expect(radio('buss')).toHaveAttribute('name', 'reise')
+      expect(radio('tog')).toHaveAttribute('name', 'reise')
+      expect(inner('buss').name).toBe(inner('tog').name)
+    })
+
+    test('falls back to the group id when the group has no name', async () => {
+      await mount(`<pkt-radio-group id="reise" label="Reisemåte">${options}</pkt-radio-group>`)
+
+      expect(radio('buss')).toHaveAttribute('name', 'reise')
+      expect(radio('tog')).toHaveAttribute('name', 'reise')
+    })
+
+    test('generates a shared name when the group has neither name nor id', async () => {
+      await mount(`<pkt-radio-group label="Reisemåte">${options}</pkt-radio-group>`)
+
+      const name = radio('buss').getAttribute('name')
+      expect(name).toBeTruthy()
+      expect(name).not.toBe('buss')
+      expect(radio('tog')).toHaveAttribute('name', name!)
+    })
+
+    test('keeps a name set on the radio', async () => {
+      await mount(
+        `<pkt-radio-group name="reise" label="Reisemåte">
+          <pkt-radiobutton id="buss" name="eget" value="buss" label="Buss"></pkt-radiobutton>
+        </pkt-radio-group>`,
+      )
+
+      expect(radio('buss')).toHaveAttribute('name', 'eget')
+    })
+
+    test('replaces the id fallback when a rendered radio joins the group', async () => {
+      const group = await mount(
+        `<pkt-radio-group name="reise" label="Reisemåte"></pkt-radio-group>`,
+      )
+      const standalone = document.createElement('pkt-radiobutton') as TRadio
+      standalone.id = 'fly'
+      standalone.setAttribute('label', 'Fly')
+      document.body.appendChild(standalone)
+      await settle()
+      expect(standalone).toHaveAttribute('name', 'fly')
+
+      group.appendChild(standalone)
+      await settle()
+
+      expect(standalone).toHaveAttribute('name', 'reise')
+    })
+
+    test('follows a new group name', async () => {
+      const group = await mount(
+        `<pkt-radio-group name="reise" label="Reisemåte">${options}</pkt-radio-group>`,
+      )
+
+      group.name = 'transport'
+      await settle()
+
+      expect(radio('buss')).toHaveAttribute('name', 'transport')
+    })
+
+    test('keeps the id fallback for a radio outside a group', async () => {
+      document.body.innerHTML = '<pkt-radiobutton id="alene" label="Alene"></pkt-radiobutton>'
+      await settle()
+
+      expect(radio('alene')).toHaveAttribute('name', 'alene')
+    })
+  })
+
+  describe('defaults for the radios', () => {
+    test('turns on tile and error state for every radio', async () => {
+      await mount(
+        `<pkt-radio-group label="Reisemåte" hasTile hasError>${options}</pkt-radio-group>`,
+      )
+
+      for (const id of ['buss', 'tog']) {
+        expect(radio(id).querySelector('.pkt-input-check__input')).toHaveClass(
+          'pkt-input-check__input--tile',
+        )
+        expect(inner(id)).toHaveClass('pkt-input-check__input-checkbox--error')
+      }
+    })
+
+    test('lets a radio turn on tile when the group does not', async () => {
+      await mount(
+        `<pkt-radio-group label="Reisemåte">
+          <pkt-radiobutton id="buss" value="buss" label="Buss" hasTile></pkt-radiobutton>
+          <pkt-radiobutton id="tog" value="tog" label="Tog"></pkt-radiobutton>
+        </pkt-radio-group>`,
+      )
+
+      expect(radio('buss').querySelector('.pkt-input-check__input')).toHaveClass(
+        'pkt-input-check__input--tile',
+      )
+      expect(radio('tog').querySelector('.pkt-input-check__input')).not.toHaveClass(
+        'pkt-input-check__input--tile',
+      )
+    })
+
+    test('updates the radios when the group changes', async () => {
+      const group = await mount(`<pkt-radio-group label="Reisemåte">${options}</pkt-radio-group>`)
+
+      group.hasTile = true
+      await settle()
+
+      expect(radio('buss').querySelector('.pkt-input-check__input')).toHaveClass(
+        'pkt-input-check__input--tile',
+      )
+    })
+  })
+
+  describe('value', () => {
+    test('is the value of the checked radio', async () => {
+      const group = await mount(
+        `<pkt-radio-group label="Reisemåte">
+          <pkt-radiobutton id="buss" value="buss" label="Buss"></pkt-radiobutton>
+          <pkt-radiobutton id="tog" value="tog" label="Tog" checked></pkt-radiobutton>
+        </pkt-radio-group>`,
+      )
+
+      expect(group.value).toBe('tog')
+    })
+
+    test('is an empty string when no radio is checked', async () => {
+      const group = await mount(`<pkt-radio-group label="Reisemåte">${options}</pkt-radio-group>`)
+
+      expect(group.value).toBe('')
+    })
+
+    test('is on for a checked radio without a value', async () => {
+      const group = await mount(
+        `<pkt-radio-group label="Reisemåte">
+          <pkt-radiobutton id="ja" label="Ja" checked></pkt-radiobutton>
+        </pkt-radio-group>`,
+      )
+
+      expect(group.value).toBe('on')
+    })
+
+    test('checks the matching radio from the value attribute', async () => {
+      const group = await mount(
+        `<pkt-radio-group label="Reisemåte" value="tog">${options}</pkt-radio-group>`,
+      )
+
+      expect(radio('tog').checked).toBe(true)
+      expect(radio('buss').checked).toBeFalsy()
+      expect(group.value).toBe('tog')
+    })
+
+    test('checks the matching radio when set from code, without firing events', async () => {
+      const group = await mount(`<pkt-radio-group label="Reisemåte">${options}</pkt-radio-group>`)
+      const changed = vi.fn()
+      group.addEventListener('change', changed)
+      group.addEventListener('value-change', changed)
+
+      group.value = 'buss'
+      await settle()
+      expect(radio('buss').checked).toBe(true)
+      expect(inner('buss').checked).toBe(true)
+
+      group.value = 'tog'
+      await settle()
+      expect(radio('buss').checked).toBe(false)
+      expect(radio('tog').checked).toBe(true)
+
+      expect(changed).not.toHaveBeenCalled()
+    })
+
+    test('unchecks every radio when set to an empty string', async () => {
+      const group = await mount(
+        `<pkt-radio-group label="Reisemåte" value="tog">${options}</pkt-radio-group>`,
+      )
+
+      group.value = ''
+      await settle()
+
+      expect(radio('tog').checked).toBe(false)
+      expect(group.value).toBe('')
+    })
+
+    test('applies the value to radios added later', async () => {
+      const group = await mount(
+        `<pkt-radio-group label="Reisemåte" value="fly">${options}</pkt-radio-group>`,
+      )
+      const fly = document.createElement('pkt-radiobutton') as TRadio
+      fly.id = 'fly'
+      fly.value = 'fly'
+      group.appendChild(fly)
+      await settle()
+
+      expect(fly.checked).toBe(true)
+      expect(group.value).toBe('fly')
+    })
+  })
+
+  describe('events', () => {
+    test('fires value-change on the group with the new value when the user selects', async () => {
+      const group = await mount(`<pkt-radio-group label="Reisemåte">${options}</pkt-radio-group>`)
+      const fromGroup: unknown[] = []
+      group.addEventListener('value-change', (event) => {
+        if (event.target === group) fromGroup.push((event as CustomEvent).detail)
+      })
+
+      await select('tog')
+      await select('buss')
+
+      expect(fromGroup).toEqual(['tog', 'buss'])
+    })
+
+    test('fires change, input and value-change from the group instead of the radio', async () => {
+      const group = await mount(
+        `<form><pkt-radio-group name="reise" label="Reisemåte">${options}</pkt-radio-group></form>`,
+      )
+      const seen: string[] = []
+      for (const type of ['change', 'input', 'value-change']) {
+        group.addEventListener(type, (event) => {
+          const target = event.target as HTMLElement & { name: string; value: string }
+          seen.push(`${type}:${target.tagName.toLowerCase()}:${target.name}=${target.value}`)
+        })
+      }
+      const formChanges = vi.fn()
+      group.closest('form')!.addEventListener('change', formChanges)
+
+      await select('tog')
+
+      expect(seen).toEqual([
+        'input:pkt-radio-group:reise=tog',
+        'change:pkt-radio-group:reise=tog',
+        'value-change:pkt-radio-group:reise=tog',
+      ])
+      expect(formChanges).toHaveBeenCalledTimes(1)
+      expect(formChanges.mock.calls[0][0].target).toBe(group)
+    })
+
+    test('still fires the events on the radio itself', async () => {
+      await mount(`<pkt-radio-group label="Reisemåte">${options}</pkt-radio-group>`)
+      const changed = vi.fn()
+      radio('tog').addEventListener('change', changed)
+
+      await select('tog')
+
+      expect(changed).toHaveBeenCalledTimes(1)
+    })
+
+    test('fires focus when focus enters and blur when it leaves the group, not between radios', async () => {
+      document.body.innerHTML = `<pkt-radio-group label="Reisemåte">${options}</pkt-radio-group><button>Utenfor</button>`
+      await settle()
+      const group = document.querySelector('pkt-radio-group') as TRadioGroup
+      const seen: string[] = []
+      for (const type of ['focus', 'blur']) {
+        group.addEventListener(type, (event) =>
+          seen.push(`${type}:${(event.target as Element).tagName.toLowerCase()}`),
+        )
+      }
+
+      inner('buss').focus()
+      inner('tog').focus()
+      document.querySelector('button')!.focus()
+
+      expect(seen).toEqual(['focus:pkt-radio-group', 'blur:pkt-radio-group'])
+    })
+
+    test('focus() moves focus to the checked radio, or the first one', async () => {
+      const group = await mount(`<pkt-radio-group label="Reisemåte">${options}</pkt-radio-group>`)
+
+      group.focus()
+      expect(document.activeElement).toBe(inner('buss'))
+
+      group.value = 'tog'
+      await settle()
+      group.focus()
+      expect(document.activeElement).toBe(inner('tog'))
+    })
+
+    test('fires change only on the radio that becomes checked', async () => {
+      await mount(`<pkt-radio-group label="Reisemåte" value="buss">${options}</pkt-radio-group>`)
+      const bussChanged = vi.fn()
+      radio('buss').addEventListener('change', bussChanged)
+
+      await select('tog')
+
+      expect(bussChanged).not.toHaveBeenCalled()
+      expect(radio('buss').checked).toBe(false)
+    })
+  })
+
+  describe('validation', () => {
+    test('makes every radio invalid until one is checked when the group is required', async () => {
+      await mount(`<pkt-radio-group label="Reisemåte" required>${options}</pkt-radio-group>`)
+
+      expect(radio('buss').internals.validity.valueMissing).toBe(true)
+      expect(radio('tog').internals.validity.valueMissing).toBe(true)
+
+      await select('tog')
+
+      expect(radio('buss').internals.validity.valid).toBe(true)
+      expect(radio('tog').internals.validity.valid).toBe(true)
+    })
+
+    test('marks the radios as required for assistive technology', async () => {
+      await mount(`<pkt-radio-group label="Reisemåte" required>${options}</pkt-radio-group>`)
+
+      expect(radio('buss').internals.ariaRequired).toBe('true')
+    })
+
+    test('leaves the radios valid when the group is not required', async () => {
+      await mount(`<pkt-radio-group label="Reisemåte">${options}</pkt-radio-group>`)
+
+      expect(radio('buss').internals.validity.valid).toBe(true)
+    })
+  })
+
+  describe('disabled', () => {
+    test('disables the fieldset and marks the wrapper as disabled', async () => {
+      const group = await mount(
+        `<pkt-radio-group label="Reisemåte" disabled>${options}</pkt-radio-group>`,
+      )
+
+      expect(group.querySelector('fieldset')).toHaveAttribute('disabled', '')
+      expect(group.querySelector('pkt-input-wrapper')).toHaveClass('pkt-inputwrapper--disabled')
+    })
+
+    test('does not set disabled on the fieldset otherwise', async () => {
+      const group = await mount(`<pkt-radio-group label="Reisemåte">${options}</pkt-radio-group>`)
+
+      expect(group.querySelector('fieldset')).not.toHaveAttribute('disabled')
+    })
+  })
+
+  describe('a text field for an other option', () => {
+    const settleAll = async () => {
+      for (let i = 0; i < 3; i++) {
+        const elements = Array.from(document.querySelectorAll<LitElement>('*')).filter(
+          (el) => 'updateComplete' in el,
+        )
+        await Promise.all(elements.map((el) => el.updateComplete))
+        await new Promise((resolve) => setTimeout(resolve, 0))
+      }
+    }
+
+    const mountOther = async () => {
+      document.body.innerHTML = `
+        <form id="skjema">
+          <pkt-radio-group id="gruppe" name="reise" label="Spørsmål">
+            <pkt-radiobutton id="buss" value="buss" label="Buss"></pkt-radiobutton>
+            <pkt-radiobutton id="annet" value="annet" label="Annet"></pkt-radiobutton>
+            <pkt-textinput id="annet-tekst" name="reise-annet" label="Hva annet?" hidden></pkt-textinput>
+          </pkt-radio-group>
+          <button>Utenfor</button>
+        </form>`
+      await settleAll()
+      const group = document.getElementById('gruppe') as HTMLElement & { value: unknown }
+      const field = document.getElementById('annet-tekst') as HTMLElement
+      group.addEventListener('change', (event) => {
+        if (event.target === group) field.hidden = !String(group.value).includes('annet')
+      })
+      return { group, field, input: () => field.querySelector('input') as HTMLInputElement }
+    }
+
+    test('shows the text field inside the group when the other option is chosen', async () => {
+      const { field } = await mountOther()
+
+      fireEvent.click(document.getElementById('annet')!.querySelector('input')!)
+      await settleAll()
+
+      expect(field.hidden).toBe(false)
+      expect(field.closest('.pkt-inputwrapper__options')).toBeInTheDocument()
+    })
+
+    test('keeps the text field out of the group value, and lets its events through', async () => {
+      const { group, input } = await mountOther()
+      fireEvent.click(document.getElementById('annet')!.querySelector('input')!)
+      await settleAll()
+      const targets: string[] = []
+      group.addEventListener('change', (event) => targets.push((event.target as Element).id))
+
+      input().value = 'Ferge'
+      fireEvent.input(input())
+      fireEvent.change(input())
+      await settleAll()
+
+      expect(group.value).toEqual('annet')
+      expect(targets).toEqual(['annet-tekst'])
+      expect(
+        Array.from(new FormData(document.getElementById('skjema') as HTMLFormElement).entries()),
+      ).toEqual([
+        ['reise', 'annet'],
+        ['reise-annet', 'Ferge'],
+      ])
+    })
+
+    test('fires blur only when focus leaves the group, also from the text field', async () => {
+      const { group, input } = await mountOther()
+      fireEvent.click(document.getElementById('annet')!.querySelector('input')!)
+      await settleAll()
+      const blurs: Element[] = []
+      group.addEventListener('blur', (event) => {
+        if (event.target === group) blurs.push(event.target as Element)
+      })
+
+      document.getElementById('annet')!.querySelector('input')!.focus()
+      input().focus()
+      expect(blurs).toEqual([])
+
+      document.querySelector('button')!.focus()
+      expect(blurs).toEqual([group])
+    })
+  })
+
+  describe('accessibility', () => {
+    test('has no axe violations', async () => {
+      const group = await mount(
+        `<pkt-radio-group id="reise" label="Reisemåte" helptext="Velg én" required>${options}</pkt-radio-group>`,
+      )
+
+      expect(await axe(group)).toHaveNoViolations()
+    })
+  })
+})

package/src/components/radio-group/radio-group.ts

@@ -0,0 +1,65 @@
+import { provide } from '@lit/context'
+import { customElement, property, state } from 'lit/decorators.js'
+import {
+  optionChecked,
+  optionValue,
+  PktOptionGroupElement,
+  type TOption,
+} from '@/base-elements/option-group-element'
+import { radioGroupContext, type RadioGroupContext } from './radio-group-context'
+import '@/components/radiobutton'
+
+export class PktRadioGroup extends PktOptionGroupElement {
+  protected readonly optionSelector = 'pkt-radiobutton'
+
+  @provide({ context: radioGroupContext })
+  @state()
+  protected groupContext: RadioGroupContext = {
+    name: '',
+    hasTile: false,
+    hasError: false,
+    required: false,
+  }
+
+  private storedValue: string | null = null
+
+  @property({ type: String })
+  get value(): string {
+    const checked = this.options().find(optionChecked)
+    return checked ? optionValue(checked) : ''
+  }
+
+  set value(newValue: string | null | undefined) {
+    const oldValue = this.value
+    this.storedValue = newValue ?? ''
+    this.applyStoredValue(this.options())
+    this.requestUpdate('value', oldValue)
+  }
+
+  protected get hasStoredValue(): boolean {
+    return this.storedValue !== null
+  }
+
+  protected storeCurrentValue(): void {
+    this.storedValue = this.value
+  }
+
+  protected applyStoredValue(options: TOption[]): void {
+    options.forEach((option) => {
+      const checked = this.storedValue !== '' && optionValue(option) === this.storedValue
+      if (optionChecked(option) !== checked) option.checked = checked
+    })
+  }
+
+  protected createGroupContext(): RadioGroupContext {
+    return { ...super.createGroupContext(), required: this.required }
+  }
+}
+
+try {
+  customElement('pkt-radio-group')(PktRadioGroup)
+} catch (e) {
+  console.warn('Forsøker å definere <pkt-radio-group>, men den er allerede definert')
+}
+
+export default PktRadioGroup

package/src/components/radiobutton/index.ts

@@ -1,4 +1,5 @@
 import { PktRadioButton } from './radiobutton'
 
 export { PktRadioButton }
+export type { IPktRadioButton } from './radiobutton'
 export default PktRadioButton