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

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

@@ -1,316 +1,316 @@
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Play from '@components/Icons/play.vue';
-
-// Mock siteColors
-vi.mock('@/utils/index', () => ({
-  siteColors: {
-    font_color_code: '#172774'
-  }
-}));
-
-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('xmlns')).toBe('http://www.w3.org/2000/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');
-    });
-
-    it('contains exactly 2 path elements', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-      expect(paths).toHaveLength(2);
-    });
-  });
-
-  describe('Path Structure', () => {
-    it('first path represents circle background', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      const circlePath = paths[0];
-      expect(circlePath.attributes('d')).toContain('M21 12C21 16.9706');
-      expect(circlePath.attributes('stroke')).toBe('#172774');
-      expect(circlePath.attributes('stroke-width')).toBe('1.5');
-    });
-
-    it('second path represents play triangle', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      const trianglePath = paths[1];
-      expect(trianglePath.attributes('d')).toContain('M15.9099 11.6722');
-      expect(trianglePath.attributes('stroke')).toBe('#172774');
-      expect(trianglePath.attributes('stroke-width')).toBe('1.5');
-    });
-
-    it('circle path forms complete circle', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      const circlePath = paths[0];
-      const pathData = circlePath.attributes('d');
-
-      // Should contain circle definition with center at 12,12 and radius 9
-      expect(pathData).toContain('21 12C21 16.9706'); // Right side
-      expect(pathData).toContain('16.9706 21 12 21'); // Bottom
-      expect(pathData).toContain('7.02944 21 3 16.9706'); // Left side
-      expect(pathData).toContain('3 12C3 7.02944'); // Top
-    });
-
-    it('triangle path forms play arrow', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      const trianglePath = paths[1];
-      const pathData = trianglePath.attributes('d');
-
-      // Should contain triangle vertices
-      expect(pathData).toContain('15.9099 11.6722'); // Right point
-      expect(pathData).toContain('10.3071 15.4405'); // Bottom left
-      expect(pathData).toContain('9.75 15.1127'); // Bottom edge
-      expect(pathData).toContain('8.88732C9.75 8.60139'); // Top edge
-    });
-  });
-
-  describe('Visual Properties', () => {
-    it('all strokes use correct brand color', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        expect(path.attributes('stroke')).toBe('#172774');
-      });
-    });
-
-    it('all paths have correct stroke width', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        expect(path.attributes('stroke-width')).toBe('1.5');
-      });
-    });
-
-    it('all paths have rounded line caps and joins', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        expect(path.attributes('stroke-linecap')).toBe('round');
-        expect(path.attributes('stroke-linejoin')).toBe('round');
-      });
-    });
-
-    it('paths have no fill (outline style)', () => {
-      const wrapper = mount(Play);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('fill')).toBe('none');
-    });
-  });
-
-  describe('Play Button Geometry', () => {
-    it('circle is centered in viewBox', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      const circlePath = paths[0];
-      const pathData = circlePath.attributes('d');
-
-      // Circle centered at 12,12 with radius 9
-      expect(pathData).toContain('12C21 16.9706'); // Center coordinates
-      expect(pathData).toContain('21 12 21C7.02944'); // Center coordinates
-    });
-
-    it('play triangle is centered horizontally', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      const trianglePath = paths[1];
-      const pathData = trianglePath.attributes('d');
-
-      // Triangle should be centered around x=12
-      expect(pathData).toContain('15.9099'); // Right point
-      expect(pathData).toContain('10.3071'); // Left side
-      expect(pathData).toContain('9.75'); // Left edge
-    });
-
-    it('play triangle points to the right', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      const trianglePath = paths[1];
-      const pathData = trianglePath.attributes('d');
-
-      // Right-pointing triangle
-      expect(pathData).toMatch(/15\.9099.*11\.6722/); // Right point
-      expect(pathData).toMatch(/10\.3071.*15\.4405/); // Bottom left
-      expect(pathData).toMatch(/8\.88732/); // Top left
-    });
-
-    it('maintains proper play button proportions', () => {
-      const wrapper = mount(Play);
-      const svg = wrapper.find('svg');
-
-      // Standard play button is square
-      expect(svg.attributes('width')).toBe(svg.attributes('height'));
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('uses standard 24x24 size', () => {
-      const wrapper = mount(Play);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('width')).toBe('24');
-      expect(svg.attributes('height')).toBe('24');
-    });
-
-    it('suitable for media control usage', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      // Circle + triangle is standard play button design
-      expect(paths).toHaveLength(2);
-      expect(paths[0].attributes('d')).toContain('12C21'); // Circle
-      expect(paths[1].attributes('d')).toContain('15.9099'); // Triangle
-    });
-  });
-
-  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');
-    });
-
-    it('uses clear outline style for visibility', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      // Outline style with good contrast
-      paths.forEach(path => {
-        expect(path.attributes('stroke')).toBe('#172774');
-        expect(path.attributes('stroke-width')).toBe('1.5');
-      });
-    });
-  });
-
-  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 play button structure integrity', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      expect(paths).toHaveLength(2);
-      paths.forEach(path => {
-        expect(path.attributes('d')).toBeTruthy();
-        expect(path.attributes('stroke')).toBeTruthy();
-        expect(path.attributes('stroke-width')).toBeTruthy();
-      });
-    });
-
-    it('suitable for media player controls', () => {
-      const wrapper = mount(Play);
-
-      // Standard media control size and appearance
-      expect(wrapper.find('svg').attributes('width')).toBe('24');
-      expect(wrapper.find('svg').attributes('height')).toBe('24');
-      expect(wrapper.findAll('path')).toHaveLength(2);
-    });
-  });
-
-  describe('Icon Semantics', () => {
-    it('represents play action with universal design', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      // Universal play symbol: circle + right-pointing triangle
-      const circlePath = paths[0].attributes('d');
-      const trianglePath = paths[1].attributes('d');
-
-      expect(circlePath).toMatch(/C21 16\.9706.*C3 7\.02944/); // Circle
-      expect(trianglePath).toMatch(/15\.9099.*11\.6722/); // Right-pointing
-    });
-
-    it('uses appropriate size for media controls', () => {
-      const wrapper = mount(Play);
-      const svg = wrapper.find('svg');
-
-      // 24px is standard for media control buttons
-      expect(svg.attributes('width')).toBe('24');
-      expect(svg.attributes('height')).toBe('24');
-    });
-
-    it('provides clear visual affordance', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      // Clear outline with good stroke weight
-      paths.forEach(path => {
-        expect(path.attributes('stroke')).toBeTruthy();
-        expect(parseFloat(path.attributes('stroke-width'))).toBeGreaterThan(1);
-      });
-    });
-  });
-
-  describe('Visual Design', () => {
-    it('provides recognizable play button appearance', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      // Standard play button elements
-      expect(paths[0].attributes('d')).toContain('21 12C21'); // Circular boundary
-      expect(paths[1].attributes('d')).toContain('15.9099'); // Triangle pointing right
-    });
-
-    it('uses consistent stroke styling', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        expect(path.attributes('stroke')).toBe('#172774');
-        expect(path.attributes('stroke-width')).toBe('1.5');
-        expect(path.attributes('stroke-linecap')).toBe('round');
-        expect(path.attributes('stroke-linejoin')).toBe('round');
-      });
-    });
-
-    it('balances circle and triangle proportions', () => {
-      const wrapper = mount(Play);
-      const paths = wrapper.findAll('path');
-
-      const circlePath = paths[0].attributes('d');
-      const trianglePath = paths[1].attributes('d');
-
-      // Triangle should be proportional to circle
-      expect(circlePath).toContain('21 12'); // Circle radius ~9
-      expect(trianglePath).toMatch(/15\.9099.*9\.75/); // Triangle width ~6
-    });
-  });
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Play from '@components/Icons/play.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    font_color_code: '#172774'
+  }
+}));
+
+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('xmlns')).toBe('http://www.w3.org/2000/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');
+    });
+
+    it('contains exactly 2 path elements', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+      expect(paths).toHaveLength(2);
+    });
+  });
+
+  describe('Path Structure', () => {
+    it('first path represents circle background', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      const circlePath = paths[0];
+      expect(circlePath.attributes('d')).toContain('M21 12C21 16.9706');
+      expect(circlePath.attributes('stroke')).toBe('#172774');
+      expect(circlePath.attributes('stroke-width')).toBe('1.5');
+    });
+
+    it('second path represents play triangle', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      const trianglePath = paths[1];
+      expect(trianglePath.attributes('d')).toContain('M15.9099 11.6722');
+      expect(trianglePath.attributes('stroke')).toBe('#172774');
+      expect(trianglePath.attributes('stroke-width')).toBe('1.5');
+    });
+
+    it('circle path forms complete circle', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      const circlePath = paths[0];
+      const pathData = circlePath.attributes('d');
+
+      // Should contain circle definition with center at 12,12 and radius 9
+      expect(pathData).toContain('21 12C21 16.9706'); // Right side
+      expect(pathData).toContain('16.9706 21 12 21'); // Bottom
+      expect(pathData).toContain('7.02944 21 3 16.9706'); // Left side
+      expect(pathData).toContain('3 12C3 7.02944'); // Top
+    });
+
+    it('triangle path forms play arrow', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      const trianglePath = paths[1];
+      const pathData = trianglePath.attributes('d');
+
+      // Should contain triangle vertices
+      expect(pathData).toContain('15.9099 11.6722'); // Right point
+      expect(pathData).toContain('10.3071 15.4405'); // Bottom left
+      expect(pathData).toContain('9.75 15.1127'); // Bottom edge
+      expect(pathData).toContain('8.88732C9.75 8.60139'); // Top edge
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('all strokes use correct brand color', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('stroke')).toBe('#172774');
+      });
+    });
+
+    it('all paths have correct stroke width', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('stroke-width')).toBe('1.5');
+      });
+    });
+
+    it('all paths have rounded line caps and joins', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('stroke-linecap')).toBe('round');
+        expect(path.attributes('stroke-linejoin')).toBe('round');
+      });
+    });
+
+    it('paths have no fill (outline style)', () => {
+      const wrapper = mount(Play);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('fill')).toBe('none');
+    });
+  });
+
+  describe('Play Button Geometry', () => {
+    it('circle is centered in viewBox', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      const circlePath = paths[0];
+      const pathData = circlePath.attributes('d');
+
+      // Circle centered at 12,12 with radius 9
+      expect(pathData).toContain('12C21 16.9706'); // Center coordinates
+      expect(pathData).toContain('21 12 21C7.02944'); // Center coordinates
+    });
+
+    it('play triangle is centered horizontally', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      const trianglePath = paths[1];
+      const pathData = trianglePath.attributes('d');
+
+      // Triangle should be centered around x=12
+      expect(pathData).toContain('15.9099'); // Right point
+      expect(pathData).toContain('10.3071'); // Left side
+      expect(pathData).toContain('9.75'); // Left edge
+    });
+
+    it('play triangle points to the right', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      const trianglePath = paths[1];
+      const pathData = trianglePath.attributes('d');
+
+      // Right-pointing triangle
+      expect(pathData).toMatch(/15\.9099.*11\.6722/); // Right point
+      expect(pathData).toMatch(/10\.3071.*15\.4405/); // Bottom left
+      expect(pathData).toMatch(/8\.88732/); // Top left
+    });
+
+    it('maintains proper play button proportions', () => {
+      const wrapper = mount(Play);
+      const svg = wrapper.find('svg');
+
+      // Standard play button is square
+      expect(svg.attributes('width')).toBe(svg.attributes('height'));
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('uses standard 24x24 size', () => {
+      const wrapper = mount(Play);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('24');
+      expect(svg.attributes('height')).toBe('24');
+    });
+
+    it('suitable for media control usage', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      // Circle + triangle is standard play button design
+      expect(paths).toHaveLength(2);
+      expect(paths[0].attributes('d')).toContain('12C21'); // Circle
+      expect(paths[1].attributes('d')).toContain('15.9099'); // Triangle
+    });
+  });
+
+  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');
+    });
+
+    it('uses clear outline style for visibility', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      // Outline style with good contrast
+      paths.forEach(path => {
+        expect(path.attributes('stroke')).toBe('#172774');
+        expect(path.attributes('stroke-width')).toBe('1.5');
+      });
+    });
+  });
+
+  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 play button structure integrity', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      expect(paths).toHaveLength(2);
+      paths.forEach(path => {
+        expect(path.attributes('d')).toBeTruthy();
+        expect(path.attributes('stroke')).toBeTruthy();
+        expect(path.attributes('stroke-width')).toBeTruthy();
+      });
+    });
+
+    it('suitable for media player controls', () => {
+      const wrapper = mount(Play);
+
+      // Standard media control size and appearance
+      expect(wrapper.find('svg').attributes('width')).toBe('24');
+      expect(wrapper.find('svg').attributes('height')).toBe('24');
+      expect(wrapper.findAll('path')).toHaveLength(2);
+    });
+  });
+
+  describe('Icon Semantics', () => {
+    it('represents play action with universal design', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      // Universal play symbol: circle + right-pointing triangle
+      const circlePath = paths[0].attributes('d');
+      const trianglePath = paths[1].attributes('d');
+
+      expect(circlePath).toMatch(/C21 16\.9706.*C3 7\.02944/); // Circle
+      expect(trianglePath).toMatch(/15\.9099.*11\.6722/); // Right-pointing
+    });
+
+    it('uses appropriate size for media controls', () => {
+      const wrapper = mount(Play);
+      const svg = wrapper.find('svg');
+
+      // 24px is standard for media control buttons
+      expect(svg.attributes('width')).toBe('24');
+      expect(svg.attributes('height')).toBe('24');
+    });
+
+    it('provides clear visual affordance', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      // Clear outline with good stroke weight
+      paths.forEach(path => {
+        expect(path.attributes('stroke')).toBeTruthy();
+        expect(parseFloat(path.attributes('stroke-width'))).toBeGreaterThan(1);
+      });
+    });
+  });
+
+  describe('Visual Design', () => {
+    it('provides recognizable play button appearance', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      // Standard play button elements
+      expect(paths[0].attributes('d')).toContain('21 12C21'); // Circular boundary
+      expect(paths[1].attributes('d')).toContain('15.9099'); // Triangle pointing right
+    });
+
+    it('uses consistent stroke styling', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('stroke')).toBe('#172774');
+        expect(path.attributes('stroke-width')).toBe('1.5');
+        expect(path.attributes('stroke-linecap')).toBe('round');
+        expect(path.attributes('stroke-linejoin')).toBe('round');
+      });
+    });
+
+    it('balances circle and triangle proportions', () => {
+      const wrapper = mount(Play);
+      const paths = wrapper.findAll('path');
+
+      const circlePath = paths[0].attributes('d');
+      const trianglePath = paths[1].attributes('d');
+
+      // Triangle should be proportional to circle
+      expect(circlePath).toContain('21 12'); // Circle radius ~9
+      expect(trianglePath).toMatch(/15\.9099.*9\.75/); // Triangle width ~6
+    });
+  });
 });