@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

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

@@ -1,260 +1,260 @@
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import FavIcon from '@components/Icons/FavIcon.vue';
-
-// Mock siteColors
-vi.mock('@/utils/index', () => ({
-  siteColors: {
-    logo_primary_fill: '#172774',
-    domain: 'domain-dental'
-  }
-}));
-
-describe('FavIcon Icon', () => {
-  describe('Rendering', () => {
-    it('renders as SVG element', () => {
-      const wrapper = mount(FavIcon);
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('has correct SVG attributes', () => {
-      const wrapper = mount(FavIcon);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('width')).toBe('30');
-      expect(svg.attributes('height')).toBe('30');
-      expect(svg.attributes('viewBox')).toBe('0 0 30 30');
-      expect(svg.attributes('fill')).toBe('none');
-      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
-    });
-
-    it('contains exactly 3 path elements', () => {
-      const wrapper = mount(FavIcon);
-      const paths = wrapper.findAll('path');
-      expect(paths).toHaveLength(3);
-    });
-  });
-
-  describe('Path Structure', () => {
-    it('paths represent favicon shape', () => {
-      const wrapper = mount(FavIcon);
-      const paths = wrapper.findAll('path');
-
-      const firstPathData = paths[0].attributes('d');
-      expect(firstPathData).toContain('M15 30C23.271');
-      expect(firstPathData).toContain('C6.72904 0 0 6.72904');
-    });
-
-    it('paths have correct fill properties', () => {
-      const wrapper = mount(FavIcon);
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        expect(path.attributes('fill')).toBe('#172774');
-      });
-    });
-
-    it('paths form complete favicon shape', () => {
-      const wrapper = mount(FavIcon);
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        const pathData = path.attributes('d');
-        expect(pathData).toBeTruthy();
-        expect(pathData.length).toBeGreaterThan(10);
-      });
-    });
-  });
-
-  describe('Visual Properties', () => {
-    it('uses correct brand color for fill', () => {
-      const wrapper = mount(FavIcon);
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        expect(path.attributes('fill')).toBe('#172774');
-      });
-    });
-
-    it('svg container has no fill initially', () => {
-      const wrapper = mount(FavIcon);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('fill')).toBe('none');
-    });
-  });
-
-  describe('Favicon Dimensions', () => {
-    it('uses standard favicon size', () => {
-      const wrapper = mount(FavIcon);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('width')).toBe('30');
-      expect(svg.attributes('height')).toBe('30');
-    });
-
-    it('maintains square aspect ratio', () => {
-      const wrapper = mount(FavIcon);
-      const svg = wrapper.find('svg');
-
-      const width = svg.attributes('width');
-      const height = svg.attributes('height');
-      expect(width).toBe(height);
-    });
-
-    it('has correct viewBox for 100x100 canvas', () => {
-      const wrapper = mount(FavIcon);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('viewBox')).toBe('0 0 30 30');
-    });
-  });
-
-  describe('Path Geometry', () => {
-    it('first path starts from correct coordinates', () => {
-      const wrapper = mount(FavIcon);
-      const paths = wrapper.findAll('path');
-
-      const firstPathData = paths[0].attributes('d');
-      expect(firstPathData).toMatch(/^M15\s+30C/);
-    });
-
-    it('contains multiple coordinate points across paths', () => {
-      const wrapper = mount(FavIcon);
-      const paths = wrapper.findAll('path');
-
-      let totalCoordinateMatches = 0;
-      paths.forEach(path => {
-        const pathData = path.attributes('d');
-        const coordinateMatches = pathData.match(/\d+\.?\d*\s+\d+\.?\d*/g) || [];
-        totalCoordinateMatches += coordinateMatches.length;
-      });
-      expect(totalCoordinateMatches).toBeGreaterThan(10);
-    });
-
-    it('uses proper path commands', () => {
-      const wrapper = mount(FavIcon);
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        const pathData = path.attributes('d');
-        // Should contain path commands like M, L, C, Z
-        expect(pathData).toMatch(/[MLCZ]/);
-      });
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('is suitable for favicon usage', () => {
-      const wrapper = mount(FavIcon);
-      const svg = wrapper.find('svg');
-
-      // Should be square and reasonably sized
-      expect(svg.attributes('width')).toBe('30');
-      expect(svg.attributes('height')).toBe('30');
-    });
-
-    it('has solid fill suitable for small sizes', () => {
-      const wrapper = mount(FavIcon);
-      const paths = wrapper.findAll('path');
-
-      // Should have solid fill rather than just stroke for visibility at small sizes
-      paths.forEach(path => {
-        expect(path.attributes('fill')).toBe('#172774');
-      });
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('svg is properly structured for screen readers', () => {
-      const wrapper = mount(FavIcon);
-      const svg = wrapper.find('svg');
-
-      expect(svg.element.tagName.toLowerCase()).toBe('svg');
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('can be mounted without props', () => {
-      expect(() => {
-        mount(FavIcon);
-      }).not.toThrow();
-    });
-
-    it('renders consistently on multiple mounts', () => {
-      const wrapper1 = mount(FavIcon);
-      const wrapper2 = mount(FavIcon);
-
-      expect(wrapper1.html()).toBe(wrapper2.html());
-    });
-
-    it('maintains favicon integrity', () => {
-      const wrapper = mount(FavIcon);
-      const paths = wrapper.findAll('path');
-
-      expect(paths.length).toBe(3);
-      paths.forEach(path => {
-        expect(path.exists()).toBe(true);
-        expect(path.attributes('d')).toBeTruthy();
-        expect(path.attributes('fill')).toBeTruthy();
-      });
-    });
-
-    it('suitable for use as application favicon', () => {
-      const wrapper = mount(FavIcon);
-      const svg = wrapper.find('svg');
-
-      // Standard favicon requirements
-      expect(svg.attributes('width')).toBe('30');
-      expect(svg.attributes('height')).toBe('30');
-      expect(wrapper.findAll('path')[0].attributes('fill')).toBe('#172774');
-    });
-  });
-
-  describe('Brand Identity', () => {
-    it('uses brand color consistently', () => {
-      const wrapper = mount(FavIcon);
-      const paths = wrapper.findAll('path');
-
-      const brandColor = '#172774';
-      paths.forEach(path => {
-        expect(path.attributes('fill')).toBe(brandColor);
-      });
-    });
-
-    it('represents identifiable brand mark', () => {
-      const wrapper = mount(FavIcon);
-      const paths = wrapper.findAll('path');
-
-      // Should have substantial path data for brand recognition
-      paths.forEach(path => {
-        const pathData = path.attributes('d');
-        expect(pathData).toBeTruthy();
-        expect(typeof pathData).toBe('string');
-        expect(pathData.length).toBeGreaterThan(20);
-      });
-    });
-  });
-
-  describe('Icon Semantics', () => {
-    it('designed for small size visibility', () => {
-      const wrapper = mount(FavIcon);
-      const paths = wrapper.findAll('path');
-
-      // Should use fill rather than complex strokes for small size clarity
-      paths.forEach(path => {
-        expect(path.attributes('fill')).toBeTruthy();
-      });
-    });
-
-    it('maintains visual clarity at favicon size', () => {
-      const wrapper = mount(FavIcon);
-      const svg = wrapper.find('svg');
-
-      // 100x100 is appropriate base size for favicon scaling
-      expect(svg.attributes('viewBox')).toBe('0 0 30 30');
-      expect(svg.attributes('width')).toBe('30');
-      expect(svg.attributes('height')).toBe('30');
-    });
-  });
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FavIcon from '@components/Icons/FavIcon.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    logo_primary_fill: '#172774',
+    domain: 'domain-dental'
+  }
+}));
+
+describe('FavIcon Icon', () => {
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(FavIcon);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(FavIcon);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('30');
+      expect(svg.attributes('height')).toBe('30');
+      expect(svg.attributes('viewBox')).toBe('0 0 30 30');
+      expect(svg.attributes('fill')).toBe('none');
+      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+    });
+
+    it('contains exactly 3 path elements', () => {
+      const wrapper = mount(FavIcon);
+      const paths = wrapper.findAll('path');
+      expect(paths).toHaveLength(3);
+    });
+  });
+
+  describe('Path Structure', () => {
+    it('paths represent favicon shape', () => {
+      const wrapper = mount(FavIcon);
+      const paths = wrapper.findAll('path');
+
+      const firstPathData = paths[0].attributes('d');
+      expect(firstPathData).toContain('M15 30C23.271');
+      expect(firstPathData).toContain('C6.72904 0 0 6.72904');
+    });
+
+    it('paths have correct fill properties', () => {
+      const wrapper = mount(FavIcon);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('fill')).toBe('#172774');
+      });
+    });
+
+    it('paths form complete favicon shape', () => {
+      const wrapper = mount(FavIcon);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        const pathData = path.attributes('d');
+        expect(pathData).toBeTruthy();
+        expect(pathData.length).toBeGreaterThan(10);
+      });
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('uses correct brand color for fill', () => {
+      const wrapper = mount(FavIcon);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('fill')).toBe('#172774');
+      });
+    });
+
+    it('svg container has no fill initially', () => {
+      const wrapper = mount(FavIcon);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('fill')).toBe('none');
+    });
+  });
+
+  describe('Favicon Dimensions', () => {
+    it('uses standard favicon size', () => {
+      const wrapper = mount(FavIcon);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('30');
+      expect(svg.attributes('height')).toBe('30');
+    });
+
+    it('maintains square aspect ratio', () => {
+      const wrapper = mount(FavIcon);
+      const svg = wrapper.find('svg');
+
+      const width = svg.attributes('width');
+      const height = svg.attributes('height');
+      expect(width).toBe(height);
+    });
+
+    it('has correct viewBox for 100x100 canvas', () => {
+      const wrapper = mount(FavIcon);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('viewBox')).toBe('0 0 30 30');
+    });
+  });
+
+  describe('Path Geometry', () => {
+    it('first path starts from correct coordinates', () => {
+      const wrapper = mount(FavIcon);
+      const paths = wrapper.findAll('path');
+
+      const firstPathData = paths[0].attributes('d');
+      expect(firstPathData).toMatch(/^M15\s+30C/);
+    });
+
+    it('contains multiple coordinate points across paths', () => {
+      const wrapper = mount(FavIcon);
+      const paths = wrapper.findAll('path');
+
+      let totalCoordinateMatches = 0;
+      paths.forEach(path => {
+        const pathData = path.attributes('d');
+        const coordinateMatches = pathData.match(/\d+\.?\d*\s+\d+\.?\d*/g) || [];
+        totalCoordinateMatches += coordinateMatches.length;
+      });
+      expect(totalCoordinateMatches).toBeGreaterThan(10);
+    });
+
+    it('uses proper path commands', () => {
+      const wrapper = mount(FavIcon);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        const pathData = path.attributes('d');
+        // Should contain path commands like M, L, C, Z
+        expect(pathData).toMatch(/[MLCZ]/);
+      });
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('is suitable for favicon usage', () => {
+      const wrapper = mount(FavIcon);
+      const svg = wrapper.find('svg');
+
+      // Should be square and reasonably sized
+      expect(svg.attributes('width')).toBe('30');
+      expect(svg.attributes('height')).toBe('30');
+    });
+
+    it('has solid fill suitable for small sizes', () => {
+      const wrapper = mount(FavIcon);
+      const paths = wrapper.findAll('path');
+
+      // Should have solid fill rather than just stroke for visibility at small sizes
+      paths.forEach(path => {
+        expect(path.attributes('fill')).toBe('#172774');
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('svg is properly structured for screen readers', () => {
+      const wrapper = mount(FavIcon);
+      const svg = wrapper.find('svg');
+
+      expect(svg.element.tagName.toLowerCase()).toBe('svg');
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(FavIcon);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(FavIcon);
+      const wrapper2 = mount(FavIcon);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('maintains favicon integrity', () => {
+      const wrapper = mount(FavIcon);
+      const paths = wrapper.findAll('path');
+
+      expect(paths.length).toBe(3);
+      paths.forEach(path => {
+        expect(path.exists()).toBe(true);
+        expect(path.attributes('d')).toBeTruthy();
+        expect(path.attributes('fill')).toBeTruthy();
+      });
+    });
+
+    it('suitable for use as application favicon', () => {
+      const wrapper = mount(FavIcon);
+      const svg = wrapper.find('svg');
+
+      // Standard favicon requirements
+      expect(svg.attributes('width')).toBe('30');
+      expect(svg.attributes('height')).toBe('30');
+      expect(wrapper.findAll('path')[0].attributes('fill')).toBe('#172774');
+    });
+  });
+
+  describe('Brand Identity', () => {
+    it('uses brand color consistently', () => {
+      const wrapper = mount(FavIcon);
+      const paths = wrapper.findAll('path');
+
+      const brandColor = '#172774';
+      paths.forEach(path => {
+        expect(path.attributes('fill')).toBe(brandColor);
+      });
+    });
+
+    it('represents identifiable brand mark', () => {
+      const wrapper = mount(FavIcon);
+      const paths = wrapper.findAll('path');
+
+      // Should have substantial path data for brand recognition
+      paths.forEach(path => {
+        const pathData = path.attributes('d');
+        expect(pathData).toBeTruthy();
+        expect(typeof pathData).toBe('string');
+        expect(pathData.length).toBeGreaterThan(20);
+      });
+    });
+  });
+
+  describe('Icon Semantics', () => {
+    it('designed for small size visibility', () => {
+      const wrapper = mount(FavIcon);
+      const paths = wrapper.findAll('path');
+
+      // Should use fill rather than complex strokes for small size clarity
+      paths.forEach(path => {
+        expect(path.attributes('fill')).toBeTruthy();
+      });
+    });
+
+    it('maintains visual clarity at favicon size', () => {
+      const wrapper = mount(FavIcon);
+      const svg = wrapper.find('svg');
+
+      // 100x100 is appropriate base size for favicon scaling
+      expect(svg.attributes('viewBox')).toBe('0 0 30 30');
+      expect(svg.attributes('width')).toBe('30');
+      expect(svg.attributes('height')).toBe('30');
+    });
+  });
 });