malio-layer-ui/app/components/malio/drawer/Drawer.test.ts

import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import type { DefineComponent } from 'vue'
import { Icon as IconifyIcon } from '@iconify/vue'
import Drawer from './Drawer.vue'

type DrawerProps = {
  id?: string
  modelValue?: boolean
  side?: 'right' | 'left'
  showClose?: boolean
  dismissable?: boolean
  closeOnEscape?: boolean
  ariaLabel?: string
  drawerClass?: string
  overlayClass?: string
  headerClass?: string
  bodyClass?: string
  footerClass?: string
}

const DrawerForTest = Drawer as DefineComponent<DrawerProps>

function mountComponent(props: DrawerProps = {}, slots?: Record<string, string>) {
  return mount(DrawerForTest, {
    props,
    slots,
    global: { stubs: { Teleport: true } },
  })
}

describe('MalioDrawer', () => {
  it('does not render when modelValue is false', () => {
    const wrapper = mountComponent({ modelValue: false })
    expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
  })

  it('renders the panel when modelValue is true', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="panel"]').exists()).toBe(true)
  })

  it('renders default slot in the body', () => {
    const wrapper = mountComponent(
      { modelValue: true },
      { default: '<p data-test="content">Contenu</p>' },
    )
    expect(wrapper.find('[data-test="body"] [data-test="content"]').text()).toBe('Contenu')
  })

  it('works in uncontrolled mode (defaults closed)', () => {
    const wrapper = mountComponent()
    expect(wrapper.find('[data-test="panel"]').exists()).toBe(false)
  })

  it('uses custom id when provided', () => {
    const wrapper = mountComponent({ modelValue: true, id: 'my-drawer' })
    expect(wrapper.find('.fixed').attributes('id')).toBe('my-drawer')
  })

  it('generates an id when not provided', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('.fixed').attributes('id')).toMatch(/^malio-drawer-/)
  })

  it('has role="dialog" and aria-modal on the panel', () => {
    const wrapper = mountComponent({ modelValue: true })
    const panel = wrapper.find('[data-test="panel"]')
    expect(panel.attributes('role')).toBe('dialog')
    expect(panel.attributes('aria-modal')).toBe('true')
  })

  it('applies drawerClass to the panel', () => {
    const wrapper = mountComponent({ modelValue: true, drawerClass: 'max-w-2xl' })
    expect(wrapper.find('[data-test="panel"]').classes()).toContain('max-w-2xl')
  })

  it('renders the #header slot inside the header bar', () => {
    const wrapper = mountComponent(
      { modelValue: true },
      { header: '<h2 data-test="title">Titre</h2>' },
    )
    expect(wrapper.find('[data-test="header"] [data-test="title"]').text()).toBe('Titre')
  })

  it('renders the header bar when showClose is true even without #header', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="header"]').exists()).toBe(true)
  })

  it('does not render the header bar when no #header and showClose is false', () => {
    const wrapper = mountComponent({ modelValue: true, showClose: false })
    expect(wrapper.find('[data-test="header"]').exists()).toBe(false)
  })

  it('shows the close button by default', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="close-button"]').exists()).toBe(true)
  })

  it('hides the close button when showClose is false', () => {
    const wrapper = mountComponent(
      { modelValue: true, showClose: false },
      { header: '<h2>Titre</h2>' },
    )
    expect(wrapper.find('[data-test="close-button"]').exists()).toBe(false)
  })

  it('close button renders mdi:cancel-bold icon', () => {
    const wrapper = mountComponent({ modelValue: true })
    const icon = wrapper.findComponent(IconifyIcon)
    expect(icon.props('icon')).toBe('mdi:cancel-bold')
  })

  it('close button has aria-label "Fermer"', () => {
    const wrapper = mountComponent({ modelValue: true })
    expect(wrapper.find('[data-test="close-button"]').attributes('aria-label')).toBe('Fermer')
  })

  it('emits update:modelValue false and close on close button click', async () => {
    const wrapper = mountComponent({ modelValue: true })
    await wrapper.find('[data-test="close-button"]').trigger('click')
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
    expect(wrapper.emitted('close')).toHaveLength(1)
  })

  it('sets aria-labelledby to the header id when #header is provided', () => {
    const wrapper = mountComponent(
      { modelValue: true, id: 'test-drawer' },
      { header: '<h2>Titre</h2>' },
    )
    const panel = wrapper.find('[data-test="panel"]')
    expect(panel.attributes('aria-labelledby')).toBe('test-drawer-header')
    expect(wrapper.find('[data-test="header-content"]').attributes('id')).toBe('test-drawer-header')
  })

  it('sets aria-label from ariaLabel when no #header is provided', () => {
    const wrapper = mountComponent({ modelValue: true, ariaLabel: 'Panneau latéral' })
    const panel = wrapper.find('[data-test="panel"]')
    expect(panel.attributes('aria-label')).toBe('Panneau latéral')
    expect(panel.attributes('aria-labelledby')).toBeUndefined()
  })

  it('applies headerClass to the header bar', () => {
    const wrapper = mountComponent({ modelValue: true, headerClass: 'bg-m-primary' })
    expect(wrapper.find('[data-test="header"]').classes()).toContain('bg-m-primary')
  })
})