malio-layer-ui/app/components/malio/date/DateTime.test.ts

import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
import {mount} from '@vue/test-utils'
import type {DefineComponent} from 'vue'
import DateTime_ from './DateTime.vue'
import MalioTimePicker from '../time/TimePicker.vue'

type DateTimeProps = {
  id?: string
  name?: string
  label?: string
  modelValue?: string | null
  placeholder?: string
  required?: boolean
  disabled?: boolean
  readonly?: boolean
  hint?: string
  error?: string
  success?: string
  min?: string
  max?: string
  clearable?: boolean
  inputClass?: string
  labelClass?: string
  groupClass?: string
}

const DateTimeForTest = DateTime_ as DefineComponent<DateTimeProps>
const mountDateTime = (props: DateTimeProps = {}) =>
  mount(DateTimeForTest, {props, attachTo: document.body})

describe('MalioDateTime', () => {
  beforeEach(() => {
    vi.useFakeTimers()
    vi.setSystemTime(new Date(2026, 4, 19, 9, 5, 0)) // 19 mai 2026, 09:05
  })
  afterEach(() => vi.useRealTimers())

  describe('rendu', () => {
    it('affiche le label et l\'icône calendrier', () => {
      const wrapper = mountDateTime({label: 'Rendez-vous'})
      expect(wrapper.get('label').text()).toBe('Rendez-vous')
      expect(wrapper.find('[data-test="calendar-icon"]').exists()).toBe(true)
    })

    it('affiche la valeur formatée date + heure dans le champ', () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      const input = wrapper.get('[data-test="date-input"]').element as HTMLInputElement
      expect(input.value).toBe('20/05/2026 14:30')
    })
  })

  describe('popover', () => {
    it('ouvre la grille et le champ sélecteur d\'heure au clic', async () => {
      const wrapper = mountDateTime()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      expect(wrapper.find('[data-test="month-grid"]').exists()).toBe(true)
      expect(wrapper.findComponent(MalioTimePicker).exists()).toBe(true)
      expect(wrapper.find('[data-test="time-field"]').exists()).toBe(true)
    })
  })

  describe('sélection', () => {
    it('émet le jour à l\'heure actuelle (si aucune heure choisie) et garde le popover ouvert', async () => {
      const wrapper = mountDateTime()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
      // heure système figée à 09:05
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:05:00'])
      expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
    })

    it('applique l\'heure réglée avant le clic du jour', async () => {
      const wrapper = mountDateTime()
      await wrapper.get('[data-test="date-input"]').trigger('click')
      wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '09:15')
      await wrapper.vm.$nextTick()
      expect(wrapper.emitted('update:modelValue')).toBeUndefined()
      await wrapper.get('[data-test="day"][data-iso="2026-05-19"]').trigger('click')
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-19T09:15:00'])
    })

    it('met à jour l\'heure quand une date est déjà choisie', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      wrapper.findComponent(MalioTimePicker).vm.$emit('update:modelValue', '08:45')
      await wrapper.vm.$nextTick()
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['2026-05-20T08:45:00'])
    })

    it('initialise le champ heure depuis la valeur', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      expect(wrapper.findComponent(MalioTimePicker).props('modelValue')).toBe('14:30')
    })
  })

  describe('bornes min/max', () => {
    it('désactive les jours hors bornes (datetime borné sur la date)', async () => {
      const wrapper = mountDateTime({min: '2026-05-10T00:00:00', max: '2026-05-20T00:00:00'})
      await wrapper.get('[data-test="date-input"]').trigger('click')
      const outside = wrapper.get('[data-test="day"][data-iso="2026-05-05"]')
      expect((outside.element as HTMLButtonElement).disabled).toBe(true)
    })
  })

  describe('effacement', () => {
    it('émet null au clic sur la croix', async () => {
      const wrapper = mountDateTime({modelValue: '2026-05-20T14:30:00'})
      await wrapper.get('[data-test="clear"]').trigger('click')
      expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual([null])
    })
  })

  describe('accessibilité', () => {
    it('positionne aria-invalid et describedby sur erreur', () => {
      const wrapper = mountDateTime({error: 'Date requise'})
      const input = wrapper.get('[data-test="date-input"]')
      expect(input.attributes('aria-invalid')).toBe('true')
      expect(input.attributes('aria-describedby')).toBeTruthy()
      expect(wrapper.text()).toContain('Date requise')
    })
  })
})