@oslokommune/punkt-elements/src/components/calendar/calendar.constraints.test.ts

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import '@testing-library/jest-dom'
import { parseISODateString } from 'shared-utils/date-utils'

import './calendar'
import { PktCalendar } from './calendar'

const waitForCustomElements = async () => {
  await customElements.whenDefined('pkt-calendar')
}

// Helper function to create calendar markup
const createCalendar = async (calendarProps = '') => {
  const container = document.createElement('div')
  container.innerHTML = `
    <pkt-calendar ${calendarProps}></pkt-calendar>
  `
  document.body.appendChild(container)
  await waitForCustomElements()
  return container
}

// Cleanup after each test
afterEach(() => {
  document.body.innerHTML = ''
})

describe('PktCalendar', () => {
  describe('Date range functionality', () => {
    test('handles earliest date property correctly', async () => {
      const earliestDate = '2024-01-15'
      // Set current month to January 2024 so we can see disabled dates before the 15th
      const container = await createCalendar(`earliest="${earliestDate}" currentmonth="2024-01-01"`)

      const calendar = container.querySelector('pkt-calendar') as PktCalendar
      await calendar.updateComplete

      expect(calendar.earliest).toBe(earliestDate)

      // Check that dates before earliest are disabled (dates 1-14 should be disabled)
      const disabledDates = calendar.querySelectorAll('.pkt-calendar__date--disabled')
      expect(disabledDates.length).toBeGreaterThan(0)
    })

    test('handles latest date property correctly', async () => {
      const latestDate = '2024-12-15'
      const container = await createCalendar(`latest="${latestDate}"`)

      const calendar = container.querySelector('pkt-calendar') as PktCalendar
      await calendar.updateComplete

      expect(calendar.latest).toBe(latestDate)
    })

    test('restricts selectable dates between earliest and latest', async () => {
      // Set current month to June 2024 so we can see the date range restrictions
      const container = await createCalendar(
        'earliest="2024-06-10" latest="2024-06-20" currentmonth="2024-06-01"',
      )

      const calendar = container.querySelector('pkt-calendar') as PktCalendar
      await calendar.updateComplete

      const enabledDates = calendar.querySelectorAll(
        '.pkt-calendar__date:not(.pkt-calendar__date--disabled)',
      )
      const disabledDates = calendar.querySelectorAll('.pkt-calendar__date--disabled')

      expect(enabledDates.length).toBeGreaterThan(0)
      expect(disabledDates.length).toBeGreaterThan(0)
    })
  })

  describe('Date exclusion functionality', () => {
    test('excludes specific dates correctly', async () => {
      const excludedDates = '2024-06-15,2024-06-20'
      const container = await createCalendar(`excludedates="${excludedDates}"`)

      const calendar = container.querySelector('pkt-calendar') as PktCalendar
      await calendar.updateComplete

      expect(calendar.excludedates).toHaveLength(2)
      expect(calendar.excludedates[0]).toEqual(parseISODateString('2024-06-15'))
      expect(calendar.excludedates[1]).toEqual(parseISODateString('2024-06-20'))
    })

    test('excludes weekdays correctly', async () => {
      // Exclude weekends (Saturday=6, Sunday=0)
      const container = await createCalendar('excludeweekdays="0,6"')

      const calendar = container.querySelector('pkt-calendar') as PktCalendar
      await calendar.updateComplete

      expect(calendar.excludeweekdays).toEqual(['0', '6'])

      // Check that weekend dates are disabled
      const disabledDates = calendar.querySelectorAll('.pkt-calendar__date--disabled')
      expect(disabledDates.length).toBeGreaterThan(0)
    })

    test('excludes both specific dates and weekdays', async () => {
      const container = await createCalendar('excludedates="2024-06-15" excludeweekdays="0,6"')

      const calendar = container.querySelector('pkt-calendar') as PktCalendar
      await calendar.updateComplete

      expect(calendar.excludedates).toHaveLength(1)
      expect(calendar.excludeweekdays).toEqual(['0', '6'])
    })
  })
})