@datametria/vue-components/src/components/__tests__/DatametriaModal.test.ts

DATAMETRIA Vue.js 3 Component Library with Multi-Brand Theming - 51 components + 10 composables with theming support, WCAG 2.2 AA, dark mode, responsive system

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

describe('DatametriaModal', () => {
  it.skip('renders correctly when open', () => {
    const wrapper = mount(DatametriaModal, {
      props: { modelValue: true }
    })
    expect(wrapper.html()).toContain('datametria-modal')
  })

  it('does not render when closed', () => {
    const wrapper = mount(DatametriaModal, {
      props: { modelValue: false }
    })
    expect(wrapper.html()).not.toContain('datametria-modal')
  })

  it.skip('renders title when provided', () => {
    const wrapper = mount(DatametriaModal, {
      props: { modelValue: true, title: 'Test Title' }
    })
    expect(wrapper.html()).toContain('Test Title')
  })

  it.skip('renders close button when closable', () => {
    const wrapper = mount(DatametriaModal, {
      props: { modelValue: true, closable: true }
    })
    expect(wrapper.html()).toContain('datametria-modal__close')
  })

  it('does not render close button when not closable', () => {
    const wrapper = mount(DatametriaModal, {
      props: { modelValue: true, closable: false }
    })
    expect(wrapper.html()).not.toContain('datametria-modal__close')
  })

  it('emits update:modelValue when handleClose called', async () => {
    const wrapper = mount(DatametriaModal, {
      props: { modelValue: true, closable: true }
    })
    await (wrapper.vm as any).handleClose()
    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([false])
  })

  it('emits close event when handleClose called', async () => {
    const wrapper = mount(DatametriaModal, {
      props: { modelValue: true, closable: true }
    })
    await (wrapper.vm as any).handleClose()
    expect(wrapper.emitted('close')).toBeTruthy()
  })

  it.skip('applies custom size', () => {
    const wrapper = mount(DatametriaModal, {
      props: { modelValue: true, size: '50rem' }
    })
    expect(wrapper.html()).toContain('max-width: 50rem')
  })

  it.skip('renders body content', () => {
    const wrapper = mount(DatametriaModal, {
      props: { modelValue: true },
      slots: { default: 'Body content' }
    })
    expect(wrapper.html()).toContain('Body content')
  })

  it.skip('renders footer slot when provided', () => {
    const wrapper = mount(DatametriaModal, {
      props: { modelValue: true },
      slots: { footer: 'Footer content' }
    })
    expect(wrapper.html()).toContain('Footer content')
  })

  it.skip('uses CSS variables with fallbacks', () => {
    const wrapper = mount(DatametriaModal, {
      props: { modelValue: true }
    })
    expect(wrapper.html()).toContain('--dm-')
  })
})