@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/__tests__/DatametriaSortableTable.test.js

@@ -1,168 +1,168 @@
-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)
-  })
-})
+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)
+  })
+})

package/src/components/__tests__/DatametriaSpinner.test.ts

@@ -1,156 +1,156 @@
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaSpinner from '../DatametriaSpinner.vue'
-
-describe('DatametriaSpinner', () => {
-  // Rendering tests
-  it('renders with default props', () => {
-    const wrapper = mount(DatametriaSpinner)
-    expect(wrapper.find('.dm-spinner').exists()).toBe(true)
-    expect(wrapper.find('.dm-spinner--md').exists()).toBe(true)
-    expect(wrapper.find('.dm-spinner--primary').exists()).toBe(true)
-  })
-
-  it('renders with label', () => {
-    const wrapper = mount(DatametriaSpinner, {
-      props: { label: 'Loading...' }
-    })
-    expect(wrapper.find('.dm-spinner__label').text()).toBe('Loading...')
-  })
-
-  it('renders without label', () => {
-    const wrapper = mount(DatametriaSpinner)
-    expect(wrapper.find('.dm-spinner__label').exists()).toBe(false)
-  })
-
-  it('renders with custom aria-label', () => {
-    const wrapper = mount(DatametriaSpinner, {
-      props: { ariaLabel: 'Custom loading' }
-    })
-    expect(wrapper.attributes('aria-label')).toBe('Custom loading')
-  })
-
-  it('has role status', () => {
-    const wrapper = mount(DatametriaSpinner)
-    expect(wrapper.attributes('role')).toBe('status')
-  })
-
-  // Size tests
-  it('renders small size', () => {
-    const wrapper = mount(DatametriaSpinner, {
-      props: { size: 'sm' }
-    })
-    expect(wrapper.find('.dm-spinner--sm').exists()).toBe(true)
-  })
-
-  it('renders medium size', () => {
-    const wrapper = mount(DatametriaSpinner, {
-      props: { size: 'md' }
-    })
-    expect(wrapper.find('.dm-spinner--md').exists()).toBe(true)
-  })
-
-  it('renders large size', () => {
-    const wrapper = mount(DatametriaSpinner, {
-      props: { size: 'lg' }
-    })
-    expect(wrapper.find('.dm-spinner--lg').exists()).toBe(true)
-  })
-
-  // Variant tests
-  it('renders primary variant', () => {
-    const wrapper = mount(DatametriaSpinner, {
-      props: { variant: 'primary' }
-    })
-    expect(wrapper.find('.dm-spinner--primary').exists()).toBe(true)
-  })
-
-  it('renders secondary variant', () => {
-    const wrapper = mount(DatametriaSpinner, {
-      props: { variant: 'secondary' }
-    })
-    expect(wrapper.find('.dm-spinner--secondary').exists()).toBe(true)
-  })
-
-  it('renders white variant', () => {
-    const wrapper = mount(DatametriaSpinner, {
-      props: { variant: 'white' }
-    })
-    expect(wrapper.find('.dm-spinner--white').exists()).toBe(true)
-  })
-
-  // SVG structure tests
-  it('renders SVG element', () => {
-    const wrapper = mount(DatametriaSpinner)
-    expect(wrapper.find('.dm-spinner__svg').exists()).toBe(true)
-    expect(wrapper.find('svg').exists()).toBe(true)
-  })
-
-  it('renders circle element', () => {
-    const wrapper = mount(DatametriaSpinner)
-    expect(wrapper.find('.dm-spinner__circle').exists()).toBe(true)
-    expect(wrapper.find('circle').exists()).toBe(true)
-  })
-
-  it('circle has correct attributes', () => {
-    const wrapper = mount(DatametriaSpinner)
-    const circle = wrapper.find('circle')
-    expect(circle.attributes('cx')).toBe('25')
-    expect(circle.attributes('cy')).toBe('25')
-    expect(circle.attributes('r')).toBe('20')
-    expect(circle.attributes('fill')).toBe('none')
-    expect(circle.attributes('stroke-width')).toBe('4')
-  })
-
-  // CSS Variables tests
-  it('uses CSS variables for colors', () => {
-    const variants: Array<'primary' | 'secondary' | 'white'> = ['primary', 'secondary', 'white']
-    
-    variants.forEach(variant => {
-      const wrapper = mount(DatametriaSpinner, {
-        props: { variant }
-      })
-      expect(wrapper.find(`.dm-spinner--${variant}`).exists()).toBe(true)
-    })
-  })
-
-  it('uses CSS variables for spacing', () => {
-    const wrapper = mount(DatametriaSpinner, {
-      props: { label: 'Test' }
-    })
-    
-    // Verifica estrutura
-    expect(wrapper.find('.dm-spinner').exists()).toBe(true)
-    expect(wrapper.find('.dm-spinner__label').exists()).toBe(true)
-  })
-
-  // Backward compatibility tests
-  it('works without ThemeProvider (fallback values)', () => {
-    const wrapper = mount(DatametriaSpinner, {
-      props: {
-        variant: 'primary',
-        size: 'md',
-        label: 'Loading'
-      }
-    })
-    
-    expect(wrapper.find('.dm-spinner--primary').exists()).toBe(true)
-    expect(wrapper.find('.dm-spinner--md').exists()).toBe(true)
-    expect(wrapper.text()).toContain('Loading')
-  })
-
-  it('maintains visual consistency across variants and sizes', () => {
-    const variants: Array<'primary' | 'secondary' | 'white'> = ['primary', 'secondary', 'white']
-    const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg']
-    
-    variants.forEach(variant => {
-      sizes.forEach(size => {
-        const wrapper = mount(DatametriaSpinner, {
-          props: { variant, size }
-        })
-        expect(wrapper.find(`.dm-spinner--${variant}`).exists()).toBe(true)
-        expect(wrapper.find(`.dm-spinner--${size}`).exists()).toBe(true)
-      })
-    })
-  })
-})
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaSpinner from '../DatametriaSpinner.vue'
+
+describe('DatametriaSpinner', () => {
+  // Rendering tests
+  it('renders with default props', () => {
+    const wrapper = mount(DatametriaSpinner)
+    expect(wrapper.find('.dm-spinner').exists()).toBe(true)
+    expect(wrapper.find('.dm-spinner--md').exists()).toBe(true)
+    expect(wrapper.find('.dm-spinner--primary').exists()).toBe(true)
+  })
+
+  it('renders with label', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { label: 'Loading...' }
+    })
+    expect(wrapper.find('.dm-spinner__label').text()).toBe('Loading...')
+  })
+
+  it('renders without label', () => {
+    const wrapper = mount(DatametriaSpinner)
+    expect(wrapper.find('.dm-spinner__label').exists()).toBe(false)
+  })
+
+  it('renders with custom aria-label', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { ariaLabel: 'Custom loading' }
+    })
+    expect(wrapper.attributes('aria-label')).toBe('Custom loading')
+  })
+
+  it('has role status', () => {
+    const wrapper = mount(DatametriaSpinner)
+    expect(wrapper.attributes('role')).toBe('status')
+  })
+
+  // Size tests
+  it('renders small size', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { size: 'sm' }
+    })
+    expect(wrapper.find('.dm-spinner--sm').exists()).toBe(true)
+  })
+
+  it('renders medium size', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { size: 'md' }
+    })
+    expect(wrapper.find('.dm-spinner--md').exists()).toBe(true)
+  })
+
+  it('renders large size', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { size: 'lg' }
+    })
+    expect(wrapper.find('.dm-spinner--lg').exists()).toBe(true)
+  })
+
+  // Variant tests
+  it('renders primary variant', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { variant: 'primary' }
+    })
+    expect(wrapper.find('.dm-spinner--primary').exists()).toBe(true)
+  })
+
+  it('renders secondary variant', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { variant: 'secondary' }
+    })
+    expect(wrapper.find('.dm-spinner--secondary').exists()).toBe(true)
+  })
+
+  it('renders white variant', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { variant: 'white' }
+    })
+    expect(wrapper.find('.dm-spinner--white').exists()).toBe(true)
+  })
+
+  // SVG structure tests
+  it('renders SVG element', () => {
+    const wrapper = mount(DatametriaSpinner)
+    expect(wrapper.find('.dm-spinner__svg').exists()).toBe(true)
+    expect(wrapper.find('svg').exists()).toBe(true)
+  })
+
+  it('renders circle element', () => {
+    const wrapper = mount(DatametriaSpinner)
+    expect(wrapper.find('.dm-spinner__circle').exists()).toBe(true)
+    expect(wrapper.find('circle').exists()).toBe(true)
+  })
+
+  it('circle has correct attributes', () => {
+    const wrapper = mount(DatametriaSpinner)
+    const circle = wrapper.find('circle')
+    expect(circle.attributes('cx')).toBe('25')
+    expect(circle.attributes('cy')).toBe('25')
+    expect(circle.attributes('r')).toBe('20')
+    expect(circle.attributes('fill')).toBe('none')
+    expect(circle.attributes('stroke-width')).toBe('4')
+  })
+
+  // CSS Variables tests
+  it('uses CSS variables for colors', () => {
+    const variants: Array<'primary' | 'secondary' | 'white'> = ['primary', 'secondary', 'white']
+    
+    variants.forEach(variant => {
+      const wrapper = mount(DatametriaSpinner, {
+        props: { variant }
+      })
+      expect(wrapper.find(`.dm-spinner--${variant}`).exists()).toBe(true)
+    })
+  })
+
+  it('uses CSS variables for spacing', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: { label: 'Test' }
+    })
+    
+    // Verifica estrutura
+    expect(wrapper.find('.dm-spinner').exists()).toBe(true)
+    expect(wrapper.find('.dm-spinner__label').exists()).toBe(true)
+  })
+
+  // Backward compatibility tests
+  it('works without ThemeProvider (fallback values)', () => {
+    const wrapper = mount(DatametriaSpinner, {
+      props: {
+        variant: 'primary',
+        size: 'md',
+        label: 'Loading'
+      }
+    })
+    
+    expect(wrapper.find('.dm-spinner--primary').exists()).toBe(true)
+    expect(wrapper.find('.dm-spinner--md').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Loading')
+  })
+
+  it('maintains visual consistency across variants and sizes', () => {
+    const variants: Array<'primary' | 'secondary' | 'white'> = ['primary', 'secondary', 'white']
+    const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg']
+    
+    variants.forEach(variant => {
+      sizes.forEach(size => {
+        const wrapper = mount(DatametriaSpinner, {
+          props: { variant, size }
+        })
+        expect(wrapper.find(`.dm-spinner--${variant}`).exists()).toBe(true)
+        expect(wrapper.find(`.dm-spinner--${size}`).exists()).toBe(true)
+      })
+    })
+  })
+})