@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,316 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Checkbox from '@components/Icons/checkbox.vue';
+
+describe('Checkbox Icon', () => {
+  describe('Rendering', () => {
+    it('renders as SVG element', () => {
+      const wrapper = mount(Checkbox);
+      expect(wrapper.find('svg').exists()).toBe(true);
+    });
+
+    it('has correct SVG attributes', () => {
+      const wrapper = mount(Checkbox);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('16');
+      expect(svg.attributes('height')).toBe('16');
+      expect(svg.attributes('viewBox')).toBe('0 0 16 16');
+      expect(svg.attributes('fill')).toBe('none');
+      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+    });
+
+    it('contains exactly 1 rect element', () => {
+      const wrapper = mount(Checkbox);
+      const rects = wrapper.findAll('rect');
+      expect(rects).toHaveLength(1);
+    });
+  });
+
+  describe('Rectangle Properties', () => {
+    it('rect is properly positioned', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      expect(rect.attributes('x')).toBe('0.5');
+      expect(rect.attributes('y')).toBe('0.5');
+    });
+
+    it('rect has correct dimensions', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      expect(rect.attributes('width')).toBe('15');
+      expect(rect.attributes('height')).toBe('15');
+    });
+
+    it('rect has rounded corners', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      expect(rect.attributes('rx')).toBe('3.5');
+    });
+
+    it('rect has white fill', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      expect(rect.attributes('fill')).toBe('white');
+    });
+
+    it('rect has gray stroke', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      expect(rect.attributes('stroke')).toBe('#C1C1C2');
+    });
+  });
+
+  describe('Visual Properties', () => {
+    it('represents unchecked state', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      // White fill with gray border indicates unchecked
+      expect(rect.attributes('fill')).toBe('white');
+      expect(rect.attributes('stroke')).toBe('#C1C1C2');
+    });
+
+    it('has no checkmark or fill pattern', () => {
+      const wrapper = mount(Checkbox);
+
+      // Should only contain the rect element (no paths, circles, etc.)
+      expect(wrapper.findAll('path')).toHaveLength(0);
+      expect(wrapper.findAll('circle')).toHaveLength(0);
+      expect(wrapper.findAll('line')).toHaveLength(0);
+    });
+
+    it('uses neutral colors', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      const stroke = rect.attributes('stroke');
+      const fill = rect.attributes('fill');
+
+      expect(fill).toBe('white');
+      expect(stroke).toBe('#C1C1C2'); // Light gray
+    });
+  });
+
+  describe('Dimensions', () => {
+    it('uses standard 16x16 size', () => {
+      const wrapper = mount(Checkbox);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('width')).toBe('16');
+      expect(svg.attributes('height')).toBe('16');
+    });
+
+    it('maintains square aspect ratio', () => {
+      const wrapper = mount(Checkbox);
+      const svg = wrapper.find('svg');
+
+      const width = svg.attributes('width');
+      const height = svg.attributes('height');
+      expect(width).toBe(height);
+    });
+
+    it('rect accounts for stroke width', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      // Positioned at 0.5,0.5 with 15x15 dimensions to account for 1px stroke
+      expect(rect.attributes('x')).toBe('0.5');
+      expect(rect.attributes('y')).toBe('0.5');
+      expect(rect.attributes('width')).toBe('15');
+      expect(rect.attributes('height')).toBe('15');
+    });
+
+    it('has matching viewBox dimensions', () => {
+      const wrapper = mount(Checkbox);
+      const svg = wrapper.find('svg');
+
+      expect(svg.attributes('viewBox')).toBe('0 0 16 16');
+    });
+  });
+
+  describe('Checkbox Geometry', () => {
+    it('rect fills most of viewBox', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      const x = parseFloat(rect.attributes('x'));
+      const y = parseFloat(rect.attributes('y'));
+      const width = parseFloat(rect.attributes('width'));
+      const height = parseFloat(rect.attributes('height'));
+
+      expect(x + width).toBe(15.5); // Close to 16
+      expect(y + height).toBe(15.5); // Close to 16
+    });
+
+    it('has appropriate corner radius', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      const rx = parseFloat(rect.attributes('rx'));
+      const width = parseFloat(rect.attributes('width'));
+
+      // Corner radius should be reasonable proportion of width
+      expect(rx / width).toBeCloseTo(0.23, 1); // About 23%
+    });
+
+    it('forms proper checkbox shape', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      // Should be square with rounded corners
+      expect(rect.attributes('width')).toBe(rect.attributes('height'));
+      expect(parseFloat(rect.attributes('rx'))).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('suitable for form controls', () => {
+      const wrapper = mount(Checkbox);
+
+      // Standard size and appearance for form checkbox
+      expect(wrapper.find('svg').attributes('width')).toBe('16');
+      expect(wrapper.find('rect').attributes('fill')).toBe('white');
+      expect(wrapper.find('rect').attributes('stroke')).toBe('#C1C1C2');
+    });
+
+    it('represents unchecked state clearly', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      // Empty white box indicates unchecked
+      expect(rect.attributes('fill')).toBe('white');
+      expect(wrapper.findAll('path')).toHaveLength(0); // No checkmark
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('svg is properly structured for screen readers', () => {
+      const wrapper = mount(Checkbox);
+      const svg = wrapper.find('svg');
+
+      expect(svg.element.tagName.toLowerCase()).toBe('svg');
+    });
+
+    it('uses semantic checkbox appearance', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      // Standard checkbox visual cues
+      expect(rect.attributes('rx')).toBeTruthy(); // Rounded corners
+      expect(rect.attributes('stroke')).toBeTruthy(); // Border
+      expect(rect.attributes('fill')).toBe('white'); // Empty interior
+    });
+
+    it('provides clear visual state', () => {
+      const wrapper = mount(Checkbox);
+
+      // Clear unchecked state (white fill, gray border, no marks)
+      expect(wrapper.find('rect').attributes('fill')).toBe('white');
+      expect(wrapper.findAll('path')).toHaveLength(0);
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('can be mounted without props', () => {
+      expect(() => {
+        mount(Checkbox);
+      }).not.toThrow();
+    });
+
+    it('renders consistently on multiple mounts', () => {
+      const wrapper1 = mount(Checkbox);
+      const wrapper2 = mount(Checkbox);
+
+      expect(wrapper1.html()).toBe(wrapper2.html());
+    });
+
+    it('maintains checkbox structure integrity', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      expect(rect.exists()).toBe(true);
+      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(rect.attributes('fill')).toBeTruthy();
+      expect(rect.attributes('stroke')).toBeTruthy();
+    });
+
+    it('suitable for form checkbox implementations', () => {
+      const wrapper = mount(Checkbox);
+
+      // Standard checkbox requirements
+      expect(wrapper.find('svg').attributes('width')).toBe('16');
+      expect(wrapper.find('svg').attributes('height')).toBe('16');
+      expect(wrapper.find('rect').attributes('fill')).toBe('white');
+    });
+  });
+
+  describe('Icon Semantics', () => {
+    it('represents unchecked checkbox state', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      // Visual indicators of unchecked state
+      expect(rect.attributes('fill')).toBe('white'); // Empty
+      expect(rect.attributes('stroke')).toBe('#C1C1C2'); // Inactive border
+      expect(wrapper.findAll('path')).toHaveLength(0); // No checkmark
+    });
+
+    it('uses appropriate size for form controls', () => {
+      const wrapper = mount(Checkbox);
+      const svg = wrapper.find('svg');
+
+      // 16px is standard size for form checkboxes
+      expect(svg.attributes('width')).toBe('16');
+      expect(svg.attributes('height')).toBe('16');
+    });
+
+    it('provides clear interactive target', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      // Large enough click/touch target
+      const width = parseFloat(rect.attributes('width'));
+      const height = parseFloat(rect.attributes('height'));
+      expect(width).toBeGreaterThanOrEqual(15);
+      expect(height).toBeGreaterThanOrEqual(15);
+    });
+  });
+
+  describe('Visual Design', () => {
+    it('provides clear unchecked appearance', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      // Empty white appearance clearly indicates unchecked
+      expect(rect.attributes('fill')).toBe('white');
+      expect(rect.attributes('stroke')).toBeTruthy();
+    });
+
+    it('uses subtle styling for inactive state', () => {
+      const wrapper = mount(Checkbox);
+      const rect = wrapper.find('rect');
+
+      // Light gray border suggests inactive/unchecked
+      expect(rect.attributes('stroke')).toBe('#C1C1C2');
+    });
+
+    it('maintains clean minimalist design', () => {
+      const wrapper = mount(Checkbox);
+
+      // Simple single-element design
+      expect(wrapper.findAll('rect')).toHaveLength(1);
+      expect(wrapper.findAll('path')).toHaveLength(0);
+      expect(wrapper.findAll('circle')).toHaveLength(0);
+    });
+  });
+});