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

describe('DatametriaTable', () => {
  const columns = [
    { key: 'name', label: 'Name' },
    { key: 'email', label: 'Email' },
    { key: 'age', label: 'Age' }
  ]

  const data = [
    { name: 'John Doe', email: 'john@example.com', age: 30 },
    { name: 'Jane Smith', email: 'jane@example.com', age: 25 }
  ]

  it('renders correctly', () => {
    const wrapper = mount(DatametriaTable, {
      props: { columns, data }
    })
    expect(wrapper.find('.datametria-table').exists()).toBe(true)
  })

  it('renders table headers correctly', () => {
    const wrapper = mount(DatametriaTable, {
      props: { columns, data }
    })
    const headers = wrapper.findAll('.datametria-table__th')
    expect(headers).toHaveLength(3)
    expect(headers[0].text()).toBe('Name')
    expect(headers[1].text()).toBe('Email')
    expect(headers[2].text()).toBe('Age')
  })

  it('renders table rows correctly', () => {
    const wrapper = mount(DatametriaTable, {
      props: { columns, data }
    })
    const rows = wrapper.findAll('.datametria-table__tr')
    expect(rows).toHaveLength(2)
  })

  it('renders table cells correctly', () => {
    const wrapper = mount(DatametriaTable, {
      props: { columns, data }
    })
    const cells = wrapper.findAll('.datametria-table__td')
    expect(cells[0].text()).toBe('John Doe')
    expect(cells[1].text()).toBe('john@example.com')
    expect(cells[2].text()).toBe('30')
  })

  it('shows empty state when no data', () => {
    const wrapper = mount(DatametriaTable, {
      props: { columns, data: [] }
    })
    expect(wrapper.find('.datametria-table__empty').exists()).toBe(true)
    expect(wrapper.find('.datametria-table__empty').text()).toBe('Nenhum dado disponível')
  })

  it('renders custom empty slot', () => {
    const wrapper = mount(DatametriaTable, {
      props: { columns, data: [] },
      slots: { empty: 'Custom empty message' }
    })
    expect(wrapper.find('.datametria-table__empty').text()).toBe('Custom empty message')
  })

  it('applies column width when specified', () => {
    const columnsWithWidth = [
      { key: 'name', label: 'Name', width: '200px' },
      { key: 'email', label: 'Email' }
    ]
    const wrapper = mount(DatametriaTable, {
      props: { columns: columnsWithWidth, data }
    })
    const firstHeader = wrapper.find('.datametria-table__th')
    expect(firstHeader.attributes('style')).toContain('width: 200px')
  })

  it('renders custom cell slot', () => {
    const wrapper = mount(DatametriaTable, {
      props: { columns, data },
      slots: {
        'cell-name': '<strong>Custom Name</strong>'
      }
    })
    expect(wrapper.html()).toContain('<strong>Custom Name</strong>')
  })

  it('uses CSS variables with fallbacks', () => {
    const wrapper = mount(DatametriaTable, {
      props: { columns, data }
    })
    expect(wrapper.html()).toContain('datametria-table')
  })
})