@datametria/vue-components/src/components/__tests__/DatametriaSortableTable.test.js

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 DatametriaSortableTable from '../DatametriaSortableTable.vue'

describe('DatametriaSortableTable', () => {
  const columns = [
    { key: 'id', label: 'ID', width: '80px' },
    { key: 'name', label: 'Nome' },
    { key: 'email', label: 'Email' },
    { key: 'status', label: 'Status' }
  ]

  const data = [
    { id: 1, name: 'João Silva', email: 'joao@example.com', status: 'Ativo' },
    { id: 2, name: 'Maria Santos', email: 'maria@example.com', status: 'Inativo' },
    { id: 3, name: 'Pedro Costa', email: 'pedro@example.com', status: 'Ativo' },
    { id: 4, name: 'Ana Oliveira', email: 'ana@example.com', status: 'Ativo' }
  ]

  it('renders table with data', () => {
    const wrapper = mount(DatametriaSortableTable, {
      props: { columns, data }
    })

    expect(wrapper.find('.datametria-sortable-table').exists()).toBe(true)
    expect(wrapper.findAll('.datametria-sortable-table__tr')).toHaveLength(4)
  })

  it('renders search input when searchable', () => {
    const wrapper = mount(DatametriaSortableTable, {
      props: { columns, data, searchable: true }
    })

    expect(wrapper.find('.datametria-sortable-table__search-input').exists()).toBe(true)
  })

  it('filters data by search query', async () => {
    const wrapper = mount(DatametriaSortableTable, {
      props: { columns, data, searchable: true }
    })

    const searchInput = wrapper.find('.datametria-sortable-table__search-input')
    await searchInput.setValue('João')

    expect(wrapper.findAll('.datametria-sortable-table__tr')).toHaveLength(1)
    expect(wrapper.text()).toContain('João Silva')
  })

  it('sorts data when clicking column header', async () => {
    const wrapper = mount(DatametriaSortableTable, {
      props: { columns, data, paginated: false }
    })

    const nameHeader = wrapper.findAll('.datametria-sortable-table__th')[1]
    await nameHeader.trigger('click')

    const rows = wrapper.findAll('.datametria-sortable-table__tr')
    expect(rows[0].text()).toContain('Ana Oliveira')
    expect(rows[3].text()).toContain('Pedro Costa')
  })

  it('toggles sort order on second click', async () => {
    const wrapper = mount(DatametriaSortableTable, {
      props: { columns, data, paginated: false }
    })

    const nameHeader = wrapper.findAll('.datametria-sortable-table__th')[1]
    await nameHeader.trigger('click') // Ascending
    await nameHeader.trigger('click') // Descending

    const rows = wrapper.findAll('.datametria-sortable-table__tr')
    expect(rows[0].text()).toContain('Pedro Costa')
    expect(rows[3].text()).toContain('Ana Oliveira')
  })

  it('renders checkboxes when selectable', () => {
    const wrapper = mount(DatametriaSortableTable, {
      props: { columns, data, selectable: true }
    })

    expect(wrapper.findAll('input[type="checkbox"]').length).toBeGreaterThan(0)
  })

  it('selects row when checkbox clicked', async () => {
    const wrapper = mount(DatametriaSortableTable, {
      props: { columns, data, selectable: true }
    })

    const firstCheckbox = wrapper.findAll('input[type="checkbox"]')[1]
    await firstCheckbox.setValue(true)

    expect(wrapper.emitted('selection-change')).toBeTruthy()
  })

  it('renders pagination controls when paginated', () => {
    const wrapper = mount(DatametriaSortableTable, {
      props: { columns, data, paginated: true, pageSize: 2 }
    })

    expect(wrapper.find('.datametria-sortable-table__pagination').exists()).toBe(true)
    expect(wrapper.text()).toContain('Página 1 de 2')
  })

  it('changes page when pagination button clicked', async () => {
    const wrapper = mount(DatametriaSortableTable, {
      props: { columns, data, paginated: true, pageSize: 2 }
    })

    const nextButton = wrapper.findAll('.datametria-sortable-table__pagination-btn')[2]
    await nextButton.trigger('click')

    expect(wrapper.text()).toContain('Página 2 de 2')
  })

  it('renders column filters when filterable', () => {
    const wrapper = mount(DatametriaSortableTable, {
      props: { columns, data, filterable: true }
    })

    expect(wrapper.findAll('.datametria-sortable-table__filter-input').length).toBeGreaterThan(0)
  })

  it('filters by column filter', async () => {
    const wrapper = mount(DatametriaSortableTable, {
      props: { columns, data, filterable: true }
    })

    const statusFilter = wrapper.findAll('.datametria-sortable-table__filter-input')[3]
    await statusFilter.setValue('Inativo')

    expect(wrapper.findAll('.datametria-sortable-table__tr')).toHaveLength(1)
    expect(wrapper.text()).toContain('Maria Santos')
  })

  it('shows empty state when no data', () => {
    const wrapper = mount(DatametriaSortableTable, {
      props: { columns, data: [] }
    })

    expect(wrapper.find('.datametria-sortable-table__empty').exists()).toBe(true)
    expect(wrapper.text()).toContain('Nenhum dado encontrado')
  })

  it('disables sorting for specific columns', async () => {
    const columnsWithNonSortable = [
      { key: 'id', label: 'ID', sortable: false },
      { key: 'name', label: 'Nome' }
    ]

    const wrapper = mount(DatametriaSortableTable, {
      props: { columns: columnsWithNonSortable, data }
    })

    const idHeader = wrapper.findAll('.datametria-sortable-table__th')[0]
    expect(idHeader.classes()).not.toContain('datametria-sortable-table__th--sortable')
  })

  it('changes page size', async () => {
    const wrapper = mount(DatametriaSortableTable, {
      props: { columns, data, paginated: true, pageSize: 2, pageSizeOptions: [2, 5, 10] }
    })

    const pageSizeSelect = wrapper.find('.datametria-sortable-table__page-size')
    await pageSizeSelect.setValue(5)

    expect(wrapper.findAll('.datametria-sortable-table__tr')).toHaveLength(4)
  })
})