@datametria/vue-components 2.3.0 → 2.4.0

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

@@ -1,283 +1,283 @@
-/**
- * DatametriaButton Tests
- * @author Vander Loto - CTO DATAMETRIA
- * @date 13/11/2025
- */
-
-import { describe, it, expect } from 'vitest'
-import { mount } from '@vue/test-utils'
-import DatametriaButton from '../DatametriaButton.vue'
-import { ButtonVariant, ButtonSize } from '../../types'
-
-describe('DatametriaButton', () => {
-  describe('Rendering', () => {
-    it('should render button with text', () => {
-      const wrapper = mount(DatametriaButton, {
-        slots: { default: 'Click me' }
-      })
-
-      expect(wrapper.text()).toContain('Click me')
-      expect(wrapper.find('button').exists()).toBe(true)
-    })
-
-    it('should render with default variant and size', () => {
-      const wrapper = mount(DatametriaButton, {
-        slots: { default: 'Button' }
-      })
-
-      expect(wrapper.classes()).toContain('datametria-button--primary')
-      expect(wrapper.classes()).toContain('datametria-button--md')
-    })
-  })
-
-  describe('Variants', () => {
-    it('should render primary variant', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { variant: ButtonVariant.PRIMARY },
-        slots: { default: 'Primary' }
-      })
-
-      expect(wrapper.classes()).toContain('datametria-button--primary')
-    })
-
-    it('should render secondary variant', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { variant: ButtonVariant.SECONDARY },
-        slots: { default: 'Secondary' }
-      })
-
-      expect(wrapper.classes()).toContain('datametria-button--secondary')
-    })
-
-    it('should render outline variant', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { variant: ButtonVariant.OUTLINE },
-        slots: { default: 'Outline' }
-      })
-
-      expect(wrapper.classes()).toContain('datametria-button--outline')
-    })
-
-    it('should render ghost variant', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { variant: ButtonVariant.GHOST },
-        slots: { default: 'Ghost' }
-      })
-
-      expect(wrapper.classes()).toContain('datametria-button--ghost')
-    })
-  })
-
-  describe('Sizes', () => {
-    it('should render small size', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { size: ButtonSize.SM },
-        slots: { default: 'Small' }
-      })
-
-      expect(wrapper.classes()).toContain('datametria-button--sm')
-    })
-
-    it('should render medium size', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { size: ButtonSize.MD },
-        slots: { default: 'Medium' }
-      })
-
-      expect(wrapper.classes()).toContain('datametria-button--md')
-    })
-
-    it('should render large size', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { size: ButtonSize.LG },
-        slots: { default: 'Large' }
-      })
-
-      expect(wrapper.classes()).toContain('datametria-button--lg')
-    })
-  })
-
-  describe('States', () => {
-    it('should be disabled when disabled prop is true', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { disabled: true },
-        slots: { default: 'Disabled' }
-      })
-
-      expect(wrapper.attributes('disabled')).toBeDefined()
-      expect(wrapper.classes()).toContain('datametria-button--disabled')
-    })
-
-    it('should show loading spinner', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { loading: true },
-        slots: { default: 'Loading' }
-      })
-
-      expect(wrapper.find('.spinner').exists()).toBe(true)
-      expect(wrapper.attributes('aria-busy')).toBe('true')
-    })
-
-    it('should be disabled when loading', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { loading: true },
-        slots: { default: 'Loading' }
-      })
-
-      expect(wrapper.attributes('disabled')).toBeDefined()
-    })
-
-    it('should render full width', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { fullWidth: true },
-        slots: { default: 'Full Width' }
-      })
-
-      expect(wrapper.classes()).toContain('datametria-button--full-width')
-    })
-  })
-
-  describe('Button Types', () => {
-    it('should render as button type by default', () => {
-      const wrapper = mount(DatametriaButton, {
-        slots: { default: 'Button' }
-      })
-
-      expect(wrapper.attributes('type')).toBe('button')
-    })
-
-    it('should render as submit type', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { type: 'submit' },
-        slots: { default: 'Submit' }
-      })
-
-      expect(wrapper.attributes('type')).toBe('submit')
-    })
-
-    it('should render as reset type', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { type: 'reset' },
-        slots: { default: 'Reset' }
-      })
-
-      expect(wrapper.attributes('type')).toBe('reset')
-    })
-  })
-
-  describe('Events', () => {
-    it('should emit click event', async () => {
-      const wrapper = mount(DatametriaButton, {
-        slots: { default: 'Click' }
-      })
-
-      await wrapper.trigger('click')
-
-      expect(wrapper.emitted('click')).toBeTruthy()
-      expect(wrapper.emitted('click')?.[0]).toBeDefined()
-    })
-
-    it('should not emit click when disabled', async () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { disabled: true },
-        slots: { default: 'Disabled' }
-      })
-
-      await wrapper.trigger('click')
-
-      expect(wrapper.emitted('click')).toBeFalsy()
-    })
-
-    it('should not emit click when loading', async () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { loading: true },
-        slots: { default: 'Loading' }
-      })
-
-      await wrapper.trigger('click')
-
-      expect(wrapper.emitted('click')).toBeFalsy()
-    })
-  })
-
-  describe('Accessibility', () => {
-    it('should have aria-disabled when disabled', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { disabled: true },
-        slots: { default: 'Disabled' }
-      })
-
-      expect(wrapper.attributes('aria-disabled')).toBe('true')
-    })
-
-    it('should have aria-busy when loading', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { loading: true },
-        slots: { default: 'Loading' }
-      })
-
-      expect(wrapper.attributes('aria-busy')).toBe('true')
-    })
-
-    it('should have spinner with role and label', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { loading: true },
-        slots: { default: 'Loading' }
-      })
-
-      const spinner = wrapper.find('.spinner')
-      expect(spinner.attributes('role')).toBe('status')
-      expect(spinner.attributes('aria-label')).toBe('Carregando')
-    })
-  })
-
-  describe('CSS Variables Integration', () => {
-    it('should use CSS variables for styling', () => {
-      const wrapper = mount(DatametriaButton, {
-        slots: { default: 'Button' }
-      })
-
-      const button = wrapper.find('button')
-      const style = getComputedStyle(button.element)
-      
-      // Verifica que o componente está pronto para usar CSS variables
-      expect(button.classes()).toContain('datametria-button')
-    })
-
-    it('should apply variant classes for theming', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: { variant: ButtonVariant.PRIMARY },
-        slots: { default: 'Primary' }
-      })
-
-      expect(wrapper.classes()).toContain('datametria-button--primary')
-    })
-  })
-
-  describe('Backward Compatibility', () => {
-    it('should maintain existing API', () => {
-      const wrapper = mount(DatametriaButton, {
-        props: {
-          variant: ButtonVariant.PRIMARY,
-          size: ButtonSize.MD,
-          disabled: false,
-          loading: false,
-          fullWidth: false,
-          type: 'button'
-        },
-        slots: { default: 'Button' }
-      })
-
-      expect(wrapper.exists()).toBe(true)
-    })
-
-    it('should work without ThemeProvider (fallback values)', () => {
-      const wrapper = mount(DatametriaButton, {
-        slots: { default: 'Button' }
-      })
-
-      expect(wrapper.find('button').exists()).toBe(true)
-      expect(wrapper.classes()).toContain('datametria-button--primary')
-    })
-  })
-})
+/**
+ * DatametriaButton Tests
+ * @author Vander Loto - CTO DATAMETRIA
+ * @date 13/11/2025
+ */
+
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DatametriaButton from '../DatametriaButton.vue'
+import { ButtonVariant, ButtonSize } from '../../types'
+
+describe('DatametriaButton', () => {
+  describe('Rendering', () => {
+    it('should render button with text', () => {
+      const wrapper = mount(DatametriaButton, {
+        slots: { default: 'Click me' }
+      })
+
+      expect(wrapper.text()).toContain('Click me')
+      expect(wrapper.find('button').exists()).toBe(true)
+    })
+
+    it('should render with default variant and size', () => {
+      const wrapper = mount(DatametriaButton, {
+        slots: { default: 'Button' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--primary')
+      expect(wrapper.classes()).toContain('datametria-button--md')
+    })
+  })
+
+  describe('Variants', () => {
+    it('should render primary variant', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { variant: ButtonVariant.PRIMARY },
+        slots: { default: 'Primary' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--primary')
+    })
+
+    it('should render secondary variant', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { variant: ButtonVariant.SECONDARY },
+        slots: { default: 'Secondary' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--secondary')
+    })
+
+    it('should render outline variant', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { variant: ButtonVariant.OUTLINE },
+        slots: { default: 'Outline' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--outline')
+    })
+
+    it('should render ghost variant', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { variant: ButtonVariant.GHOST },
+        slots: { default: 'Ghost' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--ghost')
+    })
+  })
+
+  describe('Sizes', () => {
+    it('should render small size', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { size: ButtonSize.SM },
+        slots: { default: 'Small' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--sm')
+    })
+
+    it('should render medium size', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { size: ButtonSize.MD },
+        slots: { default: 'Medium' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--md')
+    })
+
+    it('should render large size', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { size: ButtonSize.LG },
+        slots: { default: 'Large' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--lg')
+    })
+  })
+
+  describe('States', () => {
+    it('should be disabled when disabled prop is true', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { disabled: true },
+        slots: { default: 'Disabled' }
+      })
+
+      expect(wrapper.attributes('disabled')).toBeDefined()
+      expect(wrapper.classes()).toContain('datametria-button--disabled')
+    })
+
+    it('should show loading spinner', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { loading: true },
+        slots: { default: 'Loading' }
+      })
+
+      expect(wrapper.find('.spinner').exists()).toBe(true)
+      expect(wrapper.attributes('aria-busy')).toBe('true')
+    })
+
+    it('should be disabled when loading', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { loading: true },
+        slots: { default: 'Loading' }
+      })
+
+      expect(wrapper.attributes('disabled')).toBeDefined()
+    })
+
+    it('should render full width', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { fullWidth: true },
+        slots: { default: 'Full Width' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--full-width')
+    })
+  })
+
+  describe('Button Types', () => {
+    it('should render as button type by default', () => {
+      const wrapper = mount(DatametriaButton, {
+        slots: { default: 'Button' }
+      })
+
+      expect(wrapper.attributes('type')).toBe('button')
+    })
+
+    it('should render as submit type', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { type: 'submit' },
+        slots: { default: 'Submit' }
+      })
+
+      expect(wrapper.attributes('type')).toBe('submit')
+    })
+
+    it('should render as reset type', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { type: 'reset' },
+        slots: { default: 'Reset' }
+      })
+
+      expect(wrapper.attributes('type')).toBe('reset')
+    })
+  })
+
+  describe('Events', () => {
+    it('should emit click event', async () => {
+      const wrapper = mount(DatametriaButton, {
+        slots: { default: 'Click' }
+      })
+
+      await wrapper.trigger('click')
+
+      expect(wrapper.emitted('click')).toBeTruthy()
+      expect(wrapper.emitted('click')?.[0]).toBeDefined()
+    })
+
+    it('should not emit click when disabled', async () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { disabled: true },
+        slots: { default: 'Disabled' }
+      })
+
+      await wrapper.trigger('click')
+
+      expect(wrapper.emitted('click')).toBeFalsy()
+    })
+
+    it('should not emit click when loading', async () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { loading: true },
+        slots: { default: 'Loading' }
+      })
+
+      await wrapper.trigger('click')
+
+      expect(wrapper.emitted('click')).toBeFalsy()
+    })
+  })
+
+  describe('Accessibility', () => {
+    it('should have aria-disabled when disabled', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { disabled: true },
+        slots: { default: 'Disabled' }
+      })
+
+      expect(wrapper.attributes('aria-disabled')).toBe('true')
+    })
+
+    it('should have aria-busy when loading', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { loading: true },
+        slots: { default: 'Loading' }
+      })
+
+      expect(wrapper.attributes('aria-busy')).toBe('true')
+    })
+
+    it('should have spinner with role and label', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { loading: true },
+        slots: { default: 'Loading' }
+      })
+
+      const spinner = wrapper.find('.spinner')
+      expect(spinner.attributes('role')).toBe('status')
+      expect(spinner.attributes('aria-label')).toBe('Carregando')
+    })
+  })
+
+  describe('CSS Variables Integration', () => {
+    it('should use CSS variables for styling', () => {
+      const wrapper = mount(DatametriaButton, {
+        slots: { default: 'Button' }
+      })
+
+      const button = wrapper.find('button')
+      const style = getComputedStyle(button.element)
+      
+      // Verifica que o componente está pronto para usar CSS variables
+      expect(button.classes()).toContain('datametria-button')
+    })
+
+    it('should apply variant classes for theming', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: { variant: ButtonVariant.PRIMARY },
+        slots: { default: 'Primary' }
+      })
+
+      expect(wrapper.classes()).toContain('datametria-button--primary')
+    })
+  })
+
+  describe('Backward Compatibility', () => {
+    it('should maintain existing API', () => {
+      const wrapper = mount(DatametriaButton, {
+        props: {
+          variant: ButtonVariant.PRIMARY,
+          size: ButtonSize.MD,
+          disabled: false,
+          loading: false,
+          fullWidth: false,
+          type: 'button'
+        },
+        slots: { default: 'Button' }
+      })
+
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it('should work without ThemeProvider (fallback values)', () => {
+      const wrapper = mount(DatametriaButton, {
+        slots: { default: 'Button' }
+      })
+
+      expect(wrapper.find('button').exists()).toBe(true)
+      expect(wrapper.classes()).toContain('datametria-button--primary')
+    })
+  })
+})