@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,435 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import OutlineChecked from '@components/Icons/outlineChecked.vue';
+
+describe('OutlineChecked Icon', () => {
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(OutlineChecked);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(OutlineChecked);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('25');
+      expect(svg.attributes('height')).toBe('25');
+      expect(svg.attributes('viewBox')).toBe('0 0 25 25');
+      expect(svg.attributes('fill')).toBe('none');
+      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+    });
+
+    it('contains 2 rect elements and 1 path element', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+      const paths = wrapper.findAll('path');
+
+      expect(rects).toHaveLength(2);
+      expect(paths).toHaveLength(1);
+    });
+  });
+
+  describe('Rectangle Structure', () => {
+    it('first rect represents white background', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+
+      const backgroundRect = rects[0];
+      expect(backgroundRect.attributes('x')).toBe('1');
+      expect(backgroundRect.attributes('y')).toBe('1');
+      expect(backgroundRect.attributes('width')).toBe('23');
+      expect(backgroundRect.attributes('height')).toBe('23');
+      expect(backgroundRect.attributes('rx')).toBe('3');
+      expect(backgroundRect.attributes('fill')).toBe('white');
+    });
+
+    it('second rect represents border stroke', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+
+      const borderRect = rects[1];
+      expect(borderRect.attributes('x')).toBe('1');
+      expect(borderRect.attributes('y')).toBe('1');
+      expect(borderRect.attributes('width')).toBe('23');
+      expect(borderRect.attributes('height')).toBe('23');
+      expect(borderRect.attributes('rx')).toBe('3');
+      expect(borderRect.attributes('stroke')).toBe('#172774');
+      expect(borderRect.attributes('stroke-width')).toBe('2');
+    });
+
+    it('rects are positioned identically for layering', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+
+      const rect1 = rects[0];
+      const rect2 = rects[1];
+
+      expect(rect1.attributes('x')).toBe(rect2.attributes('x'));
+      expect(rect1.attributes('y')).toBe(rect2.attributes('y'));
+      expect(rect1.attributes('width')).toBe(rect2.attributes('width'));
+      expect(rect1.attributes('height')).toBe(rect2.attributes('height'));
+      expect(rect1.attributes('rx')).toBe(rect2.attributes('rx'));
+    });
+  });
+
+  describe('Checkmark Path', () => {
+    it('path represents checkmark shape', () => {
+      const wrapper = mount(OutlineChecked);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      expect(pathData).toBe('M7.8125 12.9688L11.5625 16.7188L17.1875 8.28125');
+    });
+
+    it('checkmark has correct stroke properties', () => {
+      const wrapper = mount(OutlineChecked);
+      const path = wrapper.find('path');
+
+      expect(path.attributes('stroke')).toBe('#172774');
+      expect(path.attributes('stroke-width')).toBe('2.5');
+      expect(path.attributes('stroke-linecap')).toBe('round');
+      expect(path.attributes('stroke-linejoin')).toBe('round');
+    });
+
+    it('checkmark has proper geometric structure', () => {
+      const wrapper = mount(OutlineChecked);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Should move to start point, line to middle point, line to end point
+      expect(pathData).toMatch(/^M\d+\.\d+\s+\d+\.\d+L\d+\.\d+\s+\d+\.\d+L\d+\.\d+\s+\d+\.\d+$/);
+    });
+
+    it('checkmark forms proper check shape', () => {
+      const wrapper = mount(OutlineChecked);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Start at left-middle, go to bottom-middle, then to top-right
+      expect(pathData).toContain('7.8125 12.9688'); // Start point
+      expect(pathData).toContain('11.5625 16.7188'); // Middle (bottom of check)
+      expect(pathData).toContain('17.1875 8.28125'); // End point (top-right)
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('uses white background with brand color border', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+
+      expect(rects[0].attributes('fill')).toBe('white');
+      expect(rects[1].attributes('stroke')).toBe('#172774');
+    });
+
+    it('checkmark uses brand color', () => {
+      const wrapper = mount(OutlineChecked);
+      const path = wrapper.find('path');
+
+      expect(path.attributes('stroke')).toBe('#172774');
+    });
+
+    it('svg container has no default fill', () => {
+      const wrapper = mount(OutlineChecked);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('fill')).toBe('none');
+    });
+
+    it('uses appropriate stroke weights for visibility', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+      const path = wrapper.find('path');
+
+      // Border stroke
+      expect(rects[1].attributes('stroke-width')).toBe('2');
+
+      // Checkmark stroke (slightly thicker for visibility)
+      expect(path.attributes('stroke-width')).toBe('2.5');
+    });
+  });
+
+  describe('Dimensions', () => {
+    it('uses square aspect ratio', () => {
+      const wrapper = mount(OutlineChecked);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('25');
+      expect(svg.attributes('height')).toBe('25');
+    });
+
+    it('has correct viewBox dimensions', () => {
+      const wrapper = mount(OutlineChecked);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('viewBox')).toBe('0 0 25 25');
+    });
+
+    it('rectangles account for stroke positioning', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+
+      // Positioned at 1,1 with 23x23 size to account for 2px stroke
+      expect(rects[0].attributes('x')).toBe('1');
+      expect(rects[0].attributes('y')).toBe('1');
+      expect(rects[0].attributes('width')).toBe('23');
+      expect(rects[0].attributes('height')).toBe('23');
+    });
+
+    it('suitable for form checkbox size', () => {
+      const wrapper = mount(OutlineChecked);
+      const svg = wrapper.find('svg');
+
+      // 25x25 is appropriate for form checkboxes
+      expect(svg.attributes('width')).toBe('25');
+      expect(svg.attributes('height')).toBe('25');
+    });
+  });
+
+  describe('Checkbox Geometry', () => {
+    it('checkbox fills most of viewBox', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+
+      const rect = rects[0];
+      const x = parseFloat(rect.attributes('x'));
+      const y = parseFloat(rect.attributes('y'));
+      const width = parseFloat(rect.attributes('width'));
+      const height = parseFloat(rect.attributes('height'));
+
+      // Should span from 1,1 to 24,24 (23x23 + 1px offset)
+      expect(x + width).toBe(24);
+      expect(y + height).toBe(24);
+    });
+
+    it('has rounded corners for modern appearance', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+
+      rects.forEach(rect => {
+        expect(rect.attributes('rx')).toBe('3');
+      });
+    });
+
+    it('checkmark is properly centered and sized', () => {
+      const wrapper = mount(OutlineChecked);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+
+      // Checkmark should be reasonably centered within the 25x25 box
+      // Start point: 7.8125 (left side, ~31% from left)
+      // Middle point: 11.5625, 16.7188 (center-left, bottom)
+      // End point: 17.1875, 8.28125 (right side, top)
+
+      expect(pathData).toMatch(/7\.8125.*17\.1875/); // Spans left to right
+      expect(pathData).toMatch(/16\.7188.*8\.28125/); // Spans bottom to top
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('represents checked state clearly', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+      const path = wrapper.find('path');
+
+      // White background with border = checkbox
+      expect(rects[0].attributes('fill')).toBe('white');
+      expect(rects[1].attributes('stroke')).toBeTruthy();
+
+      // Visible checkmark = checked state
+      expect(path.attributes('stroke')).toBeTruthy();
+    });
+
+    it('uses layered approach for clean appearance', () => {
+      const wrapper = mount(OutlineChecked);
+      const elements = wrapper.findAll('rect, path');
+
+      // Background rect, border rect, then checkmark path
+      expect(elements).toHaveLength(3);
+    });
+
+    it('suitable for form controls', () => {
+      const wrapper = mount(OutlineChecked);
+      const svg = wrapper.find('svg');
+
+      // Standard size and appearance for form checkbox
+      expect(svg.attributes('width')).toBe('25');
+      expect(svg.attributes('height')).toBe('25');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('svg is properly structured for screen readers', () => {
+      const wrapper = mount(OutlineChecked);
+      const svg = wrapper.find('svg');
+
+      expect(svg.element.tagName.toLowerCase()).toBe('svg');
+    });
+
+    it('provides clear checked state visual', () => {
+      const wrapper = mount(OutlineChecked);
+      const path = wrapper.find('path');
+
+      // Clear checkmark indicates checked state
+      expect(path.attributes('stroke')).toBe('#172774');
+      expect(path.attributes('stroke-width')).toBe('2.5'); // Thick enough to be visible
+    });
+
+    it('uses high contrast for visibility', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+      const path = wrapper.find('path');
+
+      // White background with dark border and checkmark
+      expect(rects[0].attributes('fill')).toBe('white');
+      expect(rects[1].attributes('stroke')).toBe('#172774');
+      expect(path.attributes('stroke')).toBe('#172774');
+    });
+
+    it('rounded corners provide friendly appearance', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+
+      rects.forEach(rect => {
+        expect(parseFloat(rect.attributes('rx'))).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(OutlineChecked);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(OutlineChecked);
+      const wrapper2 = mount(OutlineChecked);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('maintains checkbox structure integrity', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+      const path = wrapper.find('path');
+
+      expect(rects).toHaveLength(2);
+      expect(path.exists()).toBe(true);
+
+      rects.forEach(rect => {
+        expect(rect.attributes('x')).toBeTruthy();
+        expect(rect.attributes('y')).toBeTruthy();
+        expect(rect.attributes('width')).toBeTruthy();
+        expect(rect.attributes('height')).toBeTruthy();
+        expect(rect.attributes('rx')).toBeTruthy();
+      });
+
+      expect(path.attributes('d')).toBeTruthy();
+      expect(path.attributes('stroke')).toBeTruthy();
+    });
+
+    it('suitable for form checkbox implementations', () => {
+      const wrapper = mount(OutlineChecked);
+
+      // Standard checkbox requirements
+      expect(wrapper.find('svg').attributes('width')).toBe('25');
+      expect(wrapper.find('svg').attributes('height')).toBe('25');
+      expect(wrapper.findAll('rect')[0].attributes('fill')).toBe('white');
+      expect(wrapper.find('path').attributes('stroke')).toBe('#172774');
+    });
+  });
+
+  describe('Icon Semantics', () => {
+    it('represents checked/selected state', () => {
+      const wrapper = mount(OutlineChecked);
+      const path = wrapper.find('path');
+      const rects = wrapper.findAll('rect');
+
+      // Checkbox with visible checkmark = checked/selected
+      expect(rects[0].attributes('fill')).toBe('white'); // Clean background
+      expect(rects[1].attributes('stroke')).toBe('#172774'); // Defined border
+      expect(path.attributes('stroke')).toBe('#172774'); // Visible checkmark
+    });
+
+    it('uses standard checkbox proportions', () => {
+      const wrapper = mount(OutlineChecked);
+      const svg = wrapper.find('svg');
+
+      // Square checkbox is universal standard
+      const width = svg.attributes('width');
+      const height = svg.attributes('height');
+      expect(width).toBe(height);
+    });
+
+    it('checkmark follows standard check pattern', () => {
+      const wrapper = mount(OutlineChecked);
+      const path = wrapper.find('path');
+
+      const pathData = path.attributes('d');
+      // Should go from left-middle, down-right, then up-right (standard check shape)
+      const coords = pathData.match(/[\d.]+/g).map(parseFloat);
+
+      // First point (start)
+      const startX = coords[0];
+      const startY = coords[1];
+
+      // Second point (middle/bottom of check)
+      const midX = coords[2];
+      const midY = coords[3];
+
+      // Third point (end/top-right)
+      const endX = coords[4];
+      const endY = coords[5];
+
+      // Standard check: moves right and down, then right and up
+      expect(midX).toBeGreaterThan(startX); // Moves right
+      expect(midY).toBeGreaterThan(startY); // Moves down
+      expect(endX).toBeGreaterThan(midX);   // Continues right
+      expect(endY).toBeLessThan(midY);      // Moves up
+    });
+  });
+
+  describe('Visual Design', () => {
+    it('provides clear checked state appearance', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+      const path = wrapper.find('path');
+
+      // Clean white interior with defined border
+      expect(rects[0].attributes('fill')).toBe('white');
+      expect(rects[1].attributes('stroke')).toBe('#172774');
+
+      // Prominent checkmark
+      expect(path.attributes('stroke')).toBe('#172774');
+      expect(parseFloat(path.attributes('stroke-width'))).toBeGreaterThan(2);
+    });
+
+    it('uses appropriate stroke weights for different elements', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+      const path = wrapper.find('path');
+
+      // Border uses standard weight
+      expect(rects[1].attributes('stroke-width')).toBe('2');
+
+      // Checkmark uses slightly heavier weight for visibility
+      expect(path.attributes('stroke-width')).toBe('2.5');
+    });
+
+    it('maintains clean modern aesthetic', () => {
+      const wrapper = mount(OutlineChecked);
+      const rects = wrapper.findAll('rect');
+      const path = wrapper.find('path');
+
+      // Rounded corners for modern look
+      expect(rects[0].attributes('rx')).toBe('3');
+
+      // Smooth line caps and joins
+      expect(path.attributes('stroke-linecap')).toBe('round');
+      expect(path.attributes('stroke-linejoin')).toBe('round');
+    });
+  });
+});