@zap-wunschlachen/wl-shared-components 1.0.34 → 1.0.37

package/tests/unit/components/Icons/Logo.spec.ts

@@ -0,0 +1,228 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Logo from '@components/Icons/Logo.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    domain: 'domain-dental',
+    font_color_code: '#172774'
+  }
+}));
+
+describe('Logo', () => {
+  describe('Default Behavior', () => {
+    it('renders SVG element', () => {
+      const wrapper = mount(Logo);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('renders with default dimensions', () => {
+      const wrapper = mount(Logo);
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('width')).toBe('120');
+      expect(svg.attributes('height')).toBe('30');
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts custom width', () => {
+      const wrapper = mount(Logo, {
+        props: { width: '200' }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('width')).toBe('200');
+    });
+
+    it('accepts custom height', () => {
+      const wrapper = mount(Logo, {
+        props: { height: '50' }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('height')).toBe('50');
+    });
+
+    it('accepts custom domain', () => {
+      const wrapper = mount(Logo, {
+        props: { domain: 'domain-cocoon' }
+      });
+
+      expect(wrapper.vm.domain).toBe('domain-cocoon');
+    });
+
+    it('uses siteColors domain when domain prop is empty', () => {
+      const wrapper = mount(Logo, {
+        props: { domain: '' }
+      });
+
+      // Should fall back to siteColors domain (dental)
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('viewBox')).toBe('0 0 120 43');
+    });
+  });
+
+  describe('Domain-specific Rendering', () => {
+    it('renders dental logo by default', () => {
+      const wrapper = mount(Logo);
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('viewBox')).toBe('0 0 120 43');
+    });
+
+    it('renders cocoon logo when domain is domain-cocoon', () => {
+      const wrapper = mount(Logo, {
+        props: { domain: 'domain-cocoon' }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('viewBox')).toBe('0 0 124 41');
+    });
+  });
+
+  describe('SVG Structure', () => {
+    it('has proper viewBox attribute', () => {
+      const wrapper = mount(Logo);
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('viewBox')).toBeDefined();
+    });
+
+    it('contains path elements', () => {
+      const wrapper = mount(Logo);
+      const paths = wrapper.findAll('path');
+      expect(paths.length).toBeGreaterThan(0);
+    });
+
+    it('has fill attribute on paths', () => {
+      const wrapper = mount(Logo);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('fill')).toBeDefined();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('SVG can be used as decorative image', () => {
+      // By default the Logo should render an SVG without an accessible name
+      const wrapper = mount(Logo);
+      const svg = wrapper.find('svg');
+      expect(svg.exists()).toBe(true);
+
+      // Decorative by default: no aria-label and should be hidden from assistive tech
+      expect(svg.attributes('aria-label')).toBeUndefined();
+      // If the component is used decoratively, authors may add aria-hidden
+      // but by default we ensure no accessible name is present
+    });
+
+    it('exposes accessible name when labelled via attributes', () => {
+      const wrapper = mount(Logo, {
+        attrs: {
+          'aria-label': 'Company Logo',
+          role: 'img'
+        }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.exists()).toBe(true);
+      expect(svg.attributes('aria-label')).toBe('Company Logo');
+      expect(svg.attributes('role')).toBe('img');
+    });
+
+    it('has appropriate namespace', () => {
+      const wrapper = mount(Logo);
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+    });
+
+    it('renders without visual errors', () => {
+      const wrapper = mount(Logo, {
+        props: {
+          width: '100',
+          height: '25'
+        }
+      });
+
+      expect(wrapper.find('svg').exists()).toBe(true);
+      expect(wrapper.findAll('path').length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Theming', () => {
+    it('applies font color from siteColors', () => {
+      const wrapper = mount(Logo);
+      const paths = wrapper.findAll('path');
+
+      // All paths should use the theme color
+      expect(paths.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles zero dimensions', () => {
+      const wrapper = mount(Logo, {
+        props: {
+          width: '0',
+          height: '0'
+        }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('width')).toBe('0');
+      expect(svg.attributes('height')).toBe('0');
+    });
+
+    it('handles very large dimensions', () => {
+      const wrapper = mount(Logo, {
+        props: {
+          width: '1000',
+          height: '500'
+        }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('width')).toBe('1000');
+      expect(svg.attributes('height')).toBe('500');
+    });
+
+    it('handles empty string domain', () => {
+      const wrapper = mount(Logo, {
+        props: { domain: '' }
+      });
+
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('handles unknown domain gracefully', () => {
+      const wrapper = mount(Logo, {
+        props: { domain: 'unknown-domain' }
+      });
+
+      // Should still render (falls back to dental)
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+  });
+
+  describe('Size Variations', () => {
+    const sizes = [
+      { width: '50', height: '15' },
+      { width: '120', height: '30' },
+      { width: '200', height: '50' },
+      { width: '400', height: '100' }
+    ];
+
+    sizes.forEach(({ width, height }) => {
+      it(`renders correctly at ${width}x${height}`, () => {
+        const wrapper = mount(Logo, {
+          props: { width, height }
+        });
+
+        const svg = wrapper.find('svg');
+        expect(svg.attributes('width')).toBe(width);
+        expect(svg.attributes('height')).toBe(height);
+      });
+    });
+  });
+});

package/tests/unit/components/Icons/MiniLogo.spec.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MiniLogo from '@components/Icons/MiniLogo.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    font_color_code: '#172774'
+  }
+}));
+
+describe('MiniLogo', () => {
+  describe('Default Behavior', () => {
+    it('renders SVG element', () => {
+      const wrapper = mount(MiniLogo);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has accessible attributes', () => {
+      const wrapper = mount(MiniLogo);
+      const svg = wrapper.find('svg');
+      expect(svg.exists()).toBe(true);
+      // Add checks for actual accessibility attributes:
+      // expect(svg.attributes('role')).toBe('img');
+      // expect(svg.attributes('aria-label')).toBeTruthy();
+    });
+  });
+
+  describe('Visual Structure', () => {
+    it('contains path elements for logo rendering', () => {
+      const wrapper = mount(MiniLogo);
+      const paths = wrapper.findAll('path');
+      expect(paths.length).toBeGreaterThan(0);
+    });
+  });
+});