@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,357 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import IconBullet from '@components/IconBullet/IconBullet.vue';
+
+describe('IconBullet', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    header: 'Test Header',
+    subHeader: 'Test Sub Header'
+  };
+
+  beforeEach(() => {
+    wrapper = mount(IconBullet, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          'v-icon': {
+            template: '<i class="v-icon" :icon="icon" :size="size">{{ icon }}</i>',
+            props: ['icon', 'size']
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('renders the component with root element', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.container').exists()).toBe(true);
+    });
+
+    it('has correct container classes', () => {
+      const container = wrapper.find('.container');
+      expect(container.classes()).toContain('d-flex');
+      expect(container.classes()).toContain('align-center');
+    });
+
+    it('renders icon container', () => {
+      const iconContainer = wrapper.find('.icon-container');
+      expect(iconContainer.exists()).toBe(true);
+      expect(iconContainer.classes()).toContain('d-flex');
+      expect(iconContainer.classes()).toContain('align-start');
+    });
+
+    it('renders text container', () => {
+      const textContainer = wrapper.find('.text-container');
+      expect(textContainer.exists()).toBe(true);
+      expect(textContainer.classes()).toContain('d-flex');
+      expect(textContainer.classes()).toContain('flex-column');
+    });
+  });
+
+  describe('Header and SubHeader', () => {
+    it('displays header when provided', () => {
+      const header = wrapper.find('h3');
+      expect(header.exists()).toBe(true);
+      expect(header.text()).toBe('Test Header');
+    });
+
+    it('displays subHeader when provided', () => {
+      const subHeader = wrapper.find('p.p-large');
+      expect(subHeader.exists()).toBe(true);
+      expect(subHeader.text()).toBe('Test Sub Header');
+    });
+
+    it('does not display header when not provided', () => {
+      const wrapper = mount(IconBullet, {
+        props: { subHeader: 'Only sub' }
+      });
+      expect(wrapper.find('h3').exists()).toBe(false);
+    });
+
+    it('does not display subHeader when not provided', () => {
+      const wrapper = mount(IconBullet, {
+        props: { header: 'Only header' }
+      });
+      expect(wrapper.find('p.p-large').exists()).toBe(false);
+    });
+
+    it('handles both header and subHeader missing', () => {
+      const wrapper = mount(IconBullet);
+      expect(wrapper.find('h3').exists()).toBe(false);
+      expect(wrapper.find('p.p-large').exists()).toBe(false);
+    });
+  });
+
+  describe('Content Property', () => {
+    it('displays HTML content when provided', () => {
+      const wrapper = mount(IconBullet, {
+        props: {
+          content: '<p>Custom HTML Content</p>'
+        }
+      });
+
+      const contentDiv = wrapper.find('.text-container > div');
+      expect(contentDiv.html()).toContain('<p>Custom HTML Content</p>');
+    });
+
+    it('prioritizes content over header and subHeader', () => {
+      const wrapper = mount(IconBullet, {
+        props: {
+          content: '<p>Content</p>',
+          header: 'Header',
+          subHeader: 'SubHeader'
+        }
+      });
+
+      expect(wrapper.find('h3').exists()).toBe(false);
+      expect(wrapper.find('p.p-large').exists()).toBe(false);
+      expect(wrapper.html()).toContain('<p>Content</p>');
+    });
+
+    it('renders complex HTML content', () => {
+      const wrapper = mount(IconBullet, {
+        props: {
+          content: '<div><h4>Title</h4><ul><li>Item 1</li><li>Item 2</li></ul></div>'
+        }
+      });
+
+      const contentDiv = wrapper.find('.text-container > div');
+      expect(contentDiv.html()).toContain('<h4>Title</h4>');
+      expect(contentDiv.html()).toContain('<li>Item 1</li>');
+      expect(contentDiv.html()).toContain('<li>Item 2</li>');
+    });
+  });
+
+  describe('Icon Prop', () => {
+    it('renders icon when provided', () => {
+      const wrapper = mount(IconBullet, {
+        props: {
+          icon: 'mdi-home'
+        },
+        global: {
+          stubs: {
+            'v-icon': {
+              template: '<i class="v-icon" :icon="icon" :size="size">{{ icon }}</i>',
+              props: ['icon', 'size']
+            }
+          }
+        }
+      });
+
+      const icon = wrapper.find('.v-icon');
+      expect(icon.exists()).toBe(true);
+      expect(icon.text()).toBe('mdi-home');
+    });
+
+    it('does not render icon when not provided', () => {
+      const wrapper = mount(IconBullet, {
+        global: {
+          stubs: {
+            'v-icon': {
+              template: '<i class="v-icon" :icon="icon" :size="size">{{ icon }}</i>',
+              props: ['icon', 'size']
+            }
+          }
+        }
+      });
+
+      const icon = wrapper.find('.v-icon');
+      expect(icon.exists()).toBe(false);
+    });
+
+    it('uses default icon size', () => {
+      const wrapper = mount(IconBullet, {
+        props: {
+          icon: 'mdi-home'
+        },
+        global: {
+          stubs: {
+            'v-icon': {
+              template: '<i class="v-icon" :icon="icon" :size="size">{{ icon }}</i>',
+              props: ['icon', 'size']
+            }
+          }
+        }
+      });
+
+      const icon = wrapper.find('.v-icon');
+      expect(icon.attributes('size')).toBe('38');
+    });
+
+    it('uses custom icon size when provided', () => {
+      const wrapper = mount(IconBullet, {
+        props: {
+          icon: 'mdi-home',
+          iconSize: '24'
+        },
+        global: {
+          stubs: {
+            'v-icon': {
+              template: '<i class="v-icon" :icon="icon" :size="size">{{ icon }}</i>',
+              props: ['icon', 'size']
+            }
+          }
+        }
+      });
+
+      const icon = wrapper.find('.v-icon');
+      expect(icon.attributes('size')).toBe('24');
+    });
+  });
+
+  describe('Icon Slot', () => {
+    it('renders icon slot content when provided', () => {
+      const wrapper = mount(IconBullet, {
+        slots: {
+          icon: '<div class="custom-icon">Custom Icon</div>'
+        }
+      });
+
+      expect(wrapper.find('.custom-icon').exists()).toBe(true);
+      expect(wrapper.find('.custom-icon').text()).toBe('Custom Icon');
+    });
+
+    it('prioritizes icon slot over icon prop', () => {
+      const wrapper = mount(IconBullet, {
+        props: {
+          icon: 'mdi-home'
+        },
+        slots: {
+          icon: '<div class="custom-icon">Slot Icon</div>'
+        },
+        global: {
+          stubs: {
+            'v-icon': {
+              template: '<i class="v-icon" :icon="icon" :size="size">{{ icon }}</i>',
+              props: ['icon', 'size']
+            }
+          }
+        }
+      });
+
+      expect(wrapper.find('.custom-icon').exists()).toBe(true);
+      expect(wrapper.find('.v-icon').exists()).toBe(false);
+    });
+
+    it('renders complex icon slot content', () => {
+      const wrapper = mount(IconBullet, {
+        slots: {
+          icon: '<svg width="24" height="24"><circle cx="12" cy="12" r="10" /></svg>'
+        }
+      });
+
+      expect(wrapper.find('svg').exists()).toBe(true);
+      expect(wrapper.find('circle').exists()).toBe(true);
+    });
+  });
+
+  describe('Layout and Styling', () => {
+    it('applies correct gap to container', () => {
+      // Component has gap: 24px in styles
+      const container = wrapper.find('.container');
+      expect(container.exists()).toBe(true);
+    });
+
+    it('applies correct width constraints', () => {
+      // Component has width: 400px, min-width: 300px, max-width: 400px
+      const container = wrapper.find('.container');
+      expect(container.exists()).toBe(true);
+    });
+
+    it('applies correct padding', () => {
+      // Component has padding-left: 50px, padding-right: 40px
+      const container = wrapper.find('.container');
+      expect(container.exists()).toBe(true);
+    });
+
+    it('applies correct text container gap', () => {
+      // Component has gap: 11px for text-container
+      const textContainer = wrapper.find('.text-container');
+      expect(textContainer.exists()).toBe(true);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty strings for all props', () => {
+      const wrapper = mount(IconBullet, {
+        props: {
+          header: '',
+          subHeader: '',
+          content: '',
+          icon: ''
+        }
+      });
+
+      expect(wrapper.find('h3').exists()).toBe(false);
+      expect(wrapper.find('p.p-large').exists()).toBe(false);
+      expect(wrapper.find('.v-icon').exists()).toBe(false);
+    });
+
+    it('handles special characters in header', () => {
+      const wrapper = mount(IconBullet, {
+        props: {
+          header: 'Header with <>&"\'',
+          subHeader: 'Sub with special @#$%'
+        }
+      });
+
+      expect(wrapper.find('h3').text()).toBe('Header with <>&"\'');
+      expect(wrapper.find('p.p-large').text()).toBe('Sub with special @#$%');
+    });
+
+    it('handles very long text content', () => {
+      const longText = 'a'.repeat(500);
+      const wrapper = mount(IconBullet, {
+        props: {
+          header: longText,
+          subHeader: longText
+        }
+      });
+
+      expect(wrapper.find('h3').text()).toHaveLength(500);
+      expect(wrapper.find('p.p-large').text()).toHaveLength(500);
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without any props', () => {
+      expect(() => {
+        mount(IconBullet);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(IconBullet, { props: defaultProps });
+      const wrapper2 = mount(IconBullet, { props: defaultProps });
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('combines all features correctly', () => {
+      const wrapper = mount(IconBullet, {
+        props: {
+          header: 'Main Title',
+          subHeader: 'Subtitle',
+          icon: 'mdi-check',
+          iconSize: '48'
+        },
+        global: {
+          stubs: {
+            'v-icon': {
+              template: '<i class="v-icon" :icon="icon" :size="size">{{ icon }}</i>',
+              props: ['icon', 'size']
+            }
+          }
+        }
+      });
+
+      expect(wrapper.find('h3').text()).toBe('Main Title');
+      expect(wrapper.find('p.p-large').text()).toBe('Subtitle');
+      expect(wrapper.find('.v-icon').text()).toBe('mdi-check');
+      expect(wrapper.find('.v-icon').attributes('size')).toBe('48');
+    });
+  });
+});