@oslokommune/punkt-elements 13.4.1 → 13.5.0

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

@@ -0,0 +1,268 @@
+import '@testing-library/jest-dom'
+import { fireEvent } from '@testing-library/dom'
+
+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('Date input validation and formatting', () => {
+    test('validates date input format', async () => {
+      const container = await createDatepicker('label="Test"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+
+      // Test invalid date input - HTML5 date inputs will reject invalid formats
+      // For date inputs, we test boundary validation instead
+      fireEvent.change(input, { target: { value: '2024-02-30' } }) // Invalid date (Feb 30th)
+      fireEvent.blur(input)
+      await datepicker.updateComplete
+
+      // Should show validation error or handle gracefully
+      // For HTML5 date inputs, this might not trigger hasError, so we test that it doesn't crash
+      expect(datepicker).toBeInTheDocument()
+    })
+
+    test('formats dates according to dateformat property', async () => {
+      const container = await createDatepicker('dateformat="yyyy-MM-dd" value="2024-06-15"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+      expect(input.value).toBe('2024-06-15')
+    })
+
+    test('handles different date formats', async () => {
+      const testCases = [
+        { format: 'dd.MM.yyyy', expected: /\d{2}\.\d{2}\.\d{4}/ },
+        { format: 'MM/dd/yyyy', expected: /\d{2}\/\d{2}\/\d{4}/ },
+        { format: 'yyyy-MM-dd', expected: /\d{4}-\d{2}-\d{2}/ },
+      ]
+
+      for (const testCase of testCases) {
+        const container = await createDatepicker(
+          `dateformat="${testCase.format}" value="2024-06-15" multiple`,
+        )
+        const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+        await datepicker.updateComplete
+
+        // 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(testCase.expected)
+        }
+
+        // Cleanup
+        container.remove()
+      }
+    })
+
+    test('handles leap year dates correctly', async () => {
+      const leapYearDate = '2024-02-29'
+      const container = await createDatepicker(`value="${leapYearDate}"`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.value).toBe(leapYearDate)
+      expect(datepicker.hasError).toBe(false)
+    })
+
+    test('validates February 29 in non-leap years', async () => {
+      const invalidLeapDate = '2023-02-29'
+      const container = await createDatepicker(`value="${invalidLeapDate}"`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Should handle gracefully or show error
+      expect(datepicker).toBeInTheDocument()
+    })
+
+    test('handles edge case dates', async () => {
+      const edgeDates = ['1900-01-01', '2000-01-01', '2100-12-31', '1999-12-31']
+
+      for (const date of edgeDates) {
+        const container = await createDatepicker(`value="${date}"`)
+        const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+        await datepicker.updateComplete
+
+        expect(datepicker.value).toBe(date)
+        container.remove()
+      }
+    })
+  })
+
+  describe('Input field behavior', () => {
+    test('allows manual date entry', async () => {
+      const container = await createDatepicker('dateformat="yyyy-MM-dd"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+
+      fireEvent.change(input, { target: { value: '2024-06-15' } })
+      fireEvent.blur(input)
+      await datepicker.updateComplete
+
+      expect(datepicker.value).toBe('2024-06-15')
+    })
+
+    test('validates manual date entry', async () => {
+      const container = await createDatepicker()
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+
+      // HTML5 date inputs reject invalid formats, so we test that the component handles this gracefully
+      fireEvent.change(input, { target: { value: 'invalid-date' } })
+      fireEvent.blur(input)
+      await datepicker.updateComplete
+
+      // HTML5 date input will reject invalid dates, component should handle gracefully
+      expect(datepicker).toBeInTheDocument()
+      expect(input.value).toBe('') // Invalid dates become empty
+    })
+
+    test('shows placeholder text correctly', async () => {
+      const placeholderText = 'Select a date'
+      const container = await createDatepicker(`placeholder="${placeholderText}"`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+      expect(input.placeholder).toBe(placeholderText)
+    })
+
+    test('shows help text correctly', async () => {
+      const helpText = 'Choose your preferred date'
+      const container = await createDatepicker(`helptext="${helpText}"`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const helpTextElement = datepicker.querySelector('pkt-helptext')
+      expect(helpTextElement?.textContent).toContain(helpText)
+    })
+
+    test('handles readonly state correctly', async () => {
+      const container = await createDatepicker('readonly')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const input = datepicker.querySelector('input') as HTMLInputElement
+      expect(input.readOnly).toBe(true)
+
+      // Calendar should still be accessible
+      const calendarButton = datepicker.querySelector('button[type="button"]') as HTMLButtonElement
+      expect(calendarButton.disabled).toBe(false)
+    })
+  })
+
+  describe('Keyboard navigation and interaction', () => {
+    test('opens calendar with Enter key on calendar button', 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
+      if (calendarButton) {
+        calendarButton.focus()
+
+        fireEvent.keyDown(calendarButton, { key: 'Enter' })
+        await datepicker.updateComplete
+
+        expect(datepicker.calendarOpen).toBe(true)
+      }
+    })
+
+    test('opens calendar with Space key on calendar button', 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
+      if (calendarButton) {
+        calendarButton.focus()
+
+        fireEvent.keyDown(calendarButton, { key: ' ' })
+        await datepicker.updateComplete
+
+        expect(datepicker.calendarOpen).toBe(true)
+      }
+    })
+
+    test('closes calendar with Escape key', 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
+
+      // Press Escape
+      fireEvent.keyDown(datepicker, { key: 'Escape' })
+      await datepicker.updateComplete
+
+      expect(datepicker.calendarOpen).toBe(false)
+    })
+
+    test('navigates between tags with arrow keys in multiple mode', async () => {
+      const multipleDates = '2024-06-15,2024-06-20,2024-06-25'
+      const container = await createDatepicker(`value="${multipleDates}" multiple`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const tags = datepicker.querySelectorAll('pkt-tag')
+      const firstTag = tags[0] as HTMLElement
+
+      firstTag.focus()
+      fireEvent.keyDown(firstTag, { key: 'ArrowRight' })
+      await datepicker.updateComplete
+
+      // Focus should move to next tag
+      expect(document.activeElement).toBeTruthy()
+    })
+  })
+})

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

@@ -0,0 +1,286 @@
+import '@testing-library/jest-dom'
+import { fireEvent } from '@testing-library/dom'
+
+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('Multiple date selection', () => {
+    test('displays multiple selected dates as tags', async () => {
+      const multipleDates = '2024-06-15,2024-06-20,2024-06-25'
+      const container = await createDatepicker(`value="${multipleDates}" multiple`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const tags = datepicker.querySelectorAll('pkt-tag')
+      expect(tags.length).toBe(3)
+    })
+
+    test('allows adding dates through calendar in multiple mode', async () => {
+      const container = await createDatepicker('multiple')
+
+      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('[data-date]:not([data-disabled="disabled"])')
+      if (availableDate) {
+        fireEvent.click(availableDate)
+        await datepicker.updateComplete
+
+        // Should add tag
+        const tags = datepicker.querySelectorAll('pkt-tag')
+        expect(tags.length).toBe(1)
+      }
+    })
+
+    test('removes dates when clicking tag close button', async () => {
+      const multipleDates = '2024-06-15,2024-06-20'
+      const container = await createDatepicker(`value="${multipleDates}" multiple`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const closeButtons = datepicker.querySelectorAll('pkt-tag .pkt-tag__close-btn')
+      expect(closeButtons.length).toBe(2)
+
+      // Click first close button
+      fireEvent.click(closeButtons[0])
+      await datepicker.updateComplete
+
+      const remainingTags = datepicker.querySelectorAll('pkt-tag')
+      expect(remainingTags.length).toBe(1)
+    })
+
+    test('respects maxlength in multiple mode', async () => {
+      const container = await createDatepicker('multiple maxlength="2"')
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Open calendar and try to select more than maxlength dates
+      const calendarButton = datepicker.querySelector('button[type="button"]')
+      fireEvent.click(calendarButton!)
+      await datepicker.updateComplete
+
+      const availableDates = datepicker.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+
+      // Select 3 dates
+      fireEvent.click(availableDates[0])
+      await datepicker.updateComplete
+      fireEvent.click(availableDates[1])
+      await datepicker.updateComplete
+      fireEvent.click(availableDates[2])
+      await datepicker.updateComplete
+
+      // Should only have maxlength tags
+      const tags = datepicker.querySelectorAll('pkt-tag')
+      expect(tags.length).toBeLessThanOrEqual(2)
+    })
+
+    test('sorts multiple dates chronologically', async () => {
+      const unsortedDates = '2024-06-25,2024-06-15,2024-06-20'
+      const container = await createDatepicker(`value="${unsortedDates}" multiple`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      const tags = datepicker.querySelectorAll('pkt-tag')
+      const tagTexts = Array.from(tags).map((tag) => tag.textContent?.trim())
+
+      // Should be sorted chronologically
+      expect(tagTexts[0]).toContain('15')
+      expect(tagTexts[1]).toContain('20')
+      expect(tagTexts[2]).toContain('25')
+    })
+  })
+
+  describe('Range selection', () => {
+    test('displays range labels when showRangeLabels is true', async () => {
+      const rangeValue = '2024-06-15,2024-06-20'
+      const container = await createDatepicker(`value="${rangeValue}" range showRangeLabels`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      expect(datepicker.showRangeLabels).toBe(true)
+
+      const rangeLabels = datepicker.querySelectorAll('.pkt-input-prefix')
+      expect(rangeLabels.length).toBeGreaterThan(0)
+    })
+
+    test('populates both input fields when initialized with range value', 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
+
+      const inputs = datepicker.querySelectorAll('input')
+      expect(inputs.length).toBe(2)
+
+      // Check that both input fields are populated
+      expect(inputs[0].value).toBe('2024-06-15')
+      expect(inputs[1].value).toBe('2024-06-20')
+
+      // Check internal state
+      expect(datepicker._value).toEqual(['2024-06-15', '2024-06-20'])
+      expect(datepicker.value).toBe('2024-06-15,2024-06-20')
+    })
+
+    test('dispatches value-change event with array for range and multiple datepickers', async () => {
+      // Test range datepicker
+      const rangeContainer = await createDatepicker('range')
+      const rangeDatepicker = rangeContainer.querySelector('pkt-datepicker') as PktDatepicker
+      await rangeDatepicker.updateComplete
+
+      let valueChangeEvent: CustomEvent | null = null
+      rangeDatepicker.addEventListener('value-change', (e: Event) => {
+        valueChangeEvent = e as CustomEvent
+      })
+
+      // Set a range value programmatically
+      rangeDatepicker.value = '2024-06-15,2024-06-20'
+      await rangeDatepicker.updateComplete
+
+      expect(valueChangeEvent).toBeTruthy()
+      expect(valueChangeEvent!.detail).toEqual(['2024-06-15', '2024-06-20'])
+
+      // Test multiple datepicker
+      const multipleContainer = await createDatepicker('multiple')
+      const multipleDatepicker = multipleContainer.querySelector('pkt-datepicker') as PktDatepicker
+      await multipleDatepicker.updateComplete
+
+      valueChangeEvent = null
+      multipleDatepicker.addEventListener('value-change', (e: Event) => {
+        valueChangeEvent = e as CustomEvent
+      })
+
+      // Set multiple values programmatically
+      multipleDatepicker.value = '2024-06-15,2024-06-20,2024-06-25'
+      await multipleDatepicker.updateComplete
+
+      expect(valueChangeEvent).toBeTruthy()
+      expect(valueChangeEvent!.detail).toEqual(['2024-06-15', '2024-06-20', '2024-06-25'])
+
+      // Test single datepicker
+      const singleContainer = await createDatepicker('')
+      const singleDatepicker = singleContainer.querySelector('pkt-datepicker') as PktDatepicker
+      await singleDatepicker.updateComplete
+
+      valueChangeEvent = null
+      singleDatepicker.addEventListener('value-change', (e: Event) => {
+        valueChangeEvent = e as CustomEvent
+      })
+
+      // Set single value programmatically
+      singleDatepicker.value = '2024-06-15'
+      await singleDatepicker.updateComplete
+
+      expect(valueChangeEvent).toBeTruthy()
+      expect(valueChangeEvent!.detail).toBe('2024-06-15')
+    })
+
+    test('handles range selection through calendar', async () => {
+      const container = await createDatepicker('range')
+
+      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 availableDates = datepicker.querySelectorAll(
+        '[data-date]:not([data-disabled="disabled"])',
+      )
+
+      // Select start date
+      if (availableDates.length > 5) {
+        fireEvent.click(availableDates[5])
+        await datepicker.updateComplete
+
+        // Select end date
+        if (availableDates.length > 10) {
+          fireEvent.click(availableDates[10])
+          await datepicker.updateComplete
+
+          // Should have range value
+          expect(datepicker.value).toContain(',')
+          const values = (datepicker.value as string).split(',')
+          expect(values.length).toBe(2)
+        }
+      }
+    })
+
+    test('validates range order', async () => {
+      const invalidRange = '2024-06-20,2024-06-15' // End before start
+      const container = await createDatepicker(`value="${invalidRange}" range`)
+
+      const datepicker = container.querySelector('pkt-datepicker') as PktDatepicker
+      await datepicker.updateComplete
+
+      // Should handle invalid range gracefully
+      expect(datepicker).toBeInTheDocument()
+    })
+
+    test('shows range preview on hover', async () => {
+      const container = await createDatepicker('range')
+
+      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 availableDates = datepicker.querySelectorAll(
+        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
+      )
+
+      // Select start date
+      fireEvent.click(availableDates[5])
+      await datepicker.updateComplete
+
+      // Hover over potential end date
+      fireEvent.mouseOver(availableDates[10])
+      await datepicker.updateComplete
+
+      // Should show hover preview
+      const hoverRanges = datepicker.querySelectorAll('.pkt-calendar__date--in-range-hover')
+      expect(hoverRanges.length).toBeGreaterThan(0)
+    })
+  })
+})