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

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

  it('applies custom cols', () => {
    const wrapper = mount(DatametriaGrid, {
      props: { cols: 6 }
    })
    expect(wrapper.find('.dm-grid').attributes('style')).toContain('--dm-grid-cols: 6')
  })

  it('applies custom gap', () => {
    const wrapper = mount(DatametriaGrid, {
      props: { gap: '2rem' }
    })
    expect(wrapper.find('.dm-grid').attributes('style')).toContain('--dm-grid-gap: 2rem')
  })

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