@datametria/vue-components 1.2.0 → 2.1.0

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

@@ -0,0 +1,77 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaSelect from '../DatametriaSelect.vue'
+
+describe('DatametriaSelect', () => {
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+  ]
+
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options }
+    })
+    expect(wrapper.find('.datametria-select').exists()).toBe(true)
+  })
+
+  it('renders label when provided', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options, label: 'Select Label' }
+    })
+    expect(wrapper.find('.datametria-select__label').text()).toContain('Select Label')
+  })
+
+  it('shows required indicator', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options, label: 'Test', required: true }
+    })
+    expect(wrapper.find('.datametria-select__required').exists()).toBe(true)
+  })
+
+  it('renders all options', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options }
+    })
+    const optionElements = wrapper.findAll('option')
+    expect(optionElements.length).toBeGreaterThanOrEqual(3)
+  })
+
+  it('renders placeholder option', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options, placeholder: 'Choose option' }
+    })
+    const firstOption = wrapper.find('option')
+    expect(firstOption.text()).toBe('Choose option')
+  })
+
+  it('binds modelValue correctly', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options, modelValue: '2' }
+    })
+    expect((wrapper.find('select').element as HTMLSelectElement).value).toBe('2')
+  })
+
+  it('emits update:modelValue on change', async () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options }
+    })
+    await wrapper.find('select').setValue('2')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['2'])
+  })
+
+  it('shows error message', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options, errorMessage: 'Error text' }
+    })
+    expect(wrapper.find('.datametria-select__error').text()).toBe('Error text')
+  })
+
+  it('applies disabled state', () => {
+    const wrapper = mount(DatametriaSelect, {
+      props: { options, disabled: true }
+    })
+    expect(wrapper.find('select').attributes('disabled')).toBeDefined()
+  })
+})

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

@@ -0,0 +1,169 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaSidebar from '../DatametriaSidebar.vue'
+
+describe('DatametriaSidebar', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaSidebar)
+    expect(wrapper.find('.dm-sidebar').exists()).toBe(true)
+  })
+
+  it('applies position classes', () => {
+    const wrapperLeft = mount(DatametriaSidebar, { props: { position: 'left' } })
+    expect(wrapperLeft.find('.dm-sidebar--left').exists()).toBe(true)
+
+    const wrapperRight = mount(DatametriaSidebar, { props: { position: 'right' } })
+    expect(wrapperRight.find('.dm-sidebar--right').exists()).toBe(true)
+  })
+
+  it('applies variant classes', () => {
+    const variants = ['light', 'dark', 'primary'] as const
+    variants.forEach(variant => {
+      const wrapper = mount(DatametriaSidebar, { props: { variant } })
+      expect(wrapper.find(`.dm-sidebar--${variant}`).exists()).toBe(true)
+    })
+  })
+
+  it('renders header slot', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      slots: { header: '<div class="test-header">Header</div>' }
+    })
+    expect(wrapper.find('.test-header').exists()).toBe(true)
+    expect(wrapper.find('.dm-sidebar__header').exists()).toBe(true)
+  })
+
+  it('renders default slot content', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      slots: { default: '<div class="test-content">Content</div>' }
+    })
+    expect(wrapper.find('.test-content').exists()).toBe(true)
+    expect(wrapper.find('.dm-sidebar__content').exists()).toBe(true)
+  })
+
+  it('renders footer slot', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      slots: { footer: '<div class="test-footer">Footer</div>' }
+    })
+    expect(wrapper.find('.test-footer').exists()).toBe(true)
+    expect(wrapper.find('.dm-sidebar__footer').exists()).toBe(true)
+  })
+
+  it('shows toggle button when collapsible', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true },
+      slots: { header: 'Header' }
+    })
+    expect(wrapper.find('.dm-sidebar__toggle').exists()).toBe(true)
+  })
+
+  it('hides toggle button when not collapsible', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: false },
+      slots: { header: 'Header' }
+    })
+    expect(wrapper.find('.dm-sidebar__toggle').exists()).toBe(false)
+  })
+
+  it('toggles open state when toggle button clicked', async () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: true },
+      slots: { header: 'Header' }
+    })
+
+    expect(wrapper.vm.isOpen).toBe(true)
+    expect(wrapper.find('.dm-sidebar--collapsed').exists()).toBe(false)
+
+    await wrapper.find('.dm-sidebar__toggle').trigger('click')
+    expect(wrapper.vm.isOpen).toBe(false)
+    expect(wrapper.find('.dm-sidebar--collapsed').exists()).toBe(true)
+
+    await wrapper.find('.dm-sidebar__toggle').trigger('click')
+    expect(wrapper.vm.isOpen).toBe(true)
+  })
+
+  it('emits toggle event with correct value', async () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: true },
+      slots: { header: 'Header' }
+    })
+
+    await wrapper.find('.dm-sidebar__toggle').trigger('click')
+    expect(wrapper.emitted('toggle')).toBeTruthy()
+    expect(wrapper.emitted('toggle')?.[0]).toEqual([false])
+
+    await wrapper.find('.dm-sidebar__toggle').trigger('click')
+    expect(wrapper.emitted('toggle')?.[1]).toEqual([true])
+  })
+
+  it('emits open event when opening', async () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: false },
+      slots: { header: 'Header' }
+    })
+
+    await wrapper.find('.dm-sidebar__toggle').trigger('click')
+    expect(wrapper.emitted('open')).toBeTruthy()
+  })
+
+  it('emits close event when closing', async () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: true },
+      slots: { header: 'Header' }
+    })
+
+    await wrapper.find('.dm-sidebar__toggle').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('respects defaultOpen prop', () => {
+    const wrapperOpen = mount(DatametriaSidebar, { props: { defaultOpen: true } })
+    expect(wrapperOpen.vm.isOpen).toBe(true)
+
+    const wrapperClosed = mount(DatametriaSidebar, { props: { defaultOpen: false } })
+    expect(wrapperClosed.vm.isOpen).toBe(false)
+  })
+
+  it('updates isOpen when defaultOpen prop changes', async () => {
+    const wrapper = mount(DatametriaSidebar, { props: { defaultOpen: true } })
+    expect(wrapper.vm.isOpen).toBe(true)
+
+    await wrapper.setProps({ defaultOpen: false })
+    expect(wrapper.vm.isOpen).toBe(false)
+  })
+
+  it('has correct aria attributes', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { ariaLabel: 'Test sidebar', defaultOpen: true }
+    })
+    const sidebar = wrapper.find('.dm-sidebar')
+    expect(sidebar.attributes('role')).toBe('complementary')
+    expect(sidebar.attributes('aria-label')).toBe('Test sidebar')
+    expect(sidebar.attributes('aria-expanded')).toBe('true')
+  })
+
+  it('exposes toggle method', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: true }
+    })
+
+    expect(wrapper.vm.isOpen).toBe(true)
+    wrapper.vm.toggle()
+    expect(wrapper.vm.isOpen).toBe(false)
+    wrapper.vm.toggle()
+    expect(wrapper.vm.isOpen).toBe(true)
+  })
+
+  it('applies collapsed class when closed and collapsible', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: false }
+    })
+    expect(wrapper.find('.dm-sidebar--collapsed').exists()).toBe(true)
+  })
+
+  it('does not apply collapsed class when open', () => {
+    const wrapper = mount(DatametriaSidebar, {
+      props: { collapsible: true, defaultOpen: true }
+    })
+    expect(wrapper.find('.dm-sidebar--collapsed').exists()).toBe(false)
+  })
+})

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

@@ -0,0 +1,261 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaSlider from '../DatametriaSlider.vue'
+
+describe('DatametriaSlider', () => {
+  describe('Renderização', () => {
+    it('renderiza corretamente', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      expect(wrapper.find('.dm-slider').exists()).toBe(true)
+    })
+
+    it('renderiza label', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, label: 'Volume' }
+      })
+      expect(wrapper.text()).toContain('Volume')
+    })
+
+    it('renderiza valor quando showValue=true', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 75, showValue: true }
+      })
+      expect(wrapper.find('.dm-slider__value').text()).toBe('75')
+    })
+
+    it('não renderiza valor quando showValue=false', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 75, showValue: false }
+      })
+      expect(wrapper.find('.dm-slider__value').exists()).toBe(false)
+    })
+
+    it('renderiza min/max quando showMinMax=true', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, min: 0, max: 100, showMinMax: true }
+      })
+      expect(wrapper.find('.dm-slider__min').text()).toBe('0')
+      expect(wrapper.find('.dm-slider__max').text()).toBe('100')
+    })
+
+    it('renderiza required indicator', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, label: 'Volume', required: true }
+      })
+      expect(wrapper.find('.dm-slider__required').exists()).toBe(true)
+    })
+  })
+
+  describe('Props', () => {
+    it('aceita modelValue', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 60 }
+      })
+      expect(wrapper.props('modelValue')).toBe(60)
+    })
+
+    it('aceita min e max', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, min: 10, max: 90 }
+      })
+      const input = wrapper.find('input')
+      expect(input.attributes('min')).toBe('10')
+      expect(input.attributes('max')).toBe('90')
+    })
+
+    it('aceita step', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, step: 5 }
+      })
+      expect(wrapper.find('input').attributes('step')).toBe('5')
+    })
+
+    it('aceita disabled', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, disabled: true }
+      })
+      expect(wrapper.find('.dm-slider').classes()).toContain('dm-slider--disabled')
+      expect(wrapper.find('input').element.disabled).toBe(true)
+    })
+
+    it('aceita errorMessage', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, errorMessage: 'Valor inválido' }
+      })
+      expect(wrapper.find('.dm-slider__error').text()).toBe('Valor inválido')
+    })
+
+    it('aceita helperText', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, helperText: 'Ajuste o volume' }
+      })
+      expect(wrapper.find('.dm-slider__helper').text()).toBe('Ajuste o volume')
+    })
+
+    it('aceita formatter customizado', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: {
+          modelValue: 50,
+          showValue: true,
+          formatter: (v: number) => `${v}%`
+        }
+      })
+      expect(wrapper.find('.dm-slider__value').text()).toBe('50%')
+    })
+  })
+
+  describe('Interação', () => {
+    it('emite update:modelValue ao mudar input', async () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      
+      const input = wrapper.find('input')
+      await input.setValue(75)
+      
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([75])
+    })
+
+    it('emite change ao mudar valor', async () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      
+      const input = wrapper.find('input')
+      await input.trigger('change')
+      
+      expect(wrapper.emitted('change')).toBeTruthy()
+    })
+
+    it('emite focus ao focar', async () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      
+      await wrapper.find('input').trigger('focus')
+      expect(wrapper.emitted('focus')).toBeTruthy()
+    })
+
+    it('emite blur ao desfocar', async () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      
+      await wrapper.find('input').trigger('blur')
+      expect(wrapper.emitted('blur')).toBeTruthy()
+    })
+  })
+
+  describe('Progress', () => {
+    it('calcula progressPercentage corretamente', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, min: 0, max: 100 }
+      })
+      
+      const progress = wrapper.find('.dm-slider__progress')
+      expect(progress.attributes('style')).toContain('width: 50%')
+    })
+
+    it('calcula progressPercentage com min diferente de 0', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, min: 25, max: 75 }
+      })
+      
+      const progress = wrapper.find('.dm-slider__progress')
+      expect(progress.attributes('style')).toContain('width: 50%')
+    })
+  })
+
+  describe('Acessibilidade', () => {
+    it('input tem type range', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      expect(wrapper.find('input').attributes('type')).toBe('range')
+    })
+
+    it('input tem aria-valuemin', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, min: 10 }
+      })
+      expect(wrapper.find('input').attributes('aria-valuemin')).toBe('10')
+    })
+
+    it('input tem aria-valuemax', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, max: 90 }
+      })
+      expect(wrapper.find('input').attributes('aria-valuemax')).toBe('90')
+    })
+
+    it('input tem aria-valuenow', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 60 }
+      })
+      expect(wrapper.find('input').attributes('aria-valuenow')).toBe('60')
+    })
+
+    it('input tem aria-valuetext com formatter', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: {
+          modelValue: 50,
+          formatter: (v: number) => `${v}%`
+        }
+      })
+      expect(wrapper.find('input').attributes('aria-valuetext')).toBe('50%')
+    })
+
+    it('error tem role alert', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, errorMessage: 'Erro' }
+      })
+      expect(wrapper.find('.dm-slider__error').attributes('role')).toBe('alert')
+    })
+
+    it('input tem aria-describedby quando há error', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50, errorMessage: 'Erro' }
+      })
+      const input = wrapper.find('input')
+      expect(input.attributes('aria-describedby')).toBeDefined()
+    })
+  })
+
+  describe('Métodos Expostos', () => {
+    it('expõe método focus', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      const exposed = wrapper.vm as any
+      expect(typeof exposed.focus).toBe('function')
+    })
+
+    it('expõe método blur', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      const exposed = wrapper.vm as any
+      expect(typeof exposed.blur).toBe('function')
+    })
+
+    it('expõe inputRef', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      const exposed = wrapper.vm as any
+      expect(exposed.inputRef).toBeDefined()
+    })
+  })
+
+  describe('CSS Variables', () => {
+    it('usa CSS Variables padronizadas', () => {
+      const wrapper = mount(DatametriaSlider, {
+        props: { modelValue: 50 }
+      })
+      expect(wrapper.find('.dm-slider').exists()).toBe(true)
+    })
+  })
+})

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

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