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

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

@@ -1,150 +1,150 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import CloudSaved from '@components/Icons/Audio/CloudSaved.vue';
-
-describe.skip('CloudSaved Icon', () => {
-  describe('Rendering', () => {
-    it('renders as SVG element', () => {
-      const wrapper = mount(CloudSaved);
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('has correct SVG attributes', () => {
-      const wrapper = mount(CloudSaved);
-      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 2 path elements', () => {
-      const wrapper = mount(CloudSaved);
-      const paths = wrapper.findAll('path');
-      expect(paths).toHaveLength(2);
-    });
-  });
-
-  describe('Path Structure', () => {
-    it('first path represents cloud shape', () => {
-      const wrapper = mount(CloudSaved);
-      const paths = wrapper.findAll('path');
-
-      const cloudPath = paths[0];
-      expect(cloudPath.attributes('d')).toContain('M2.25 15C2.25 17.4853');
-      expect(cloudPath.attributes('stroke')).toBe('#172774');
-      expect(cloudPath.attributes('stroke-linecap')).toBe('round');
-      expect(cloudPath.attributes('stroke-linejoin')).toBe('round');
-    });
-
-    it('second path represents checkmark (success indicator)', () => {
-      const wrapper = mount(CloudSaved);
-      const paths = wrapper.findAll('path');
-
-      const checkPath = paths[1];
-      expect(checkPath.attributes('d')).toBe('M8.6499 13L10.8999 15.25L14 11');
-      expect(checkPath.attributes('stroke')).toBe('#172774');
-      expect(checkPath.attributes('stroke-linecap')).toBe('round');
-      expect(checkPath.attributes('stroke-linejoin')).toBe('round');
-    });
-
-    it('cloud path has complete path data', () => {
-      const wrapper = mount(CloudSaved);
-      const paths = wrapper.findAll('path');
-
-      const cloudPath = paths[0];
-      const pathData = cloudPath.attributes('d');
-
-      // Verify key points in the cloud path
-      expect(pathData).toContain('6.75 19.5');  // Left anchor point
-      expect(pathData).toContain('18C20.0711'); // Right anchor point
-      expect(pathData).toContain('10.5 4.5');   // Top of cloud
-      expect(pathData).toContain('5.25 9.75');  // Bottom left curve
-    });
-
-    it('checkmark path forms correct shape', () => {
-      const wrapper = mount(CloudSaved);
-      const paths = wrapper.findAll('path');
-
-      const checkPath = paths[1];
-      const pathData = checkPath.attributes('d');
-
-      // Verify checkmark coordinates
-      expect(pathData).toContain('8.6499 13');    // Start point
-      expect(pathData).toContain('10.8999 15.25'); // Middle point
-      expect(pathData).toContain('14 11');         // End point
-    });
-  });
-
-  describe('Visual Properties', () => {
-    it('all strokes use the correct color', () => {
-      const wrapper = mount(CloudSaved);
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        expect(path.attributes('stroke')).toBe('#172774');
-      });
-    });
-
-    it('all paths have rounded line caps', () => {
-      const wrapper = mount(CloudSaved);
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        expect(path.attributes('stroke-linecap')).toBe('round');
-      });
-    });
-
-    it('all paths have rounded line joins', () => {
-      const wrapper = mount(CloudSaved);
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        expect(path.attributes('stroke-linejoin')).toBe('round');
-      });
-    });
-
-    it('paths have no fill', () => {
-      const wrapper = mount(CloudSaved);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('fill')).toBe('none');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('svg is properly structured for screen readers', () => {
-      const wrapper = mount(CloudSaved);
-      const svg = wrapper.find('svg');
-
-      // SVG should have proper attributes for accessibility
-      expect(svg.element.tagName.toLowerCase()).toBe('svg');
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('can be mounted without props', () => {
-      expect(() => {
-        mount(CloudSaved);
-      }).not.toThrow();
-    });
-
-    it('renders consistently on multiple mounts', () => {
-      const wrapper1 = mount(CloudSaved);
-      const wrapper2 = mount(CloudSaved);
-
-      expect(wrapper1.html()).toBe(wrapper2.html());
-    });
-
-    it('differs from CloudFailed icon', async () => {
-      const wrapperSaved = mount(CloudSaved);
-      const savedPaths = wrapperSaved.findAll('path');
-
-      // CloudSaved should have a checkmark instead of a diagonal line
-      expect(savedPaths[1].attributes('d')).toContain('L10.8999');
-      expect(savedPaths[1].attributes('d')).not.toContain('M3.5 4L20');
-    });
-  });
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CloudSaved from '@components/Icons/Audio/CloudSaved.vue';
+
+describe.skip('CloudSaved Icon', () => {
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(CloudSaved);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(CloudSaved);
+      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 2 path elements', () => {
+      const wrapper = mount(CloudSaved);
+      const paths = wrapper.findAll('path');
+      expect(paths).toHaveLength(2);
+    });
+  });
+
+  describe('Path Structure', () => {
+    it('first path represents cloud shape', () => {
+      const wrapper = mount(CloudSaved);
+      const paths = wrapper.findAll('path');
+
+      const cloudPath = paths[0];
+      expect(cloudPath.attributes('d')).toContain('M2.25 15C2.25 17.4853');
+      expect(cloudPath.attributes('stroke')).toBe('#172774');
+      expect(cloudPath.attributes('stroke-linecap')).toBe('round');
+      expect(cloudPath.attributes('stroke-linejoin')).toBe('round');
+    });
+
+    it('second path represents checkmark (success indicator)', () => {
+      const wrapper = mount(CloudSaved);
+      const paths = wrapper.findAll('path');
+
+      const checkPath = paths[1];
+      expect(checkPath.attributes('d')).toBe('M8.6499 13L10.8999 15.25L14 11');
+      expect(checkPath.attributes('stroke')).toBe('#172774');
+      expect(checkPath.attributes('stroke-linecap')).toBe('round');
+      expect(checkPath.attributes('stroke-linejoin')).toBe('round');
+    });
+
+    it('cloud path has complete path data', () => {
+      const wrapper = mount(CloudSaved);
+      const paths = wrapper.findAll('path');
+
+      const cloudPath = paths[0];
+      const pathData = cloudPath.attributes('d');
+
+      // Verify key points in the cloud path
+      expect(pathData).toContain('6.75 19.5');  // Left anchor point
+      expect(pathData).toContain('18C20.0711'); // Right anchor point
+      expect(pathData).toContain('10.5 4.5');   // Top of cloud
+      expect(pathData).toContain('5.25 9.75');  // Bottom left curve
+    });
+
+    it('checkmark path forms correct shape', () => {
+      const wrapper = mount(CloudSaved);
+      const paths = wrapper.findAll('path');
+
+      const checkPath = paths[1];
+      const pathData = checkPath.attributes('d');
+
+      // Verify checkmark coordinates
+      expect(pathData).toContain('8.6499 13');    // Start point
+      expect(pathData).toContain('10.8999 15.25'); // Middle point
+      expect(pathData).toContain('14 11');         // End point
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('all strokes use the correct color', () => {
+      const wrapper = mount(CloudSaved);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('stroke')).toBe('#172774');
+      });
+    });
+
+    it('all paths have rounded line caps', () => {
+      const wrapper = mount(CloudSaved);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('stroke-linecap')).toBe('round');
+      });
+    });
+
+    it('all paths have rounded line joins', () => {
+      const wrapper = mount(CloudSaved);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('stroke-linejoin')).toBe('round');
+      });
+    });
+
+    it('paths have no fill', () => {
+      const wrapper = mount(CloudSaved);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('fill')).toBe('none');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('svg is properly structured for screen readers', () => {
+      const wrapper = mount(CloudSaved);
+      const svg = wrapper.find('svg');
+
+      // SVG should have proper attributes for accessibility
+      expect(svg.element.tagName.toLowerCase()).toBe('svg');
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(CloudSaved);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(CloudSaved);
+      const wrapper2 = mount(CloudSaved);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('differs from CloudFailed icon', async () => {
+      const wrapperSaved = mount(CloudSaved);
+      const savedPaths = wrapperSaved.findAll('path');
+
+      // CloudSaved should have a checkmark instead of a diagonal line
+      expect(savedPaths[1].attributes('d')).toContain('L10.8999');
+      expect(savedPaths[1].attributes('d')).not.toContain('M3.5 4L20');
+    });
+  });
 });

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

@@ -1,159 +1,159 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Delete from '@components/Icons/Audio/Delete.vue';
-
-describe.skip('Delete Icon', () => {
-  describe('Rendering', () => {
-    it('renders as SVG element', () => {
-      const wrapper = mount(Delete);
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('has correct SVG attributes', () => {
-      const wrapper = mount(Delete);
-      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(Delete);
-      const paths = wrapper.findAll('path');
-      expect(paths).toHaveLength(1);
-    });
-  });
-
-  describe('Path Structure', () => {
-    it('path represents X inside circle', () => {
-      const wrapper = mount(Delete);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      expect(pathData).toContain('M9.75 9.75L14.25 14.25');  // First diagonal
-      expect(pathData).toContain('M14.25 9.75L9.75 14.25');  // Second diagonal
-      expect(pathData).toContain('M21 12C21 16.9706');       // Circle
-    });
-
-    it('path has correct stroke properties', () => {
-      const wrapper = mount(Delete);
-      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 contains complete circle definition', () => {
-      const wrapper = mount(Delete);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Circle centered at 12,12 with radius 9
-      expect(pathData).toContain('12 21C7.02944 21');    // Bottom point
-      expect(pathData).toContain('3 12C3 7.02944');      // Left side
-      expect(pathData).toContain('12 3C16.9706 3');      // Top point
-      expect(pathData).toContain('21 12Z');              // Right side and close
-    });
-
-    it('X marks cross at correct coordinates', () => {
-      const wrapper = mount(Delete);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // X should be centered in the circle
-      expect(pathData).toContain('9.75 9.75');    // Top-left
-      expect(pathData).toContain('14.25 14.25');  // Bottom-right
-      expect(pathData).toContain('14.25 9.75');   // Top-right
-      expect(pathData).toContain('9.75 14.25');   // Bottom-left
-    });
-  });
-
-  describe('Visual Properties', () => {
-    it('stroke uses the correct color', () => {
-      const wrapper = mount(Delete);
-      const path = wrapper.find('path');
-
-      expect(path.attributes('stroke')).toBe('#172774');
-    });
-
-    it('path has no fill', () => {
-      const wrapper = mount(Delete);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('fill')).toBe('none');
-    });
-
-    it('has rounded line caps and joins', () => {
-      const wrapper = mount(Delete);
-      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(Delete);
-      const svg = wrapper.find('svg');
-
-      expect(svg.element.tagName.toLowerCase()).toBe('svg');
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('can be mounted without props', () => {
-      expect(() => {
-        mount(Delete);
-      }).not.toThrow();
-    });
-
-    it('renders consistently on multiple mounts', () => {
-      const wrapper1 = mount(Delete);
-      const wrapper2 = mount(Delete);
-
-      expect(wrapper1.html()).toBe(wrapper2.html());
-    });
-
-    it('maintains correct proportions', () => {
-      const wrapper = mount(Delete);
-      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(Delete);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('width')).toBe('24');
-      expect(svg.attributes('height')).toBe('24');
-    });
-  });
-
-  describe('Icon Semantics', () => {
-    it('represents a delete/close action', () => {
-      const wrapper = mount(Delete);
-      const path = wrapper.find('path');
-
-      // Should contain X shape
-      const pathData = path.attributes('d');
-      expect(pathData).toMatch(/M9\.75 9\.75L14\.25 14\.25/);
-      expect(pathData).toMatch(/M14\.25 9\.75L9\.75 14\.25/);
-    });
-
-    it('uses circle as boundary', () => {
-      const wrapper = mount(Delete);
-      const path = wrapper.find('path');
-
-      // Should contain circle
-      const pathData = path.attributes('d');
-      expect(pathData).toMatch(/M21 12C21 16\.9706/);
-    });
-  });
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Delete from '@components/Icons/Audio/Delete.vue';
+
+describe.skip('Delete Icon', () => {
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(Delete);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(Delete);
+      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(Delete);
+      const paths = wrapper.findAll('path');
+      expect(paths).toHaveLength(1);
+    });
+  });
+
+  describe('Path Structure', () => {
+    it('path represents X inside circle', () => {
+      const wrapper = mount(Delete);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      expect(pathData).toContain('M9.75 9.75L14.25 14.25');  // First diagonal
+      expect(pathData).toContain('M14.25 9.75L9.75 14.25');  // Second diagonal
+      expect(pathData).toContain('M21 12C21 16.9706');       // Circle
+    });
+
+    it('path has correct stroke properties', () => {
+      const wrapper = mount(Delete);
+      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 contains complete circle definition', () => {
+      const wrapper = mount(Delete);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Circle centered at 12,12 with radius 9
+      expect(pathData).toContain('12 21C7.02944 21');    // Bottom point
+      expect(pathData).toContain('3 12C3 7.02944');      // Left side
+      expect(pathData).toContain('12 3C16.9706 3');      // Top point
+      expect(pathData).toContain('21 12Z');              // Right side and close
+    });
+
+    it('X marks cross at correct coordinates', () => {
+      const wrapper = mount(Delete);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // X should be centered in the circle
+      expect(pathData).toContain('9.75 9.75');    // Top-left
+      expect(pathData).toContain('14.25 14.25');  // Bottom-right
+      expect(pathData).toContain('14.25 9.75');   // Top-right
+      expect(pathData).toContain('9.75 14.25');   // Bottom-left
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('stroke uses the correct color', () => {
+      const wrapper = mount(Delete);
+      const path = wrapper.find('path');
+
+      expect(path.attributes('stroke')).toBe('#172774');
+    });
+
+    it('path has no fill', () => {
+      const wrapper = mount(Delete);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('fill')).toBe('none');
+    });
+
+    it('has rounded line caps and joins', () => {
+      const wrapper = mount(Delete);
+      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(Delete);
+      const svg = wrapper.find('svg');
+
+      expect(svg.element.tagName.toLowerCase()).toBe('svg');
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(Delete);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(Delete);
+      const wrapper2 = mount(Delete);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('maintains correct proportions', () => {
+      const wrapper = mount(Delete);
+      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(Delete);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('24');
+      expect(svg.attributes('height')).toBe('24');
+    });
+  });
+
+  describe('Icon Semantics', () => {
+    it('represents a delete/close action', () => {
+      const wrapper = mount(Delete);
+      const path = wrapper.find('path');
+
+      // Should contain X shape
+      const pathData = path.attributes('d');
+      expect(pathData).toMatch(/M9\.75 9\.75L14\.25 14\.25/);
+      expect(pathData).toMatch(/M14\.25 9\.75L9\.75 14\.25/);
+    });
+
+    it('uses circle as boundary', () => {
+      const wrapper = mount(Delete);
+      const path = wrapper.find('path');
+
+      // Should contain circle
+      const pathData = path.attributes('d');
+      expect(pathData).toMatch(/M21 12C21 16\.9706/);
+    });
+  });
 });