@datametria/vue-components 1.2.0 → 2.1.0

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

@@ -0,0 +1,291 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaFileUpload from '../DatametriaFileUpload.vue'
+import { datametriaTheme } from '../../theme/presets'
+import { THEME_INJECTION_KEY } from '../../theme/constants'
+
+const createWrapper = (props = {}, themeProps = {}) => {
+  return mount(DatametriaFileUpload, {
+    props,
+    global: {
+      plugins: [{
+        install(app) {
+          app.provide(THEME_INJECTION_KEY, datametriaTheme)
+        }
+      }]
+    }
+  })
+}
+
+// Mock File API
+const createMockFile = (name: string, size: number, type: string) => {
+  const file = new File([''], name, { type })
+  Object.defineProperty(file, 'size', { value: size })
+  return file
+}
+
+describe('DatametriaFileUpload', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders correctly', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.find('.dm-file-upload').exists()).toBe(true)
+  })
+
+  it('applies theme colors correctly', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.find('.dm-file-upload').exists()).toBe(true)
+  })
+
+  it('displays upload area', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.find('.dm-file-upload__area').exists()).toBe(true)
+  })
+
+  it('shows upload text and icon', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.find('.dm-file-upload__icon').exists()).toBe(true)
+    expect(wrapper.find('.dm-file-upload__text').exists()).toBe(true)
+  })
+
+  it('handles file selection via input', async () => {
+    const wrapper = createWrapper()
+    const input = wrapper.find('.dm-file-upload__input')
+    const file = createMockFile('test.txt', 1024, 'text/plain')
+    
+    Object.defineProperty(input.element, 'files', {
+      value: [file],
+      writable: false
+    })
+    
+    await input.trigger('change')
+    
+    const fileUpload = wrapper.findComponent(DatametriaFileUpload)
+    expect(fileUpload.emitted('update:modelValue')).toBeTruthy()
+  })
+
+  it('handles drag and drop', async () => {
+    const wrapper = createWrapper()
+    const dropArea = wrapper.find('.dm-file-upload__area')
+    const file = createMockFile('test.txt', 1024, 'text/plain')
+    
+    const mockDataTransfer = {
+      files: [file]
+    }
+    
+    await dropArea.trigger('drop', {
+      dataTransfer: mockDataTransfer
+    })
+    
+    const fileUpload = wrapper.findComponent(DatametriaFileUpload)
+    expect(fileUpload.emitted('update:modelValue')).toBeTruthy()
+  })
+
+  it('shows drag over state', async () => {
+    const wrapper = createWrapper()
+    const dropArea = wrapper.find('.dm-file-upload__area')
+    
+    await dropArea.trigger('dragenter')
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.dm-file-upload__area--dragover').exists()).toBe(true)
+    
+    await dropArea.trigger('dragleave', {
+      relatedTarget: document.body
+    })
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('.dm-file-upload__area--dragover').exists()).toBe(false)
+  })
+
+  it('supports multiple file selection', async () => {
+    const wrapper = createWrapper({ multiple: true })
+    const input = wrapper.find('.dm-file-upload__input')
+    
+    expect(input.attributes('multiple')).toBeDefined()
+    
+    const files = [
+      createMockFile('test1.txt', 1024, 'text/plain'),
+      createMockFile('test2.txt', 2048, 'text/plain')
+    ]
+    
+    Object.defineProperty(input.element, 'files', {
+      value: files,
+      writable: false
+    })
+    
+    await input.trigger('change')
+    
+    const fileUpload = wrapper.findComponent(DatametriaFileUpload)
+    expect(fileUpload.emitted('update:modelValue')).toBeTruthy()
+  })
+
+  it('validates file types', async () => {
+    const wrapper = createWrapper({ accept: '.txt,.pdf' })
+    const input = wrapper.find('.dm-file-upload__input')
+    
+    expect(input.attributes('accept')).toBe('.txt,.pdf')
+    
+    const invalidFile = createMockFile('test.jpg', 1024, 'image/jpeg')
+    Object.defineProperty(input.element, 'files', {
+      value: [invalidFile],
+      writable: false
+    })
+    
+    await input.trigger('change')
+    await wrapper.vm.$nextTick()
+    
+    expect(wrapper.text()).toContain('Invalid file type')
+  })
+
+  it('validates file size', async () => {
+    const wrapper = createWrapper({ maxSize: 1024 }) // 1KB
+    const input = wrapper.find('.dm-file-upload__input')
+    
+    const largeFile = createMockFile('large.txt', 2048, 'text/plain') // 2KB
+    Object.defineProperty(input.element, 'files', {
+      value: [largeFile],
+      writable: false
+    })
+    
+    await input.trigger('change')
+    await wrapper.vm.$nextTick()
+    
+    expect(wrapper.text()).toContain('too large')
+  })
+
+  it('validates maximum number of files', async () => {
+    const wrapper = createWrapper({ multiple: true, maxFiles: 2 })
+    const input = wrapper.find('.dm-file-upload__input')
+    
+    const files = [
+      createMockFile('test1.txt', 1024, 'text/plain'),
+      createMockFile('test2.txt', 1024, 'text/plain'),
+      createMockFile('test3.txt', 1024, 'text/plain')
+    ]
+    
+    Object.defineProperty(input.element, 'files', {
+      value: files,
+      writable: false
+    })
+    
+    await input.trigger('change')
+    await wrapper.vm.$nextTick()
+    
+    expect(wrapper.text()).toContain('Maximum 2 files')
+  })
+
+  it('shows file list when files are selected', async () => {
+    const wrapper = createWrapper({ multiple: true })
+    const input = wrapper.find('.dm-file-upload__input')
+    
+    const files = [
+      createMockFile('test1.txt', 1024, 'text/plain'),
+      createMockFile('test2.txt', 2048, 'text/plain')
+    ]
+    
+    Object.defineProperty(input.element, 'files', {
+      value: files,
+      writable: false
+    })
+    
+    await input.trigger('change')
+    
+    expect(wrapper.find('.dm-file-upload__files').exists()).toBe(true)
+    expect(wrapper.findAll('.dm-file-upload__file')).toHaveLength(2)
+  })
+
+  it('allows file removal', async () => {
+    const wrapper = createWrapper({ multiple: true })
+    const input = wrapper.find('.dm-file-upload__input')
+    
+    const files = [
+      createMockFile('test1.txt', 1024, 'text/plain'),
+      createMockFile('test2.txt', 2048, 'text/plain')
+    ]
+    
+    Object.defineProperty(input.element, 'files', {
+      value: files,
+      writable: false
+    })
+    
+    await input.trigger('change')
+    
+    const removeButton = wrapper.find('.dm-file-upload__remove')
+    await removeButton.trigger('click')
+    
+    const fileUpload = wrapper.findComponent(DatametriaFileUpload)
+    expect(fileUpload.emitted('update:modelValue')).toBeTruthy()
+  })
+
+  it('supports disabled state', () => {
+    const wrapper = createWrapper({ disabled: true })
+    const input = wrapper.find('.dm-file-upload__input')
+    
+    expect(input.attributes('disabled')).toBeDefined()
+    expect(wrapper.find('.dm-file-upload--disabled').exists()).toBe(true)
+  })
+
+  it('shows loading state during upload', () => {
+    const wrapper = createWrapper({ loading: true })
+    expect(wrapper.find('.dm-file-upload--loading').exists()).toBe(true)
+    expect(wrapper.find('.dm-file-upload__spinner').exists()).toBe(true)
+  })
+
+  it('shows upload progress', () => {
+    const wrapper = createWrapper({ progress: 50 })
+    const progressBar = wrapper.find('.dm-file-upload__progress-bar')
+    
+    expect(progressBar.exists()).toBe(true)
+    expect(progressBar.attributes('style')).toContain('width: 50%')
+  })
+
+  it('supports custom upload text', () => {
+    const customText = 'Drop your files here'
+    const wrapper = createWrapper({ uploadText: customText })
+    
+    expect(wrapper.find('.dm-file-upload__text').text()).toContain(customText)
+  })
+
+  it('supports custom error messages', () => {
+    const errorMessage = 'Upload failed'
+    const wrapper = createWrapper({ error: errorMessage })
+    
+    expect(wrapper.find('.dm-file-upload__error').text()).toBe(errorMessage)
+  })
+
+  it('emits file-added event', async () => {
+    const wrapper = createWrapper()
+    const input = wrapper.find('.dm-file-upload__input')
+    const file = createMockFile('test.txt', 1024, 'text/plain')
+    
+    Object.defineProperty(input.element, 'files', {
+      value: [file],
+      writable: false
+    })
+    
+    await input.trigger('change')
+    
+    const fileUpload = wrapper.findComponent(DatametriaFileUpload)
+    expect(fileUpload.emitted('file-added')).toBeTruthy()
+  })
+
+  it('emits file-removed event', async () => {
+    const wrapper = createWrapper({ multiple: true })
+    const input = wrapper.find('.dm-file-upload__input')
+    
+    const files = [createMockFile('test.txt', 1024, 'text/plain')]
+    Object.defineProperty(input.element, 'files', {
+      value: files,
+      writable: false
+    })
+    
+    await input.trigger('change')
+    
+    const removeButton = wrapper.find('.dm-file-upload__remove')
+    await removeButton.trigger('click')
+    
+    const fileUpload = wrapper.findComponent(DatametriaFileUpload)
+    expect(fileUpload.emitted('file-removed')).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,137 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaFloatingBar from '../DatametriaFloatingBar.vue'
+
+describe('DatametriaFloatingBar', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaFloatingBar)
+    expect(wrapper.find('.dm-floating-bar').exists()).toBe(true)
+  })
+
+  it('applies position classes', () => {
+    const positions = ['top', 'bottom', 'left', 'right'] as const
+    positions.forEach(position => {
+      const wrapper = mount(DatametriaFloatingBar, { props: { position } })
+      expect(wrapper.find(`.dm-floating-bar--${position}`).exists()).toBe(true)
+    })
+  })
+
+  it('applies variant classes', () => {
+    const variants = ['light', 'dark', 'primary'] as const
+    variants.forEach(variant => {
+      const wrapper = mount(DatametriaFloatingBar, { props: { variant } })
+      expect(wrapper.find(`.dm-floating-bar--${variant}`).exists()).toBe(true)
+    })
+  })
+
+  it('applies shadow class when shadow is true', () => {
+    const wrapper = mount(DatametriaFloatingBar, { props: { shadow: true } })
+    expect(wrapper.find('.dm-floating-bar--shadow').exists()).toBe(true)
+  })
+
+  it('does not apply shadow class when shadow is false', () => {
+    const wrapper = mount(DatametriaFloatingBar, { props: { shadow: false } })
+    expect(wrapper.find('.dm-floating-bar--shadow').exists()).toBe(false)
+  })
+
+  it('applies rounded class when rounded is true', () => {
+    const wrapper = mount(DatametriaFloatingBar, { props: { rounded: true } })
+    expect(wrapper.find('.dm-floating-bar--rounded').exists()).toBe(true)
+  })
+
+  it('does not apply rounded class when rounded is false', () => {
+    const wrapper = mount(DatametriaFloatingBar, { props: { rounded: false } })
+    expect(wrapper.find('.dm-floating-bar--rounded').exists()).toBe(false)
+  })
+
+  it('renders slot content', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      slots: { default: '<button class="test-button">Action</button>' }
+    })
+    expect(wrapper.find('.test-button').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Action')
+  })
+
+  it('applies correct position style for top', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      props: { position: 'top', offset: '20px' }
+    })
+    const style = wrapper.find('.dm-floating-bar').attributes('style')
+    expect(style).toContain('top: 20px')
+  })
+
+  it('applies correct position style for bottom', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      props: { position: 'bottom', offset: '24px' }
+    })
+    const style = wrapper.find('.dm-floating-bar').attributes('style')
+    expect(style).toContain('bottom: 24px')
+  })
+
+  it('applies correct position style for left', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      props: { position: 'left', offset: '32px' }
+    })
+    const style = wrapper.find('.dm-floating-bar').attributes('style')
+    expect(style).toContain('left: 32px')
+  })
+
+  it('applies correct position style for right', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      props: { position: 'right', offset: '40px' }
+    })
+    const style = wrapper.find('.dm-floating-bar').attributes('style')
+    expect(style).toContain('right: 40px')
+  })
+
+  it('uses default offset when not provided', () => {
+    const wrapper = mount(DatametriaFloatingBar, { props: { position: 'bottom' } })
+    const style = wrapper.find('.dm-floating-bar').attributes('style')
+    expect(style).toContain('bottom: 16px')
+  })
+
+  it('has correct aria attributes', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      props: { ariaLabel: 'Floating toolbar' }
+    })
+    const bar = wrapper.find('.dm-floating-bar')
+    expect(bar.attributes('role')).toBe('toolbar')
+    expect(bar.attributes('aria-label')).toBe('Floating toolbar')
+  })
+
+  it('renders content wrapper', () => {
+    const wrapper = mount(DatametriaFloatingBar)
+    expect(wrapper.find('.dm-floating-bar__content').exists()).toBe(true)
+  })
+
+  it('applies all classes correctly', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      props: {
+        position: 'top',
+        variant: 'primary',
+        shadow: true,
+        rounded: true
+      }
+    })
+    const bar = wrapper.find('.dm-floating-bar')
+    expect(bar.classes()).toContain('dm-floating-bar--top')
+    expect(bar.classes()).toContain('dm-floating-bar--primary')
+    expect(bar.classes()).toContain('dm-floating-bar--shadow')
+    expect(bar.classes()).toContain('dm-floating-bar--rounded')
+  })
+
+  it('renders multiple action buttons', () => {
+    const wrapper = mount(DatametriaFloatingBar, {
+      slots: {
+        default: `
+          <button class="btn-1">Action 1</button>
+          <button class="btn-2">Action 2</button>
+          <button class="btn-3">Action 3</button>
+        `
+      }
+    })
+    expect(wrapper.find('.btn-1').exists()).toBe(true)
+    expect(wrapper.find('.btn-2').exists()).toBe(true)
+    expect(wrapper.find('.btn-3').exists()).toBe(true)
+  })
+})

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

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

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

@@ -0,0 +1,72 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaInput from '../DatametriaInput.vue'
+
+describe('DatametriaInput', () => {
+  it('renders correctly', () => {
+    const wrapper = mount(DatametriaInput)
+    expect(wrapper.find('.datametria-input').exists()).toBe(true)
+  })
+
+  it('renders label when provided', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { label: 'Test Label' }
+    })
+    expect(wrapper.find('.datametria-input__label').text()).toContain('Test Label')
+  })
+
+  it('shows required asterisk when required', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { label: 'Test', required: true }
+    })
+    expect(wrapper.find('.datametria-input__required').exists()).toBe(true)
+  })
+
+  it('binds modelValue correctly', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { modelValue: 'test value' }
+    })
+    expect((wrapper.find('input').element as HTMLInputElement).value).toBe('test value')
+  })
+
+  it('emits update:modelValue on input', async () => {
+    const wrapper = mount(DatametriaInput)
+    const input = wrapper.find('input')
+    await input.setValue('new value')
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
+  })
+
+  it('applies disabled state', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { disabled: true }
+    })
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+  })
+
+  it('shows error message when provided', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { errorMessage: 'Error text' }
+    })
+    expect(wrapper.find('.datametria-input__error').text()).toBe('Error text')
+  })
+
+  it('applies error class when error exists', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { errorMessage: 'Error' }
+    })
+    expect(wrapper.find('.datametria-input__field--error').exists()).toBe(true)
+  })
+
+  it('applies placeholder', () => {
+    const wrapper = mount(DatametriaInput, {
+      props: { placeholder: 'Enter text' }
+    })
+    expect(wrapper.find('input').attributes('placeholder')).toBe('Enter text')
+  })
+
+  it('uses CSS variables with fallbacks', () => {
+    const wrapper = mount(DatametriaInput)
+    const styles = wrapper.find('.datametria-input').attributes('style')
+    expect(wrapper.html()).toContain('datametria-input')
+  })
+})