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

package/tests/unit/components/Accordion/AccordionItem.spec.ts

@@ -1,257 +1,257 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import AccordionItem from '@components/Accordion/AccordionItem.vue';
-
-describe('AccordionItem', () => {
-  describe('Default Behavior', () => {
-    it('renders with default props', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1'
-        }
-      });
-
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.vm.title).toBe('Default Title');
-      expect(wrapper.vm.text).toBe('Default text');
-      expect(wrapper.vm.variant).toBe('default');
-      expect(wrapper.vm.bgColor).toBe('transparent');
-    });
-
-    it('renders with custom title and text', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          title: 'Custom Title',
-          text: 'Custom content text'
-        }
-      });
-
-      expect(wrapper.vm.title).toBe('Custom Title');
-      expect(wrapper.vm.text).toBe('Custom content text');
-    });
-  });
-
-  describe('Props', () => {
-    it('accepts and applies variant prop - default', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          variant: 'default'
-        }
-      });
-
-      expect(wrapper.vm.variant).toBe('default');
-      expect(wrapper.find('.accordion-item--default').exists()).toBe(true);
-    });
-
-    it('accepts and applies variant prop - end', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          variant: 'end'
-        }
-      });
-
-      expect(wrapper.vm.variant).toBe('end');
-      expect(wrapper.find('.accordion-item--end').exists()).toBe(true);
-    });
-
-    it('accepts string value', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'string-value'
-        }
-      });
-
-      expect(wrapper.vm.value).toBe('string-value');
-    });
-
-    it('accepts number value', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 42
-        }
-      });
-
-      expect(wrapper.vm.value).toBe(42);
-    });
-
-    it('accepts custom background color', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          bgColor: '#FFFFFF'
-        }
-      });
-
-      expect(wrapper.vm.bgColor).toBe('#FFFFFF');
-    });
-  });
-
-  describe('Slots', () => {
-    it('supports title slot configuration', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1'
-        },
-        slots: {
-          title: '<span class="custom-title">Slot Title</span>'
-        }
-      });
-
-      // Component renders with slot configuration
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('supports content slot configuration', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1'
-        },
-        slots: {
-          content: '<div class="custom-content">Slot Content</div>'
-        }
-      });
-
-      // Component renders with slot configuration
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('uses title prop as default content', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          title: 'Prop Title'
-        }
-      });
-
-      expect(wrapper.vm.title).toBe('Prop Title');
-    });
-
-    it('uses text prop as default content', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          text: 'Prop Text Content'
-        }
-      });
-
-      expect(wrapper.vm.text).toBe('Prop Text Content');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('renders with data-testid for testing', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          title: 'Accessible Title',
-          text: 'Test Content'
-        }
-      });
-
-      // Component renders with data-testid for testing accessibility
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('provides title and text for screen readers', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          title: 'Accessible Title',
-          text: 'Test Content'
-        }
-      });
-
-      // Title and text props are set for accessibility
-      expect(wrapper.vm.title).toBe('Accessible Title');
-      expect(wrapper.vm.text).toBe('Test Content');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles empty title', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          title: ''
-        }
-      });
-
-      expect(wrapper.vm.title).toBe('');
-    });
-
-    it('handles empty text', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          text: ''
-        }
-      });
-
-      expect(wrapper.vm.text).toBe('');
-    });
-
-    it('handles very long title text', () => {
-      const longTitle = 'A'.repeat(500);
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          title: longTitle
-        }
-      });
-
-      expect(wrapper.vm.title).toBe(longTitle);
-    });
-
-    it('handles special characters in title and text', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          title: 'Title with <special> & "characters"',
-          text: 'Content with äöü ñ émojis 🎉'
-        }
-      });
-
-      expect(wrapper.vm.title).toBe('Title with <special> & "characters"');
-      expect(wrapper.vm.text).toBe('Content with äöü ñ émojis 🎉');
-    });
-
-    it('handles value of 0', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 0
-        }
-      });
-
-      expect(wrapper.vm.value).toBe(0);
-    });
-  });
-
-  describe('Variant Styling', () => {
-    it('applies accordion-item--default class for default variant', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          variant: 'default'
-        }
-      });
-
-      expect(wrapper.find('.accordion-item--default').exists()).toBe(true);
-      expect(wrapper.find('.accordion-item--end').exists()).toBe(false);
-    });
-
-    it('applies accordion-item--end class for end variant', () => {
-      const wrapper = mount(AccordionItem, {
-        props: {
-          value: 'panel-1',
-          variant: 'end'
-        }
-      });
-
-      expect(wrapper.find('.accordion-item--end').exists()).toBe(true);
-      expect(wrapper.find('.accordion-item--default').exists()).toBe(false);
-    });
-  });
-});
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AccordionItem from '@components/Accordion/AccordionItem.vue';
+
+describe('AccordionItem', () => {
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1'
+        }
+      });
+
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.vm.title).toBe('Default Title');
+      expect(wrapper.vm.text).toBe('Default text');
+      expect(wrapper.vm.variant).toBe('default');
+      expect(wrapper.vm.bgColor).toBe('transparent');
+    });
+
+    it('renders with custom title and text', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: 'Custom Title',
+          text: 'Custom content text'
+        }
+      });
+
+      expect(wrapper.vm.title).toBe('Custom Title');
+      expect(wrapper.vm.text).toBe('Custom content text');
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts and applies variant prop - default', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          variant: 'default'
+        }
+      });
+
+      expect(wrapper.vm.variant).toBe('default');
+      expect(wrapper.find('.accordion-item--default').exists()).toBe(true);
+    });
+
+    it('accepts and applies variant prop - end', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          variant: 'end'
+        }
+      });
+
+      expect(wrapper.vm.variant).toBe('end');
+      expect(wrapper.find('.accordion-item--end').exists()).toBe(true);
+    });
+
+    it('accepts string value', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'string-value'
+        }
+      });
+
+      expect(wrapper.vm.value).toBe('string-value');
+    });
+
+    it('accepts number value', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 42
+        }
+      });
+
+      expect(wrapper.vm.value).toBe(42);
+    });
+
+    it('accepts custom background color', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          bgColor: '#FFFFFF'
+        }
+      });
+
+      expect(wrapper.vm.bgColor).toBe('#FFFFFF');
+    });
+  });
+
+  describe('Slots', () => {
+    it('supports title slot configuration', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1'
+        },
+        slots: {
+          title: '<span class="custom-title">Slot Title</span>'
+        }
+      });
+
+      // Component renders with slot configuration
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('supports content slot configuration', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1'
+        },
+        slots: {
+          content: '<div class="custom-content">Slot Content</div>'
+        }
+      });
+
+      // Component renders with slot configuration
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('uses title prop as default content', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: 'Prop Title'
+        }
+      });
+
+      expect(wrapper.vm.title).toBe('Prop Title');
+    });
+
+    it('uses text prop as default content', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          text: 'Prop Text Content'
+        }
+      });
+
+      expect(wrapper.vm.text).toBe('Prop Text Content');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('renders with data-testid for testing', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: 'Accessible Title',
+          text: 'Test Content'
+        }
+      });
+
+      // Component renders with data-testid for testing accessibility
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('provides title and text for screen readers', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: 'Accessible Title',
+          text: 'Test Content'
+        }
+      });
+
+      // Title and text props are set for accessibility
+      expect(wrapper.vm.title).toBe('Accessible Title');
+      expect(wrapper.vm.text).toBe('Test Content');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty title', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: ''
+        }
+      });
+
+      expect(wrapper.vm.title).toBe('');
+    });
+
+    it('handles empty text', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          text: ''
+        }
+      });
+
+      expect(wrapper.vm.text).toBe('');
+    });
+
+    it('handles very long title text', () => {
+      const longTitle = 'A'.repeat(500);
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: longTitle
+        }
+      });
+
+      expect(wrapper.vm.title).toBe(longTitle);
+    });
+
+    it('handles special characters in title and text', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: 'Title with <special> & "characters"',
+          text: 'Content with äöü ñ émojis 🎉'
+        }
+      });
+
+      expect(wrapper.vm.title).toBe('Title with <special> & "characters"');
+      expect(wrapper.vm.text).toBe('Content with äöü ñ émojis 🎉');
+    });
+
+    it('handles value of 0', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 0
+        }
+      });
+
+      expect(wrapper.vm.value).toBe(0);
+    });
+  });
+
+  describe('Variant Styling', () => {
+    it('applies accordion-item--default class for default variant', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          variant: 'default'
+        }
+      });
+
+      expect(wrapper.find('.accordion-item--default').exists()).toBe(true);
+      expect(wrapper.find('.accordion-item--end').exists()).toBe(false);
+    });
+
+    it('applies accordion-item--end class for end variant', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          variant: 'end'
+        }
+      });
+
+      expect(wrapper.find('.accordion-item--end').exists()).toBe(true);
+      expect(wrapper.find('.accordion-item--default').exists()).toBe(false);
+    });
+  });
+});