@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,187 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import CalendarNotification from '@components/Icons/CalendarNotification.vue';
+
+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');
+      });
+    });
+  });
+});

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

@@ -0,0 +1,235 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Chair from '@components/Icons/Chair.vue';
+
+describe('Chair Icon', () => {
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(Chair);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(Chair);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('14');
+      expect(svg.attributes('height')).toBe('23');
+      expect(svg.attributes('viewBox')).toBe('0 0 14 23');
+      expect(svg.attributes('fill')).toBe('none');
+      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+    });
+
+    it('contains exactly 3 path elements', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+      expect(paths).toHaveLength(3);
+    });
+  });
+
+  describe('Path Structure', () => {
+    it('first path represents chair legs', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+
+      const legsPath = paths[0];
+      expect(legsPath.attributes('d')).toBe('M0.785645 22.2287L2.74973 15.2099H11.7217V22.2287');
+      expect(legsPath.attributes('stroke')).toBe('#172774');
+      expect(legsPath.attributes('stroke-width')).toBe('1.5');
+      expect(legsPath.attributes('stroke-miterlimit')).toBe('10');
+      expect(legsPath.attributes('stroke-linecap')).toBe('round');
+    });
+
+    it('second path represents chair seat/back', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+
+      const seatPath = paths[1];
+      const pathData = paths[1].attributes('d');
+      expect(pathData).toContain('M11.3915 11.9859H2.74951V15.2099H11.5643');
+      expect(seatPath.attributes('stroke')).toBe('#172774');
+      expect(seatPath.attributes('stroke-width')).toBe('1.5');
+      expect(seatPath.attributes('stroke-miterlimit')).toBe('10');
+    });
+
+    it('third path represents chair back support', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+
+      const backPath = paths[2];
+      expect(backPath.attributes('d')).toBe('M2.7498 11.9859L1.20996 0.771301');
+      expect(backPath.attributes('stroke')).toBe('#172774');
+      expect(backPath.attributes('stroke-width')).toBe('1.5');
+      expect(backPath.attributes('stroke-miterlimit')).toBe('10');
+      expect(backPath.attributes('stroke-linecap')).toBe('round');
+    });
+
+    it('seat path has fill-rule and clip-rule attributes', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+
+      const seatPath = paths[1];
+      expect(seatPath.attributes('fill-rule')).toBe('evenodd');
+      expect(seatPath.attributes('clip-rule')).toBe('evenodd');
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('all strokes use the correct color', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('stroke')).toBe('#172774');
+      });
+    });
+
+    it('all paths have correct stroke width', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('stroke-width')).toBe('1.5');
+      });
+    });
+
+    it('all paths have correct stroke miterlimit', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('stroke-miterlimit')).toBe('10');
+      });
+    });
+
+    it('specific paths have rounded line caps', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+
+      expect(paths[0].attributes('stroke-linecap')).toBe('round'); // Chair legs
+      expect(paths[2].attributes('stroke-linecap')).toBe('round'); // Back support
+      // Middle path (seat) doesn't have stroke-linecap
+      expect(paths[1].attributes('stroke-linecap')).toBeUndefined();
+    });
+
+    it('paths have no fill', () => {
+      const wrapper = mount(Chair);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('fill')).toBe('none');
+    });
+  });
+
+  describe('Chair Geometry', () => {
+    it('chair legs span correct width', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+
+      const legsPath = paths[0].attributes('d');
+      // Starts at x=0.785645, goes to 2.74973, then 11.7217
+      expect(legsPath).toContain('0.785645');
+      expect(legsPath).toContain('2.74973');
+      expect(legsPath).toContain('11.7217');
+    });
+
+    it('chair back extends to top', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+
+      const backPath = paths[2].attributes('d');
+      // Goes from 11.9859 down to 0.771301 (top of chair)
+      expect(backPath).toContain('0.771301');
+      expect(backPath).toContain('11.9859');
+    });
+
+    it('seat connects properly', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+
+      const seatPath = paths[1].attributes('d');
+      // Seat spans from 2.74951 to 11.5643 horizontally
+      expect(seatPath).toContain('2.74951');
+      expect(seatPath).toContain('11.5643');
+      expect(seatPath).toContain('15.2099'); // Seat height
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('maintains correct aspect ratio', () => {
+      const wrapper = mount(Chair);
+      const svg = wrapper.find('svg');
+
+      // Chair should be taller than it is wide (14x23)
+      const width = parseInt(svg.attributes('width'));
+      const height = parseInt(svg.attributes('height'));
+      expect(height).toBeGreaterThan(width);
+    });
+
+    it('uses compact dimensions suitable for icons', () => {
+      const wrapper = mount(Chair);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('14');
+      expect(svg.attributes('height')).toBe('23');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('svg is properly structured for screen readers', () => {
+      const wrapper = mount(Chair);
+      const svg = wrapper.find('svg');
+
+      expect(svg.element.tagName.toLowerCase()).toBe('svg');
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(Chair);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(Chair);
+      const wrapper2 = mount(Chair);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('maintains chair shape integrity', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+
+      // All three path elements should be present for complete chair
+      expect(paths).toHaveLength(3);
+
+      // Each path should have proper stroke styling
+      paths.forEach(path => {
+        expect(path.attributes('stroke')).toBeTruthy();
+        expect(path.attributes('stroke-width')).toBeTruthy();
+        expect(path.attributes('d')).toBeTruthy();
+      });
+    });
+  });
+
+  describe('Icon Semantics', () => {
+    it('represents a chair with recognizable components', () => {
+      const wrapper = mount(Chair);
+      const paths = wrapper.findAll('path');
+
+      // Should have legs, seat, and backrest components
+      expect(paths[0].attributes('d')).toMatch(/M0\.785645.*L2\.74973.*H11\.7217.*V22\.2287/);
+      expect(paths[1].attributes('d')).toContain('H2.74951V15.2099H11.5643');
+      expect(paths[2].attributes('d')).toMatch(/M2\.7498.*L1\.20996/);
+    });
+
+    it('maintains proper chair proportions', () => {
+      const wrapper = mount(Chair);
+      const svg = wrapper.find('svg');
+
+      // Chair icon should fit within reasonable bounds
+      expect(svg.attributes('viewBox')).toBe('0 0 14 23');
+    });
+  });
+});