@zap-wunschlachen/wl-shared-components 1.0.35 → 1.0.37

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

@@ -0,0 +1,292 @@
+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('outlined');
+      expect(wrapper.vm.bgColor).toBe('var(--Soft-Concrete-0)');
+    });
+
+    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 - outlined', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          variant: 'outlined'
+        }
+      });
+
+      expect(wrapper.vm.variant).toBe('outlined');
+      expect(wrapper.find('.outlined-style').exists()).toBe(true);
+    });
+
+    it('accepts and applies variant prop - plain', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          variant: 'plain'
+        }
+      });
+
+      expect(wrapper.vm.variant).toBe('plain');
+      expect(wrapper.find('.plain-style').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('accepts title slot', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1'
+        },
+        slots: {
+          title: '<span class="custom-title">Slot Title</span>'
+        }
+      });
+
+      expect(wrapper.find('.custom-title').exists()).toBe(true);
+      expect(wrapper.text()).toContain('Slot Title');
+    });
+
+    it('accepts content slot', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1'
+        },
+        slots: {
+          content: '<div class="custom-content">Slot Content</div>'
+        }
+      });
+
+      expect(wrapper.find('.custom-content').exists()).toBe(true);
+      expect(wrapper.text()).toContain('Slot Content');
+    });
+
+    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('has proper ARIA attributes on trigger and panel', async () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          title: 'Accessible Title',
+          text: 'Test Content'
+        }
+      });
+
+      // Find the interactive trigger (use data-testid or role)
+      const trigger = wrapper.find('[data-testid="root"] [role="button"], [data-testid="root"] button, [role="button"]');
+      expect(trigger.exists()).toBe(true);
+
+      // Trigger should expose aria attributes
+      const expanded = trigger.attributes('aria-expanded');
+      const controls = trigger.attributes('aria-controls');
+      const labelled = trigger.attributes('aria-labelledby');
+
+      expect(expanded).toBeDefined();
+      expect(controls).toBeDefined();
+      expect(labelled).toBeDefined();
+
+      // Panel should exist and have role region and matching id
+      const panelId = controls || '';
+      const panel = panelId ? wrapper.find(`#${panelId}`) : wrapper.find('[role="region"]');
+      expect(panel.exists()).toBe(true);
+      expect(panel.attributes('role')).toBe('region');
+    });
+
+    it('toggles expanded state via Enter and Space keys and manages focus', async () => {
+      const wrapper = mount(AccordionItem, {
+        attachTo: document.body,
+        props: {
+          value: 'panel-1',
+          title: 'Accessible Title',
+          text: 'Test Content'
+        }
+      });
+
+      const trigger = wrapper.find('[data-testid="root"] [role="button"], [data-testid="root"] button, [role="button"]');
+      expect(trigger.exists()).toBe(true);
+
+      // Initial state should be collapsed
+      expect(trigger.attributes('aria-expanded')).toBe('false');
+
+      // Press Enter to expand
+      await trigger.trigger('keydown.enter');
+      await wrapper.vm.$nextTick();
+
+      expect(trigger.attributes('aria-expanded')).toBe('true');
+
+      // Focus should remain or move to trigger; ensure trigger is focused
+      trigger.element.focus();
+      expect(document.activeElement).toBe(trigger.element);
+
+      // Press Space to collapse
+      await trigger.trigger('keydown.space');
+      await wrapper.vm.$nextTick();
+
+      expect(trigger.attributes('aria-expanded')).toBe('false');
+    });
+  });
+
+  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 outlined-style class for outlined variant', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          variant: 'outlined'
+        }
+      });
+
+      expect(wrapper.find('.outlined-style').exists()).toBe(true);
+      expect(wrapper.find('.plain-style').exists()).toBe(false);
+    });
+
+    it('applies plain-style class for plain variant', () => {
+      const wrapper = mount(AccordionItem, {
+        props: {
+          value: 'panel-1',
+          variant: 'plain'
+        }
+      });
+
+      expect(wrapper.find('.plain-style').exists()).toBe(true);
+      expect(wrapper.find('.outlined-style').exists()).toBe(false);
+    });
+  });
+});