@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,312 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ChairNotification from '@components/Icons/ChairNotification.vue';
+
+describe('ChairNotification Icon', () => {
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(ChairNotification);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(ChairNotification);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('16');
+      expect(svg.attributes('height')).toBe('23');
+      expect(svg.attributes('viewBox')).toBe('0 0 16 23');
+      expect(svg.attributes('fill')).toBe('none');
+      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+    });
+
+    it('contains exactly 4 path elements', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+      expect(paths).toHaveLength(4);
+    });
+  });
+
+  describe('Path Structure', () => {
+    it('first three paths represent chair structure', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      // Chair base/legs
+      expect(paths[0].attributes('d')).toContain('M0.77124 22.2287L2.69948 15.2099');
+      expect(paths[0].attributes('stroke')).toBe('#172774');
+
+      // Chair back post
+      expect(paths[1].attributes('d')).toContain('M2.69948 11.9859L1.18774 0.771301');
+      expect(paths[1].attributes('stroke')).toBe('#172774');
+
+      // Chair seat and back
+      expect(paths[2].attributes('d')).toContain('M7.7283 11.9859H2.69946V15.2099');
+      expect(paths[2].attributes('stroke')).toBe('#172774');
+    });
+
+    it('fourth path represents notification circle', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      const notificationPath = paths[3];
+      expect(notificationPath.attributes('d')).toContain('M12.1556 12.6955C14.2088');
+      expect(notificationPath.attributes('fill')).toBe('#F4297E');
+    });
+
+    it('chair paths have correct stroke properties', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      // First 3 paths are chair structure with strokes
+      for (let i = 0; i < 3; i++) {
+        expect(paths[i].attributes('stroke')).toBe('#172774');
+        expect(paths[i].attributes('stroke-width')).toBe('1.5');
+        expect(paths[i].attributes('stroke-miterlimit')).toBe('10');
+        expect(paths[i].attributes('stroke-linecap')).toBe('round');
+      }
+    });
+
+    it('notification circle has pink fill', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      const notificationCircle = paths[3];
+      expect(notificationCircle.attributes('fill')).toBe('#F4297E');
+      expect(notificationCircle.attributes('stroke')).toBeUndefined();
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('uses correct brand color for chair structure', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      // Chair paths use brand color
+      for (let i = 0; i < 3; i++) {
+        expect(paths[i].attributes('stroke')).toBe('#172774');
+      }
+    });
+
+    it('uses notification color for alert circle', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      const notificationCircle = paths[3];
+      expect(notificationCircle.attributes('fill')).toBe('#F4297E');
+    });
+
+    it('svg container has no default fill', () => {
+      const wrapper = mount(ChairNotification);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('fill')).toBe('none');
+    });
+  });
+
+  describe('Dimensions', () => {
+    it('uses vertical rectangle aspect ratio', () => {
+      const wrapper = mount(ChairNotification);
+      const svg = wrapper.find('svg');
+
+      const width = parseInt(svg.attributes('width'));
+      const height = parseInt(svg.attributes('height'));
+
+      expect(height).toBeGreaterThan(width);
+      expect(height / width).toBeCloseTo(1.44, 1); // 23/16 ≈ 1.44
+    });
+
+    it('has correct viewBox dimensions', () => {
+      const wrapper = mount(ChairNotification);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('viewBox')).toBe('0 0 16 23');
+    });
+
+    it('suitable for notification icon size', () => {
+      const wrapper = mount(ChairNotification);
+      const svg = wrapper.find('svg');
+
+      // Small enough for UI notifications but tall enough to show chair detail
+      expect(svg.attributes('width')).toBe('16');
+      expect(svg.attributes('height')).toBe('23');
+    });
+  });
+
+  describe('Chair Geometry', () => {
+    it('chair spans most of viewBox vertically', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      const chairBasePath = paths[0].attributes('d');
+      const chairBackPath = paths[1].attributes('d');
+
+      // Should span from near bottom to near top
+      expect(chairBasePath).toContain('22.2287'); // Near bottom
+      expect(chairBackPath).toContain('0.771301'); // Near top
+    });
+
+    it('notification circle positioned at top right', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      const notificationPath = paths[3].attributes('d');
+      // Circle should be positioned in upper right area
+      expect(notificationPath).toMatch(/12\.1556.*12\.6955/);
+      expect(notificationPath).toMatch(/15\.8733.*8\.97789/);
+    });
+
+    it('chair has recognizable furniture shape', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      // Should have vertical elements (back) and horizontal elements (seat)
+      expect(paths[1].attributes('d')).toMatch(/L1\.18774\s+0\.771301/); // Vertical back
+      expect(paths[2].attributes('d')).toMatch(/H.*V/); // Horizontal and vertical seat elements
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('represents chair with notification badge', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      // 3 chair elements + 1 notification badge
+      expect(paths).toHaveLength(4);
+
+      // Chair elements have strokes, notification has fill
+      expect(paths[0].attributes('stroke')).toBeTruthy();
+      expect(paths[1].attributes('stroke')).toBeTruthy();
+      expect(paths[2].attributes('stroke')).toBeTruthy();
+      expect(paths[3].attributes('fill')).toBeTruthy();
+    });
+
+    it('notification circle is complete circle', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      const notificationPath = paths[3].attributes('d');
+      // Circle path should contain radius and center information
+      expect(notificationPath).toContain('C14.2088 12.6955');
+      expect(notificationPath).toContain('8.97789C8.43799');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('svg is properly structured for screen readers', () => {
+      const wrapper = mount(ChairNotification);
+      const svg = wrapper.find('svg');
+
+      expect(svg.element.tagName.toLowerCase()).toBe('svg');
+    });
+
+    it('combines chair icon with clear notification indicator', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      // Chair structure (outline style)
+      for (let i = 0; i < 3; i++) {
+        expect(paths[i].attributes('stroke')).toBeTruthy();
+      }
+
+      // Notification badge (filled style for visibility)
+      expect(paths[3].attributes('fill')).toBe('#F4297E');
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(ChairNotification);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(ChairNotification);
+      const wrapper2 = mount(ChairNotification);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('maintains chair notification structure integrity', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      expect(paths).toHaveLength(4);
+      paths.forEach(path => {
+        expect(path.attributes('d')).toBeTruthy();
+      });
+
+      // Verify mix of stroke and fill styles
+      expect(paths[0].attributes('stroke')).toBeTruthy();
+      expect(paths[3].attributes('fill')).toBeTruthy();
+    });
+
+    it('suitable for appointment/seating notifications', () => {
+      const wrapper = mount(ChairNotification);
+
+      // Appropriate size and clear visual hierarchy
+      expect(wrapper.find('svg').attributes('width')).toBe('16');
+      expect(wrapper.find('svg').attributes('height')).toBe('23');
+      expect(wrapper.findAll('path')[3].attributes('fill')).toBe('#F4297E');
+    });
+  });
+
+  describe('Icon Semantics', () => {
+    it('represents seating/appointment notification', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      // Chair symbol + notification badge = seating alert
+      expect(paths.length).toBe(4);
+      expect(paths[3].attributes('fill')).toBe('#F4297E'); // Alert color
+    });
+
+    it('uses appropriate notification color', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      // Pink/magenta is commonly used for notifications/alerts
+      const notificationColor = paths[3].attributes('fill');
+      expect(notificationColor).toBe('#F4297E');
+      expect(notificationColor.toLowerCase()).toMatch(/^#[a-f0-9][a-f0-9][a-f0-9]/); // Valid hex color
+    });
+
+    it('maintains chair recognizability with notification overlay', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      // Chair structure should still be clearly defined
+      expect(paths[0].attributes('d')).toMatch(/L.*H.*V/); // Chair base structure
+      expect(paths[1].attributes('d')).toMatch(/L.*0\.771301/); // Chair back post
+      expect(paths[2].attributes('d')).toMatch(/H.*V.*H/); // Chair seat structure
+    });
+  });
+
+  describe('Visual Design', () => {
+    it('provides clear visual hierarchy', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      // Chair structure uses subtle strokes
+      expect(paths[0].attributes('stroke-width')).toBe('1.5');
+
+      // Notification uses bright fill for prominence
+      expect(paths[3].attributes('fill')).toBe('#F4297E');
+    });
+
+    it('balances chair detail with notification visibility', () => {
+      const wrapper = mount(ChairNotification);
+      const paths = wrapper.findAll('path');
+
+      // Chair has multiple detail paths but uses consistent styling
+      for (let i = 0; i < 3; i++) {
+        expect(paths[i].attributes('stroke')).toBe('#172774');
+        expect(paths[i].attributes('stroke-width')).toBe('1.5');
+      }
+
+      // Notification is simple but prominent
+      expect(paths[3].attributes('d')).toMatch(/C.*C.*C/); // Circle path
+    });
+  });
+});

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

@@ -0,0 +1,256 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Circle from '@components/Icons/Circle.vue';
+
+describe('Circle Icon', () => {
+  // Test basic rendering
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(Circle);
+      
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(Circle);
+      const svg = wrapper.find('svg');
+      
+      expect(svg.attributes('width')).toBe('100');
+      expect(svg.attributes('height')).toBe('100');
+      expect(svg.attributes('viewBox')).toBe('0 0 41 42');
+      expect(svg.attributes('fill')).toBe('none');
+      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+    });
+
+    it('contains exactly 5 path segments', () => {
+      const wrapper = mount(Circle);
+      const paths = wrapper.findAll('path');
+      
+      expect(paths).toHaveLength(5);
+    });
+
+    it('has paths with correct rotation transforms', () => {
+      const wrapper = mount(Circle);
+      const paths = wrapper.findAll('path');
+      
+      const expectedRotations = [0, 72, 144, 216, 288];
+      
+      paths.forEach((path, index) => {
+        const transform = path.attributes('transform');
+        expect(transform).toContain(`rotate(${expectedRotations[index]}, 20, 21)`);
+      });
+    });
+  });
+
+  // Test path structure
+  describe('Path Structure', () => {
+    it('all paths have the same d attribute', () => {
+      const wrapper = mount(Circle);
+      const paths = wrapper.findAll('path');
+      
+      const expectedPath = 'M34.7023 16.1214C32.7846 10.4974 27.6246 6.37999 21.4629 5.99002L21.7787 1C30.0113 1.52105 36.8805 7.01704 39.4347 14.5078L34.7023 16.1214Z';
+      
+      paths.forEach(path => {
+        expect(path.attributes('d')).toBe(expectedPath);
+      });
+    });
+
+    it('all paths have consistent stroke properties', () => {
+      const wrapper = mount(Circle);
+      const paths = wrapper.findAll('path');
+      
+      paths.forEach(path => {
+        expect(path.attributes('stroke-width')).toBe('0.5');
+        expect(path.attributes('stroke-miterlimit')).toBe('10');
+        expect(path.attributes('fill-rule')).toBe('evenodd');
+        expect(path.attributes('clip-rule')).toBe('evenodd');
+      });
+    });
+
+    it('paths are rotated at 72-degree intervals', () => {
+      const wrapper = mount(Circle);
+      const paths = wrapper.findAll('path');
+      
+      // Check that rotations follow a 72-degree pattern (360/5 = 72)
+      for (let i = 0; i < paths.length; i++) {
+        const expectedRotation = i * 72;
+        const transform = paths[i].attributes('transform');
+        expect(transform).toBe(`rotate(${expectedRotation}, 20, 21)`);
+      }
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('is accessible as a decorative icon', () => {
+      const wrapper = mount(Circle);
+      const svg = wrapper.find('svg');
+      
+      expect(svg.exists()).toBe(true);
+    });
+
+    it('can accept aria attributes', () => {
+      const wrapper = mount(Circle, {
+        attrs: {
+          'aria-label': 'Loading circle',
+          role: 'img',
+          'aria-hidden': 'true'
+        }
+      });
+      
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('aria-label')).toBe('Loading circle');
+      expect(svg.attributes('role')).toBe('img');
+      expect(svg.attributes('aria-hidden')).toBe('true');
+    });
+  });
+
+  // Test styling and customization
+  describe('Styling', () => {
+    it('maintains square dimensions', () => {
+      const wrapper = mount(Circle);
+      const svg = wrapper.find('svg');
+      
+      expect(svg.attributes('width')).toBe('100');
+      expect(svg.attributes('height')).toBe('100');
+    });
+
+    it('can be styled with CSS classes', () => {
+      const wrapper = mount(Circle, {
+        attrs: {
+          class: 'loading-spinner'
+        }
+      });
+      
+      expect(wrapper.classes()).toContain('loading-spinner');
+    });
+
+    it('preserves viewBox for proper scaling', () => {
+      const wrapper = mount(Circle);
+      const svg = wrapper.find('svg');
+      
+      expect(svg.attributes('viewBox')).toBe('0 0 41 42');
+    });
+
+    it('can be resized with inline styles', () => {
+      const wrapper = mount(Circle, {
+        attrs: {
+          style: 'width: 50px; height: 50px;'
+        }
+      });
+      
+      // ViewBox should remain the same for proper scaling
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('viewBox')).toBe('0 0 41 42');
+    });
+  });
+
+  // Test geometric properties
+  describe('Geometric Properties', () => {
+    it('creates a symmetric 5-segment pattern', () => {
+      const wrapper = mount(Circle);
+      const paths = wrapper.findAll('path');
+      
+      expect(paths).toHaveLength(5);
+      
+      // Verify the rotation center is consistent
+      paths.forEach(path => {
+        const transform = path.attributes('transform');
+        expect(transform).toContain('20, 21'); // Center point
+      });
+    });
+
+    it('covers full circle with segments', () => {
+      const wrapper = mount(Circle);
+      const paths = wrapper.findAll('path');
+      
+      // Calculate total rotation coverage
+      let totalCoverage = 0;
+      paths.forEach((path, index) => {
+        totalCoverage += 72; // Each segment covers 72 degrees
+      });
+      
+      expect(totalCoverage).toBe(360); // Full circle
+    });
+
+    it('has consistent segment spacing', () => {
+      const wrapper = mount(Circle);
+      const paths = wrapper.findAll('path');
+      
+      for (let i = 1; i < paths.length; i++) {
+        const currentTransform = paths[i].attributes('transform');
+        const previousTransform = paths[i - 1].attributes('transform');
+        
+        const currentRotation = parseInt(currentTransform.match(/rotate\((\d+)/)?.[1] || '0');
+        const previousRotation = parseInt(previousTransform.match(/rotate\((\d+)/)?.[1] || '0');
+        
+        const difference = currentRotation - previousRotation;
+        expect(difference).toBe(72);
+      }
+    });
+  });
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles additional props without breaking', () => {
+      expect(() => {
+        mount(Circle, {
+          props: {
+            customProp: 'value'
+          }
+        });
+      }).not.toThrow();
+    });
+
+    it('works with different fill colors applied via CSS', () => {
+      const wrapper = mount(Circle, {
+        attrs: {
+          style: 'fill: red;'
+        }
+      });
+      
+      // Should still render correctly
+      expect(wrapper.find('svg').exists()).toBe(true);
+      expect(wrapper.findAll('path')).toHaveLength(5);
+    });
+
+    it('maintains structure when wrapped in containers', () => {
+      const wrapper = mount({
+        template: '<div class="icon-container"><Circle /></div>',
+        components: { Circle }
+      });
+      
+      expect(wrapper.find('svg').exists()).toBe(true);
+      expect(wrapper.findAll('path')).toHaveLength(5);
+    });
+  });
+
+  // Test performance characteristics
+  describe('Performance', () => {
+    it('renders efficiently with static paths', () => {
+      const start = performance.now();
+      const wrapper = mount(Circle);
+      const end = performance.now();
+      
+      expect(wrapper.find('svg').exists()).toBe(true);
+      expect(end - start).toBeLessThan(50); // Should render quickly
+    });
+
+    it('maintains consistent structure across multiple renders', () => {
+      const wrapper1 = mount(Circle);
+      const wrapper2 = mount(Circle);
+      
+      expect(wrapper1.findAll('path')).toHaveLength(5);
+      expect(wrapper2.findAll('path')).toHaveLength(5);
+      
+      // Verify same structure
+      const paths1 = wrapper1.findAll('path');
+      const paths2 = wrapper2.findAll('path');
+      
+      for (let i = 0; i < paths1.length; i++) {
+        expect(paths1[i].attributes('d')).toBe(paths2[i].attributes('d'));
+        expect(paths1[i].attributes('transform')).toBe(paths2[i].attributes('transform'));
+      }
+    });
+  });
+});