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

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

@@ -1,228 +1,228 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
-
-describe('AccordionGroup', () => {
-  describe('Default Behavior', () => {
-    it('renders with default props', () => {
-      const wrapper = mount(AccordionGroup);
-
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
-      expect(wrapper.vm.multiple).toBe(false);
-      expect(wrapper.vm.variantGroup).toBe('accordion');
-    });
-
-    it('applies wl-accordion class', () => {
-      const wrapper = mount(AccordionGroup);
-      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
-    });
-  });
-
-  describe('Props', () => {
-    it('accepts modelValue as string', () => {
-      const wrapper = mount(AccordionGroup, {
-        props: {
-          modelValue: 'panel-1'
-        }
-      });
-
-      expect(wrapper.vm.modelValue).toBe('panel-1');
-    });
-
-    it('accepts modelValue as number', () => {
-      const wrapper = mount(AccordionGroup, {
-        props: {
-          modelValue: 1
-        }
-      });
-
-      expect(wrapper.vm.modelValue).toBe(1);
-    });
-
-    it('accepts modelValue as array for multiple selection', () => {
-      const wrapper = mount(AccordionGroup, {
-        props: {
-          modelValue: ['panel-1', 'panel-2'],
-          multiple: true
-        }
-      });
-
-      expect(wrapper.vm.modelValue).toEqual(['panel-1', 'panel-2']);
-    });
-
-    it('handles multiple prop', () => {
-      const wrapper = mount(AccordionGroup, {
-        props: {
-          multiple: true
-        }
-      });
-
-      expect(wrapper.vm.multiple).toBe(true);
-    });
-
-    it('accepts custom variantGroup', () => {
-      const wrapper = mount(AccordionGroup, {
-        props: {
-          variantGroup: 'inset'
-        }
-      });
-
-      expect(wrapper.vm.variantGroup).toBe('inset');
-    });
-  });
-
-  describe('v-model Support', () => {
-    it('emits update:modelValue when value changes', async () => {
-      const wrapper = mount(AccordionGroup, {
-        props: {
-          modelValue: null,
-          'onUpdate:modelValue': (value: string | number | string[] | null) => wrapper.setProps({ modelValue: value })
-        }
-      });
-
-      // Simulate internal value change
-      await wrapper.vm.$emit('update:modelValue', 'panel-1');
-
-      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
-      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['panel-1']);
-    });
-
-    it('syncs internal value with modelValue', () => {
-      const wrapper = mount(AccordionGroup, {
-        props: {
-          modelValue: 'panel-2'
-        }
-      });
-
-      expect(wrapper.vm.modelValue).toBe('panel-2');
-    });
-  });
-
-  describe('Slots', () => {
-    it('renders slot content', () => {
-      const wrapper = mount(AccordionGroup, {
-        slots: {
-          default: '<div class="test-panel">Panel Content</div>'
-        }
-      });
-
-      expect(wrapper.find('.test-panel').exists()).toBe(true);
-      expect(wrapper.find('.test-panel').text()).toBe('Panel Content');
-    });
-
-    it('renders multiple slot items', () => {
-      const wrapper = mount(AccordionGroup, {
-        slots: {
-          default: `
-            <div class="panel-1">Panel 1</div>
-            <div class="panel-2">Panel 2</div>
-            <div class="panel-3">Panel 3</div>
-          `
-        }
-      });
-
-      expect(wrapper.find('.panel-1').exists()).toBe(true);
-      expect(wrapper.find('.panel-2').exists()).toBe(true);
-      expect(wrapper.find('.panel-3').exists()).toBe(true);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has data-testid for testing', () => {
-      const wrapper = mount(AccordionGroup);
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('has proper ARIA role through Vuetify component', () => {
-      const wrapper = mount(AccordionGroup);
-      // The accordion group should be accessible through Vuetify's expansion-panels
-      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
-    });
-
-    it('supports keyboard navigation structure', () => {
-      const wrapper = mount(AccordionGroup, {
-        slots: {
-          default: '<div class="panel">Content</div>'
-        }
-      });
-
-      // Accordion groups should be navigable via keyboard
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('maintains focus management for screen readers', () => {
-      const wrapper = mount(AccordionGroup);
-
-      // The component should render properly for assistive technologies
-      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
-    });
-  });
-
-  describe('Multiple Selection Mode', () => {
-    it('allows single panel open when multiple is false', () => {
-      const wrapper = mount(AccordionGroup, {
-        props: {
-          modelValue: 'panel-1',
-          multiple: false
-        }
-      });
-
-      expect(wrapper.vm.multiple).toBe(false);
-      expect(wrapper.vm.modelValue).toBe('panel-1');
-    });
-
-    it('allows multiple panels open when multiple is true', () => {
-      const wrapper = mount(AccordionGroup, {
-        props: {
-          modelValue: ['panel-1', 'panel-2'],
-          multiple: true
-        }
-      });
-
-      expect(wrapper.vm.multiple).toBe(true);
-      expect(wrapper.vm.modelValue).toEqual(['panel-1', 'panel-2']);
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles null modelValue', () => {
-      const wrapper = mount(AccordionGroup, {
-        props: {
-          modelValue: null
-        }
-      });
-
-      expect(wrapper.vm.modelValue).toBeNull();
-    });
-
-    it('handles empty array modelValue', () => {
-      const wrapper = mount(AccordionGroup, {
-        props: {
-          modelValue: [],
-          multiple: true
-        }
-      });
-
-      expect(wrapper.vm.modelValue).toEqual([]);
-    });
-
-    it('handles undefined modelValue', () => {
-      const wrapper = mount(AccordionGroup);
-      expect(wrapper.vm.modelValue).toBeNull();
-    });
-
-    it('renders correctly with no slot content', () => {
-      const wrapper = mount(AccordionGroup);
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-  });
-
-  describe('Icon Configuration', () => {
-    it('uses heroicons for expand/collapse icons', () => {
-      const wrapper = mount(AccordionGroup);
-      // Icons are configured through Vuetify's expansion-panels
-      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
-    });
-  });
-});
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
+
+describe('AccordionGroup', () => {
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(AccordionGroup);
+
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
+      expect(wrapper.vm.multiple).toBe(false);
+      expect(wrapper.vm.variantGroup).toBe('accordion');
+    });
+
+    it('applies wl-accordion class', () => {
+      const wrapper = mount(AccordionGroup);
+      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts modelValue as string', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: 'panel-1'
+        }
+      });
+
+      expect(wrapper.vm.modelValue).toBe('panel-1');
+    });
+
+    it('accepts modelValue as number', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: 1
+        }
+      });
+
+      expect(wrapper.vm.modelValue).toBe(1);
+    });
+
+    it('accepts modelValue as array for multiple selection', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: ['panel-1', 'panel-2'],
+          multiple: true
+        }
+      });
+
+      expect(wrapper.vm.modelValue).toEqual(['panel-1', 'panel-2']);
+    });
+
+    it('handles multiple prop', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          multiple: true
+        }
+      });
+
+      expect(wrapper.vm.multiple).toBe(true);
+    });
+
+    it('accepts custom variantGroup', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          variantGroup: 'inset'
+        }
+      });
+
+      expect(wrapper.vm.variantGroup).toBe('inset');
+    });
+  });
+
+  describe('v-model Support', () => {
+    it('emits update:modelValue when value changes', async () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: null,
+          'onUpdate:modelValue': (value: string | number | string[] | null) => wrapper.setProps({ modelValue: value })
+        }
+      });
+
+      // Simulate internal value change
+      await wrapper.vm.$emit('update:modelValue', 'panel-1');
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['panel-1']);
+    });
+
+    it('syncs internal value with modelValue', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: 'panel-2'
+        }
+      });
+
+      expect(wrapper.vm.modelValue).toBe('panel-2');
+    });
+  });
+
+  describe('Slots', () => {
+    it('renders slot content', () => {
+      const wrapper = mount(AccordionGroup, {
+        slots: {
+          default: '<div class="test-panel">Panel Content</div>'
+        }
+      });
+
+      expect(wrapper.find('.test-panel').exists()).toBe(true);
+      expect(wrapper.find('.test-panel').text()).toBe('Panel Content');
+    });
+
+    it('renders multiple slot items', () => {
+      const wrapper = mount(AccordionGroup, {
+        slots: {
+          default: `
+            <div class="panel-1">Panel 1</div>
+            <div class="panel-2">Panel 2</div>
+            <div class="panel-3">Panel 3</div>
+          `
+        }
+      });
+
+      expect(wrapper.find('.panel-1').exists()).toBe(true);
+      expect(wrapper.find('.panel-2').exists()).toBe(true);
+      expect(wrapper.find('.panel-3').exists()).toBe(true);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has data-testid for testing', () => {
+      const wrapper = mount(AccordionGroup);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('has proper ARIA role through Vuetify component', () => {
+      const wrapper = mount(AccordionGroup);
+      // The accordion group should be accessible through Vuetify's expansion-panels
+      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
+    });
+
+    it('supports keyboard navigation structure', () => {
+      const wrapper = mount(AccordionGroup, {
+        slots: {
+          default: '<div class="panel">Content</div>'
+        }
+      });
+
+      // Accordion groups should be navigable via keyboard
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('maintains focus management for screen readers', () => {
+      const wrapper = mount(AccordionGroup);
+
+      // The component should render properly for assistive technologies
+      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
+    });
+  });
+
+  describe('Multiple Selection Mode', () => {
+    it('allows single panel open when multiple is false', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: 'panel-1',
+          multiple: false
+        }
+      });
+
+      expect(wrapper.vm.multiple).toBe(false);
+      expect(wrapper.vm.modelValue).toBe('panel-1');
+    });
+
+    it('allows multiple panels open when multiple is true', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: ['panel-1', 'panel-2'],
+          multiple: true
+        }
+      });
+
+      expect(wrapper.vm.multiple).toBe(true);
+      expect(wrapper.vm.modelValue).toEqual(['panel-1', 'panel-2']);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles null modelValue', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: null
+        }
+      });
+
+      expect(wrapper.vm.modelValue).toBeNull();
+    });
+
+    it('handles empty array modelValue', () => {
+      const wrapper = mount(AccordionGroup, {
+        props: {
+          modelValue: [],
+          multiple: true
+        }
+      });
+
+      expect(wrapper.vm.modelValue).toEqual([]);
+    });
+
+    it('handles undefined modelValue', () => {
+      const wrapper = mount(AccordionGroup);
+      expect(wrapper.vm.modelValue).toBeNull();
+    });
+
+    it('renders correctly with no slot content', () => {
+      const wrapper = mount(AccordionGroup);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Icon Configuration', () => {
+    it('uses heroicons for expand/collapse icons', () => {
+      const wrapper = mount(AccordionGroup);
+      // Icons are configured through Vuetify's expansion-panels
+      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
+    });
+  });
+});