@zap-wunschlachen/wl-shared-components 1.0.4 → 1.0.6

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

@@ -1,275 +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);
-    });
-  });
+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);
+    });
+  });
 });