@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

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

@@ -1,347 +1,347 @@
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Button from '@components/Button/Button.vue';
-
-// Mock siteColors
-vi.mock('@/utils/index', () => ({
-  siteColors: {
-    button_default_bg: '#172774',
-    button_default_text: '#FFFFFF',
-    button_outline_border: '#172774',
-    button_outline_default_text: '#172774'
-  }
-}));
-
-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).toBeNull(); // color prop defaults to null; actual color comes from siteColors via buttonColor computed
-      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);
-    });
-  });
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Button from '@components/Button/Button.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    button_default_bg: '#172774',
+    button_default_text: '#FFFFFF',
+    button_outline_border: '#172774',
+    button_outline_default_text: '#172774'
+  }
+}));
+
+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).toBeNull(); // color prop defaults to null; actual color comes from siteColors via buttonColor computed
+      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);
+    });
+  });
 });