@zap-wunschlachen/wl-shared-components 1.0.35 → 1.0.38

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);
+    });
+  });
+});

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

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import SolidArrowRight from '@components/Icons/SolidArrowRight.vue';
+
+// Mock siteColors if used
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    font_color_code: '#172774'
+  }
+}));
+
+describe('SolidArrowRight', () => {
+  describe('Default Behavior', () => {
+    it('renders SVG element', () => {
+      const wrapper = mount(SolidArrowRight);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('SVG is present for icon display', () => {
+      const wrapper = mount(SolidArrowRight);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('icon represents directional arrow', () => {
+      const wrapper = mount(SolidArrowRight);
+      // Arrow icons are typically used for navigation
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+  });
+
+  describe('Visual Structure', () => {
+    it('has proper SVG namespace', () => {
+      const wrapper = mount(SolidArrowRight);
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+    });
+
+    it('contains path or polygon elements', () => {
+      const wrapper = mount(SolidArrowRight);
+      const paths = wrapper.findAll('path');
+      const polygons = wrapper.findAll('polygon');
+
+      // Icon should have visual elements
+      expect(paths.length + polygons.length).toBeGreaterThan(0);
+    });
+  });
+});

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

@@ -0,0 +1,197 @@
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Loader from '@components/Loader/Loader.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    font_color_code: '#172774'
+  }
+}));
+
+describe('Loader', () => {
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(Loader);
+
+      expect(wrapper.find('.loader-container').exists()).toBe(true);
+      expect(wrapper.find('.loader-svg').exists()).toBe(true);
+    });
+
+    it('renders spinner SVG', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('applies default size of 96px', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.vm.size).toBe(96);
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts custom size prop', () => {
+      const wrapper = mount(Loader, {
+        props: {
+          size: 48
+        }
+      });
+
+      expect(wrapper.vm.size).toBe(48);
+    });
+
+    it('applies size to SVG element', () => {
+      const wrapper = mount(Loader, {
+        props: {
+          size: 64
+        }
+      });
+
+      const svg = wrapper.find('.loader-svg');
+      expect(svg.attributes('style')).toContain('width: 64px');
+      expect(svg.attributes('style')).toContain('height: 64px');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has role="alert" for screen readers', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('[role="alert"]').exists()).toBe(true);
+    });
+
+    it('has aria-live="assertive" for immediate announcement', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('[aria-live="assertive"]').exists()).toBe(true);
+    });
+
+    it('has aria-busy="true" to indicate loading state', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(true);
+    });
+
+    it('has role="status" for the spinner', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('[role="status"]').exists()).toBe(true);
+    });
+
+    it('has aria-hidden="true" on decorative SVG', () => {
+      const wrapper = mount(Loader);
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('aria-hidden')).toBe('true');
+    });
+
+    it('provides proper semantic structure for assistive technologies', () => {
+      const wrapper = mount(Loader);
+
+      // Container announces loading state
+      const container = wrapper.find('.loader-container');
+      expect(container.attributes('role')).toBe('alert');
+      expect(container.attributes('aria-live')).toBe('assertive');
+      expect(container.attributes('aria-busy')).toBe('true');
+
+      // Inner status provides spinner context
+      const status = wrapper.find('[role="status"]');
+      expect(status.exists()).toBe(true);
+    });
+
+    it('follows WCAG 2.1 guidelines for loading indicators', () => {
+      const wrapper = mount(Loader);
+
+      // Should have proper ARIA attributes
+      expect(wrapper.find('[aria-busy]').exists()).toBe(true);
+      expect(wrapper.find('[aria-live]').exists()).toBe(true);
+
+      // SVG should be hidden from screen readers
+      expect(wrapper.find('svg[aria-hidden="true"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Visual Structure', () => {
+    it('has loader-container wrapper', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-container').exists()).toBe(true);
+    });
+
+    it('has loader-content for centering', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-content').exists()).toBe(true);
+    });
+
+    it('contains animated spinner arc', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-spinner-arc').exists()).toBe(true);
+    });
+  });
+
+  describe('SVG Content', () => {
+    it('renders SVG with proper viewBox', () => {
+      const wrapper = mount(Loader);
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('viewBox')).toBe('0 0 100 101');
+    });
+
+    it('renders path elements for spinner', () => {
+      const wrapper = mount(Loader);
+      const paths = wrapper.findAll('path');
+      expect(paths.length).toBeGreaterThan(0);
+    });
+
+    it('renders W logo in the center', () => {
+      const wrapper = mount(Loader);
+      // The W logo is inside a g element
+      const gElements = wrapper.findAll('g');
+      expect(gElements.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Size Variations', () => {
+    it('handles small size (24px)', () => {
+      const wrapper = mount(Loader, {
+        props: { size: 24 }
+      });
+
+      const svg = wrapper.find('.loader-svg');
+      expect(svg.attributes('style')).toContain('width: 24px');
+    });
+
+    it('handles large size (200px)', () => {
+      const wrapper = mount(Loader, {
+        props: { size: 200 }
+      });
+
+      const svg = wrapper.find('.loader-svg');
+      expect(svg.attributes('style')).toContain('width: 200px');
+    });
+
+    it('handles zero size gracefully', () => {
+      const wrapper = mount(Loader, {
+        props: { size: 0 }
+      });
+
+      expect(wrapper.vm.size).toBe(0);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('renders without props', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-container').exists()).toBe(true);
+    });
+
+    it('maintains structure with undefined size', () => {
+      const wrapper = mount(Loader, {
+        props: { size: undefined }
+      });
+
+      // Should fall back to default size
+      expect(wrapper.vm.size).toBe(96);
+    });
+  });
+
+  describe('Animation', () => {
+    it('has animated spinner arc class', () => {
+      const wrapper = mount(Loader);
+      expect(wrapper.find('.loader-spinner-arc').exists()).toBe(true);
+    });
+  });
+});