@zap-wunschlachen/wl-shared-components 1.0.4 → 1.0.6

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

@@ -1,235 +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');
-    });
-  });
+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');
+    });
+  });
 });