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

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

@@ -1,319 +1,319 @@
-import { describe, it, expect, vi } from 'vitest';
-import { mount } from '@vue/test-utils';
-import ChairNotification from '@components/Icons/ChairNotification.vue';
-
-// Mock siteColors
-vi.mock('@/utils/index', () => ({
-  siteColors: {
-    font_color_code: '#172774'
-  }
-}));
-
-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
-    });
-  });
+import { describe, it, expect, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import ChairNotification from '@components/Icons/ChairNotification.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    font_color_code: '#172774'
+  }
+}));
+
+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
+    });
+  });
 });