@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,384 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import AccordionItem from '@components/Accordion/AccordionItem.vue';
+import { VExpansionPanel } from 'vuetify/components';
+
+// Mock CSS import
+import { vi } from 'vitest';
+vi.mock('@components/Accordion/Accordion.css', () => ({}));
+
+describe('AccordionItem', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    value: 'test-value',
+    title: 'Test Title',
+    text: 'Test text content',
+    variant: 'outlined',
+    bgColor: 'var(--Soft-Concrete-0)'
+  };
+
+  beforeEach(() => {
+    wrapper = mount(AccordionItem, {
+      props: defaultProps,
+      global: {
+        components: {
+          VExpansionPanel
+        }
+      }
+    });
+  });
+
+  describe('Rendering', () => {
+    it('renders as v-expansion-panel element', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.findComponent(VExpansionPanel).exists()).toBe(true);
+    });
+
+    it('has correct default props', () => {
+      const expansionPanel = wrapper.findComponent(VExpansionPanel);
+      expect(expansionPanel.props('value')).toBe('test-value');
+      expect(expansionPanel.props('bgColor')).toBe('var(--Soft-Concrete-0)');
+    });
+
+    it('applies correct CSS classes based on variant', () => {
+      const outlinedWrapper = mount(AccordionItem, {
+        props: { ...defaultProps, variant: 'outlined' },
+        global: { components: { VExpansionPanel } }
+      });
+
+      const plainWrapper = mount(AccordionItem, {
+        props: { ...defaultProps, variant: 'plain' },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(outlinedWrapper.find('.outlined-style').exists()).toBe(true);
+      expect(outlinedWrapper.find('.plain-style').exists()).toBe(false);
+
+      expect(plainWrapper.find('.plain-style').exists()).toBe(true);
+      expect(plainWrapper.find('.outlined-style').exists()).toBe(false);
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts and validates variant prop', () => {
+      expect(wrapper.props('variant')).toBe('outlined');
+
+      const plainWrapper = mount(AccordionItem, {
+        props: { ...defaultProps, variant: 'plain' },
+        global: { components: { VExpansionPanel } }
+      });
+      expect(plainWrapper.props('variant')).toBe('plain');
+    });
+
+    it('has correct default values', () => {
+      const wrapperWithDefaults = mount(AccordionItem, {
+        props: { value: 'required-value' },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapperWithDefaults.props('variant')).toBe('outlined');
+      expect(wrapperWithDefaults.props('title')).toBe('Default Title');
+      expect(wrapperWithDefaults.props('text')).toBe('Default text');
+      expect(wrapperWithDefaults.props('bgColor')).toBe('var(--Soft-Concrete-0)');
+    });
+
+    it('accepts title prop', () => {
+      expect(wrapper.props('title')).toBe('Test Title');
+    });
+
+    it('accepts text prop', () => {
+      expect(wrapper.props('text')).toBe('Test text content');
+    });
+
+    it('requires value prop', () => {
+      expect(wrapper.props('value')).toBe('test-value');
+    });
+
+    it('accepts bgColor prop', () => {
+      expect(wrapper.props('bgColor')).toBe('var(--Soft-Concrete-0)');
+    });
+
+    it('validates variant prop correctly', () => {
+      const component = AccordionItem;
+      const variantProp = component.props.variant;
+
+      expect(variantProp.validator('plain')).toBe(true);
+      expect(variantProp.validator('outlined')).toBe(true);
+      expect(variantProp.validator('invalid')).toBe(false);
+    });
+  });
+
+  describe('Title Slot', () => {
+    it('renders title prop as fallback when no slot provided', () => {
+      const titleElement = wrapper.find('h3');
+      expect(titleElement.exists()).toBe(true);
+      expect(titleElement.text()).toBe('Test Title');
+    });
+
+    it('renders title slot content when provided', () => {
+      const wrapperWithSlot = mount(AccordionItem, {
+        props: defaultProps,
+        slots: {
+          title: '<h2 class="custom-title">Custom Title Content</h2>'
+        },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapperWithSlot.find('.custom-title').exists()).toBe(true);
+      expect(wrapperWithSlot.find('.custom-title').text()).toBe('Custom Title Content');
+      expect(wrapperWithSlot.find('h3').exists()).toBe(false);
+    });
+
+    it('prioritizes slot content over title prop', () => {
+      const wrapperWithSlot = mount(AccordionItem, {
+        props: { ...defaultProps, title: 'Prop Title' },
+        slots: {
+          title: '<span class="slot-title">Slot Title</span>'
+        },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapperWithSlot.find('.slot-title').text()).toBe('Slot Title');
+      expect(wrapperWithSlot.text()).not.toContain('Prop Title');
+    });
+
+    it('renders complex title slot content', () => {
+      const wrapperWithComplexSlot = mount(AccordionItem, {
+        props: defaultProps,
+        slots: {
+          title: `
+            <div class="complex-title">
+              <h2>Main Title</h2>
+              <span class="subtitle">Subtitle</span>
+            </div>
+          `
+        },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapperWithComplexSlot.find('.complex-title').exists()).toBe(true);
+      expect(wrapperWithComplexSlot.find('.complex-title h2').text()).toBe('Main Title');
+      expect(wrapperWithComplexSlot.find('.subtitle').text()).toBe('Subtitle');
+    });
+  });
+
+  describe('Content Slot', () => {
+    it('renders text prop as fallback when no slot provided', () => {
+      const textElement = wrapper.find('p');
+      expect(textElement.exists()).toBe(true);
+      expect(textElement.text()).toBe('Test text content');
+    });
+
+    it('renders content slot when provided', () => {
+      const wrapperWithSlot = mount(AccordionItem, {
+        props: defaultProps,
+        slots: {
+          content: '<div class="custom-content">Custom Content</div>'
+        },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapperWithSlot.find('.custom-content').exists()).toBe(true);
+      expect(wrapperWithSlot.find('.custom-content').text()).toBe('Custom Content');
+      expect(wrapperWithSlot.find('p').exists()).toBe(false);
+    });
+
+    it('prioritizes slot content over text prop', () => {
+      const wrapperWithSlot = mount(AccordionItem, {
+        props: { ...defaultProps, text: 'Prop Text' },
+        slots: {
+          content: '<span class="slot-content">Slot Content</span>'
+        },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapperWithSlot.find('.slot-content').text()).toBe('Slot Content');
+      expect(wrapperWithSlot.text()).not.toContain('Prop Text');
+    });
+
+    it('renders complex content slot', () => {
+      const wrapperWithComplexSlot = mount(AccordionItem, {
+        props: defaultProps,
+        slots: {
+          content: `
+            <div class="complex-content">
+              <p>Paragraph 1</p>
+              <ul>
+                <li>Item 1</li>
+                <li>Item 2</li>
+              </ul>
+            </div>
+          `
+        },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapperWithComplexSlot.find('.complex-content').exists()).toBe(true);
+      expect(wrapperWithComplexSlot.find('.complex-content p').text()).toBe('Paragraph 1');
+      expect(wrapperWithComplexSlot.findAll('.complex-content li')).toHaveLength(2);
+    });
+  });
+
+  describe('CSS Classes and Styling', () => {
+    it('applies outlined-style class for outlined variant', () => {
+      const outlinedWrapper = mount(AccordionItem, {
+        props: { ...defaultProps, variant: 'outlined' },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(outlinedWrapper.find('.outlined-style').exists()).toBe(true);
+      expect(outlinedWrapper.find('.plain-style').exists()).toBe(false);
+    });
+
+    it('applies plain-style class for plain variant', () => {
+      const plainWrapper = mount(AccordionItem, {
+        props: { ...defaultProps, variant: 'plain' },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(plainWrapper.find('.plain-style').exists()).toBe(true);
+      expect(plainWrapper.find('.outlined-style').exists()).toBe(false);
+    });
+
+    it('does not apply any variant class for unknown variant', () => {
+      // This shouldn't happen due to validator, but test defensive programming
+      const wrapperWithInvalidVariant = mount(AccordionItem, {
+        props: { ...defaultProps, variant: 'invalid' as any },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapperWithInvalidVariant.find('.plain-style').exists()).toBe(false);
+      expect(wrapperWithInvalidVariant.find('.outlined-style').exists()).toBe(false);
+    });
+
+    it('applies background color correctly', () => {
+      const customBgColor = '#ff0000';
+      const wrapperWithCustomBg = mount(AccordionItem, {
+        props: { ...defaultProps, bgColor: customBgColor },
+        global: { components: { VExpansionPanel } }
+      });
+
+      const expansionPanel = wrapperWithCustomBg.findComponent(VExpansionPanel);
+      expect(expansionPanel.props('bgColor')).toBe(customBgColor);
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted with minimal props', () => {
+      expect(() => {
+        mount(AccordionItem, {
+          props: { value: 'test' },
+          global: { components: { VExpansionPanel } }
+        });
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(AccordionItem, {
+        props: defaultProps,
+        global: { components: { VExpansionPanel } }
+      });
+
+      const wrapper2 = mount(AccordionItem, {
+        props: defaultProps,
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('works with both slot types simultaneously', () => {
+      const wrapperWithBothSlots = mount(AccordionItem, {
+        props: defaultProps,
+        slots: {
+          title: '<h2>Slot Title</h2>',
+          content: '<div>Slot Content</div>'
+        },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapperWithBothSlots.find('h2').text()).toBe('Slot Title');
+      expect(wrapperWithBothSlots.find('div').text()).toBe('Slot Content');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('maintains semantic HTML structure', () => {
+      expect(wrapper.find('h3').exists()).toBe(true);
+      expect(wrapper.find('p').exists()).toBe(true);
+    });
+
+    it('provides proper testid for testing', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('allows custom heading levels in title slot', () => {
+      const wrapperWithCustomHeading = mount(AccordionItem, {
+        props: defaultProps,
+        slots: {
+          title: '<h4>Custom Level Heading</h4>'
+        },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapperWithCustomHeading.find('h4').exists()).toBe(true);
+    });
+  });
+
+  describe('Value Types', () => {
+    it('accepts string values', () => {
+      const stringWrapper = mount(AccordionItem, {
+        props: { ...defaultProps, value: 'string-value' },
+        global: { components: { VExpansionPanel } }
+      });
+
+      const expansionPanel = stringWrapper.findComponent(VExpansionPanel);
+      expect(expansionPanel.props('value')).toBe('string-value');
+    });
+
+    it('accepts number values', () => {
+      const numberWrapper = mount(AccordionItem, {
+        props: { ...defaultProps, value: 123 },
+        global: { components: { VExpansionPanel } }
+      });
+
+      const expansionPanel = numberWrapper.findComponent(VExpansionPanel);
+      expect(expansionPanel.props('value')).toBe(123);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles empty title gracefully', () => {
+      const wrapperWithEmptyTitle = mount(AccordionItem, {
+        props: { ...defaultProps, title: '' },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapperWithEmptyTitle.find('h3').text()).toBe('');
+    });
+
+    it('handles empty text gracefully', () => {
+      const wrapperWithEmptyText = mount(AccordionItem, {
+        props: { ...defaultProps, text: '' },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapperWithEmptyText.find('p').text()).toBe('');
+    });
+
+    it('handles special characters in props', () => {
+      const wrapperWithSpecialChars = mount(AccordionItem, {
+        props: {
+          ...defaultProps,
+          title: 'Title with <>&"\'',
+          text: 'Text with <>&"\''
+        },
+        global: { components: { VExpansionPanel } }
+      });
+
+      expect(wrapperWithSpecialChars.find('h3').text()).toBe('Title with <>&"\'');
+      expect(wrapperWithSpecialChars.find('p').text()).toBe('Text with <>&"\'');
+    });
+  });
+});