@oslokommune/punkt-elements 13.4.1 → 13.5.0

package/src/components/combobox/combobox.ts

@@ -184,7 +184,7 @@ export class PktCombobox extends PktInputElement implements IPktCombobox {
       this._options = [...this.options]
     }
 
-    if (changedProperties.has('options') && this.options.length) {
+    if (changedProperties.has('options')) {
       // If options change, we need to update _options, but we need to preserve userAdded values
       const userAddedValues = this._options.filter((option) => option.userAdded)
       // Filter out userAddedValues that are overridden by this.options

package/src/components/datepicker/datepicker.accessibility.test.ts

@@ -0,0 +1,193 @@
+import '@testing-library/jest-dom'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+
+expect.extend(toHaveNoViolations)
+
+import './datepicker'
+import '../calendar/calendar'
+import { PktDatepicker } from './datepicker'
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-datepicker')
+  await customElements.whenDefined('pkt-calendar')
+}
+
+// Helper function to create datepicker markup
+const createDatepicker = async (datepickerProps = '') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-datepicker ${datepickerProps}></pkt-datepicker>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktDatepicker', () => {
+  describe('Event handling', () => {
+    test('dispatches change event when value changes', async () => {
+      const container = await createDatepicker()
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      let changeEventFired = false
+      datepicker.addEventListener('change', () => {
+        changeEventFired = true
+      })
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+      fireEvent.change(input, { target: { value: '2024-06-15' } })
+      fireEvent.blur(input)
+      await datepicker.updateComplete
+
+      expect(changeEventFired).toBe(true)
+    })
+
+    test('dispatches input event during typing', async () => {
+      const container = await createDatepicker()
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      let inputEventFired = false
+      datepicker.addEventListener('input', () => {
+        inputEventFired = true
+      })
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+      fireEvent.input(input, { target: { value: '2024-06-15' } })
+      await datepicker.updateComplete
+
+      expect(inputEventFired).toBe(true)
+    })
+
+    test('dispatches focus and blur events', async () => {
+      const container = await createDatepicker()
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      let focusEventFired = false
+      let blurEventFired = false
+
+      datepicker.addEventListener('focus', () => {
+        focusEventFired = true
+      })
+      datepicker.addEventListener('blur', () => {
+        blurEventFired = true
+      })
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+      fireEvent.focus(input)
+      await datepicker.updateComplete
+      fireEvent.blur(input)
+      await datepicker.updateComplete
+
+      expect(focusEventFired).toBe(true)
+      expect(blurEventFired).toBe(true)
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('has no accessibility violations', async () => {
+      const container = await createDatepicker(
+        'label="Test Datepicker" helptext="Select your date"',
+      )
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const results = await axe(datepicker)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('associates label with input correctly', async () => {
+      const container = await createDatepicker('id="test-datepicker" label="Test Label"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const label = datepicker.querySelector('label')
+      const input = datepicker.querySelector('input')
+
+      expect(label).toHaveAttribute('for')
+      expect(input).toHaveAttribute('id')
+      expect(label?.getAttribute('for')).toBe(input?.getAttribute('id'))
+    })
+
+    test('has proper ARIA attributes for calendar button', async () => {
+      const container = await createDatepicker('label="Test Datepicker"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      expect(calendarButton).toBeInTheDocument()
+
+      // Check initial state
+      expect(datepicker.calendarOpen).toBe(false)
+
+      // Open calendar
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      expect(datepicker.calendarOpen).toBe(true)
+    })
+
+    test('provides proper screen reader announcements', async () => {
+      const container = await createDatepicker('label="Test Datepicker"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const input = datepicker.querySelector('input')
+      expect(input).toHaveAttribute('aria-describedby')
+    })
+
+    test('handles focus management correctly', async () => {
+      const container = await createDatepicker()
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const calendarButton = datepicker.querySelector('button[type="button"]') as HTMLElement
+
+      // Focus should be manageable
+      if (calendarButton) {
+        calendarButton.focus()
+        expect(document.activeElement).toBe(calendarButton)
+      }
+    })
+
+    test('supports keyboard-only interaction', async () => {
+      const container = await createDatepicker()
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const calendarButton = datepicker.querySelector('button[type="button"]') as HTMLElement
+
+      // Should open with keyboard
+      if (calendarButton) {
+        calendarButton.focus()
+        fireEvent.keyDown(calendarButton, { key: 'Enter' })
+        await datepicker.updateComplete
+
+        expect(datepicker.calendarOpen).toBe(true)
+      }
+
+      // Should close with keyboard
+      fireEvent.keyDown(datepicker, { key: 'Escape' })
+      await datepicker.updateComplete
+
+      expect(datepicker.calendarOpen).toBe(false)
+    })
+  })
+})

package/src/components/datepicker/datepicker.core.test.ts

@@ -0,0 +1,322 @@
+import '@testing-library/jest-dom'
+import { toHaveNoViolations } from 'jest-axe'
+import { fireEvent } from '@testing-library/dom'
+import { parseISODateString } from '@/utils/dateutils'
+
+expect.extend(toHaveNoViolations)
+
+import './datepicker'
+import '../calendar/calendar'
+import { PktDatepicker } from './datepicker'
+import { PktCalendar } from '../calendar/calendar'
+
+const waitForCustomElements = async () => {
+  await customElements.whenDefined('pkt-datepicker')
+  await customElements.whenDefined('pkt-calendar')
+}
+
+// Helper function to create datepicker markup
+const createDatepicker = async (datepickerProps = '') => {
+  const container = document.createElement('div')
+  container.innerHTML = `
+    <pkt-datepicker ${datepickerProps}></pkt-datepicker>
+  `
+  document.body.appendChild(container)
+  await waitForCustomElements()
+  return container
+}
+
+// Cleanup after each test
+afterEach(() => {
+  document.body.innerHTML = ''
+})
+
+describe('PktDatepicker', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', async () => {
+      const container = await createDatepicker()
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      expect(datepicker).toBeInTheDocument()
+
+      await datepicker.updateComplete
+      expect(datepicker).toBeTruthy()
+    })
+
+    test('renders with correct structure', async () => {
+      const container = await createDatepicker('label="Test Datepicker"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const inputWrapper = datepicker.querySelector('pkt-input-wrapper')
+      const input = datepicker.querySelector('input')
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+
+      expect(inputWrapper).toBeInTheDocument()
+      expect(input).toBeInTheDocument()
+      expect(calendarButton).toBeInTheDocument()
+    })
+
+    test('renders calendar when opened', async () => {
+      const container = await createDatepicker('label="Test Datepicker"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      const calendar = datepicker.querySelector('pkt-calendar')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    test('closes calendar when clicking outside', async () => {
+      const container = await createDatepicker('label="Test Datepicker"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Open calendar
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      // Click outside
+      fireEvent.click(document.body)
+      await datepicker.updateComplete
+
+      expect(datepicker.calendarOpen).toBe(false)
+    })
+
+    test('closes calendar when clicking outside', async () => {
+      const container = await createDatepicker('label="Test Datepicker"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Open calendar
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      // Click outside
+      fireEvent.click(document.body)
+      await datepicker.updateComplete
+
+      expect(datepicker.calendarOpen).toBe(false)
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', async () => {
+      const container = await createDatepicker('name="test" id="test"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.value).toBe('')
+      expect(datepicker.label).toBe('Datovelger')
+      expect(datepicker.multiple).toBe(false)
+      expect(datepicker.range).toBe(false)
+      expect(datepicker.maxlength).toBe(null)
+      expect(datepicker.showRangeLabels).toBe(false)
+    })
+
+    test('handles value property correctly', async () => {
+      const testDate = '2024-06-15'
+      const container = await createDatepicker(`value="${testDate}"`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.value).toBe(testDate)
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+      expect(input.value).toBeTruthy()
+    })
+
+    test('handles multiple values correctly', async () => {
+      const testDates = '2024-06-15,2024-06-20,2024-06-25'
+      const container = await createDatepicker(`value="${testDates}" multiple`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.value).toBe(testDates)
+      expect(datepicker.multiple).toBe(true)
+
+      // Should show tags for multiple values
+      const tags = datepicker.querySelectorAll('pkt-tag')
+      expect(tags.length).toBe(3)
+    })
+
+    test('handles range values correctly', async () => {
+      const rangeValue = '2024-06-15,2024-06-20'
+      const container = await createDatepicker(`value="${rangeValue}" range`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.value).toBe(rangeValue)
+      expect(datepicker.range).toBe(true)
+    })
+
+    test('handles label property correctly', async () => {
+      const testLabel = 'Select your date'
+      const container = await createDatepicker(`label="${testLabel}"`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.label).toBe(testLabel)
+
+      const label = datepicker.querySelector('label')
+      expect(label?.textContent).toContain(testLabel)
+    })
+
+    test('handles dateformat property correctly', async () => {
+      const customFormat = 'MM/dd/yyyy'
+      const container = await createDatepicker(
+        `dateformat="${customFormat}" value="2024-06-15" multiple`,
+      )
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.dateformat).toBe(customFormat)
+
+      // Multiple mode input should be empty (for new input)
+      const input = datepicker.querySelector('input') as HTMLInputElement
+      expect(input.value).toBe('')
+
+      // Selected dates should show in tags with custom format
+      const tag = datepicker.querySelector('pkt-tag time')
+      expect(tag).toBeInTheDocument()
+      if (tag) {
+        expect(tag.textContent).toMatch(/\d{2}\/\d{2}\/\d{4}/)
+      }
+    })
+
+    test('handles maxlength property correctly', async () => {
+      const container = await createDatepicker('multiple maxlength="3"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.maxlength).toBe(3)
+    })
+
+    test('handles disabled property correctly', async () => {
+      const container = await createDatepicker('disabled')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.disabled).toBe(true)
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+      const calendarButton = datepicker.querySelector('button[type="button"]') as HTMLButtonElement
+
+      expect(input.disabled).toBe(true)
+      expect(calendarButton.disabled).toBe(true)
+    })
+
+    test('handles currentmonth property correctly', async () => {
+      const testMonth = '2024-03-01'
+      const container = await createDatepicker(`currentmonth="${testMonth}"`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Open calendar to see the month
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      const calendar = datepicker.querySelector('pkt-calendar') as PktCalendar
+      expect(calendar.currentmonth).toEqual(parseISODateString(testMonth))
+    })
+  })
+
+  describe('Calendar integration', () => {
+    test('passes properties to calendar correctly', async () => {
+      const container = await createDatepicker(
+        'min="2024-06-01" max="2024-06-30" excludeweekdays="0,6"',
+      )
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Open calendar
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      const calendar = datepicker.querySelector('pkt-calendar') as PktCalendar
+      expect(calendar.earliest).toBe('2024-06-01')
+      expect(calendar.latest).toBe('2024-06-30')
+      expect(calendar.excludeweekdays).toEqual(['0', '6'])
+    })
+
+    test('syncs selected dates between input and calendar', async () => {
+      const testDate = '2024-06-15'
+      const container = await createDatepicker(`value="${testDate}"`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Open calendar
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      const calendar = datepicker.querySelector('pkt-calendar') as PktCalendar
+      expect(calendar.selected).toContain(testDate)
+
+      const selectedDate = datepicker.querySelector('.pkt-calendar__date--selected')
+      expect(selectedDate).toBeInTheDocument()
+    })
+
+    test('updates input when date selected in calendar', async () => {
+      const container = await createDatepicker()
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Open calendar
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      // Select a date
+      const availableDate = datepicker.querySelector(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+      fireEvent.click(availableDate!)
+      await datepicker.updateComplete
+
+      // Input should be updated
+      const input = datepicker.querySelector('input') as HTMLInputElement
+      expect(input.value).toBeTruthy()
+      expect(datepicker.value).toBeTruthy()
+    })
+
+    test('shows current month correctly in calendar', async () => {
+      const currentMonth = '2024-06-01'
+      const container = await createDatepicker(`currentmonth="${currentMonth}"`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Open calendar
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      const monthTitle = datepicker.querySelector('.pkt-calendar__month-title')
+      expect(monthTitle?.textContent).toContain('2024')
+    })
+  })
+})