@zap-wunschlachen/wl-shared-components 1.0.0

package/tests/unit/components/Core/Button.spec.ts

@@ -0,0 +1,337 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Button from '@components/Button/Button.vue';
+
+describe('Button', () => {
+  // Test default props and rendering
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(Button);
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.text()).toBe('Button');
+      expect(wrapper.vm.color).toBe('#172774');
+      expect(wrapper.vm.variant).toBe('flat');
+      expect(wrapper.vm.size).toBe('default');
+      expect(wrapper.vm.density).toBe('default');
+      expect(wrapper.vm.disabled).toBe(false);
+      expect(wrapper.vm.loading).toBe(false);
+      expect(wrapper.vm.readonly).toBe(false);
+    });
+
+    it('renders with custom label', () => {
+      const wrapper = mount(Button, {
+        props: {
+          label: 'Custom Button Text'
+        }
+      });
+      
+      expect(wrapper.text()).toBe('Custom Button Text');
+    });
+
+    it('applies the wl-button class', () => {
+      const wrapper = mount(Button);
+      expect(wrapper.find('.wl-button').exists()).toBe(true);
+    });
+  });
+
+  // Test prop validation and customization
+  describe('Props', () => {
+    it('accepts and applies color prop', () => {
+      const wrapper = mount(Button, {
+        props: {
+          color: '#FF5722'
+        }
+      });
+      
+      expect(wrapper.vm.color).toBe('#FF5722');
+    });
+
+    it('accepts and applies variant prop', () => {
+      const variants = ['flat', 'outlined', 'contained', 'tonal', 'text', 'plain'];
+      
+      variants.forEach(variant => {
+        const wrapper = mount(Button, {
+          props: { variant }
+        });
+        
+        expect(wrapper.vm.variant).toBe(variant);
+      });
+    });
+
+    it('accepts and applies size prop', () => {
+      const sizes = ['small', 'default', 'large', 'x-large'];
+      
+      sizes.forEach(size => {
+        const wrapper = mount(Button, {
+          props: { size }
+        });
+        
+        expect(wrapper.vm.size).toBe(size);
+      });
+    });
+
+    it('accepts and applies density prop', () => {
+      const densities = ['default', 'comfortable', 'compact'];
+      
+      densities.forEach(density => {
+        const wrapper = mount(Button, {
+          props: { density }
+        });
+        
+        expect(wrapper.vm.density).toBe(density);
+      });
+    });
+
+    it('handles disabled state', () => {
+      const wrapper = mount(Button, {
+        props: {
+          disabled: true
+        }
+      });
+      
+      expect(wrapper.vm.disabled).toBe(true);
+    });
+
+    it('handles loading state', () => {
+      const wrapper = mount(Button, {
+        props: {
+          loading: true
+        }
+      });
+      
+      expect(wrapper.vm.loading).toBe(true);
+    });
+
+    it('handles readonly state', () => {
+      const wrapper = mount(Button, {
+        props: {
+          readonly: true
+        }
+      });
+      
+      expect(wrapper.vm.readonly).toBe(true);
+    });
+  });
+
+  // Test icons
+  describe('Icons', () => {
+    it('renders with prepend icon', () => {
+      const wrapper = mount(Button, {
+        props: {
+          prependIcon: 'mdi-home'
+        }
+      });
+      
+      expect(wrapper.vm.prependIcon).toBe('mdi-home');
+    });
+
+    it('renders with append icon', () => {
+      const wrapper = mount(Button, {
+        props: {
+          appendIcon: 'mdi-arrow-right'
+        }
+      });
+      
+      expect(wrapper.vm.appendIcon).toBe('mdi-arrow-right');
+    });
+
+    it('renders with both prepend and append icons', () => {
+      const wrapper = mount(Button, {
+        props: {
+          prependIcon: 'mdi-home',
+          appendIcon: 'mdi-arrow-right'
+        }
+      });
+      
+      expect(wrapper.vm.prependIcon).toBe('mdi-home');
+      expect(wrapper.vm.appendIcon).toBe('mdi-arrow-right');
+    });
+
+    it('handles flexible appendIcon prop type', () => {
+      const wrapper = mount(Button, {
+        props: {
+          appendIcon: 'mdi-test'
+        }
+      });
+      
+      expect(wrapper.vm.appendIcon).toBe('mdi-test');
+      
+      // Test with different types since appendIcon has no type constraint
+      const wrapperWithObject = mount(Button, {
+        props: {
+          appendIcon: { icon: 'custom' }
+        }
+      });
+      
+      expect(wrapperWithObject.vm.appendIcon).toEqual({ icon: 'custom' });
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('has data-testid for testing', () => {
+      const wrapper = mount(Button);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('is accessible when disabled', () => {
+      const wrapper = mount(Button, {
+        props: {
+          disabled: true,
+          label: 'Disabled Button'
+        }
+      });
+      
+      expect(wrapper.vm.disabled).toBe(true);
+      expect(wrapper.text()).toBe('Disabled Button');
+    });
+
+    it('is accessible when loading', () => {
+      const wrapper = mount(Button, {
+        props: {
+          loading: true,
+          label: 'Loading Button'
+        }
+      });
+      
+      expect(wrapper.vm.loading).toBe(true);
+      expect(wrapper.text()).toBe('Loading Button');
+    });
+  });
+
+  // Test edge cases and error conditions
+  describe('Edge Cases', () => {
+    it('handles empty label', () => {
+      const wrapper = mount(Button, {
+        props: {
+          label: ''
+        }
+      });
+      
+      expect(wrapper.text()).toBe('');
+    });
+
+    it('handles undefined/null props gracefully', () => {
+      const wrapper = mount(Button, {
+        props: {
+          prependIcon: undefined,
+          appendIcon: null,
+          label: null
+        }
+      });
+      
+      expect(wrapper.vm.prependIcon).toBeUndefined();
+      expect(wrapper.vm.appendIcon).toBeNull();
+      expect(wrapper.vm.label).toBeNull();
+    });
+
+    it('handles very long label text', () => {
+      const longLabel = 'This is a very long button label that might cause layout issues if not handled properly';
+      const wrapper = mount(Button, {
+        props: {
+          label: longLabel
+        }
+      });
+      
+      expect(wrapper.text()).toBe(longLabel);
+    });
+  });
+
+  // Test component behavior with different states
+  describe('State Combinations', () => {
+    it('handles loading and disabled states together', () => {
+      const wrapper = mount(Button, {
+        props: {
+          loading: true,
+          disabled: true
+        }
+      });
+      
+      expect(wrapper.vm.loading).toBe(true);
+      expect(wrapper.vm.disabled).toBe(true);
+    });
+
+    it('handles readonly and disabled states together', () => {
+      const wrapper = mount(Button, {
+        props: {
+          readonly: true,
+          disabled: true
+        }
+      });
+      
+      expect(wrapper.vm.readonly).toBe(true);
+      expect(wrapper.vm.disabled).toBe(true);
+    });
+
+    it('handles all states together', () => {
+      const wrapper = mount(Button, {
+        props: {
+          loading: true,
+          disabled: true,
+          readonly: true,
+          variant: 'outlined',
+          size: 'large',
+          color: '#FF5722',
+          label: 'Complex Button'
+        }
+      });
+      
+      expect(wrapper.vm.loading).toBe(true);
+      expect(wrapper.vm.disabled).toBe(true);
+      expect(wrapper.vm.readonly).toBe(true);
+      expect(wrapper.vm.variant).toBe('outlined');
+      expect(wrapper.vm.size).toBe('large');
+      expect(wrapper.vm.color).toBe('#FF5722');
+      expect(wrapper.text()).toBe('Complex Button');
+    });
+  });
+
+  // Test Vuetify integration
+  describe('Vuetify Integration', () => {
+    it('passes all props to v-btn correctly', () => {
+      const wrapper = mount(Button, {
+        props: {
+          color: '#FF5722',
+          variant: 'outlined',
+          size: 'large',
+          density: 'comfortable',
+          disabled: true,
+          loading: true,
+          readonly: true,
+          prependIcon: 'mdi-home',
+          appendIcon: 'mdi-arrow-right'
+        }
+      });
+      
+      const vBtn = wrapper.find('[data-testid="root"]');
+      expect(vBtn.exists()).toBe(true);
+    });
+
+    it('applies rounded="lg" attribute', () => {
+      const wrapper = mount(Button);
+      // Since we're using stubs, we can't directly test Vuetify props
+      // but we can verify the component renders correctly
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies text-none class for Vuetify text transformation', () => {
+      const wrapper = mount(Button);
+      expect(wrapper.find('.text-none').exists()).toBe(true);
+    });
+  });
+
+  // Test CSS styling
+  describe('Styling', () => {
+    it('applies custom CSS for outlined variant border', () => {
+      const wrapper = mount(Button, {
+        props: {
+          variant: 'outlined'
+        }
+      });
+      
+      // Check if the component has the necessary classes
+      expect(wrapper.find('.wl-button').exists()).toBe(true);
+    });
+  });
+});