@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,252 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FavIcon from '@components/Icons/FavIcon.vue';
+
+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');
+    });
+  });
+});

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

@@ -0,0 +1,275 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import FilledCircle from '@components/Icons/FilledCircle.vue';
+
+describe('FilledCircle Icon', () => {
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(FilledCircle);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(FilledCircle);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('16');
+      expect(svg.attributes('height')).toBe('16');
+      expect(svg.attributes('viewBox')).toBe('0 0 16 16');
+      expect(svg.attributes('fill')).toBe('none');
+      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+    });
+
+    it('contains exactly 1 circle element', () => {
+      const wrapper = mount(FilledCircle);
+      const circles = wrapper.findAll('circle');
+      expect(circles).toHaveLength(1);
+    });
+  });
+
+  describe('Circle Properties', () => {
+    it('circle is centered in viewBox', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      expect(circle.attributes('cx')).toBe('8');
+      expect(circle.attributes('cy')).toBe('8');
+    });
+
+    it('circle fills entire viewBox', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      expect(circle.attributes('r')).toBe('8');
+      // With radius 8 and center at (8,8), circle spans 0-16 in both dimensions
+    });
+
+    it('circle has correct fill color', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      expect(circle.attributes('fill')).toBe('#C1C1C2');
+    });
+
+    it('circle has no stroke', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      expect(circle.attributes('stroke')).toBeUndefined();
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('uses gray fill color', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      expect(circle.attributes('fill')).toBe('#C1C1C2');
+    });
+
+    it('svg container has no default fill', () => {
+      const wrapper = mount(FilledCircle);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('fill')).toBe('none');
+    });
+
+    it('creates solid filled appearance', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      // Should have fill but no stroke for solid appearance
+      expect(circle.attributes('fill')).toBeTruthy();
+      expect(circle.attributes('stroke')).toBeUndefined();
+    });
+  });
+
+  describe('Dimensions', () => {
+    it('uses compact 16x16 size', () => {
+      const wrapper = mount(FilledCircle);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('16');
+      expect(svg.attributes('height')).toBe('16');
+    });
+
+    it('maintains square aspect ratio', () => {
+      const wrapper = mount(FilledCircle);
+      const svg = wrapper.find('svg');
+
+      const width = svg.attributes('width');
+      const height = svg.attributes('height');
+      expect(width).toBe(height);
+    });
+
+    it('has matching viewBox dimensions', () => {
+      const wrapper = mount(FilledCircle);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('viewBox')).toBe('0 0 16 16');
+    });
+  });
+
+  describe('Circle Geometry', () => {
+    it('circle is perfectly centered', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      const cx = parseInt(circle.attributes('cx'));
+      const cy = parseInt(circle.attributes('cy'));
+      const r = parseInt(circle.attributes('r'));
+
+      // Center should be at half the viewBox dimensions
+      expect(cx).toBe(8);
+      expect(cy).toBe(8);
+      expect(r).toBe(8);
+    });
+
+    it('circle touches all edges of viewBox', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      const cx = parseInt(circle.attributes('cx'));
+      const cy = parseInt(circle.attributes('cy'));
+      const r = parseInt(circle.attributes('r'));
+
+      // Circle should extend from 0 to 16 in both dimensions
+      expect(cx - r).toBe(0);  // Left edge
+      expect(cx + r).toBe(16); // Right edge
+      expect(cy - r).toBe(0);  // Top edge
+      expect(cy + r).toBe(16); // Bottom edge
+    });
+
+    it('forms perfect circle', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      // All radii should be equal
+      const r = circle.attributes('r');
+      expect(r).toBe('8');
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('suitable for UI indicators', () => {
+      const wrapper = mount(FilledCircle);
+      const svg = wrapper.find('svg');
+
+      // Small size appropriate for bullets, status indicators, etc.
+      expect(svg.attributes('width')).toBe('16');
+      expect(svg.attributes('height')).toBe('16');
+    });
+
+    it('uses neutral gray color', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      // Gray color suggests neutral/inactive state
+      expect(circle.attributes('fill')).toBe('#C1C1C2');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('svg is properly structured for screen readers', () => {
+      const wrapper = mount(FilledCircle);
+      const svg = wrapper.find('svg');
+
+      expect(svg.element.tagName.toLowerCase()).toBe('svg');
+    });
+
+    it('simple structure for clear recognition', () => {
+      const wrapper = mount(FilledCircle);
+
+      // Should have minimal, clear structure
+      expect(wrapper.findAll('circle')).toHaveLength(1);
+      expect(wrapper.findAll('path')).toHaveLength(0);
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(FilledCircle);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(FilledCircle);
+      const wrapper2 = mount(FilledCircle);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('maintains circle integrity', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      expect(circle.exists()).toBe(true);
+      expect(circle.attributes('cx')).toBeTruthy();
+      expect(circle.attributes('cy')).toBeTruthy();
+      expect(circle.attributes('r')).toBeTruthy();
+      expect(circle.attributes('fill')).toBeTruthy();
+    });
+
+    it('suitable for various UI contexts', () => {
+      const wrapper = mount(FilledCircle);
+
+      // Small, neutral, and simple - good for:
+      // - List bullets
+      // - Status indicators
+      // - Form elements
+      // - Navigation dots
+      expect(wrapper.find('svg').attributes('width')).toBe('16');
+      expect(wrapper.find('circle').attributes('fill')).toBe('#C1C1C2');
+    });
+  });
+
+  describe('Icon Semantics', () => {
+    it('represents filled state or bullet point', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      // Solid fill suggests "filled" or "active" state
+      expect(circle.attributes('fill')).toBe('#C1C1C2');
+      expect(circle.attributes('stroke')).toBeUndefined();
+    });
+
+    it('uses appropriate size for inline usage', () => {
+      const wrapper = mount(FilledCircle);
+      const svg = wrapper.find('svg');
+
+      // 16px is good size for inline with text or as small indicator
+      expect(svg.attributes('width')).toBe('16');
+      expect(svg.attributes('height')).toBe('16');
+    });
+
+    it('neutral color suggests inactive or default state', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      // Gray color typically indicates neutral/inactive state
+      const fillColor = circle.attributes('fill');
+      expect(fillColor).toBe('#C1C1C2');
+      expect(fillColor.toLowerCase()).toMatch(/^#[c-f]/); // Grayish color range
+    });
+  });
+
+  describe('Visual Design', () => {
+    it('provides clear visual weight', () => {
+      const wrapper = mount(FilledCircle);
+      const circle = wrapper.find('circle');
+
+      // Solid fill provides clear visual presence
+      expect(circle.attributes('fill')).toBeTruthy();
+      expect(circle.attributes('fill')).not.toBe('none');
+    });
+
+    it('maintains simplicity for scalability', () => {
+      const wrapper = mount(FilledCircle);
+
+      // Simple single-element design scales well
+      expect(wrapper.findAll('*')).toHaveLength(2); // svg + circle
+      expect(wrapper.find('circle').exists()).toBe(true);
+    });
+  });
+});