@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,343 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import AccordionGroup from '@components/Accordion/AccordionGroup.vue';
+import { VExpansionPanels } from 'vuetify/components';
+
+// Mock CSS import
+import { vi } from 'vitest';
+vi.mock('@components/Accordion/Accordion.css', () => ({}));
+
+describe('AccordionGroup', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    modelValue: null,
+    multiple: false,
+    variantGroup: 'accordion'
+  };
+
+  beforeEach(() => {
+    wrapper = mount(AccordionGroup, {
+      props: defaultProps,
+      global: {
+        components: {
+          VExpansionPanels
+        }
+      }
+    });
+  });
+
+  describe('Rendering', () => {
+    it('renders as v-expansion-panels element', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
+    });
+
+    it('has correct default props', () => {
+      const expansionPanels = wrapper.findComponent(VExpansionPanels);
+      expect(expansionPanels.exists()).toBe(true);
+      expect(expansionPanels.props('multiple')).toBe(false);
+      expect(expansionPanels.props('variant')).toBe('accordion');
+      expect(expansionPanels.props('rounded')).toBe(false);
+    });
+
+    it('uses correct expand and collapse icons', () => {
+      const expansionPanels = wrapper.findComponent(VExpansionPanels);
+      expect(expansionPanels.props('expandIcon')).toBe('heroicons:chevron-down');
+      expect(expansionPanels.props('collapseIcon')).toBe('heroicons:chevron-up');
+    });
+
+    it('contains slot for accordion items', () => {
+      const wrapperWithSlot = mount(AccordionGroup, {
+        props: defaultProps,
+        slots: {
+          default: '<div class="test-slot">Test Content</div>'
+        },
+        global: {
+          components: {
+            VExpansionPanels
+          }
+        }
+      });
+
+      expect(wrapperWithSlot.find('.test-slot').exists()).toBe(true);
+      expect(wrapperWithSlot.find('.test-slot').text()).toBe('Test Content');
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts modelValue prop', () => {
+      const wrapperWithValue = mount(AccordionGroup, {
+        props: {
+          ...defaultProps,
+          modelValue: 1
+        },
+        global: {
+          components: {
+            VExpansionPanels
+          }
+        }
+      });
+
+      const expansionPanels = wrapperWithValue.findComponent(VExpansionPanels);
+      expect(expansionPanels.props('modelValue')).toBe(1);
+    });
+
+    it('accepts array modelValue when multiple is true', () => {
+      const wrapperWithArray = mount(AccordionGroup, {
+        props: {
+          ...defaultProps,
+          modelValue: [1, 2],
+          multiple: true
+        },
+        global: {
+          components: {
+            VExpansionPanels
+          }
+        }
+      });
+
+      const expansionPanels = wrapperWithArray.findComponent(VExpansionPanels);
+      expect(expansionPanels.props('modelValue')).toEqual([1, 2]);
+      expect(expansionPanels.props('multiple')).toBe(true);
+    });
+
+    it('accepts multiple prop', () => {
+      const wrapperMultiple = mount(AccordionGroup, {
+        props: {
+          ...defaultProps,
+          multiple: true
+        },
+        global: {
+          components: {
+            VExpansionPanels
+          }
+        }
+      });
+
+      const expansionPanels = wrapperMultiple.findComponent(VExpansionPanels);
+      expect(expansionPanels.props('multiple')).toBe(true);
+    });
+
+    it('accepts variantGroup prop', () => {
+      const customVariant = 'inset';
+      const wrapperWithVariant = mount(AccordionGroup, {
+        props: {
+          ...defaultProps,
+          variantGroup: customVariant
+        },
+        global: {
+          components: {
+            VExpansionPanels
+          }
+        }
+      });
+
+      const expansionPanels = wrapperWithVariant.findComponent(VExpansionPanels);
+      expect(expansionPanels.props('variant')).toBe(customVariant);
+    });
+
+    it('has correct default values', () => {
+      expect(wrapper.props('modelValue')).toBeNull();
+      expect(wrapper.props('multiple')).toBe(false);
+      expect(wrapper.props('variantGroup')).toBe('accordion');
+    });
+  });
+
+  describe('V-Model Behavior', () => {
+    it('emits update:modelValue when internal value changes', async () => {
+      const expansionPanels = wrapper.findComponent(VExpansionPanels);
+
+      // Simulate a change in the expansion panels
+      await expansionPanels.vm.$emit('update:modelValue', 1);
+
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')[0]).toEqual([1]);
+    });
+
+    it('updates internal value when modelValue prop changes', async () => {
+      await wrapper.setProps({ modelValue: 2 });
+
+      const expansionPanels = wrapper.findComponent(VExpansionPanels);
+      expect(expansionPanels.props('modelValue')).toBe(2);
+    });
+
+    it('handles array values for multiple mode', async () => {
+      await wrapper.setProps({
+        modelValue: [1, 2],
+        multiple: true
+      });
+
+      const expansionPanels = wrapper.findComponent(VExpansionPanels);
+      expect(expansionPanels.props('modelValue')).toEqual([1, 2]);
+
+      // Simulate change
+      await expansionPanels.vm.$emit('update:modelValue', [1, 2, 3]);
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')[0]).toEqual([[1, 2, 3]]);
+    });
+  });
+
+  describe('Styling and Classes', () => {
+    it('applies wl-accordion class', () => {
+      expect(wrapper.find('.wl-accordion').exists()).toBe(true);
+    });
+
+    it('sets rounded to false', () => {
+      const expansionPanels = wrapper.findComponent(VExpansionPanels);
+      expect(expansionPanels.props('rounded')).toBe(false);
+    });
+
+    it('applies data-testid for testing', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Slot Content', () => {
+    it('renders default slot content', () => {
+      const slotContent = '<div class="accordion-item">Item 1</div><div class="accordion-item">Item 2</div>';
+      const wrapperWithSlots = mount(AccordionGroup, {
+        props: defaultProps,
+        slots: {
+          default: slotContent
+        },
+        global: {
+          components: {
+            VExpansionPanels
+          }
+        }
+      });
+
+      expect(wrapperWithSlots.findAll('.accordion-item')).toHaveLength(2);
+    });
+
+    it('passes slot content to v-expansion-panels', () => {
+      const wrapperWithSlots = mount(AccordionGroup, {
+        props: defaultProps,
+        slots: {
+          default: '<div class="test-content">Accordion Content</div>'
+        },
+        global: {
+          components: {
+            VExpansionPanels
+          }
+        }
+      });
+
+      const expansionPanels = wrapperWithSlots.findComponent(VExpansionPanels);
+      expect(expansionPanels.find('.test-content').exists()).toBe(true);
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(AccordionGroup, {
+          global: {
+            components: {
+              VExpansionPanels
+            }
+          }
+        });
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(AccordionGroup, {
+        props: defaultProps,
+        global: {
+          components: {
+            VExpansionPanels
+          }
+        }
+      });
+
+      const wrapper2 = mount(AccordionGroup, {
+        props: defaultProps,
+        global: {
+          components: {
+            VExpansionPanels
+          }
+        }
+      });
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('works with different variant groups', () => {
+      const variants = ['accordion', 'inset', 'popout'];
+
+      variants.forEach(variant => {
+        const variantWrapper = mount(AccordionGroup, {
+          props: {
+            ...defaultProps,
+            variantGroup: variant
+          },
+          global: {
+            components: {
+              VExpansionPanels
+            }
+          }
+        });
+
+        const expansionPanels = variantWrapper.findComponent(VExpansionPanels);
+        expect(expansionPanels.props('variant')).toBe(variant);
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('maintains accessibility features from v-expansion-panels', () => {
+      const expansionPanels = wrapper.findComponent(VExpansionPanels);
+      expect(expansionPanels.exists()).toBe(true);
+    });
+
+    it('provides proper testid for testing', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('properly forwards expansion panel events', async () => {
+      const expansionPanels = wrapper.findComponent(VExpansionPanels);
+
+      // Test modelValue update
+      await expansionPanels.vm.$emit('update:modelValue', 1);
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')[0]).toEqual([1]);
+    });
+
+    it('handles null and undefined values', async () => {
+      await wrapper.setProps({ modelValue: null });
+      const expansionPanels = wrapper.findComponent(VExpansionPanels);
+      expect(expansionPanels.props('modelValue')).toBeNull();
+
+      await wrapper.setProps({ modelValue: undefined });
+      expect(expansionPanels.props('modelValue')).toBeUndefined();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles invalid variant gracefully', () => {
+      expect(() => {
+        mount(AccordionGroup, {
+          props: {
+            ...defaultProps,
+            variantGroup: 'invalid-variant'
+          },
+          global: {
+            components: {
+              VExpansionPanels
+            }
+          }
+        });
+      }).not.toThrow();
+    });
+
+    it('handles mixed data types in modelValue', async () => {
+      await wrapper.setProps({ modelValue: 'string-value' });
+      const expansionPanels = wrapper.findComponent(VExpansionPanels);
+      expect(expansionPanels.props('modelValue')).toBe('string-value');
+    });
+  });
+});