@oslokommune/punkt-react 13.6.15 → 13.6.16

package/CHANGELOG.md

@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
 
 ---
 
+## [13.6.16](https://github.com/oslokommune/punkt/compare/13.6.15...13.6.16) (2025-10-14)
+
+### ⚠ BREAKING CHANGES
+Ingen
+
+### Features
+Ingen
+
+### Bug Fixes
+* Legg til enkel testdekning av datepicker i React (#3076). I påvente av omskriving av datepicker til ren React-komponent er det greit å ha grunnleggende testdekning. Mer testing bør komme etter omskriving.
+
+
+### Chores
+Ingen
+
+---
+
+
 ## [13.6.15](https://github.com/oslokommune/punkt/compare/13.6.14...13.6.15) (2025-10-09)
 
 ### ⚠ BREAKING CHANGES

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.6.15",
+  "version": "13.6.16",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -110,5 +110,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "4798e1ff1529f3e32cd4c4173fab3ec3586319da"
+  "gitHead": "82d543a41c3ad5f580586874c4e0547c7fa8f10d"
 }

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

@@ -0,0 +1,393 @@
+import '@testing-library/jest-dom'
+import { fireEvent, render, waitFor } from '@testing-library/react'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { PktDatepicker, IPktDatepicker } from './Datepicker'
+
+const datePickerId = 'datepickerId'
+const label = 'Date Picker Label'
+
+const waitForDatepicker = async () => {
+  await window.customElements.whenDefined('pkt-datepicker')
+}
+
+const waitForCustomElementUpdate = async () => {
+  return new Promise((resolve) => {
+    requestAnimationFrame(resolve)
+  })
+}
+
+const createDatepickerTest = (props: Partial<IPktDatepicker> = {}) => {
+  const defaultProps: IPktDatepicker = {
+    label,
+    id: datePickerId,
+    ...props,
+  }
+
+  return render(<PktDatepicker {...defaultProps} />)
+}
+
+describe('PktDatepicker - React Form Element', () => {
+  beforeEach(async () => {
+    await waitForDatepicker()
+  })
+
+  expect.extend(toHaveNoViolations)
+
+  describe('Single date selection', () => {
+    test('sets and confirms a single date value', async () => {
+      const handleChange = jest.fn()
+      const handleValueChange = jest.fn()
+      const { container } = createDatepickerTest({
+        onChange: handleChange,
+        onValueChange: handleValueChange,
+      })
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input).toBeInTheDocument()
+
+        fireEvent.change(input, { target: { value: '2024-06-15' } })
+        fireEvent.blur(input)
+      })
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input.value).toBe('2024-06-15')
+
+        expect(handleChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            target: expect.objectContaining({
+              value: '2024-06-15',
+            }),
+          }),
+        )
+
+        expect(handleValueChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            detail: '2024-06-15',
+          }),
+        )
+      })
+    })
+
+    test('sets date via calendar interaction', async () => {
+      const handleValueChange = jest.fn()
+      const { container } = createDatepickerTest({
+        onValueChange: handleValueChange,
+      })
+
+      await waitFor(() => {
+        const calendarButton = container.querySelector('button[type="button"]')
+        expect(calendarButton).toBeInTheDocument()
+        fireEvent.click(calendarButton!)
+      })
+
+      await waitFor(() => {
+        const calendar = container.querySelector('pkt-calendar')
+        expect(calendar).toBeInTheDocument()
+      })
+
+      await waitFor(() => {
+        const dateButtons = container.querySelectorAll('pkt-calendar button[data-date]')
+        const firstDateButton = Array.from(dateButtons).find(
+          (btn) => btn.textContent && btn.textContent.trim() && !btn.hasAttribute('disabled'),
+        ) as HTMLButtonElement
+
+        if (firstDateButton) {
+          fireEvent.click(firstDateButton)
+        }
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input.value).not.toBe('')
+        expect(handleValueChange).toHaveBeenCalled()
+      })
+    })
+
+    test('sets date via keyboard input', async () => {
+      const handleValueChange = jest.fn()
+      const { container } = createDatepickerTest({
+        onValueChange: handleValueChange,
+      })
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input).toBeInTheDocument()
+
+        fireEvent.change(input, { target: { value: '2025-10-15' } })
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input.value).toBe('2025-10-15')
+      })
+    })
+
+    test('has no accessibility violations with single date set', async () => {
+      const { container } = createDatepickerTest({
+        value: '2024-06-15',
+        label: 'Select Date',
+        helptext: 'Choose a date from the calendar',
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input.value).toBe('2024-06-15')
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('Multiple date selection', () => {
+    test('sets and confirms multiple date values', async () => {
+      const handleValueChange = jest.fn()
+      const { container } = createDatepickerTest({
+        multiple: true,
+        value: ['2024-06-15', '2024-06-20'],
+        onValueChange: handleValueChange,
+      })
+
+      await waitFor(() => {
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toHaveAttribute('multiple')
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const tags = container.querySelectorAll('pkt-tag')
+        expect(tags.length).toBe(2)
+      })
+    })
+
+    test('dispatches onChange and onValueChange for multiple dates', async () => {
+      const handleChange = jest.fn()
+      const handleValueChange = jest.fn()
+      const dates = ['2024-06-15', '2024-06-20']
+
+      const { container } = createDatepickerTest({
+        multiple: true,
+        value: dates,
+        onChange: handleChange,
+        onValueChange: handleValueChange,
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        fireEvent.change(input, { target: { value: '2024-06-25' } })
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        expect(handleChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            target: expect.objectContaining({
+              tagName: 'PKT-DATEPICKER',
+              value: '2024-06-15,2024-06-20',
+            }),
+          }),
+        )
+
+        expect(handleValueChange).toHaveBeenCalledWith(
+          expect.objectContaining({
+            detail: ['2024-06-15', '2024-06-20'],
+          }),
+        )
+      })
+    })
+
+    test('has no accessibility violations with multiple dates set', async () => {
+      const { container } = createDatepickerTest({
+        multiple: true,
+        value: ['2024-06-15', '2024-06-20', '2024-06-25'],
+        label: 'Select Multiple Dates',
+        helptext: 'Choose multiple dates from the calendar',
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const tags = container.querySelectorAll('pkt-tag')
+        expect(tags.length).toBe(3)
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('Range date selection', () => {
+    test('sets and confirms range date values', async () => {
+      const handleValueChange = jest.fn()
+      const { container } = createDatepickerTest({
+        range: true,
+        value: ['2024-06-15', '2024-06-25'],
+        onValueChange: handleValueChange,
+      })
+
+      await waitFor(() => {
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toHaveAttribute('range')
+        const rangeInputs = container.querySelectorAll('input[type="date"]')
+        expect(rangeInputs.length).toBe(2)
+      })
+    })
+
+    test('has no accessibility violations with range dates set', async () => {
+      const { container } = createDatepickerTest({
+        range: true,
+        value: ['2024-06-15', '2024-06-25'],
+        label: 'Select Date Range',
+        helptext: 'Choose start and end dates for your range',
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toHaveAttribute('range')
+        expect(datepicker).toHaveAttribute('value', '2024-06-15,2024-06-25')
+      })
+
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('Form integration', () => {
+    test('works as a form element with name attribute', async () => {
+      const { container } = createDatepickerTest({
+        name: 'dateField',
+        value: '2024-06-15',
+      })
+
+      await waitFor(() => {
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toHaveAttribute('name', 'dateField')
+        expect(datepicker).toHaveAttribute('value', '2024-06-15')
+      })
+    })
+
+    test('handles required validation', async () => {
+      const { container } = createDatepickerTest({
+        required: true,
+        name: 'requiredDate',
+      })
+
+      await waitFor(() => {
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toHaveAttribute('required')
+        expect(datepicker).toHaveAttribute('name', 'requiredDate')
+      })
+    })
+
+    test('handles disabled state', async () => {
+      const { container } = createDatepickerTest({
+        disabled: true,
+      })
+
+      await waitFor(() => {
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toHaveAttribute('disabled')
+      })
+    })
+
+    test('sets min and max date boundaries', async () => {
+      const { container } = createDatepickerTest({
+        min: '2024-01-01',
+        max: '2024-12-31',
+        value: '2024-06-15',
+      })
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input).toBeInTheDocument()
+        expect(input).toHaveAttribute('min', '2024-01-01')
+        expect(input).toHaveAttribute('max', '2024-12-31')
+      })
+    })
+  })
+
+  describe('Event handling', () => {
+    test('handles input value changes for form behavior', async () => {
+      const { container } = createDatepickerTest({})
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+
+        fireEvent.change(input, { target: { value: '2024-07-20' } })
+      })
+
+      await waitForCustomElementUpdate()
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+        expect(input.value).toBe('2024-07-20')
+
+        const datepicker = container.querySelector('pkt-datepicker')
+        expect(datepicker).toBeInTheDocument()
+      })
+    })
+
+    test('triggers focus and blur events', async () => {
+      const handleFocus = jest.fn()
+      const handleBlur = jest.fn()
+      const { container } = createDatepickerTest({
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+      })
+
+      await waitFor(() => {
+        const input = container.querySelector('input[type="date"]') as HTMLInputElement
+
+        fireEvent.focus(input)
+        fireEvent.blur(input)
+      })
+
+      await waitFor(() => {
+        expect(handleFocus).toHaveBeenCalled()
+        expect(handleBlur).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('Accessibility and form behavior', () => {
+    test('has proper label association for screen readers', async () => {
+      const { container } = createDatepickerTest({
+        label: 'Select your birthday',
+      })
+
+      await waitFor(() => {
+        const label = container.querySelector('label')
+        const input = container.querySelector('input[type="date"]')
+
+        expect(label).toHaveTextContent('Select your birthday')
+        expect(label).toHaveAttribute('for', expect.stringContaining('input'))
+        expect(input).toHaveAttribute('id', expect.stringContaining('input'))
+      })
+    })
+
+    test('supports help text for user guidance', async () => {
+      const { container } = createDatepickerTest({
+        helptext: 'Please select a date in the format DD.MM.YYYY',
+      })
+
+      await waitFor(() => {
+        const helpText = container.querySelector('[id*="helptext"]')
+        expect(helpText).toBeInTheDocument()
+      })
+    })
+  })
+})