@zap-wunschlachen/wl-shared-components 1.0.12 → 1.0.13

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

@@ -1,343 +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.skip('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');
-    });
-  });
+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.skip('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');
+    });
+  });
 });