@datametria/vue-components/src/components/__tests__/DatametriaContainer.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 DatametriaContainer from '../DatametriaContainer.vue'

describe('DatametriaContainer', () => {
  it('renders correctly', () => {
    const wrapper = mount(DatametriaContainer)
    expect(wrapper.find('.dm-container').exists()).toBe(true)
  })

  it('applies sm size class', () => {
    const wrapper = mount(DatametriaContainer, {
      props: { size: 'sm' }
    })
    expect(wrapper.find('.dm-container--sm').exists()).toBe(true)
  })

  it('applies md size class', () => {
    const wrapper = mount(DatametriaContainer, {
      props: { size: 'md' }
    })
    expect(wrapper.find('.dm-container--md').exists()).toBe(true)
  })

  it('applies lg size class', () => {
    const wrapper = mount(DatametriaContainer, {
      props: { size: 'lg' }
    })
    expect(wrapper.find('.dm-container--lg').exists()).toBe(true)
  })

  it('applies xl size class', () => {
    const wrapper = mount(DatametriaContainer, {
      props: { size: 'xl' }
    })
    expect(wrapper.find('.dm-container--xl').exists()).toBe(true)
  })

  it('applies fluid class', () => {
    const wrapper = mount(DatametriaContainer, {
      props: { fluid: true }
    })
    expect(wrapper.find('.dm-container--fluid').exists()).toBe(true)
  })

  it('renders slot content', () => {
    const wrapper = mount(DatametriaContainer, {
      slots: { default: '<div>Content</div>' }
    })
    expect(wrapper.html()).toContain('Content')
  })
})