@zap-wunschlachen/wl-shared-components 1.0.12 → 1.0.14

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

@@ -1,218 +1,218 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Play from '@components/Icons/Audio/Play.vue';
-
-describe('Play Icon', () => {
-  describe('Rendering', () => {
-    it('renders as SVG element', () => {
-      const wrapper = mount(Play);
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('has correct SVG attributes', () => {
-      const wrapper = mount(Play);
-      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 exactly 1 path element', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-      expect(paths).toHaveLength(1);
-    });
-  });
-
-  describe('Path Structure', () => {
-    it('path represents play triangle/arrow shape', () => {
-      const wrapper = mount(Play);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      expect(pathData).toContain('M5.25 5.65248C5.25 4.7968');
-      expect(pathData).toContain('6.91716 4.66674L18.4577');
-    });
-
-    it('path has correct stroke properties', () => {
-      const wrapper = mount(Play);
-      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('path forms complete play button shape', () => {
-      const wrapper = mount(Play);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Verify key points of the play triangle
-      expect(pathData).toContain('5.25 5.65248');      // Top left corner
-      expect(pathData).toContain('5.25 18.3471');      // Bottom left corner
-      expect(pathData).toContain('18.4577 11.0141');   // Right point (top half)
-      expect(pathData).toContain('18.4577 12.9855');   // Right point (bottom half)
-      expect(pathData).toContain('6.91716 19.3329');   // Bottom edge
-      expect(pathData).toContain('Z');                 // Path closed
-    });
-
-    it('play button has proper mathematical curve', () => {
-      const wrapper = mount(Play);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Cubic bezier curves for smooth play button
-      expect(pathData).toContain('C5.25 4.7968');     // Start curve
-      expect(pathData).toContain('6.1674 4.25437');   // Control point
-      expect(pathData).toContain('6.91716 4.66674');  // End point
-    });
-
-    it('triangle points to the right', () => {
-      const wrapper = mount(Play);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Left edge at x=5.25, right point at x=18.4577
-      expect(parseFloat(pathData.match(/M([\d.]+)/)[1])).toBeLessThan(10);
-      expect(pathData).toContain('18.4577'); // Right-most point
-    });
-  });
-
-  describe('Visual Properties', () => {
-    it('stroke uses the correct color', () => {
-      const wrapper = mount(Play);
-      const path = wrapper.find('path');
-
-      expect(path.attributes('stroke')).toBe('#172774');
-    });
-
-    it('path has no fill', () => {
-      const wrapper = mount(Play);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('fill')).toBe('none');
-    });
-
-    it('has rounded line caps and joins', () => {
-      const wrapper = mount(Play);
-      const path = wrapper.find('path');
-
-      expect(path.attributes('stroke-linecap')).toBe('round');
-      expect(path.attributes('stroke-linejoin')).toBe('round');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('svg is properly structured for screen readers', () => {
-      const wrapper = mount(Play);
-      const svg = wrapper.find('svg');
-
-      expect(svg.element.tagName.toLowerCase()).toBe('svg');
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('can be mounted without props', () => {
-      expect(() => {
-        mount(Play);
-      }).not.toThrow();
-    });
-
-    it('renders consistently on multiple mounts', () => {
-      const wrapper1 = mount(Play);
-      const wrapper2 = mount(Play);
-
-      expect(wrapper1.html()).toBe(wrapper2.html());
-    });
-
-    it('maintains correct proportions', () => {
-      const wrapper = mount(Play);
-      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(Play);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('width')).toBe('24');
-      expect(svg.attributes('height')).toBe('24');
-    });
-  });
-
-  describe('Icon Semantics', () => {
-    it('represents a play action with triangle pointing right', () => {
-      const wrapper = mount(Play);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Triangle should point to the right
-      expect(pathData).toMatch(/M5\.25/); // Starts from left
-      expect(pathData).toMatch(/18\.\d+/); // Points to right
-    });
-
-    it('triangle is vertically centered', () => {
-      const wrapper = mount(Play);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Top at ~5.65, bottom at ~18.35
-      // Center should be around (5.65 + 18.35) / 2 = 12
-      expect(pathData).toContain('11.0141'); // Upper center point
-      expect(pathData).toContain('12.9855'); // Lower center point
-    });
-
-    it('has smooth bezier curves for professional appearance', () => {
-      const wrapper = mount(Play);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Should contain curve commands (C)
-      expect(pathData).toMatch(/C\d+\.\d+\s+\d+\.\d+/);
-    });
-  });
-
-  describe('Play Button Geometry', () => {
-    it('forms an isosceles triangle shape', () => {
-      const wrapper = mount(Play);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Verify triangle vertices
-      expect(pathData).toContain('5.25 5.65248');    // Top left
-      expect(pathData).toContain('5.25 18.3471');    // Bottom left
-      expect(pathData).toContain('18.4577');         // Right point
-    });
-
-    it('has symmetric top and bottom halves', () => {
-      const wrapper = mount(Play);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Center line at y=12, symmetric offsets
-      expect(pathData).toContain('11.0141'); // ~1 unit above center
-      expect(pathData).toContain('12.9855'); // ~1 unit below center
-    });
-
-    it('maintains audio/video play button standard proportions', () => {
-      const wrapper = mount(Play);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Width ~13.2 (18.4577 - 5.25)
-      // Height ~12.7 (18.3471 - 5.65248)
-      // Roughly equilateral triangle shape
-      const widthMatch = pathData.match(/18\.4577/);
-      const leftMatch = pathData.match(/M5\.25/);
-
-      expect(widthMatch).toBeTruthy();
-      expect(leftMatch).toBeTruthy();
-    });
-  });
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Play from '@components/Icons/Audio/Play.vue';
+
+describe('Play Icon', () => {
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(Play);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(Play);
+      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 exactly 1 path element', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+      expect(paths).toHaveLength(1);
+    });
+  });
+
+  describe('Path Structure', () => {
+    it('path represents play triangle/arrow shape', () => {
+      const wrapper = mount(Play);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      expect(pathData).toContain('M5.25 5.65248C5.25 4.7968');
+      expect(pathData).toContain('6.91716 4.66674L18.4577');
+    });
+
+    it('path has correct stroke properties', () => {
+      const wrapper = mount(Play);
+      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('path forms complete play button shape', () => {
+      const wrapper = mount(Play);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Verify key points of the play triangle
+      expect(pathData).toContain('5.25 5.65248');      // Top left corner
+      expect(pathData).toContain('5.25 18.3471');      // Bottom left corner
+      expect(pathData).toContain('18.4577 11.0141');   // Right point (top half)
+      expect(pathData).toContain('18.4577 12.9855');   // Right point (bottom half)
+      expect(pathData).toContain('6.91716 19.3329');   // Bottom edge
+      expect(pathData).toContain('Z');                 // Path closed
+    });
+
+    it('play button has proper mathematical curve', () => {
+      const wrapper = mount(Play);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Cubic bezier curves for smooth play button
+      expect(pathData).toContain('C5.25 4.7968');     // Start curve
+      expect(pathData).toContain('6.1674 4.25437');   // Control point
+      expect(pathData).toContain('6.91716 4.66674');  // End point
+    });
+
+    it('triangle points to the right', () => {
+      const wrapper = mount(Play);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Left edge at x=5.25, right point at x=18.4577
+      expect(parseFloat(pathData.match(/M([\d.]+)/)[1])).toBeLessThan(10);
+      expect(pathData).toContain('18.4577'); // Right-most point
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('stroke uses the correct color', () => {
+      const wrapper = mount(Play);
+      const path = wrapper.find('path');
+
+      expect(path.attributes('stroke')).toBe('#172774');
+    });
+
+    it('path has no fill', () => {
+      const wrapper = mount(Play);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('fill')).toBe('none');
+    });
+
+    it('has rounded line caps and joins', () => {
+      const wrapper = mount(Play);
+      const path = wrapper.find('path');
+
+      expect(path.attributes('stroke-linecap')).toBe('round');
+      expect(path.attributes('stroke-linejoin')).toBe('round');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('svg is properly structured for screen readers', () => {
+      const wrapper = mount(Play);
+      const svg = wrapper.find('svg');
+
+      expect(svg.element.tagName.toLowerCase()).toBe('svg');
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(Play);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(Play);
+      const wrapper2 = mount(Play);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('maintains correct proportions', () => {
+      const wrapper = mount(Play);
+      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(Play);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('24');
+      expect(svg.attributes('height')).toBe('24');
+    });
+  });
+
+  describe('Icon Semantics', () => {
+    it('represents a play action with triangle pointing right', () => {
+      const wrapper = mount(Play);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Triangle should point to the right
+      expect(pathData).toMatch(/M5\.25/); // Starts from left
+      expect(pathData).toMatch(/18\.\d+/); // Points to right
+    });
+
+    it('triangle is vertically centered', () => {
+      const wrapper = mount(Play);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Top at ~5.65, bottom at ~18.35
+      // Center should be around (5.65 + 18.35) / 2 = 12
+      expect(pathData).toContain('11.0141'); // Upper center point
+      expect(pathData).toContain('12.9855'); // Lower center point
+    });
+
+    it('has smooth bezier curves for professional appearance', () => {
+      const wrapper = mount(Play);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Should contain curve commands (C)
+      expect(pathData).toMatch(/C\d+\.\d+\s+\d+\.\d+/);
+    });
+  });
+
+  describe('Play Button Geometry', () => {
+    it('forms an isosceles triangle shape', () => {
+      const wrapper = mount(Play);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Verify triangle vertices
+      expect(pathData).toContain('5.25 5.65248');    // Top left
+      expect(pathData).toContain('5.25 18.3471');    // Bottom left
+      expect(pathData).toContain('18.4577');         // Right point
+    });
+
+    it('has symmetric top and bottom halves', () => {
+      const wrapper = mount(Play);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Center line at y=12, symmetric offsets
+      expect(pathData).toContain('11.0141'); // ~1 unit above center
+      expect(pathData).toContain('12.9855'); // ~1 unit below center
+    });
+
+    it('maintains audio/video play button standard proportions', () => {
+      const wrapper = mount(Play);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Width ~13.2 (18.4577 - 5.25)
+      // Height ~12.7 (18.3471 - 5.65248)
+      // Roughly equilateral triangle shape
+      const widthMatch = pathData.match(/18\.4577/);
+      const leftMatch = pathData.match(/M5\.25/);
+
+      expect(widthMatch).toBeTruthy();
+      expect(leftMatch).toBeTruthy();
+    });
+  });
 });