@oslokommune/punkt-react 14.5.3 → 15.0.0

package/src/components/datepicker/Datepicker.accessibility.test.tsx

@@ -0,0 +1,404 @@
+import '@testing-library/jest-dom'
+
+import { fireEvent, render, screen } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+
+import { IPktDatepicker, PktDatepicker } from './Datepicker'
+
+expect.extend(toHaveNoViolations)
+
+const datePickerId = 'datepickerId'
+const label = 'Date Picker Label'
+
+const createDatepickerTest = (props: Partial<IPktDatepicker> = {}) => {
+  const defaultProps: IPktDatepicker = {
+    label,
+    id: datePickerId,
+    ...props,
+  }
+
+  return render(<PktDatepicker {...defaultProps} />)
+}
+
+describe('PktDatepicker', () => {
+  describe('Event handling', () => {
+    test('dispatches onChange event when value changes', () => {
+      const handleChange = jest.fn()
+      const { container } = createDatepickerTest({
+        onChange: handleChange,
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      fireEvent.change(input, { target: { value: '2024-06-15' } })
+
+      expect(handleChange).toHaveBeenCalled()
+    })
+
+    test('dispatches onValueChange event when value changes', () => {
+      const handleValueChange = jest.fn()
+      const { container } = createDatepickerTest({
+        onValueChange: handleValueChange,
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      fireEvent.change(input, { target: { value: '2024-06-15' } })
+
+      expect(handleValueChange).toHaveBeenCalledWith(['2024-06-15'])
+    })
+
+    test('input can receive focus', () => {
+      const { container } = createDatepickerTest()
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      input.focus()
+
+      expect(document.activeElement).toBe(input)
+    })
+
+    test('input can be blurred', () => {
+      const { container } = createDatepickerTest()
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      input.focus()
+      expect(document.activeElement).toBe(input)
+
+      input.blur()
+      expect(document.activeElement).not.toBe(input)
+    })
+
+    test('dispatches both onChange and onValueChange', () => {
+      const handleChange = jest.fn()
+      const handleValueChange = jest.fn()
+      const { container } = createDatepickerTest({
+        onChange: handleChange,
+        onValueChange: handleValueChange,
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      fireEvent.change(input, { target: { value: '2024-06-15' } })
+
+      expect(handleChange).toHaveBeenCalled()
+      expect(handleValueChange).toHaveBeenCalledWith(['2024-06-15'])
+    })
+  })
+
+  describe('Accessibility', () => {
+    test('has no accessibility violations with single date set', async () => {
+      const { container } = createDatepickerTest({
+        value: '2024-06-15',
+        helptext: 'Choose a date from the calendar',
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('has no accessibility violations with range dates set', async () => {
+      const { container } = createDatepickerTest({
+        range: true,
+        value: ['2024-06-15', '2024-06-25'],
+        helptext: 'Choose start and end dates',
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('has no accessibility violations with multiple dates', async () => {
+      const { container } = createDatepickerTest({
+        multiple: true,
+        value: ['2024-06-15', '2024-06-20', '2024-06-25'],
+        helptext: 'Choose multiple dates',
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('has no accessibility violations when disabled', async () => {
+      const { container } = createDatepickerTest({
+        disabled: true,
+        helptext: 'This field is disabled',
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('has no accessibility violations with error state', async () => {
+      const { container } = createDatepickerTest({
+        hasError: true,
+        errorMessage: 'Please enter a valid date',
+        helptext: 'Required field',
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    test('associates label with input correctly', () => {
+      const { container } = createDatepickerTest()
+
+      const labelEl = container.querySelector('label')
+      expect(labelEl).toBeInTheDocument()
+      expect(labelEl).toHaveAttribute('for', `${datePickerId}-input`)
+
+      const input = container.querySelector(`#${datePickerId}-input`)
+      expect(input).toBeInTheDocument()
+    })
+
+    test('has proper ARIA attributes for calendar button', () => {
+      const { container } = createDatepickerTest()
+
+      const button = container.querySelector('button[type="button"]')
+      expect(button).toBeInTheDocument()
+      expect(button).toHaveAttribute('aria-label', 'Åpne kalender')
+    })
+
+    test('input has aria-describedby when helptext is present', () => {
+      const { container } = createDatepickerTest({
+        helptext: 'Some help text',
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input).toHaveAttribute('aria-describedby', `${datePickerId}-helptext`)
+    })
+
+    test('input does not have aria-describedby when no helptext', () => {
+      const { container } = createDatepickerTest()
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input).not.toHaveAttribute('aria-describedby')
+    })
+
+    test('input has aria-invalid when hasError is true', () => {
+      const { container } = createDatepickerTest({
+        hasError: true,
+        errorMessage: 'Invalid date',
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input).toHaveAttribute('aria-invalid', 'true')
+    })
+
+    test('input has aria-errormessage when hasError is true', () => {
+      const { container } = createDatepickerTest({
+        hasError: true,
+        errorMessage: 'Invalid date',
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input).toHaveAttribute('aria-errormessage', `${datePickerId}-error`)
+    })
+
+    test('input does not have aria-invalid when no error', () => {
+      const { container } = createDatepickerTest()
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input).not.toHaveAttribute('aria-invalid', 'true')
+    })
+
+    test('calendar popup has aria-hidden when closed', () => {
+      const { container } = createDatepickerTest()
+
+      const popup = container.querySelector('.pkt-calendar-popup')
+      expect(popup).toHaveAttribute('aria-hidden', 'true')
+    })
+
+    test('calendar popup has aria-hidden false when open', () => {
+      const { container } = createDatepickerTest()
+
+      const button = container.querySelector('button[type="button"]') as HTMLButtonElement
+      fireEvent.click(button)
+
+      const popup = container.querySelector('.pkt-calendar-popup')
+      expect(popup).toHaveAttribute('aria-hidden', 'false')
+    })
+
+    test('date tags container has aria-live polite', () => {
+      const { container } = createDatepickerTest({
+        multiple: true,
+        value: ['2024-06-15'],
+      })
+
+      const tagsContainer = container.querySelector('.pkt-date-tags')
+      expect(tagsContainer).toHaveAttribute('aria-live', 'polite')
+    })
+
+    test('handles focus management - button can be focused', () => {
+      const { container } = createDatepickerTest()
+
+      const button = container.querySelector('button[type="button"]') as HTMLButtonElement
+      button.focus()
+
+      expect(document.activeElement).toBe(button)
+    })
+
+    test('supports keyboard-only interaction to open and close calendar', () => {
+      const { container } = createDatepickerTest()
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+
+      // Open with Space
+      fireEvent.keyDown(input, { key: ' ' })
+      let popup = container.querySelector('.pkt-calendar-popup')
+      expect(popup).not.toHaveAttribute('hidden')
+
+      // Close with Escape
+      fireEvent.keyDown(document, { key: 'Escape' })
+      popup = container.querySelector('.pkt-calendar-popup')
+      expect(popup).toHaveAttribute('hidden')
+    })
+  })
+
+  describe('Localization', () => {
+    test('uses custom strings for calendar button', () => {
+      const { container } = createDatepickerTest({
+        strings: {
+          calendar: { buttonAltText: 'Open calendar' },
+        },
+      })
+
+      const button = container.querySelector('button[type="button"]')
+      expect(button).toHaveAttribute('aria-label', 'Open calendar')
+    })
+
+    test('uses custom strings for range labels', () => {
+      const { container } = createDatepickerTest({
+        range: true,
+        showRangeLabels: true,
+        strings: {
+          generic: { from: 'From', to: 'To' },
+          calendar: { buttonAltText: 'Open calendar' },
+        },
+      })
+
+      const prefix = container.querySelector('.pkt-input-prefix')
+      expect(prefix).toHaveTextContent('From')
+    })
+
+    test('uses default Norwegian strings', () => {
+      const { container } = createDatepickerTest({
+        range: true,
+        showRangeLabels: true,
+      })
+
+      const button = container.querySelector('button[type="button"]')
+      expect(button).toHaveAttribute('aria-label', 'Åpne kalender')
+
+      const prefix = container.querySelector('.pkt-input-prefix')
+      expect(prefix).toHaveTextContent('Fra')
+    })
+  })
+
+  describe('InputWrapper integration', () => {
+    test('renders helptext', () => {
+      createDatepickerTest({
+        helptext: 'Please select a date',
+      })
+
+      expect(screen.getByText('Please select a date')).toBeInTheDocument()
+    })
+
+    test('renders error message when hasError is true', () => {
+      createDatepickerTest({
+        hasError: true,
+        errorMessage: 'Date is required',
+      })
+
+      expect(screen.getByText('Date is required')).toBeInTheDocument()
+    })
+
+    test('renders optional tag', () => {
+      const { container } = createDatepickerTest({
+        optionalTag: true,
+        optionalText: 'Valgfritt',
+      })
+
+      expect(container.textContent).toContain('Valgfritt')
+    })
+
+    test('renders required tag', () => {
+      const { container } = createDatepickerTest({
+        requiredTag: true,
+        requiredText: 'Må fylles ut',
+      })
+
+      expect(container.textContent).toContain('Må fylles ut')
+    })
+
+    test('applies fullwidth class to input', () => {
+      const { container } = createDatepickerTest({
+        fullwidth: true,
+      })
+
+      const input = container.querySelector('.pkt-datepicker__input') as HTMLInputElement
+      expect(input).toHaveClass('pkt-input--fullwidth')
+    })
+  })
+
+  describe('CSS classes', () => {
+    test('applies pkt-datepicker class to outer wrapper', () => {
+      const { container } = createDatepickerTest()
+
+      const wrapper = container.querySelector('.pkt-datepicker')
+      expect(wrapper).toBeInTheDocument()
+    })
+
+    test('applies pkt-datepicker__inputs class', () => {
+      const { container } = createDatepickerTest()
+
+      const inputs = container.querySelector('.pkt-datepicker__inputs')
+      expect(inputs).toBeInTheDocument()
+    })
+
+    test('applies datepicker input classes', () => {
+      const { container } = createDatepickerTest()
+
+      const input = container.querySelector('.pkt-datepicker__input')
+      expect(input).toBeInTheDocument()
+      expect(input).toHaveClass('pkt-input')
+    })
+
+    test('applies range class for range mode', () => {
+      const { container } = createDatepickerTest({
+        range: true,
+      })
+
+      const inputs = container.querySelectorAll('.pkt-datepicker--range')
+      expect(inputs.length).toBe(2)
+    })
+
+    test('applies multiple class for multiple mode', () => {
+      const { container } = createDatepickerTest({
+        multiple: true,
+      })
+
+      const input = container.querySelector('.pkt-datepicker--multiple')
+      expect(input).toBeInTheDocument()
+    })
+
+    test('applies calendar button classes', () => {
+      const { container } = createDatepickerTest()
+
+      const button = container.querySelector('button[type="button"]')
+      expect(button).toHaveClass('pkt-input-icon')
+      expect(button).toHaveClass('pkt-btn')
+      expect(button).toHaveClass('pkt-btn--icon-only')
+      expect(button).toHaveClass('pkt-btn--tertiary')
+      expect(button).toHaveClass('pkt-datepicker__calendar-button')
+    })
+
+    test('popup has show/hide classes based on open state', () => {
+      const { container } = createDatepickerTest()
+
+      const popup = container.querySelector('.pkt-calendar-popup')
+      expect(popup).toHaveClass('hide')
+
+      const button = container.querySelector('button[type="button"]') as HTMLButtonElement
+      fireEvent.click(button)
+
+      expect(popup).toHaveClass('show')
+    })
+  })
+})

package/src/components/datepicker/Datepicker.core.test.tsx

@@ -0,0 +1,270 @@
+import '@testing-library/jest-dom'
+
+import { render, screen } from '@testing-library/react'
+
+import { IPktDatepicker, PktDatepicker } from './Datepicker'
+
+const datePickerId = 'datepickerId'
+const label = 'Date Picker Label'
+
+const createDatepickerTest = (props: Partial<IPktDatepicker> = {}) => {
+  const defaultProps: IPktDatepicker = {
+    label,
+    id: datePickerId,
+    ...props,
+  }
+
+  return render(<PktDatepicker {...defaultProps} />)
+}
+
+describe('PktDatepicker', () => {
+  describe('Rendering and basic functionality', () => {
+    test('renders without errors', () => {
+      const { container } = createDatepickerTest()
+
+      expect(container.querySelector('.pkt-datepicker')).toBeInTheDocument()
+    })
+
+    test('renders with correct structure', () => {
+      const { container } = createDatepickerTest()
+
+      const inputWrapper = container.querySelector('.pkt-inputwrapper')
+      expect(inputWrapper).toBeInTheDocument()
+
+      const input = container.querySelector('input[type="date"]')
+      expect(input).toBeInTheDocument()
+
+      const button = container.querySelector('button[type="button"]')
+      expect(button).toBeInTheDocument()
+
+      const popup = container.querySelector('.pkt-calendar-popup')
+      expect(popup).toBeInTheDocument()
+      expect(popup).toHaveAttribute('hidden')
+    })
+
+    test('renders pkt-datepicker class on outer wrapper', () => {
+      const { container } = createDatepickerTest()
+
+      const outer = container.querySelector('.pkt-datepicker')
+      expect(outer).toBeInTheDocument()
+    })
+
+    test('renders datepicker inputs container', () => {
+      const { container } = createDatepickerTest()
+
+      const inputs = container.querySelector('.pkt-datepicker__inputs')
+      expect(inputs).toBeInTheDocument()
+    })
+
+    test('renders calendar button with icon', () => {
+      const { container } = createDatepickerTest()
+
+      const button = container.querySelector('button[type="button"]')
+      expect(button).toBeInTheDocument()
+      expect(button).toHaveAttribute('aria-label', 'Åpne kalender')
+    })
+  })
+
+  describe('Properties and attributes', () => {
+    test('applies default properties correctly', () => {
+      const { container } = createDatepickerTest()
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input).toBeInTheDocument()
+      expect(input.value).toBe('')
+      expect(input).not.toBeDisabled()
+      expect(input).not.toBeRequired()
+    })
+
+    test('handles value property correctly', () => {
+      const { container } = createDatepickerTest({
+        value: '2024-06-15',
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input.value).toBe('2024-06-15')
+    })
+
+    test('handles multiple values correctly', () => {
+      const { container } = createDatepickerTest({
+        multiple: true,
+        value: ['2024-06-15', '2024-06-20', '2024-06-25'],
+      })
+
+      const tags = container.querySelectorAll('.pkt-date-tags .pkt-tag')
+      expect(tags.length).toBe(3)
+    })
+
+    test('handles range values correctly', () => {
+      const { container } = createDatepickerTest({
+        range: true,
+        value: ['2024-06-15', '2024-06-25'],
+      })
+
+      const inputs = container.querySelectorAll('input[type="date"]') as NodeListOf<HTMLInputElement>
+      expect(inputs.length).toBe(2)
+      expect(inputs[0].value).toBe('2024-06-15')
+      expect(inputs[1].value).toBe('2024-06-25')
+    })
+
+    test('handles label property correctly', () => {
+      createDatepickerTest({ label: 'Custom Label' })
+
+      expect(screen.getByText('Custom Label')).toBeInTheDocument()
+    })
+
+    test('handles maxlength property correctly', () => {
+      const { container } = createDatepickerTest({
+        multiple: true,
+        maxlength: 5,
+        value: ['2024-06-15', '2024-06-20'],
+      })
+
+      const counter = container.querySelector('.pkt-input__counter')
+      expect(counter).toBeInTheDocument()
+    })
+
+    test('handles disabled property correctly', () => {
+      const { container } = createDatepickerTest({
+        disabled: true,
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input).toBeDisabled()
+
+      const button = container.querySelector('button[type="button"]')
+      expect(button).toBeDisabled()
+    })
+
+    test('handles required attribute', () => {
+      const { container } = createDatepickerTest({
+        required: true,
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input).toBeRequired()
+    })
+
+    test('sets min and max date boundaries on input', () => {
+      const { container } = createDatepickerTest({
+        min: '2024-01-01',
+        max: '2024-12-31',
+        value: '2024-06-15',
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input).toHaveAttribute('min', '2024-01-01')
+      expect(input).toHaveAttribute('max', '2024-12-31')
+    })
+
+    test('sets min and max on both range inputs', () => {
+      const { container } = createDatepickerTest({
+        range: true,
+        min: '2024-01-01',
+        max: '2024-12-31',
+      })
+
+      const inputs = container.querySelectorAll('input[type="date"]') as NodeListOf<HTMLInputElement>
+      expect(inputs[0]).toHaveAttribute('min', '2024-01-01')
+      expect(inputs[0]).toHaveAttribute('max', '2024-12-31')
+      expect(inputs[1]).toHaveAttribute('min', '2024-01-01')
+      expect(inputs[1]).toHaveAttribute('max', '2024-12-31')
+    })
+
+    test('renders placeholder text correctly', () => {
+      const { container } = createDatepickerTest({
+        placeholder: 'dd.mm.yyyy',
+      })
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input).toHaveAttribute('placeholder', 'dd.mm.yyyy')
+    })
+
+    test('renders with custom className', () => {
+      const { container } = createDatepickerTest({
+        className: 'my-custom-class',
+      })
+
+      const wrapper = container.querySelector('.pkt-datepicker')
+      expect(wrapper).toHaveClass('my-custom-class')
+    })
+
+    test('uses id for input name when no name specified', () => {
+      const { container } = createDatepickerTest()
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input).toHaveAttribute('name', datePickerId)
+    })
+
+    test('uses custom name when specified', () => {
+      const { container } = createDatepickerTest({
+        name: 'dateField',
+        value: '2024-06-15',
+      })
+
+      const hiddenInput = container.querySelector('input[type="hidden"]') as HTMLInputElement
+      expect(hiddenInput).toHaveAttribute('name', 'dateField')
+      expect(hiddenInput.value).toBe('2024-06-15')
+    })
+  })
+
+  describe('Calendar integration', () => {
+    test('renders calendar popup hidden by default', () => {
+      const { container } = createDatepickerTest()
+
+      const popup = container.querySelector('.pkt-calendar-popup')
+      expect(popup).toHaveAttribute('hidden')
+      expect(popup).toHaveClass('hide')
+    })
+
+    test('renders calendar inside popup', () => {
+      const { container } = createDatepickerTest({ calendarOpen: true })
+
+      const calendar = container.querySelector('.pkt-calendar')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    test('passes min/max to calendar component', () => {
+      const { container } = createDatepickerTest({
+        calendarOpen: true,
+        min: '2024-01-01',
+        max: '2024-12-31',
+      })
+
+      const calendar = container.querySelector('.pkt-calendar') as HTMLElement
+      expect(calendar).toBeInTheDocument()
+
+      const input = container.querySelector('input[type="date"]') as HTMLInputElement
+      expect(input).toHaveAttribute('min', '2024-01-01')
+      expect(input).toHaveAttribute('max', '2024-12-31')
+    })
+
+    test('passes weeknumbers to calendar', () => {
+      const { container } = createDatepickerTest({
+        calendarOpen: true,
+        weeknumbers: true,
+      })
+
+      const calendar = container.querySelector('.pkt-calendar') as HTMLElement
+      expect(calendar).toBeInTheDocument()
+    })
+
+    test('passes multiple and range to calendar', () => {
+      const { container: multipleContainer } = createDatepickerTest({
+        calendarOpen: true,
+        multiple: true,
+      })
+
+      const multiCal = multipleContainer.querySelector('.pkt-calendar') as HTMLElement
+      expect(multiCal).toBeInTheDocument()
+
+      const { container: rangeContainer } = createDatepickerTest({
+        calendarOpen: true,
+        range: true,
+      })
+
+      const rangeCal = rangeContainer.querySelector('.pkt-calendar') as HTMLElement
+      expect(rangeCal).toBeInTheDocument()
+    })
+  })
+})