@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,394 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import RingNotification from '@components/Icons/RingNotification.vue';
+
+describe('RingNotification Icon', () => {
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(RingNotification);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(RingNotification);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('23');
+      expect(svg.attributes('height')).toBe('23');
+      expect(svg.attributes('viewBox')).toBe('0 0 23 23');
+      expect(svg.attributes('fill')).toBe('none');
+      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+    });
+
+    it('contains group with clip path and paths', () => {
+      const wrapper = mount(RingNotification);
+      const group = wrapper.find('g');
+      const paths = wrapper.findAll('path');
+      const clipPath = wrapper.find('clipPath');
+
+      expect(group.exists()).toBe(true);
+      expect(paths).toHaveLength(5);
+      expect(clipPath.exists()).toBe(true);
+    });
+  });
+
+  describe('Path Structure', () => {
+    it('first path represents notification circle', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      const notificationCircle = paths[0];
+      expect(notificationCircle.attributes('d')).toContain('M18.6328 12.6722C20.6723');
+      expect(notificationCircle.attributes('fill')).toBe('#F4297E');
+    });
+
+    it('remaining paths represent bell structure', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Bell outline paths (paths 1-4)
+      for (let i = 1; i < paths.length; i++) {
+        expect(paths[i].attributes('stroke')).toBe('#172774');
+        expect(paths[i].attributes('stroke-width')).toBe('1.5');
+        expect(paths[i].attributes('stroke-linecap')).toBe('round');
+        expect(paths[i].attributes('stroke-linejoin')).toBe('round');
+      }
+    });
+
+    it('contains bell shape and clapper elements', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Bell body (curved outline)
+      expect(paths[1].attributes('d')).toContain('16.9778 3.75416');
+      expect(paths[1].attributes('d')).toContain('11.5841 1.14923');
+
+      // Bell mouth/sound waves
+      expect(paths[2].attributes('d')).toContain('14.8633 17.3457');
+      expect(paths[2].attributes('d')).toContain('21.1304 15.8441');
+
+      // Bell clapper/handle
+      expect(paths[4].attributes('d')).toContain('14.8633 17.3458');
+      expect(paths[4].attributes('d')).toContain('11.5842 21.8508');
+    });
+
+    it('includes notification badge with distinctive color', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      const notificationBadge = paths[0];
+      expect(notificationBadge.attributes('fill')).toBe('#F4297E');
+      expect(notificationBadge.attributes('stroke')).toBeUndefined();
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('uses notification color for alert badge', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      const notificationCircle = paths[0];
+      expect(notificationCircle.attributes('fill')).toBe('#F4297E');
+    });
+
+    it('uses brand color for bell structure', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Bell structure paths (excluding notification badge)
+      for (let i = 1; i < paths.length; i++) {
+        expect(paths[i].attributes('stroke')).toBe('#172774');
+      }
+    });
+
+    it('svg container has no default fill', () => {
+      const wrapper = mount(RingNotification);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('fill')).toBe('none');
+    });
+
+    it('uses proper stroke properties for bell outline', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Bell paths have consistent stroke styling
+      for (let i = 1; i < paths.length; i++) {
+        expect(paths[i].attributes('stroke-width')).toBe('1.5');
+        expect(paths[i].attributes('stroke-linecap')).toBe('round');
+        expect(paths[i].attributes('stroke-linejoin')).toBe('round');
+      }
+    });
+  });
+
+  describe('Dimensions', () => {
+    it('uses square aspect ratio', () => {
+      const wrapper = mount(RingNotification);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('23');
+      expect(svg.attributes('height')).toBe('23');
+    });
+
+    it('has correct viewBox dimensions', () => {
+      const wrapper = mount(RingNotification);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('viewBox')).toBe('0 0 23 23');
+    });
+
+    it('suitable for notification icon size', () => {
+      const wrapper = mount(RingNotification);
+      const svg = wrapper.find('svg');
+
+      // 23x23 is appropriate for notification/alert icons
+      expect(svg.attributes('width')).toBe('23');
+      expect(svg.attributes('height')).toBe('23');
+    });
+  });
+
+  describe('Clipping and Layout', () => {
+    it('contains clipping path for proper masking', () => {
+      const wrapper = mount(RingNotification);
+      const clipPath = wrapper.find('clipPath');
+      const rect = clipPath.find('rect');
+
+      expect(clipPath.attributes('id')).toBe('clip0_1311_589');
+      expect(rect.attributes('width')).toBe('21.4524');
+      expect(rect.attributes('height')).toBe('23');
+      expect(rect.attributes('fill')).toBe('white');
+    });
+
+    it('group references clipping path correctly', () => {
+      const wrapper = mount(RingNotification);
+      const group = wrapper.find('g');
+
+      expect(group.attributes('clip-path')).toBe('url(#clip0_1311_589)');
+    });
+
+    it('notification badge positioned at top right', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      const notificationPath = paths[0].attributes('d');
+      // Badge should be positioned in upper right area
+      expect(notificationPath).toMatch(/18\.6328.*12\.6722/);
+      expect(notificationPath).toMatch(/22\.3257.*8\.97937/);
+    });
+
+    it('bell structure spans appropriate area', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Bell should span significant portion of viewBox
+      const bellPath = paths[1].attributes('d');
+      expect(bellPath).toMatch(/1\.14923/); // Near left edge
+      expect(bellPath).toMatch(/17\.3304/); // Extends right
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('represents notification bell with alert badge', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // 1 notification badge + 4 bell structure paths
+      expect(paths).toHaveLength(5);
+
+      // Badge is filled, bell is outlined
+      expect(paths[0].attributes('fill')).toBeTruthy();
+      expect(paths[1].attributes('stroke')).toBeTruthy();
+    });
+
+    it('includes defs section for clipping', () => {
+      const wrapper = mount(RingNotification);
+      const defs = wrapper.find('defs');
+      const clipPath = defs.find('clipPath');
+
+      expect(defs.exists()).toBe(true);
+      expect(clipPath.exists()).toBe(true);
+    });
+
+    it('maintains proper visual hierarchy', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Notification badge uses bright color for attention
+      expect(paths[0].attributes('fill')).toBe('#F4297E');
+
+      // Bell structure uses subtle strokes
+      expect(paths[1].attributes('stroke-width')).toBe('1.5');
+    });
+  });
+
+  describe('Bell Geometry', () => {
+    it('bell shape has characteristic curves', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Bell outline should have curved elements
+      const bellOutline = paths[1].attributes('d');
+      expect(bellOutline).toMatch(/16\.9778.*3\.75416/); // Bell top curve
+      expect(bellOutline).toMatch(/15\.6141.*2\.4517/); // Bell side curve
+    });
+
+    it('includes bell mouth and sound representation', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Bell mouth/sound waves
+      const soundPath = paths[2].attributes('d');
+      expect(soundPath).toContain('21.1304 15.8441'); // Sound wave extent
+      expect(soundPath).toMatch(/20\.9312.*15\.6142/); // Wave details
+    });
+
+    it('has bell handle/clapper element', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Bell handle/clapper at bottom
+      const handlePath = paths[4].attributes('d');
+      expect(handlePath).toMatch(/11\.5842.*21\.8508/); // Handle center
+      expect(handlePath).toMatch(/8\.30503.*17\.3458/); // Handle width
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('svg is properly structured for screen readers', () => {
+      const wrapper = mount(RingNotification);
+      const svg = wrapper.find('svg');
+
+      expect(svg.element.tagName.toLowerCase()).toBe('svg');
+    });
+
+    it('combines bell icon with clear notification indicator', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Bell structure (outline style for clarity)
+      expect(paths[1].attributes('stroke')).toBeTruthy();
+
+      // Notification badge (filled style for visibility)
+      expect(paths[0].attributes('fill')).toBe('#F4297E');
+    });
+
+    it('uses high contrast colors', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Dark stroke on light background
+      expect(paths[1].attributes('stroke')).toBe('#172774');
+
+      // Bright notification color
+      expect(paths[0].attributes('fill')).toBe('#F4297E');
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(RingNotification);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(RingNotification);
+      const wrapper2 = mount(RingNotification);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('maintains bell notification structure integrity', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+      const group = wrapper.find('g');
+      const clipPath = wrapper.find('clipPath');
+
+      expect(paths).toHaveLength(5);
+      expect(group.exists()).toBe(true);
+      expect(clipPath.exists()).toBe(true);
+
+      paths.forEach(path => {
+        expect(path.attributes('d')).toBeTruthy();
+      });
+    });
+
+    it('suitable for notification/alert contexts', () => {
+      const wrapper = mount(RingNotification);
+
+      // Appropriate size and clear visual hierarchy for notifications
+      expect(wrapper.find('svg').attributes('width')).toBe('23');
+      expect(wrapper.find('svg').attributes('height')).toBe('23');
+      expect(wrapper.findAll('path')[0].attributes('fill')).toBe('#F4297E');
+    });
+  });
+
+  describe('Icon Semantics', () => {
+    it('represents notification/alert with bell metaphor', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Bell = notification, badge = alert/count indicator
+      expect(paths.length).toBe(5); // Bell structure + notification badge
+      expect(paths[0].attributes('fill')).toBe('#F4297E'); // Alert color
+    });
+
+    it('uses universally recognized notification color', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Pink/magenta is widely used for notifications/alerts
+      const notificationColor = paths[0].attributes('fill');
+      expect(notificationColor).toBe('#F4297E');
+      expect(notificationColor.toLowerCase()).toMatch(/^#[a-f0-9]/); // Valid hex color
+    });
+
+    it('maintains bell recognizability with notification overlay', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Bell structure should still be clearly defined
+      expect(paths[1].attributes('d')).toMatch(/16\.9778.*3\.75416/); // Bell curve
+      expect(paths[2].attributes('d')).toMatch(/21\.1304.*15\.8441/); // Bell mouth
+      expect(paths[3].attributes('d')).toMatch(/11\.5841.*17\.545/); // Bell handle
+    });
+  });
+
+  describe('Visual Design', () => {
+    it('provides clear visual hierarchy', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Notification badge is prominent (bright fill)
+      expect(paths[0].attributes('fill')).toBe('#F4297E');
+
+      // Bell structure is subtle but clear (strokes)
+      expect(paths[1].attributes('stroke')).toBe('#172774');
+      expect(paths[1].attributes('stroke-width')).toBe('1.5');
+    });
+
+    it('balances bell detail with notification visibility', () => {
+      const wrapper = mount(RingNotification);
+      const paths = wrapper.findAll('path');
+
+      // Bell has multiple detail paths but consistent styling
+      for (let i = 1; i < paths.length; i++) {
+        expect(paths[i].attributes('stroke')).toBe('#172774');
+        expect(paths[i].attributes('stroke-width')).toBe('1.5');
+      }
+
+      // Notification is simple but prominent
+      expect(paths[0].attributes('d')).toMatch(/C.*C.*C/); // Circle path
+    });
+
+    it('uses clipping for clean composition', () => {
+      const wrapper = mount(RingNotification);
+      const group = wrapper.find('g');
+      const clipPath = wrapper.find('clipPath');
+
+      // Clipping ensures clean edges and proper overlay
+      expect(group.attributes('clip-path')).toBe('url(#clip0_1311_589)');
+      expect(clipPath.exists()).toBe(true);
+    });
+  });
+});

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

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