@zap-wunschlachen/wl-shared-components 1.0.15 → 1.0.17

package/tests/unit/components/Icons/Audio/Pause.spec.ts

@@ -1,209 +1,209 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Pause from '@components/Icons/Audio/Pause.vue';
-
-describe('Pause Icon', () => {
-  describe('Rendering', () => {
-    it('renders as SVG element', () => {
-      const wrapper = mount(Pause);
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('has correct SVG attributes', () => {
-      const wrapper = mount(Pause);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('width')).toBe('24');
-      expect(svg.attributes('height')).toBe('24');
-      expect(svg.attributes('viewBox')).toBe('0 0 24 24');
-      expect(svg.attributes('fill')).toBe('none');
-      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
-    });
-
-    it('contains a group element', () => {
-      const wrapper = mount(Pause);
-      const group = wrapper.find('g');
-      expect(group.exists()).toBe(true);
-    });
-
-    it('group has correct id attribute', () => {
-      const wrapper = mount(Pause);
-      const group = wrapper.find('g');
-      expect(group.attributes('id')).toBe('heroicons-outline/pause');
-    });
-
-    it('contains exactly 1 path element', () => {
-      const wrapper = mount(Pause);
-      const paths = wrapper.findAll('path');
-      expect(paths).toHaveLength(1);
-    });
-  });
-
-  describe('Path Structure', () => {
-    it('path represents two vertical lines (pause bars)', () => {
-      const wrapper = mount(Pause);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      expect(pathData).toBe('M15.75 5.25L15.75 18.75M8.25 5.25V18.75');
-    });
-
-    it('path has correct id attribute', () => {
-      const wrapper = mount(Pause);
-      const path = wrapper.find('path');
-
-      expect(path.attributes('id')).toBe('Vector');
-    });
-
-    it('path has correct stroke properties', () => {
-      const wrapper = mount(Pause);
-      const path = wrapper.find('path');
-
-      expect(path.attributes('stroke')).toBe('#172774');
-      expect(path.attributes('stroke-linecap')).toBe('round');
-      expect(path.attributes('stroke-linejoin')).toBe('round');
-    });
-
-    it('pause bars have correct positioning', () => {
-      const wrapper = mount(Pause);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Left bar at x=8.25
-      expect(pathData).toContain('M8.25 5.25');
-      expect(pathData).toContain('V18.75');
-
-      // Right bar at x=15.75
-      expect(pathData).toContain('M15.75 5.25');
-      expect(pathData).toContain('L15.75 18.75');
-    });
-
-    it('pause bars span correct vertical range', () => {
-      const wrapper = mount(Pause);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Both bars should go from y=5.25 to y=18.75
-      expect(pathData).toMatch(/5\.25/g);
-      expect(pathData).toMatch(/18\.75/g);
-    });
-  });
-
-  describe('Visual Properties', () => {
-    it('stroke uses the correct color', () => {
-      const wrapper = mount(Pause);
-      const path = wrapper.find('path');
-
-      expect(path.attributes('stroke')).toBe('#172774');
-    });
-
-    it('path has no fill', () => {
-      const wrapper = mount(Pause);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('fill')).toBe('none');
-    });
-
-    it('has rounded line caps', () => {
-      const wrapper = mount(Pause);
-      const path = wrapper.find('path');
-
-      expect(path.attributes('stroke-linecap')).toBe('round');
-    });
-
-    it('has rounded line joins', () => {
-      const wrapper = mount(Pause);
-      const path = wrapper.find('path');
-
-      expect(path.attributes('stroke-linejoin')).toBe('round');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('svg is properly structured for screen readers', () => {
-      const wrapper = mount(Pause);
-      const svg = wrapper.find('svg');
-
-      expect(svg.element.tagName.toLowerCase()).toBe('svg');
-    });
-
-    it('has descriptive group id', () => {
-      const wrapper = mount(Pause);
-      const group = wrapper.find('g');
-
-      expect(group.attributes('id')).toContain('pause');
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('can be mounted without props', () => {
-      expect(() => {
-        mount(Pause);
-      }).not.toThrow();
-    });
-
-    it('renders consistently on multiple mounts', () => {
-      const wrapper1 = mount(Pause);
-      const wrapper2 = mount(Pause);
-
-      expect(wrapper1.html()).toBe(wrapper2.html());
-    });
-
-    it('maintains correct proportions', () => {
-      const wrapper = mount(Pause);
-      const svg = wrapper.find('svg');
-
-      // Icon should be square
-      expect(svg.attributes('width')).toBe(svg.attributes('height'));
-    });
-
-    it('uses standard 24x24 icon size', () => {
-      const wrapper = mount(Pause);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('width')).toBe('24');
-      expect(svg.attributes('height')).toBe('24');
-    });
-  });
-
-  describe('Icon Semantics', () => {
-    it('represents a pause action with two vertical bars', () => {
-      const wrapper = mount(Pause);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Should contain two vertical lines
-      // Path: M15.75 5.25L15.75 18.75M8.25 5.25V18.75
-      // Commands: M (move), L (line), M (move), V (vertical line)
-      const commands = pathData.match(/[MLV]/g);
-      expect(commands).toHaveLength(4); // M, L, M, V
-      // Two bars: first M+L, second M+V
-      expect(commands).toEqual(['M', 'L', 'M', 'V']);
-    });
-
-    it('pause bars are symmetrically positioned', () => {
-      const wrapper = mount(Pause);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Center is at x=12, bars should be equidistant
-      // Left bar at 8.25, right bar at 15.75
-      // Distance from center: 12 - 8.25 = 3.75, 15.75 - 12 = 3.75
-      expect(pathData).toContain('8.25');
-      expect(pathData).toContain('15.75');
-    });
-
-    it('bars have equal height', () => {
-      const wrapper = mount(Pause);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Both bars go from 5.25 to 18.75 (height = 13.5)
-      const matches5_25 = pathData.match(/5\.25/g);
-      const matches18_75 = pathData.match(/18\.75/g);
-
-      expect(matches5_25).toHaveLength(2); // Both bars start at 5.25
-      expect(matches18_75).toHaveLength(2); // Both bars end at 18.75
-    });
-  });
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Pause from '@components/Icons/Audio/Pause.vue';
+
+describe('Pause Icon', () => {
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(Pause);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(Pause);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('24');
+      expect(svg.attributes('height')).toBe('24');
+      expect(svg.attributes('viewBox')).toBe('0 0 24 24');
+      expect(svg.attributes('fill')).toBe('none');
+      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+    });
+
+    it('contains a group element', () => {
+      const wrapper = mount(Pause);
+      const group = wrapper.find('g');
+      expect(group.exists()).toBe(true);
+    });
+
+    it('group has correct id attribute', () => {
+      const wrapper = mount(Pause);
+      const group = wrapper.find('g');
+      expect(group.attributes('id')).toBe('heroicons-outline/pause');
+    });
+
+    it('contains exactly 1 path element', () => {
+      const wrapper = mount(Pause);
+      const paths = wrapper.findAll('path');
+      expect(paths).toHaveLength(1);
+    });
+  });
+
+  describe('Path Structure', () => {
+    it('path represents two vertical lines (pause bars)', () => {
+      const wrapper = mount(Pause);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      expect(pathData).toBe('M15.75 5.25L15.75 18.75M8.25 5.25V18.75');
+    });
+
+    it('path has correct id attribute', () => {
+      const wrapper = mount(Pause);
+      const path = wrapper.find('path');
+
+      expect(path.attributes('id')).toBe('Vector');
+    });
+
+    it('path has correct stroke properties', () => {
+      const wrapper = mount(Pause);
+      const path = wrapper.find('path');
+
+      expect(path.attributes('stroke')).toBe('#172774');
+      expect(path.attributes('stroke-linecap')).toBe('round');
+      expect(path.attributes('stroke-linejoin')).toBe('round');
+    });
+
+    it('pause bars have correct positioning', () => {
+      const wrapper = mount(Pause);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Left bar at x=8.25
+      expect(pathData).toContain('M8.25 5.25');
+      expect(pathData).toContain('V18.75');
+
+      // Right bar at x=15.75
+      expect(pathData).toContain('M15.75 5.25');
+      expect(pathData).toContain('L15.75 18.75');
+    });
+
+    it('pause bars span correct vertical range', () => {
+      const wrapper = mount(Pause);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Both bars should go from y=5.25 to y=18.75
+      expect(pathData).toMatch(/5\.25/g);
+      expect(pathData).toMatch(/18\.75/g);
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('stroke uses the correct color', () => {
+      const wrapper = mount(Pause);
+      const path = wrapper.find('path');
+
+      expect(path.attributes('stroke')).toBe('#172774');
+    });
+
+    it('path has no fill', () => {
+      const wrapper = mount(Pause);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('fill')).toBe('none');
+    });
+
+    it('has rounded line caps', () => {
+      const wrapper = mount(Pause);
+      const path = wrapper.find('path');
+
+      expect(path.attributes('stroke-linecap')).toBe('round');
+    });
+
+    it('has rounded line joins', () => {
+      const wrapper = mount(Pause);
+      const path = wrapper.find('path');
+
+      expect(path.attributes('stroke-linejoin')).toBe('round');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('svg is properly structured for screen readers', () => {
+      const wrapper = mount(Pause);
+      const svg = wrapper.find('svg');
+
+      expect(svg.element.tagName.toLowerCase()).toBe('svg');
+    });
+
+    it('has descriptive group id', () => {
+      const wrapper = mount(Pause);
+      const group = wrapper.find('g');
+
+      expect(group.attributes('id')).toContain('pause');
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(Pause);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(Pause);
+      const wrapper2 = mount(Pause);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('maintains correct proportions', () => {
+      const wrapper = mount(Pause);
+      const svg = wrapper.find('svg');
+
+      // Icon should be square
+      expect(svg.attributes('width')).toBe(svg.attributes('height'));
+    });
+
+    it('uses standard 24x24 icon size', () => {
+      const wrapper = mount(Pause);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('24');
+      expect(svg.attributes('height')).toBe('24');
+    });
+  });
+
+  describe('Icon Semantics', () => {
+    it('represents a pause action with two vertical bars', () => {
+      const wrapper = mount(Pause);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Should contain two vertical lines
+      // Path: M15.75 5.25L15.75 18.75M8.25 5.25V18.75
+      // Commands: M (move), L (line), M (move), V (vertical line)
+      const commands = pathData.match(/[MLV]/g);
+      expect(commands).toHaveLength(4); // M, L, M, V
+      // Two bars: first M+L, second M+V
+      expect(commands).toEqual(['M', 'L', 'M', 'V']);
+    });
+
+    it('pause bars are symmetrically positioned', () => {
+      const wrapper = mount(Pause);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Center is at x=12, bars should be equidistant
+      // Left bar at 8.25, right bar at 15.75
+      // Distance from center: 12 - 8.25 = 3.75, 15.75 - 12 = 3.75
+      expect(pathData).toContain('8.25');
+      expect(pathData).toContain('15.75');
+    });
+
+    it('bars have equal height', () => {
+      const wrapper = mount(Pause);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Both bars go from 5.25 to 18.75 (height = 13.5)
+      const matches5_25 = pathData.match(/5\.25/g);
+      const matches18_75 = pathData.match(/18\.75/g);
+
+      expect(matches5_25).toHaveLength(2); // Both bars start at 5.25
+      expect(matches18_75).toHaveLength(2); // Both bars end at 18.75
+    });
+  });
 });