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

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

@@ -1,294 +1,294 @@
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import Calendar from '@components/Icons/calendar.vue';
-
-// Mock siteColors
-vi.mock('@/utils/index', () => ({
-  siteColors: {
-    font_color_code: '#172774'
-  }
-}));
-
-describe('Calendar Icon', () => {
-  describe('Rendering', () => {
-    it('renders as SVG element', () => {
-      const wrapper = mount(Calendar);
-      expect(wrapper.find('svg').exists()).toBe(true);
-    });
-
-    it('has correct SVG attributes', () => {
-      const wrapper = mount(Calendar);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('width')).toBe('21');
-      expect(svg.attributes('height')).toBe('20');
-      expect(svg.attributes('viewBox')).toBe('0 0 21 20');
-      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(Calendar);
-      const paths = wrapper.findAll('path');
-      expect(paths).toHaveLength(1);
-    });
-  });
-
-  describe('Path Structure', () => {
-    it('path represents complete calendar structure', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      expect(pathData).toContain('M5.07568 1V3.25'); // Top left binding ring
-      expect(pathData).toContain('M15.5757 1V3.25'); // Top right binding ring
-      expect(pathData).toContain('M1.32568 16.75V5.5'); // Calendar body
-    });
-
-    it('path has correct stroke properties', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('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('includes binding rings at top', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Binding rings that extend above the calendar body
-      expect(pathData).toContain('M5.07568 1V3.25'); // Left ring
-      expect(pathData).toContain('M15.5757 1V3.25'); // Right ring
-    });
-
-    it('includes calendar body structure', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Calendar body with rounded corners
-      expect(pathData).toContain('C1.32568 4.25736 2.33304 3.25'); // Top body
-      expect(pathData).toContain('C1.32568 17.9926 2.33304 19'); // Bottom body
-    });
-
-    it('includes date grid dots', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Multiple small rectangles representing dates
-      expect(pathData).toContain('H10.3332V10.7575'); // Date dots
-      expect(pathData).toContain('H12.5832V13.0075'); // More date dots
-      expect(pathData).toContain('H14.8332V10.7575'); // Even more date dots
-    });
-  });
-
-  describe('Visual Properties', () => {
-    it('uses correct brand color for stroke', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      expect(path.attributes('stroke')).toBe('#172774');
-    });
-
-    it('has appropriate stroke width for icon size', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      expect(path.attributes('stroke-width')).toBe('1.5');
-    });
-
-    it('uses rounded line caps and joins', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      expect(path.attributes('stroke-linecap')).toBe('round');
-      expect(path.attributes('stroke-linejoin')).toBe('round');
-    });
-
-    it('path has no fill (outline style)', () => {
-      const wrapper = mount(Calendar);
-      const svg = wrapper.find('svg');
-
-      expect(svg.attributes('fill')).toBe('none');
-    });
-  });
-
-  describe('Calendar Geometry', () => {
-    it('binding rings positioned at top', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Rings extend from y=1 to y=3.25
-      expect(pathData).toContain('1V3.25');
-    });
-
-    it('calendar body spans most of viewBox', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Body from y=3.25 to y=19, x=1.32568 to x=19.3257
-      expect(pathData).toContain('1.32568');
-      expect(pathData).toContain('19.3257');
-      expect(pathData).toContain('3.25');
-      expect(pathData).toContain('19');
-    });
-
-    it('includes header section separation', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Separator line at y=7 between header and dates
-      expect(pathData).toContain('7H17.0757');
-      expect(pathData).toContain('9.25V16.75');
-    });
-
-    it('date dots arranged in grid pattern', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Multiple columns and rows
-      expect(pathData).toContain('10.3257'); // Center column
-      expect(pathData).toContain('8.07568'); // Left column
-      expect(pathData).toContain('12.5757'); // Right column
-      expect(pathData).toContain('10.75'); // First row
-      expect(pathData).toContain('13H'); // Second row
-      expect(pathData).toContain('15.25'); // Third row
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('uses appropriate dimensions for calendar icon', () => {
-      const wrapper = mount(Calendar);
-      const svg = wrapper.find('svg');
-
-      // Slightly wider than tall to accommodate calendar proportions
-      expect(svg.attributes('width')).toBe('21');
-      expect(svg.attributes('height')).toBe('20');
-    });
-
-    it('suitable for UI calendar representations', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      // Includes key calendar elements
-      const pathData = path.attributes('d');
-      expect(pathData).toContain('1V3.25'); // Binding rings
-      expect(pathData).toMatch(/H\d+\.\d+V\d+\.\d+/); // Grid structure
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('svg is properly structured for screen readers', () => {
-      const wrapper = mount(Calendar);
-      const svg = wrapper.find('svg');
-
-      expect(svg.element.tagName.toLowerCase()).toBe('svg');
-    });
-
-    it('uses outline style for better contrast', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      // Outline style is more universally accessible
-      expect(path.attributes('stroke')).toBeTruthy();
-      expect(path.attributes('fill')).toBeFalsy();
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('can be mounted without props', () => {
-      expect(() => {
-        mount(Calendar);
-      }).not.toThrow();
-    });
-
-    it('renders consistently on multiple mounts', () => {
-      const wrapper1 = mount(Calendar);
-      const wrapper2 = mount(Calendar);
-
-      expect(wrapper1.html()).toBe(wrapper2.html());
-    });
-
-    it('maintains calendar structure integrity', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      expect(path.exists()).toBe(true);
-      expect(path.attributes('d')).toBeTruthy();
-      expect(path.attributes('stroke')).toBeTruthy();
-      expect(path.attributes('stroke-width')).toBeTruthy();
-    });
-
-    it('suitable for various calendar UI contexts', () => {
-      const wrapper = mount(Calendar);
-
-      // Good size for buttons, form fields, navigation
-      expect(wrapper.find('svg').attributes('width')).toBe('21');
-      expect(wrapper.find('svg').attributes('height')).toBe('20');
-    });
-  });
-
-  describe('Icon Semantics', () => {
-    it('represents calendar with recognizable elements', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Key calendar features
-      expect(pathData).toMatch(/1V3\.25/); // Binding rings
-      expect(pathData).toMatch(/H\d+\.\d+V\d+\.\d+/); // Date grid
-      expect(pathData).toMatch(/C\d+/); // Rounded corners
-    });
-
-    it('uses standard calendar proportions', () => {
-      const wrapper = mount(Calendar);
-      const svg = wrapper.find('svg');
-
-      // Typical calendar aspect ratio (slightly wider than tall)
-      const width = parseInt(svg.attributes('width'));
-      const height = parseInt(svg.attributes('height'));
-      expect(width).toBeGreaterThan(height);
-      expect(width / height).toBeCloseTo(1.05, 1);
-    });
-
-    it('includes visual date indicators', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Should have multiple small date markers
-      const dateMarkers = pathData.match(/H\d+\.\d+V\d+\.\d+/g);
-      expect(dateMarkers).toBeTruthy();
-      expect(dateMarkers.length).toBeGreaterThan(5);
-    });
-  });
-
-  describe('Visual Design', () => {
-    it('provides clear calendar recognition', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      const pathData = path.attributes('d');
-      // Distinctive calendar elements
-      expect(pathData).toContain('1V3.25'); // Top rings
-      expect(pathData).toMatch(/\d+\.\d+H\d+\.\d+V/); // Grid pattern
-    });
-
-    it('uses appropriate line weight for clarity', () => {
-      const wrapper = mount(Calendar);
-      const path = wrapper.find('path');
-
-      // 1.5px stroke provides good visibility without being too heavy
-      expect(path.attributes('stroke-width')).toBe('1.5');
-    });
-  });
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Calendar from '@components/Icons/calendar.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    font_color_code: '#172774'
+  }
+}));
+
+describe('Calendar Icon', () => {
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(Calendar);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(Calendar);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('21');
+      expect(svg.attributes('height')).toBe('20');
+      expect(svg.attributes('viewBox')).toBe('0 0 21 20');
+      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(Calendar);
+      const paths = wrapper.findAll('path');
+      expect(paths).toHaveLength(1);
+    });
+  });
+
+  describe('Path Structure', () => {
+    it('path represents complete calendar structure', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      expect(pathData).toContain('M5.07568 1V3.25'); // Top left binding ring
+      expect(pathData).toContain('M15.5757 1V3.25'); // Top right binding ring
+      expect(pathData).toContain('M1.32568 16.75V5.5'); // Calendar body
+    });
+
+    it('path has correct stroke properties', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('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('includes binding rings at top', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Binding rings that extend above the calendar body
+      expect(pathData).toContain('M5.07568 1V3.25'); // Left ring
+      expect(pathData).toContain('M15.5757 1V3.25'); // Right ring
+    });
+
+    it('includes calendar body structure', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Calendar body with rounded corners
+      expect(pathData).toContain('C1.32568 4.25736 2.33304 3.25'); // Top body
+      expect(pathData).toContain('C1.32568 17.9926 2.33304 19'); // Bottom body
+    });
+
+    it('includes date grid dots', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Multiple small rectangles representing dates
+      expect(pathData).toContain('H10.3332V10.7575'); // Date dots
+      expect(pathData).toContain('H12.5832V13.0075'); // More date dots
+      expect(pathData).toContain('H14.8332V10.7575'); // Even more date dots
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('uses correct brand color for stroke', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      expect(path.attributes('stroke')).toBe('#172774');
+    });
+
+    it('has appropriate stroke width for icon size', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      expect(path.attributes('stroke-width')).toBe('1.5');
+    });
+
+    it('uses rounded line caps and joins', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      expect(path.attributes('stroke-linecap')).toBe('round');
+      expect(path.attributes('stroke-linejoin')).toBe('round');
+    });
+
+    it('path has no fill (outline style)', () => {
+      const wrapper = mount(Calendar);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('fill')).toBe('none');
+    });
+  });
+
+  describe('Calendar Geometry', () => {
+    it('binding rings positioned at top', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Rings extend from y=1 to y=3.25
+      expect(pathData).toContain('1V3.25');
+    });
+
+    it('calendar body spans most of viewBox', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Body from y=3.25 to y=19, x=1.32568 to x=19.3257
+      expect(pathData).toContain('1.32568');
+      expect(pathData).toContain('19.3257');
+      expect(pathData).toContain('3.25');
+      expect(pathData).toContain('19');
+    });
+
+    it('includes header section separation', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Separator line at y=7 between header and dates
+      expect(pathData).toContain('7H17.0757');
+      expect(pathData).toContain('9.25V16.75');
+    });
+
+    it('date dots arranged in grid pattern', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Multiple columns and rows
+      expect(pathData).toContain('10.3257'); // Center column
+      expect(pathData).toContain('8.07568'); // Left column
+      expect(pathData).toContain('12.5757'); // Right column
+      expect(pathData).toContain('10.75'); // First row
+      expect(pathData).toContain('13H'); // Second row
+      expect(pathData).toContain('15.25'); // Third row
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('uses appropriate dimensions for calendar icon', () => {
+      const wrapper = mount(Calendar);
+      const svg = wrapper.find('svg');
+
+      // Slightly wider than tall to accommodate calendar proportions
+      expect(svg.attributes('width')).toBe('21');
+      expect(svg.attributes('height')).toBe('20');
+    });
+
+    it('suitable for UI calendar representations', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      // Includes key calendar elements
+      const pathData = path.attributes('d');
+      expect(pathData).toContain('1V3.25'); // Binding rings
+      expect(pathData).toMatch(/H\d+\.\d+V\d+\.\d+/); // Grid structure
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('svg is properly structured for screen readers', () => {
+      const wrapper = mount(Calendar);
+      const svg = wrapper.find('svg');
+
+      expect(svg.element.tagName.toLowerCase()).toBe('svg');
+    });
+
+    it('uses outline style for better contrast', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      // Outline style is more universally accessible
+      expect(path.attributes('stroke')).toBeTruthy();
+      expect(path.attributes('fill')).toBeFalsy();
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(Calendar);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(Calendar);
+      const wrapper2 = mount(Calendar);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('maintains calendar structure integrity', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      expect(path.exists()).toBe(true);
+      expect(path.attributes('d')).toBeTruthy();
+      expect(path.attributes('stroke')).toBeTruthy();
+      expect(path.attributes('stroke-width')).toBeTruthy();
+    });
+
+    it('suitable for various calendar UI contexts', () => {
+      const wrapper = mount(Calendar);
+
+      // Good size for buttons, form fields, navigation
+      expect(wrapper.find('svg').attributes('width')).toBe('21');
+      expect(wrapper.find('svg').attributes('height')).toBe('20');
+    });
+  });
+
+  describe('Icon Semantics', () => {
+    it('represents calendar with recognizable elements', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Key calendar features
+      expect(pathData).toMatch(/1V3\.25/); // Binding rings
+      expect(pathData).toMatch(/H\d+\.\d+V\d+\.\d+/); // Date grid
+      expect(pathData).toMatch(/C\d+/); // Rounded corners
+    });
+
+    it('uses standard calendar proportions', () => {
+      const wrapper = mount(Calendar);
+      const svg = wrapper.find('svg');
+
+      // Typical calendar aspect ratio (slightly wider than tall)
+      const width = parseInt(svg.attributes('width'));
+      const height = parseInt(svg.attributes('height'));
+      expect(width).toBeGreaterThan(height);
+      expect(width / height).toBeCloseTo(1.05, 1);
+    });
+
+    it('includes visual date indicators', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Should have multiple small date markers
+      const dateMarkers = pathData.match(/H\d+\.\d+V\d+\.\d+/g);
+      expect(dateMarkers).toBeTruthy();
+      expect(dateMarkers.length).toBeGreaterThan(5);
+    });
+  });
+
+  describe('Visual Design', () => {
+    it('provides clear calendar recognition', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Distinctive calendar elements
+      expect(pathData).toContain('1V3.25'); // Top rings
+      expect(pathData).toMatch(/\d+\.\d+H\d+\.\d+V/); // Grid pattern
+    });
+
+    it('uses appropriate line weight for clarity', () => {
+      const wrapper = mount(Calendar);
+      const path = wrapper.find('path');
+
+      // 1.5px stroke provides good visibility without being too heavy
+      expect(path.attributes('stroke-width')).toBe('1.5');
+    });
+  });
 });