@zap-wunschlachen/wl-shared-components 1.0.16 → 1.0.18

package/tests/unit/components/IconBullet/IconBulletList.spec.ts

@@ -1,372 +1,372 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import IconBulletList from '@components/IconBullet/IconBulletList.vue';
-
-describe('IconBulletList', () => {
-  let wrapper: VueWrapper;
-
-  beforeEach(() => {
-    wrapper = mount(IconBulletList);
-  });
-
-  describe('Component Rendering', () => {
-    it('renders the component with root element', () => {
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('.outer-container').exists()).toBe(true);
-    });
-
-    it('has correct outer container classes', () => {
-      const container = wrapper.find('.outer-container');
-      expect(container.classes()).toContain('d-flex');
-      expect(container.classes()).toContain('flex-column');
-      expect(container.classes()).toContain('align-center');
-      expect(container.classes()).toContain('mx-auto');
-    });
-
-    it('renders header section', () => {
-      const headerSection = wrapper.find('.text-center');
-      expect(headerSection.exists()).toBe(true);
-    });
-
-    it('renders slot container', () => {
-      const slotContainer = wrapper.find('.slot-container');
-      expect(slotContainer.exists()).toBe(true);
-      expect(slotContainer.classes()).toContain('d-flex');
-      expect(slotContainer.classes()).toContain('justify-center');
-      expect(slotContainer.classes()).toContain('align-start');
-      expect(slotContainer.classes()).toContain('flex-wrap');
-    });
-  });
-
-  describe('Header Property', () => {
-    it('displays header when provided', () => {
-      const wrapper = mount(IconBulletList, {
-        props: {
-          header: 'Test Header'
-        }
-      });
-
-      const header = wrapper.find('h2');
-      expect(header.exists()).toBe(true);
-      expect(header.text()).toBe('Test Header');
-    });
-
-    it('does not display header when not provided', () => {
-      const wrapper = mount(IconBulletList);
-      const header = wrapper.find('h2');
-      expect(header.exists()).toBe(false);
-    });
-
-    it('does not display header when empty string', () => {
-      const wrapper = mount(IconBulletList, {
-        props: {
-          header: ''
-        }
-      });
-
-      const header = wrapper.find('h2');
-      expect(header.exists()).toBe(false);
-    });
-
-    it('handles special characters in header', () => {
-      const wrapper = mount(IconBulletList, {
-        props: {
-          header: 'Header with <>&"\''
-        }
-      });
-
-      const header = wrapper.find('h2');
-      expect(header.text()).toBe('Header with <>&"\'');
-    });
-
-    it('handles very long header text', () => {
-      const longHeader = 'A'.repeat(200);
-      const wrapper = mount(IconBulletList, {
-        props: {
-          header: longHeader
-        }
-      });
-
-      const header = wrapper.find('h2');
-      expect(header.text()).toBe(longHeader);
-    });
-  });
-
-  describe('Header Slot', () => {
-    it('renders header slot content when provided', () => {
-      const wrapper = mount(IconBulletList, {
-        slots: {
-          header: '<h1 class="custom-header">Custom Header</h1>'
-        }
-      });
-
-      expect(wrapper.find('.custom-header').exists()).toBe(true);
-      expect(wrapper.find('.custom-header').text()).toBe('Custom Header');
-    });
-
-    it('prioritizes header slot over header prop', () => {
-      const wrapper = mount(IconBulletList, {
-        props: {
-          header: 'Prop Header'
-        },
-        slots: {
-          header: '<h1 class="slot-header">Slot Header</h1>'
-        }
-      });
-
-      expect(wrapper.find('.slot-header').exists()).toBe(true);
-      expect(wrapper.find('.slot-header').text()).toBe('Slot Header');
-      expect(wrapper.text()).not.toContain('Prop Header');
-    });
-
-    it('renders complex header slot content', () => {
-      const wrapper = mount(IconBulletList, {
-        slots: {
-          header: `
-            <div class="complex-header">
-              <h1>Main Title</h1>
-              <p>Subtitle</p>
-              <span>Additional info</span>
-            </div>
-          `
-        }
-      });
-
-      expect(wrapper.find('.complex-header').exists()).toBe(true);
-      expect(wrapper.find('.complex-header h1').text()).toBe('Main Title');
-      expect(wrapper.find('.complex-header p').text()).toBe('Subtitle');
-      expect(wrapper.find('.complex-header span').text()).toBe('Additional info');
-    });
-
-    it('shows default header when slot is empty', () => {
-      const wrapper = mount(IconBulletList, {
-        props: {
-          header: 'Default Header'
-        },
-        slots: {
-          header: ''
-        }
-      });
-
-      const header = wrapper.find('h2');
-      expect(header.exists()).toBe(true);
-      expect(header.text()).toBe('Default Header');
-    });
-  });
-
-  describe('Default Slot', () => {
-    it('renders default slot content', () => {
-      const wrapper = mount(IconBulletList, {
-        slots: {
-          default: '<div class="slot-content">Slot Content</div>'
-        }
-      });
-
-      const slotContainer = wrapper.find('.slot-container');
-      expect(slotContainer.find('.slot-content').exists()).toBe(true);
-      expect(slotContainer.find('.slot-content').text()).toBe('Slot Content');
-    });
-
-    it('renders multiple slot items', () => {
-      const wrapper = mount(IconBulletList, {
-        slots: {
-          default: `
-            <div class="item-1">Item 1</div>
-            <div class="item-2">Item 2</div>
-            <div class="item-3">Item 3</div>
-          `
-        }
-      });
-
-      const slotContainer = wrapper.find('.slot-container');
-      expect(slotContainer.find('.item-1').exists()).toBe(true);
-      expect(slotContainer.find('.item-2').exists()).toBe(true);
-      expect(slotContainer.find('.item-3').exists()).toBe(true);
-    });
-
-    it('handles complex nested slot content', () => {
-      const wrapper = mount(IconBulletList, {
-        slots: {
-          default: `
-            <div class="icon-bullet-1">
-              <h3>Title 1</h3>
-              <p>Description 1</p>
-            </div>
-            <div class="icon-bullet-2">
-              <h3>Title 2</h3>
-              <p>Description 2</p>
-            </div>
-          `
-        }
-      });
-
-      const slotContainer = wrapper.find('.slot-container');
-      expect(slotContainer.find('.icon-bullet-1 h3').text()).toBe('Title 1');
-      expect(slotContainer.find('.icon-bullet-1 p').text()).toBe('Description 1');
-      expect(slotContainer.find('.icon-bullet-2 h3').text()).toBe('Title 2');
-      expect(slotContainer.find('.icon-bullet-2 p').text()).toBe('Description 2');
-    });
-
-    it('works without default slot content', () => {
-      const wrapper = mount(IconBulletList);
-      const slotContainer = wrapper.find('.slot-container');
-      expect(slotContainer.exists()).toBe(true);
-      expect(slotContainer.text().trim()).toBe('');
-    });
-  });
-
-  describe('Layout and Styling', () => {
-    it('applies correct max-width to outer container', () => {
-      // Component has max-width: 850px in styles
-      const container = wrapper.find('.outer-container');
-      expect(container.exists()).toBe(true);
-    });
-
-    it('applies correct row gap to outer container', () => {
-      // Component has row-gap: 27px in styles
-      const container = wrapper.find('.outer-container');
-      expect(container.exists()).toBe(true);
-    });
-
-    it('applies correct styling to slot container', () => {
-      const slotContainer = wrapper.find('.slot-container');
-      expect(slotContainer.classes()).toContain('align-start');
-      expect(slotContainer.classes()).toContain('flex-wrap');
-      // Component has align-content: center and row-gap: 27px in styles
-      expect(slotContainer.exists()).toBe(true);
-    });
-
-    it('slot container has full width', () => {
-      const slotContainer = wrapper.find('.slot-container');
-      // Component has width: 100% in styles
-      expect(slotContainer.exists()).toBe(true);
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('can be mounted without props', () => {
-      expect(() => {
-        mount(IconBulletList);
-      }).not.toThrow();
-    });
-
-    it('renders consistently on multiple mounts', () => {
-      const wrapper1 = mount(IconBulletList);
-      const wrapper2 = mount(IconBulletList);
-
-      expect(wrapper1.html()).toBe(wrapper2.html());
-    });
-
-    it('combines header and content slots correctly', () => {
-      const wrapper = mount(IconBulletList, {
-        slots: {
-          header: '<h1 class="main-title">Main Title</h1>',
-          default: '<div class="content">Content Items</div>'
-        }
-      });
-
-      expect(wrapper.find('.main-title').exists()).toBe(true);
-      expect(wrapper.find('.content').exists()).toBe(true);
-      expect(wrapper.find('.main-title').text()).toBe('Main Title');
-      expect(wrapper.find('.content').text()).toBe('Content Items');
-    });
-
-    it('works with both prop and slot combinations', () => {
-      const wrapper = mount(IconBulletList, {
-        props: {
-          header: 'Fallback Header'
-        },
-        slots: {
-          default: '<div class="bullet-item">Bullet Content</div>'
-        }
-      });
-
-      expect(wrapper.find('h2').text()).toBe('Fallback Header');
-      expect(wrapper.find('.bullet-item').text()).toBe('Bullet Content');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles undefined header prop', () => {
-      const wrapper = mount(IconBulletList, {
-        props: {
-          header: undefined
-        }
-      });
-
-      expect(wrapper.find('h2').exists()).toBe(false);
-    });
-
-    it('handles null header prop', () => {
-      const wrapper = mount(IconBulletList, {
-        props: {
-          header: null
-        }
-      });
-
-      expect(wrapper.find('h2').exists()).toBe(false);
-    });
-
-    it('handles whitespace-only header', () => {
-      const wrapper = mount(IconBulletList, {
-        props: {
-          header: '   '
-        }
-      });
-
-      const header = wrapper.find('h2');
-      expect(header.exists()).toBe(true);
-      expect(header.text()).toBe(''); // Whitespace gets trimmed in DOM
-    });
-
-    it('handles reactive header changes', async () => {
-      const wrapper = mount(IconBulletList, {
-        props: {
-          header: 'Initial Header'
-        }
-      });
-
-      expect(wrapper.find('h2').text()).toBe('Initial Header');
-
-      await wrapper.setProps({ header: 'Updated Header' });
-      expect(wrapper.find('h2').text()).toBe('Updated Header');
-
-      await wrapper.setProps({ header: '' });
-      expect(wrapper.find('h2').exists()).toBe(false);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('uses semantic heading structure', () => {
-      const wrapper = mount(IconBulletList, {
-        props: {
-          header: 'Section Title'
-        }
-      });
-
-      const heading = wrapper.find('h2');
-      expect(heading.exists()).toBe(true);
-      expect(heading.element.tagName.toLowerCase()).toBe('h2');
-    });
-
-    it('centers header text properly', () => {
-      const wrapper = mount(IconBulletList, {
-        props: {
-          header: 'Centered Title'
-        }
-      });
-
-      const headerContainer = wrapper.find('.text-center');
-      expect(headerContainer.exists()).toBe(true);
-      expect(headerContainer.find('h2').exists()).toBe(true);
-    });
-
-    it('provides proper container structure for screen readers', () => {
-      const wrapper = mount(IconBulletList);
-
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('.outer-container').exists()).toBe(true);
-      expect(wrapper.find('.slot-container').exists()).toBe(true);
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import IconBulletList from '@components/IconBullet/IconBulletList.vue';
+
+describe('IconBulletList', () => {
+  let wrapper: VueWrapper;
+
+  beforeEach(() => {
+    wrapper = mount(IconBulletList);
+  });
+
+  describe('Component Rendering', () => {
+    it('renders the component with root element', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.outer-container').exists()).toBe(true);
+    });
+
+    it('has correct outer container classes', () => {
+      const container = wrapper.find('.outer-container');
+      expect(container.classes()).toContain('d-flex');
+      expect(container.classes()).toContain('flex-column');
+      expect(container.classes()).toContain('align-center');
+      expect(container.classes()).toContain('mx-auto');
+    });
+
+    it('renders header section', () => {
+      const headerSection = wrapper.find('.text-center');
+      expect(headerSection.exists()).toBe(true);
+    });
+
+    it('renders slot container', () => {
+      const slotContainer = wrapper.find('.slot-container');
+      expect(slotContainer.exists()).toBe(true);
+      expect(slotContainer.classes()).toContain('d-flex');
+      expect(slotContainer.classes()).toContain('justify-center');
+      expect(slotContainer.classes()).toContain('align-start');
+      expect(slotContainer.classes()).toContain('flex-wrap');
+    });
+  });
+
+  describe('Header Property', () => {
+    it('displays header when provided', () => {
+      const wrapper = mount(IconBulletList, {
+        props: {
+          header: 'Test Header'
+        }
+      });
+
+      const header = wrapper.find('h2');
+      expect(header.exists()).toBe(true);
+      expect(header.text()).toBe('Test Header');
+    });
+
+    it('does not display header when not provided', () => {
+      const wrapper = mount(IconBulletList);
+      const header = wrapper.find('h2');
+      expect(header.exists()).toBe(false);
+    });
+
+    it('does not display header when empty string', () => {
+      const wrapper = mount(IconBulletList, {
+        props: {
+          header: ''
+        }
+      });
+
+      const header = wrapper.find('h2');
+      expect(header.exists()).toBe(false);
+    });
+
+    it('handles special characters in header', () => {
+      const wrapper = mount(IconBulletList, {
+        props: {
+          header: 'Header with <>&"\''
+        }
+      });
+
+      const header = wrapper.find('h2');
+      expect(header.text()).toBe('Header with <>&"\'');
+    });
+
+    it('handles very long header text', () => {
+      const longHeader = 'A'.repeat(200);
+      const wrapper = mount(IconBulletList, {
+        props: {
+          header: longHeader
+        }
+      });
+
+      const header = wrapper.find('h2');
+      expect(header.text()).toBe(longHeader);
+    });
+  });
+
+  describe('Header Slot', () => {
+    it('renders header slot content when provided', () => {
+      const wrapper = mount(IconBulletList, {
+        slots: {
+          header: '<h1 class="custom-header">Custom Header</h1>'
+        }
+      });
+
+      expect(wrapper.find('.custom-header').exists()).toBe(true);
+      expect(wrapper.find('.custom-header').text()).toBe('Custom Header');
+    });
+
+    it('prioritizes header slot over header prop', () => {
+      const wrapper = mount(IconBulletList, {
+        props: {
+          header: 'Prop Header'
+        },
+        slots: {
+          header: '<h1 class="slot-header">Slot Header</h1>'
+        }
+      });
+
+      expect(wrapper.find('.slot-header').exists()).toBe(true);
+      expect(wrapper.find('.slot-header').text()).toBe('Slot Header');
+      expect(wrapper.text()).not.toContain('Prop Header');
+    });
+
+    it('renders complex header slot content', () => {
+      const wrapper = mount(IconBulletList, {
+        slots: {
+          header: `
+            <div class="complex-header">
+              <h1>Main Title</h1>
+              <p>Subtitle</p>
+              <span>Additional info</span>
+            </div>
+          `
+        }
+      });
+
+      expect(wrapper.find('.complex-header').exists()).toBe(true);
+      expect(wrapper.find('.complex-header h1').text()).toBe('Main Title');
+      expect(wrapper.find('.complex-header p').text()).toBe('Subtitle');
+      expect(wrapper.find('.complex-header span').text()).toBe('Additional info');
+    });
+
+    it('shows default header when slot is empty', () => {
+      const wrapper = mount(IconBulletList, {
+        props: {
+          header: 'Default Header'
+        },
+        slots: {
+          header: ''
+        }
+      });
+
+      const header = wrapper.find('h2');
+      expect(header.exists()).toBe(true);
+      expect(header.text()).toBe('Default Header');
+    });
+  });
+
+  describe('Default Slot', () => {
+    it('renders default slot content', () => {
+      const wrapper = mount(IconBulletList, {
+        slots: {
+          default: '<div class="slot-content">Slot Content</div>'
+        }
+      });
+
+      const slotContainer = wrapper.find('.slot-container');
+      expect(slotContainer.find('.slot-content').exists()).toBe(true);
+      expect(slotContainer.find('.slot-content').text()).toBe('Slot Content');
+    });
+
+    it('renders multiple slot items', () => {
+      const wrapper = mount(IconBulletList, {
+        slots: {
+          default: `
+            <div class="item-1">Item 1</div>
+            <div class="item-2">Item 2</div>
+            <div class="item-3">Item 3</div>
+          `
+        }
+      });
+
+      const slotContainer = wrapper.find('.slot-container');
+      expect(slotContainer.find('.item-1').exists()).toBe(true);
+      expect(slotContainer.find('.item-2').exists()).toBe(true);
+      expect(slotContainer.find('.item-3').exists()).toBe(true);
+    });
+
+    it('handles complex nested slot content', () => {
+      const wrapper = mount(IconBulletList, {
+        slots: {
+          default: `
+            <div class="icon-bullet-1">
+              <h3>Title 1</h3>
+              <p>Description 1</p>
+            </div>
+            <div class="icon-bullet-2">
+              <h3>Title 2</h3>
+              <p>Description 2</p>
+            </div>
+          `
+        }
+      });
+
+      const slotContainer = wrapper.find('.slot-container');
+      expect(slotContainer.find('.icon-bullet-1 h3').text()).toBe('Title 1');
+      expect(slotContainer.find('.icon-bullet-1 p').text()).toBe('Description 1');
+      expect(slotContainer.find('.icon-bullet-2 h3').text()).toBe('Title 2');
+      expect(slotContainer.find('.icon-bullet-2 p').text()).toBe('Description 2');
+    });
+
+    it('works without default slot content', () => {
+      const wrapper = mount(IconBulletList);
+      const slotContainer = wrapper.find('.slot-container');
+      expect(slotContainer.exists()).toBe(true);
+      expect(slotContainer.text().trim()).toBe('');
+    });
+  });
+
+  describe('Layout and Styling', () => {
+    it('applies correct max-width to outer container', () => {
+      // Component has max-width: 850px in styles
+      const container = wrapper.find('.outer-container');
+      expect(container.exists()).toBe(true);
+    });
+
+    it('applies correct row gap to outer container', () => {
+      // Component has row-gap: 27px in styles
+      const container = wrapper.find('.outer-container');
+      expect(container.exists()).toBe(true);
+    });
+
+    it('applies correct styling to slot container', () => {
+      const slotContainer = wrapper.find('.slot-container');
+      expect(slotContainer.classes()).toContain('align-start');
+      expect(slotContainer.classes()).toContain('flex-wrap');
+      // Component has align-content: center and row-gap: 27px in styles
+      expect(slotContainer.exists()).toBe(true);
+    });
+
+    it('slot container has full width', () => {
+      const slotContainer = wrapper.find('.slot-container');
+      // Component has width: 100% in styles
+      expect(slotContainer.exists()).toBe(true);
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(IconBulletList);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(IconBulletList);
+      const wrapper2 = mount(IconBulletList);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('combines header and content slots correctly', () => {
+      const wrapper = mount(IconBulletList, {
+        slots: {
+          header: '<h1 class="main-title">Main Title</h1>',
+          default: '<div class="content">Content Items</div>'
+        }
+      });
+
+      expect(wrapper.find('.main-title').exists()).toBe(true);
+      expect(wrapper.find('.content').exists()).toBe(true);
+      expect(wrapper.find('.main-title').text()).toBe('Main Title');
+      expect(wrapper.find('.content').text()).toBe('Content Items');
+    });
+
+    it('works with both prop and slot combinations', () => {
+      const wrapper = mount(IconBulletList, {
+        props: {
+          header: 'Fallback Header'
+        },
+        slots: {
+          default: '<div class="bullet-item">Bullet Content</div>'
+        }
+      });
+
+      expect(wrapper.find('h2').text()).toBe('Fallback Header');
+      expect(wrapper.find('.bullet-item').text()).toBe('Bullet Content');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles undefined header prop', () => {
+      const wrapper = mount(IconBulletList, {
+        props: {
+          header: undefined
+        }
+      });
+
+      expect(wrapper.find('h2').exists()).toBe(false);
+    });
+
+    it('handles null header prop', () => {
+      const wrapper = mount(IconBulletList, {
+        props: {
+          header: null
+        }
+      });
+
+      expect(wrapper.find('h2').exists()).toBe(false);
+    });
+
+    it('handles whitespace-only header', () => {
+      const wrapper = mount(IconBulletList, {
+        props: {
+          header: '   '
+        }
+      });
+
+      const header = wrapper.find('h2');
+      expect(header.exists()).toBe(true);
+      expect(header.text()).toBe(''); // Whitespace gets trimmed in DOM
+    });
+
+    it('handles reactive header changes', async () => {
+      const wrapper = mount(IconBulletList, {
+        props: {
+          header: 'Initial Header'
+        }
+      });
+
+      expect(wrapper.find('h2').text()).toBe('Initial Header');
+
+      await wrapper.setProps({ header: 'Updated Header' });
+      expect(wrapper.find('h2').text()).toBe('Updated Header');
+
+      await wrapper.setProps({ header: '' });
+      expect(wrapper.find('h2').exists()).toBe(false);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('uses semantic heading structure', () => {
+      const wrapper = mount(IconBulletList, {
+        props: {
+          header: 'Section Title'
+        }
+      });
+
+      const heading = wrapper.find('h2');
+      expect(heading.exists()).toBe(true);
+      expect(heading.element.tagName.toLowerCase()).toBe('h2');
+    });
+
+    it('centers header text properly', () => {
+      const wrapper = mount(IconBulletList, {
+        props: {
+          header: 'Centered Title'
+        }
+      });
+
+      const headerContainer = wrapper.find('.text-center');
+      expect(headerContainer.exists()).toBe(true);
+      expect(headerContainer.find('h2').exists()).toBe(true);
+    });
+
+    it('provides proper container structure for screen readers', () => {
+      const wrapper = mount(IconBulletList);
+
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.outer-container').exists()).toBe(true);
+      expect(wrapper.find('.slot-container').exists()).toBe(true);
+    });
+  });
 });