malio-layer-ui/app/components/malio/time/TimePicker.test.ts

import {describe, expect, it} from 'vitest'
import {mount} from '@vue/test-utils'
import type {DefineComponent} from 'vue'
import TimePicker from './TimePicker.vue'

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

const TimePickerForTest = TimePicker as DefineComponent<TimePickerProps>
const mountPicker = (props: TimePickerProps = {}) =>
  mount(TimePickerForTest, {props, attachTo: document.body})

describe('MalioTimePicker', () => {
  it('affiche le label et l\'icône horloge', () => {
    const wrapper = mountPicker({label: 'Heure'})
    expect(wrapper.get('label').text()).toBe('Heure')
    expect(wrapper.find('[data-test="clock-icon"]').exists()).toBe(true)
  })

  it('affiche la valeur HH:MM dans le champ', () => {
    const wrapper = mountPicker({modelValue: '14:30'})
    const input = wrapper.get('[data-test="time-field"]').element as HTMLInputElement
    expect(input.value).toBe('14:30')
  })

  it('ouvre le popover à molettes au clic', async () => {
    const wrapper = mountPicker()
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
    await wrapper.get('[data-test="time-field"]').trigger('click')
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(true)
    expect(wrapper.find('[data-test="time-wheels"]').exists()).toBe(true)
  })

  it('n\'ouvre pas le popover si disabled', async () => {
    const wrapper = mountPicker({disabled: true})
    await wrapper.get('[data-test="time-field"]').trigger('click')
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })

  it('n\'ouvre pas le popover si readonly', async () => {
    const wrapper = mountPicker({readonly: true})
    await wrapper.get('[data-test="time-field"]').trigger('click')
    expect(wrapper.find('[data-test="popover"]').exists()).toBe(false)
  })

  it('émet la valeur réglée depuis les molettes', async () => {
    const wrapper = mountPicker({modelValue: '09:30'})
    await wrapper.get('[data-test="time-field"]').trigger('click')
    wrapper.findComponent({name: 'MalioTimeWheels'}).vm.$emit('update:modelValue', '10:30')
    await wrapper.vm.$nextTick()
    expect(wrapper.emitted('update:modelValue')?.at(-1)).toEqual(['10:30'])
  })

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

  it('positionne aria-invalid et describedby sur erreur', () => {
    const wrapper = mountPicker({error: 'Heure requise'})
    const input = wrapper.get('[data-test="time-field"]')
    expect(input.attributes('aria-invalid')).toBe('true')
    expect(input.attributes('aria-describedby')).toBeTruthy()
    expect(wrapper.text()).toContain('Heure requise')
  })

  it('affiche l\'astérisque quand required est vrai', () => {
    const wrapper = mountPicker({label: 'Champ', required: true})
    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(true)
  })

  it('n\'affiche pas l\'astérisque par défaut', () => {
    const wrapper = mountPicker({label: 'Champ'})
    expect(wrapper.find('[data-test="required-mark"]').exists()).toBe(false)
  })

  it('readonly vide : bordure noire sans bleu', () => {
    const wrapper = mountPicker({readonly: true})
    const input = wrapper.get('[data-test="time-field"]')
    expect(input.classes()).toContain('border-black')
    expect(input.classes()).not.toContain('border-m-muted')
    expect(input.classes()).not.toContain('focus:border-m-primary')
  })

  it('readonly vide : label muted sans bleu', () => {
    const wrapper = mountPicker({readonly: true, label: 'Heure'})
    const label = wrapper.get('label')
    expect(label.classes()).toContain('text-m-muted')
    expect(label.classes()).not.toContain('text-m-primary')
  })

  it('readonly vide : icône horloge en text-m-muted', () => {
    const wrapper = mountPicker({readonly: true, label: 'Heure'})
    expect(wrapper.get('[data-test="clock-icon"]').classes()).toContain('text-m-muted')
  })

  it('readonly rempli : label et icône en noir, bordure noire', () => {
    const wrapper = mountPicker({readonly: true, label: 'Heure', modelValue: '14:30'})
    const input = wrapper.get('[data-test="time-field"]')
    const label = wrapper.get('label')
    const icon = wrapper.get('[data-test="clock-icon"]')
    expect(input.classes()).toContain('border-black')
    expect(input.classes()).not.toContain('focus:border-m-primary')
    expect(label.classes()).toContain('text-black')
    expect(icon.classes()).toContain('text-black')
  })

  it('réserve l’espace message par défaut même sans message', () => {
    const wrapper = mountPicker({label: 'Champ'})
    const msg = wrapper.find('[id$="-describedby"]')
    expect(msg.exists()).toBe(true)
    expect(msg.classes()).toContain('min-h-[1rem]')
  })

  it('reserveMessageSpace=false sans message : pas de ligne réservée', () => {
    const wrapper = mountPicker({label: 'Champ', reserveMessageSpace: false})
    expect(wrapper.find('[id$="-describedby"]').exists()).toBe(false)
  })

  it('reserveMessageSpace=false avec message : ligne rendue sans min-h', () => {
    const wrapper = mountPicker({label: 'Champ', reserveMessageSpace: false, error: 'Erreur'})
    const msg = wrapper.find('[id$="-describedby"]')
    expect(msg.exists()).toBe(true)
    expect(msg.classes()).not.toContain('min-h-[1rem]')
  })
})