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

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

@@ -1,194 +1,194 @@
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import CalendarNotification from '@components/Icons/CalendarNotification.vue';
-
-// Mock siteColors
-vi.mock('@/utils/index', () => ({
-  siteColors: {
-    font_color_code: '#172774'
-  }
-}));
-
-describe('CalendarNotification Icon', () => {
-  // Test basic rendering
-  describe('Rendering', () => {
-    it('renders as SVG element', () => {
-      const wrapper = mount(CalendarNotification);
-      
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('has correct SVG attributes', () => {
-      const wrapper = mount(CalendarNotification);
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('width')).toBe('22');
-      expect(svg.attributes('height')).toBe('20');
-      expect(svg.attributes('viewBox')).toBe('0 0 22 20');
-      expect(svg.attributes('fill')).toBe('none');
-      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
-    });
-
-    it('contains path elements', () => {
-      const wrapper = mount(CalendarNotification);
-      const paths = wrapper.findAll('path');
-      
-      expect(paths.length).toBeGreaterThan(0);
-    });
-
-    it('has calendar structure paths with correct stroke color', () => {
-      const wrapper = mount(CalendarNotification);
-      const paths = wrapper.findAll('path');
-      
-      // Check that most paths have the expected stroke color
-      const strokePaths = paths.filter(path => 
-        path.attributes('stroke') === '#172774'
-      );
-      
-      expect(strokePaths.length).toBeGreaterThan(0);
-    });
-
-    it('has notification indicator with correct fill color', () => {
-      const wrapper = mount(CalendarNotification);
-      const paths = wrapper.findAll('path');
-      
-      // Check for the notification circle with pink fill
-      const notificationPath = paths.find(path => 
-        path.attributes('fill') === '#F4297E'
-      );
-      
-      expect(notificationPath).toBeDefined();
-    });
-  });
-
-  // Test accessibility
-  describe('Accessibility', () => {
-    it('is accessible as a decorative icon', () => {
-      const wrapper = mount(CalendarNotification);
-      const svg = wrapper.find('svg');
-      
-      // SVG exists and can be styled or have aria attributes added by parent
-      expect(svg.exists()).toBe(true);
-    });
-
-    it('can accept additional attributes', () => {
-      const wrapper = mount(CalendarNotification, {
-        attrs: {
-          'aria-label': 'Calendar with notification',
-          role: 'img'
-        }
-      });
-      
-      const svg = wrapper.find('svg');
-      expect(svg.attributes('aria-label')).toBe('Calendar with notification');
-      expect(svg.attributes('role')).toBe('img');
-    });
-  });
-
-  // Test styling and customization
-  describe('Styling', () => {
-    it('maintains consistent dimensions', () => {
-      const wrapper = mount(CalendarNotification);
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('width')).toBe('22');
-      expect(svg.attributes('height')).toBe('20');
-    });
-
-    it('can be styled with CSS classes', () => {
-      const wrapper = mount(CalendarNotification, {
-        attrs: {
-          class: 'custom-icon-class'
-        }
-      });
-      
-      expect(wrapper.classes()).toContain('custom-icon-class');
-    });
-
-    it('preserves viewBox for scalability', () => {
-      const wrapper = mount(CalendarNotification);
-      const svg = wrapper.find('svg');
-      
-      expect(svg.attributes('viewBox')).toBe('0 0 22 20');
-    });
-  });
-
-  // Test edge cases
-  describe('Edge Cases', () => {
-    it('handles additional props without breaking', () => {
-      expect(() => {
-        mount(CalendarNotification, {
-          props: {
-            customProp: 'value'
-          }
-        });
-      }).not.toThrow();
-    });
-
-    it('works within different container sizes', () => {
-      const wrapper = mount(CalendarNotification, {
-        attrs: {
-          style: 'width: 44px; height: 40px;'
-        }
-      });
-      
-      // SVG should still maintain its viewBox
-      const svg = wrapper.find('svg');
-      expect(svg.attributes('viewBox')).toBe('0 0 22 20');
-    });
-  });
-
-  // Test SVG structure integrity
-  describe('SVG Structure', () => {
-    it('has all required path elements for complete icon', () => {
-      const wrapper = mount(CalendarNotification);
-      const paths = wrapper.findAll('path');
-      
-      // Calendar notification icon should have multiple paths
-      expect(paths.length).toBeGreaterThanOrEqual(10);
-    });
-
-    it('maintains proper stroke and fill attributes', () => {
-      const wrapper = mount(CalendarNotification);
-      const paths = wrapper.findAll('path');
-      
-      let hasStroke = false;
-      let hasFill = false;
-      
-      paths.forEach(path => {
-        if (path.attributes('stroke')) hasStroke = true;
-        if (path.attributes('fill')) hasFill = true;
-      });
-      
-      expect(hasStroke).toBe(true);
-      expect(hasFill).toBe(true);
-    });
-
-    it('uses consistent stroke width', () => {
-      const wrapper = mount(CalendarNotification);
-      const paths = wrapper.findAll('path');
-      
-      const strokePaths = paths.filter(path => 
-        path.attributes('stroke-width')
-      );
-      
-      strokePaths.forEach(path => {
-        expect(path.attributes('stroke-width')).toBe('1.5');
-      });
-    });
-
-    it('uses proper stroke line properties', () => {
-      const wrapper = mount(CalendarNotification);
-      const paths = wrapper.findAll('path');
-      
-      const strokePaths = paths.filter(path => 
-        path.attributes('stroke')
-      );
-      
-      strokePaths.forEach(path => {
-        expect(path.attributes('stroke-linecap')).toBe('round');
-        expect(path.attributes('stroke-linejoin')).toBe('round');
-      });
-    });
-  });
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CalendarNotification from '@components/Icons/CalendarNotification.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    font_color_code: '#172774'
+  }
+}));
+
+describe('CalendarNotification Icon', () => {
+  // Test basic rendering
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(CalendarNotification);
+      
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(CalendarNotification);
+      const svg = wrapper.find('svg');
+      
+      expect(svg.attributes('width')).toBe('22');
+      expect(svg.attributes('height')).toBe('20');
+      expect(svg.attributes('viewBox')).toBe('0 0 22 20');
+      expect(svg.attributes('fill')).toBe('none');
+      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+    });
+
+    it('contains path elements', () => {
+      const wrapper = mount(CalendarNotification);
+      const paths = wrapper.findAll('path');
+      
+      expect(paths.length).toBeGreaterThan(0);
+    });
+
+    it('has calendar structure paths with correct stroke color', () => {
+      const wrapper = mount(CalendarNotification);
+      const paths = wrapper.findAll('path');
+      
+      // Check that most paths have the expected stroke color
+      const strokePaths = paths.filter(path => 
+        path.attributes('stroke') === '#172774'
+      );
+      
+      expect(strokePaths.length).toBeGreaterThan(0);
+    });
+
+    it('has notification indicator with correct fill color', () => {
+      const wrapper = mount(CalendarNotification);
+      const paths = wrapper.findAll('path');
+      
+      // Check for the notification circle with pink fill
+      const notificationPath = paths.find(path => 
+        path.attributes('fill') === '#F4297E'
+      );
+      
+      expect(notificationPath).toBeDefined();
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('is accessible as a decorative icon', () => {
+      const wrapper = mount(CalendarNotification);
+      const svg = wrapper.find('svg');
+      
+      // SVG exists and can be styled or have aria attributes added by parent
+      expect(svg.exists()).toBe(true);
+    });
+
+    it('can accept additional attributes', () => {
+      const wrapper = mount(CalendarNotification, {
+        attrs: {
+          'aria-label': 'Calendar with notification',
+          role: 'img'
+        }
+      });
+      
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('aria-label')).toBe('Calendar with notification');
+      expect(svg.attributes('role')).toBe('img');
+    });
+  });
+
+  // Test styling and customization
+  describe('Styling', () => {
+    it('maintains consistent dimensions', () => {
+      const wrapper = mount(CalendarNotification);
+      const svg = wrapper.find('svg');
+      
+      expect(svg.attributes('width')).toBe('22');
+      expect(svg.attributes('height')).toBe('20');
+    });
+
+    it('can be styled with CSS classes', () => {
+      const wrapper = mount(CalendarNotification, {
+        attrs: {
+          class: 'custom-icon-class'
+        }
+      });
+      
+      expect(wrapper.classes()).toContain('custom-icon-class');
+    });
+
+    it('preserves viewBox for scalability', () => {
+      const wrapper = mount(CalendarNotification);
+      const svg = wrapper.find('svg');
+      
+      expect(svg.attributes('viewBox')).toBe('0 0 22 20');
+    });
+  });
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles additional props without breaking', () => {
+      expect(() => {
+        mount(CalendarNotification, {
+          props: {
+            customProp: 'value'
+          }
+        });
+      }).not.toThrow();
+    });
+
+    it('works within different container sizes', () => {
+      const wrapper = mount(CalendarNotification, {
+        attrs: {
+          style: 'width: 44px; height: 40px;'
+        }
+      });
+      
+      // SVG should still maintain its viewBox
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('viewBox')).toBe('0 0 22 20');
+    });
+  });
+
+  // Test SVG structure integrity
+  describe('SVG Structure', () => {
+    it('has all required path elements for complete icon', () => {
+      const wrapper = mount(CalendarNotification);
+      const paths = wrapper.findAll('path');
+      
+      // Calendar notification icon should have multiple paths
+      expect(paths.length).toBeGreaterThanOrEqual(10);
+    });
+
+    it('maintains proper stroke and fill attributes', () => {
+      const wrapper = mount(CalendarNotification);
+      const paths = wrapper.findAll('path');
+      
+      let hasStroke = false;
+      let hasFill = false;
+      
+      paths.forEach(path => {
+        if (path.attributes('stroke')) hasStroke = true;
+        if (path.attributes('fill')) hasFill = true;
+      });
+      
+      expect(hasStroke).toBe(true);
+      expect(hasFill).toBe(true);
+    });
+
+    it('uses consistent stroke width', () => {
+      const wrapper = mount(CalendarNotification);
+      const paths = wrapper.findAll('path');
+      
+      const strokePaths = paths.filter(path => 
+        path.attributes('stroke-width')
+      );
+      
+      strokePaths.forEach(path => {
+        expect(path.attributes('stroke-width')).toBe('1.5');
+      });
+    });
+
+    it('uses proper stroke line properties', () => {
+      const wrapper = mount(CalendarNotification);
+      const paths = wrapper.findAll('path');
+      
+      const strokePaths = paths.filter(path => 
+        path.attributes('stroke')
+      );
+      
+      strokePaths.forEach(path => {
+        expect(path.attributes('stroke-linecap')).toBe('round');
+        expect(path.attributes('stroke-linejoin')).toBe('round');
+      });
+    });
+  });
 });