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

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

@@ -1,186 +1,186 @@
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import AdvanceAppointments from '@components/Icons/AdvanceAppointments.vue';
-
-// Mock siteColors if used
-vi.mock('@/utils/index', () => ({
-  siteColors: {
-    font_color_code: '#172774'
-  }
-}));
-
-describe('AdvanceAppointments', () => {
-  describe('Default Behavior', () => {
-    it('renders SVG element when iconType is provided', () => {
-      const wrapper = mount(AdvanceAppointments, {
-        props: {
-          iconType: 'multitermin'
-        }
-      });
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('renders different SVG based on iconType', () => {
-      const iconTypes = ['multitermin', 'supervision', 'doppeltermin', 'kombitermin'];
-
-      iconTypes.forEach(iconType => {
-        const wrapper = mount(AdvanceAppointments, {
-          props: { iconType }
-        });
-        expect(wrapper.find('svg').exists()).toBe(true);
-      });
-    });
-  });
-
-  describe('Props', () => {
-    it('accepts width and height props', () => {
-      const wrapper = mount(AdvanceAppointments, {
-        props: {
-          iconType: 'multitermin',
-          width: '200',
-          height: '150'
-        }
-      });
-
-      const svg = wrapper.find('svg');
-      expect(svg.attributes('width')).toBe('200');
-      expect(svg.attributes('height')).toBe('150');
-    });
-
-    it('uses default width and height when not provided', () => {
-      const wrapper = mount(AdvanceAppointments, {
-        props: {
-          iconType: 'multitermin'
-        }
-      });
-
-      const svg = wrapper.find('svg');
-      expect(svg.attributes('width')).toBe('115');
-      expect(svg.attributes('height')).toBe('85');
-    });
-
-    it('accepts custom stroke color', () => {
-      const wrapper = mount(AdvanceAppointments, {
-        props: {
-          iconType: 'multitermin',
-          strokeColorProp: '#FF0000'
-        }
-      });
-
-      const svg = wrapper.find('svg');
-      expect(svg.exists()).toBe(true);
-    });
-
-    it('accepts custom fill color', () => {
-      const wrapper = mount(AdvanceAppointments, {
-        props: {
-          iconType: 'multitermin',
-          fillColorProp: '#00FF00'
-        }
-      });
-
-      const svg = wrapper.find('svg');
-      expect(svg.exists()).toBe(true);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('is decorative by default (no aria attributes)', () => {
-      const wrapper = mount(AdvanceAppointments, {
-        props: {
-          iconType: 'multitermin'
-        }
-      });
-      const svg = wrapper.find('svg');
-      expect(svg.exists()).toBe(true);
-
-      // SVG icons without explicit aria attributes are decorative
-      // The component doesn't add aria-hidden by default
-    });
-
-    it('exposes accessible name and role when labelled via attrs', () => {
-      const wrapper = mount(AdvanceAppointments, {
-        props: {
-          iconType: 'multitermin'
-        },
-        attrs: {
-          'aria-label': 'Advance appointments',
-          role: 'img'
-        }
-      });
-
-      const svg = wrapper.find('svg');
-      expect(svg.exists()).toBe(true);
-      // Attrs are passed through to the SVG element
-    });
-  });
-
-  describe('Visual Structure', () => {
-    it('contains path elements', () => {
-      const wrapper = mount(AdvanceAppointments, {
-        props: {
-          iconType: 'multitermin'
-        }
-      });
-      const paths = wrapper.findAll('path');
-      // Icon should have at least one path
-      expect(paths.length).toBeGreaterThan(0);
-    });
-
-    it('renders multitermin icon with correct structure', () => {
-      const wrapper = mount(AdvanceAppointments, {
-        props: {
-          iconType: 'multitermin'
-        }
-      });
-
-      expect(wrapper.find('svg').exists()).toBe(true);
-      expect(wrapper.findAll('path').length).toBeGreaterThan(0);
-    });
-
-    it('renders supervision icon with correct structure', () => {
-      const wrapper = mount(AdvanceAppointments, {
-        props: {
-          iconType: 'supervision'
-        }
-      });
-
-      expect(wrapper.find('svg').exists()).toBe(true);
-      expect(wrapper.findAll('path').length).toBeGreaterThan(0);
-    });
-
-    it('renders doppeltermin icon with correct structure', () => {
-      const wrapper = mount(AdvanceAppointments, {
-        props: {
-          iconType: 'doppeltermin'
-        }
-      });
-
-      expect(wrapper.find('svg').exists()).toBe(true);
-      expect(wrapper.findAll('path').length).toBeGreaterThan(0);
-    });
-
-    it('renders kombitermin icon with correct structure', () => {
-      const wrapper = mount(AdvanceAppointments, {
-        props: {
-          iconType: 'kombitermin'
-        }
-      });
-
-      expect(wrapper.find('svg').exists()).toBe(true);
-      expect(wrapper.findAll('path').length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('does not render SVG for unknown iconType', () => {
-      const wrapper = mount(AdvanceAppointments, {
-        props: {
-          iconType: 'unknown'
-        }
-      });
-
-      expect(wrapper.find('svg').exists()).toBe(false);
-    });
-  });
-});
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import AdvanceAppointments from '@components/Icons/AdvanceAppointments.vue';
+
+// Mock siteColors if used
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    font_color_code: '#172774'
+  }
+}));
+
+describe('AdvanceAppointments', () => {
+  describe('Default Behavior', () => {
+    it('renders SVG element when iconType is provided', () => {
+      const wrapper = mount(AdvanceAppointments, {
+        props: {
+          iconType: 'multitermin'
+        }
+      });
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('renders different SVG based on iconType', () => {
+      const iconTypes = ['multitermin', 'supervision', 'doppeltermin', 'kombitermin'];
+
+      iconTypes.forEach(iconType => {
+        const wrapper = mount(AdvanceAppointments, {
+          props: { iconType }
+        });
+        expect(wrapper.find('svg').exists()).toBe(true);
+      });
+    });
+  });
+
+  describe('Props', () => {
+    it('accepts width and height props', () => {
+      const wrapper = mount(AdvanceAppointments, {
+        props: {
+          iconType: 'multitermin',
+          width: '200',
+          height: '150'
+        }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('width')).toBe('200');
+      expect(svg.attributes('height')).toBe('150');
+    });
+
+    it('uses default width and height when not provided', () => {
+      const wrapper = mount(AdvanceAppointments, {
+        props: {
+          iconType: 'multitermin'
+        }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('width')).toBe('115');
+      expect(svg.attributes('height')).toBe('85');
+    });
+
+    it('accepts custom stroke color', () => {
+      const wrapper = mount(AdvanceAppointments, {
+        props: {
+          iconType: 'multitermin',
+          strokeColorProp: '#FF0000'
+        }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.exists()).toBe(true);
+    });
+
+    it('accepts custom fill color', () => {
+      const wrapper = mount(AdvanceAppointments, {
+        props: {
+          iconType: 'multitermin',
+          fillColorProp: '#00FF00'
+        }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.exists()).toBe(true);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('is decorative by default (no aria attributes)', () => {
+      const wrapper = mount(AdvanceAppointments, {
+        props: {
+          iconType: 'multitermin'
+        }
+      });
+      const svg = wrapper.find('svg');
+      expect(svg.exists()).toBe(true);
+
+      // SVG icons without explicit aria attributes are decorative
+      // The component doesn't add aria-hidden by default
+    });
+
+    it('exposes accessible name and role when labelled via attrs', () => {
+      const wrapper = mount(AdvanceAppointments, {
+        props: {
+          iconType: 'multitermin'
+        },
+        attrs: {
+          'aria-label': 'Advance appointments',
+          role: 'img'
+        }
+      });
+
+      const svg = wrapper.find('svg');
+      expect(svg.exists()).toBe(true);
+      // Attrs are passed through to the SVG element
+    });
+  });
+
+  describe('Visual Structure', () => {
+    it('contains path elements', () => {
+      const wrapper = mount(AdvanceAppointments, {
+        props: {
+          iconType: 'multitermin'
+        }
+      });
+      const paths = wrapper.findAll('path');
+      // Icon should have at least one path
+      expect(paths.length).toBeGreaterThan(0);
+    });
+
+    it('renders multitermin icon with correct structure', () => {
+      const wrapper = mount(AdvanceAppointments, {
+        props: {
+          iconType: 'multitermin'
+        }
+      });
+
+      expect(wrapper.find('svg').exists()).toBe(true);
+      expect(wrapper.findAll('path').length).toBeGreaterThan(0);
+    });
+
+    it('renders supervision icon with correct structure', () => {
+      const wrapper = mount(AdvanceAppointments, {
+        props: {
+          iconType: 'supervision'
+        }
+      });
+
+      expect(wrapper.find('svg').exists()).toBe(true);
+      expect(wrapper.findAll('path').length).toBeGreaterThan(0);
+    });
+
+    it('renders doppeltermin icon with correct structure', () => {
+      const wrapper = mount(AdvanceAppointments, {
+        props: {
+          iconType: 'doppeltermin'
+        }
+      });
+
+      expect(wrapper.find('svg').exists()).toBe(true);
+      expect(wrapper.findAll('path').length).toBeGreaterThan(0);
+    });
+
+    it('renders kombitermin icon with correct structure', () => {
+      const wrapper = mount(AdvanceAppointments, {
+        props: {
+          iconType: 'kombitermin'
+        }
+      });
+
+      expect(wrapper.find('svg').exists()).toBe(true);
+      expect(wrapper.findAll('path').length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('does not render SVG for unknown iconType', () => {
+      const wrapper = mount(AdvanceAppointments, {
+        props: {
+          iconType: 'unknown'
+        }
+      });
+
+      expect(wrapper.find('svg').exists()).toBe(false);
+    });
+  });
+});

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

@@ -1,109 +1,109 @@
-import { describe, it, expect } from 'vitest';
-import { mount } from '@vue/test-utils';
-import CloudFailed from '@components/Icons/Audio/CloudFailed.vue';
-
-describe.skip('CloudFailed Icon', () => {
-  describe('Rendering', () => {
-    it('renders as SVG element', () => {
-      const wrapper = mount(CloudFailed);
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('has correct SVG attributes', () => {
-      const wrapper = mount(CloudFailed);
-      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(CloudFailed);
-      const paths = wrapper.findAll('path');
-      expect(paths).toHaveLength(2);
-    });
-  });
-
-  describe('Path Structure', () => {
-    it('first path represents cloud shape', () => {
-      const wrapper = mount(CloudFailed);
-      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 diagonal line (failure indicator)', () => {
-      const wrapper = mount(CloudFailed);
-      const paths = wrapper.findAll('path');
-
-      const linePath = paths[1];
-      expect(linePath.attributes('d')).toBe('M3.5 4L20 22.5');
-      expect(linePath.attributes('stroke')).toBe('#172774');
-      expect(linePath.attributes('stroke-linecap')).toBe('round');
-    });
-
-    it('cloud path has complete path data', () => {
-      const wrapper = mount(CloudFailed);
-      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
-    });
-  });
-
-  describe('Visual Properties', () => {
-    it('all strokes use the correct color', () => {
-      const wrapper = mount(CloudFailed);
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        expect(path.attributes('stroke')).toBe('#172774');
-      });
-    });
-
-    it('paths have no fill', () => {
-      const wrapper = mount(CloudFailed);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('fill')).toBe('none');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('svg is properly structured for screen readers', () => {
-      const wrapper = mount(CloudFailed);
-      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(CloudFailed);
-      }).not.toThrow();
-    });
-
-    it('renders consistently on multiple mounts', () => {
-      const wrapper1 = mount(CloudFailed);
-      const wrapper2 = mount(CloudFailed);
-
-      expect(wrapper1.html()).toBe(wrapper2.html());
-    });
-  });
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CloudFailed from '@components/Icons/Audio/CloudFailed.vue';
+
+describe.skip('CloudFailed Icon', () => {
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(CloudFailed);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(CloudFailed);
+      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(CloudFailed);
+      const paths = wrapper.findAll('path');
+      expect(paths).toHaveLength(2);
+    });
+  });
+
+  describe('Path Structure', () => {
+    it('first path represents cloud shape', () => {
+      const wrapper = mount(CloudFailed);
+      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 diagonal line (failure indicator)', () => {
+      const wrapper = mount(CloudFailed);
+      const paths = wrapper.findAll('path');
+
+      const linePath = paths[1];
+      expect(linePath.attributes('d')).toBe('M3.5 4L20 22.5');
+      expect(linePath.attributes('stroke')).toBe('#172774');
+      expect(linePath.attributes('stroke-linecap')).toBe('round');
+    });
+
+    it('cloud path has complete path data', () => {
+      const wrapper = mount(CloudFailed);
+      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
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('all strokes use the correct color', () => {
+      const wrapper = mount(CloudFailed);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('stroke')).toBe('#172774');
+      });
+    });
+
+    it('paths have no fill', () => {
+      const wrapper = mount(CloudFailed);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('fill')).toBe('none');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('svg is properly structured for screen readers', () => {
+      const wrapper = mount(CloudFailed);
+      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(CloudFailed);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(CloudFailed);
+      const wrapper2 = mount(CloudFailed);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+  });
 });