@zap-wunschlachen/wl-shared-components 1.0.16 → 1.0.18

package/tests/unit/components/Laboratory/ProgressCircle.spec.ts

@@ -1,291 +1,291 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import ProgressCircle from '../../../../src/components/Laboratory/ProgressCircle/ProgressCircle.vue';
-
-describe('ProgressCircle', () => {
-  let wrapper: VueWrapper;
-
-  const defaultProps = {
-    size: '60',
-    text: '3',
-    bgColors: ['red', 'blue', 'green', 'yellow', 'purple'],
-    borderColors: ['darkred', 'darkblue', 'darkgreen', 'orange', 'darkpurple'],
-  };
-
-  beforeEach(() => {
-    wrapper = mount(ProgressCircle, {
-      props: defaultProps,
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component', () => {
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('.custom-icon-wrapper').exists()).toBe(true);
-    });
-
-    it('should render SVG element', () => {
-      const svg = wrapper.find('svg');
-      expect(svg.exists()).toBe(true);
-    });
-
-    it('should display the text', () => {
-      expect(wrapper.text()).toContain('3');
-    });
-
-    it('should render all five path segments', () => {
-      const paths = wrapper.findAll('path');
-      expect(paths).toHaveLength(5);
-    });
-
-    it('should render text element in the center', () => {
-      const textElement = wrapper.find('text');
-      expect(textElement.exists()).toBe(true);
-      expect(textElement.text()).toBe('3');
-    });
-  });
-
-  describe('Props', () => {
-    it('should use default size when not provided', async () => {
-      await wrapper.setProps({ size: undefined });
-      const svg = wrapper.find('svg');
-      expect(svg.attributes('width')).toBe('40');
-    });
-
-    it('should use default text when not provided', async () => {
-      await wrapper.setProps({ text: undefined });
-      const textElement = wrapper.find('text');
-      expect(textElement.text()).toBe('1');
-    });
-
-    it('should require bgColors prop', () => {
-      const props = wrapper.vm.$options.props;
-      expect(props.bgColors.required).toBe(true);
-    });
-
-    it('should require borderColors prop', () => {
-      const props = wrapper.vm.$options.props;
-      expect(props.borderColors.required).toBe(true);
-    });
-
-    it('should accept custom size', async () => {
-      await wrapper.setProps({ size: '80' });
-      const svg = wrapper.find('svg');
-      expect(svg.attributes('width')).toBe('80');
-    });
-
-    it('should accept custom text', async () => {
-      await wrapper.setProps({ text: '5' });
-      const textElement = wrapper.find('text');
-      expect(textElement.text()).toBe('5');
-    });
-
-    it('should accept custom background colors', async () => {
-      const customBgColors = ['orange', 'cyan', 'magenta', 'lime', 'pink'];
-      await wrapper.setProps({ bgColors: customBgColors });
-
-      const paths = wrapper.findAll('path');
-      paths.forEach((path, index) => {
-        expect(path.attributes('fill')).toBe(customBgColors[index]);
-      });
-    });
-
-    it('should accept custom border colors', async () => {
-      const customBorderColors = ['black', 'white', 'gray', 'silver', 'gold'];
-      await wrapper.setProps({ borderColors: customBorderColors });
-
-      const paths = wrapper.findAll('path');
-      paths.forEach((path, index) => {
-        expect(path.attributes('stroke')).toBe(customBorderColors[index]);
-      });
-    });
-  });
-
-  describe('Default Values', () => {
-    it('should use default background colors when not provided', async () => {
-      await wrapper.setProps({ bgColors: undefined });
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        expect(path.attributes('fill')).toBe('var(--Soft-Concrete-1)');
-      });
-    });
-
-    it('should use default border colors when not provided', async () => {
-      await wrapper.setProps({ borderColors: undefined });
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        expect(path.attributes('stroke')).toBe('transparent');
-      });
-    });
-  });
-
-  describe('SVG Properties', () => {
-    it('should have correct SVG attributes', () => {
-      const svg = wrapper.find('svg');
-      expect(svg.attributes('width')).toBe('60');
-      expect(svg.attributes('viewBox')).toBe('0 0 41 45');
-      expect(svg.attributes('fill')).toBe('none');
-      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
-    });
-
-    it('should have paths with correct attributes', () => {
-      const paths = wrapper.findAll('path');
-
-      paths.forEach(path => {
-        expect(path.attributes('fill-rule')).toBe('evenodd');
-        expect(path.attributes('clip-rule')).toBe('evenodd');
-        expect(path.attributes('stroke-width')).toBe('0.5');
-        expect(path.attributes('stroke-miterlimit')).toBe('10');
-      });
-    });
-
-    it('should have correct path transforms', () => {
-      const paths = wrapper.findAll('path');
-      const expectedRotations = ['rotate(0, 20, 21)', 'rotate(72, 20, 21)', 'rotate(144, 20, 21)', 'rotate(216, 20.3, 21)', 'rotate(288, 20, 21)'];
-
-      paths.forEach((path, index) => {
-        expect(path.attributes('transform')).toBe(expectedRotations[index]);
-      });
-    });
-  });
-
-  describe('Text Element Properties', () => {
-    it('should have correct text attributes', () => {
-      const textElement = wrapper.find('text');
-      expect(textElement.attributes('x')).toBe('50%');
-      expect(textElement.attributes('y')).toBe('50%');
-      expect(textElement.attributes('text-anchor')).toBe('middle');
-      expect(textElement.attributes('dominant-baseline')).toBe('middle');
-      expect(textElement.attributes('font-size')).toBe('16');
-      expect(textElement.attributes('fill')).toBe('var(--Check-0)');
-    });
-
-    it('should display custom text content', async () => {
-      await wrapper.setProps({ text: 'AB' });
-      const textElement = wrapper.find('text');
-      expect(textElement.text()).toBe('AB');
-    });
-
-    it('should handle empty text', async () => {
-      await wrapper.setProps({ text: '' });
-      const textElement = wrapper.find('text');
-      expect(textElement.text()).toBe('');
-    });
-  });
-
-  describe('Styling and Layout', () => {
-    it('should have custom-icon-wrapper class', () => {
-      const wrapper_div = wrapper.find('.custom-icon-wrapper');
-      expect(wrapper_div.exists()).toBe(true);
-    });
-
-    it('should apply flex centering styles', () => {
-      // The styles are defined in the component's scoped styles
-      expect(wrapper.find('.custom-icon-wrapper').exists()).toBe(true);
-    });
-  });
-
-  describe('Color Arrays', () => {
-    it('should handle different array lengths for colors', async () => {
-      const shortBgColors = ['red', 'blue'];
-      const shortBorderColors = ['darkred', 'darkblue'];
-
-      await wrapper.setProps({
-        bgColors: shortBgColors,
-        borderColors: shortBorderColors
-      });
-
-      const paths = wrapper.findAll('path');
-      // Should still render 5 paths but with undefined colors for missing indices
-      expect(paths).toHaveLength(5);
-      expect(paths[0].attributes('fill')).toBe('red');
-      expect(paths[1].attributes('fill')).toBe('blue');
-      expect(paths[2].attributes('fill')).toBe(undefined);
-    });
-
-    it('should handle CSS variable colors', async () => {
-      const cssVarColors = [
-        'var(--primary-color)',
-        'var(--secondary-color)',
-        'var(--tertiary-color)',
-        'var(--quaternary-color)',
-        'var(--quinary-color)'
-      ];
-
-      await wrapper.setProps({ bgColors: cssVarColors });
-
-      const paths = wrapper.findAll('path');
-      paths.forEach((path, index) => {
-        expect(path.attributes('fill')).toBe(cssVarColors[index]);
-      });
-    });
-  });
-
-  describe('Size Variations', () => {
-    it('should handle different size values', async () => {
-      const sizes = ['20', '40', '80', '100', '120'];
-
-      for (const size of sizes) {
-        await wrapper.setProps({ size });
-        const svg = wrapper.find('svg');
-        expect(svg.attributes('width')).toBe(size);
-      }
-    });
-
-    it('should maintain viewBox regardless of size', async () => {
-      await wrapper.setProps({ size: '200' });
-      const svg = wrapper.find('svg');
-      expect(svg.attributes('viewBox')).toBe('0 0 41 45');
-    });
-  });
-
-  describe('Text Variations', () => {
-    it('should handle different text types', async () => {
-      const textValues = ['A', '10', '99', 'XY', '!'];
-
-      for (const text of textValues) {
-        await wrapper.setProps({ text });
-        const textElement = wrapper.find('text');
-        expect(textElement.text()).toBe(text);
-      }
-    });
-
-    it('should handle long text', async () => {
-      await wrapper.setProps({ text: 'LONG' });
-      const textElement = wrapper.find('text');
-      expect(textElement.text()).toBe('LONG');
-    });
-  });
-
-  describe('Path Data', () => {
-    it('should have consistent path data across all segments', () => {
-      const paths = wrapper.findAll('path');
-      const expectedPathData = '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(expectedPathData);
-      });
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('should have proper DOM hierarchy', () => {
-      expect(wrapper.find('[data-testid="root"] svg').exists()).toBe(true);
-      expect(wrapper.find('svg path').exists()).toBe(true);
-      expect(wrapper.find('svg text').exists()).toBe(true);
-    });
-
-    it('should have all segments before text element', () => {
-      const svg = wrapper.find('svg');
-      const children = Array.from(svg.element.children);
-
-      // First 5 children should be paths, last should be text
-      for (let i = 0; i < 5; i++) {
-        expect(children[i].tagName.toLowerCase()).toBe('path');
-      }
-      expect(children[5].tagName.toLowerCase()).toBe('text');
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import ProgressCircle from '../../../../src/components/Laboratory/ProgressCircle/ProgressCircle.vue';
+
+describe('ProgressCircle', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    size: '60',
+    text: '3',
+    bgColors: ['red', 'blue', 'green', 'yellow', 'purple'],
+    borderColors: ['darkred', 'darkblue', 'darkgreen', 'orange', 'darkpurple'],
+  };
+
+  beforeEach(() => {
+    wrapper = mount(ProgressCircle, {
+      props: defaultProps,
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.custom-icon-wrapper').exists()).toBe(true);
+    });
+
+    it('should render SVG element', () => {
+      const svg = wrapper.find('svg');
+      expect(svg.exists()).toBe(true);
+    });
+
+    it('should display the text', () => {
+      expect(wrapper.text()).toContain('3');
+    });
+
+    it('should render all five path segments', () => {
+      const paths = wrapper.findAll('path');
+      expect(paths).toHaveLength(5);
+    });
+
+    it('should render text element in the center', () => {
+      const textElement = wrapper.find('text');
+      expect(textElement.exists()).toBe(true);
+      expect(textElement.text()).toBe('3');
+    });
+  });
+
+  describe('Props', () => {
+    it('should use default size when not provided', async () => {
+      await wrapper.setProps({ size: undefined });
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('width')).toBe('40');
+    });
+
+    it('should use default text when not provided', async () => {
+      await wrapper.setProps({ text: undefined });
+      const textElement = wrapper.find('text');
+      expect(textElement.text()).toBe('1');
+    });
+
+    it('should require bgColors prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.bgColors.required).toBe(true);
+    });
+
+    it('should require borderColors prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.borderColors.required).toBe(true);
+    });
+
+    it('should accept custom size', async () => {
+      await wrapper.setProps({ size: '80' });
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('width')).toBe('80');
+    });
+
+    it('should accept custom text', async () => {
+      await wrapper.setProps({ text: '5' });
+      const textElement = wrapper.find('text');
+      expect(textElement.text()).toBe('5');
+    });
+
+    it('should accept custom background colors', async () => {
+      const customBgColors = ['orange', 'cyan', 'magenta', 'lime', 'pink'];
+      await wrapper.setProps({ bgColors: customBgColors });
+
+      const paths = wrapper.findAll('path');
+      paths.forEach((path, index) => {
+        expect(path.attributes('fill')).toBe(customBgColors[index]);
+      });
+    });
+
+    it('should accept custom border colors', async () => {
+      const customBorderColors = ['black', 'white', 'gray', 'silver', 'gold'];
+      await wrapper.setProps({ borderColors: customBorderColors });
+
+      const paths = wrapper.findAll('path');
+      paths.forEach((path, index) => {
+        expect(path.attributes('stroke')).toBe(customBorderColors[index]);
+      });
+    });
+  });
+
+  describe('Default Values', () => {
+    it('should use default background colors when not provided', async () => {
+      await wrapper.setProps({ bgColors: undefined });
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('fill')).toBe('var(--Soft-Concrete-1)');
+      });
+    });
+
+    it('should use default border colors when not provided', async () => {
+      await wrapper.setProps({ borderColors: undefined });
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('stroke')).toBe('transparent');
+      });
+    });
+  });
+
+  describe('SVG Properties', () => {
+    it('should have correct SVG attributes', () => {
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('width')).toBe('60');
+      expect(svg.attributes('viewBox')).toBe('0 0 41 45');
+      expect(svg.attributes('fill')).toBe('none');
+      expect(svg.attributes('xmlns')).toBe('http://www.w3.org/2000/svg');
+    });
+
+    it('should have paths with correct attributes', () => {
+      const paths = wrapper.findAll('path');
+
+      paths.forEach(path => {
+        expect(path.attributes('fill-rule')).toBe('evenodd');
+        expect(path.attributes('clip-rule')).toBe('evenodd');
+        expect(path.attributes('stroke-width')).toBe('0.5');
+        expect(path.attributes('stroke-miterlimit')).toBe('10');
+      });
+    });
+
+    it('should have correct path transforms', () => {
+      const paths = wrapper.findAll('path');
+      const expectedRotations = ['rotate(0, 20, 21)', 'rotate(72, 20, 21)', 'rotate(144, 20, 21)', 'rotate(216, 20.3, 21)', 'rotate(288, 20, 21)'];
+
+      paths.forEach((path, index) => {
+        expect(path.attributes('transform')).toBe(expectedRotations[index]);
+      });
+    });
+  });
+
+  describe('Text Element Properties', () => {
+    it('should have correct text attributes', () => {
+      const textElement = wrapper.find('text');
+      expect(textElement.attributes('x')).toBe('50%');
+      expect(textElement.attributes('y')).toBe('50%');
+      expect(textElement.attributes('text-anchor')).toBe('middle');
+      expect(textElement.attributes('dominant-baseline')).toBe('middle');
+      expect(textElement.attributes('font-size')).toBe('16');
+      expect(textElement.attributes('fill')).toBe('var(--Check-0)');
+    });
+
+    it('should display custom text content', async () => {
+      await wrapper.setProps({ text: 'AB' });
+      const textElement = wrapper.find('text');
+      expect(textElement.text()).toBe('AB');
+    });
+
+    it('should handle empty text', async () => {
+      await wrapper.setProps({ text: '' });
+      const textElement = wrapper.find('text');
+      expect(textElement.text()).toBe('');
+    });
+  });
+
+  describe('Styling and Layout', () => {
+    it('should have custom-icon-wrapper class', () => {
+      const wrapper_div = wrapper.find('.custom-icon-wrapper');
+      expect(wrapper_div.exists()).toBe(true);
+    });
+
+    it('should apply flex centering styles', () => {
+      // The styles are defined in the component's scoped styles
+      expect(wrapper.find('.custom-icon-wrapper').exists()).toBe(true);
+    });
+  });
+
+  describe('Color Arrays', () => {
+    it('should handle different array lengths for colors', async () => {
+      const shortBgColors = ['red', 'blue'];
+      const shortBorderColors = ['darkred', 'darkblue'];
+
+      await wrapper.setProps({
+        bgColors: shortBgColors,
+        borderColors: shortBorderColors
+      });
+
+      const paths = wrapper.findAll('path');
+      // Should still render 5 paths but with undefined colors for missing indices
+      expect(paths).toHaveLength(5);
+      expect(paths[0].attributes('fill')).toBe('red');
+      expect(paths[1].attributes('fill')).toBe('blue');
+      expect(paths[2].attributes('fill')).toBe(undefined);
+    });
+
+    it('should handle CSS variable colors', async () => {
+      const cssVarColors = [
+        'var(--primary-color)',
+        'var(--secondary-color)',
+        'var(--tertiary-color)',
+        'var(--quaternary-color)',
+        'var(--quinary-color)'
+      ];
+
+      await wrapper.setProps({ bgColors: cssVarColors });
+
+      const paths = wrapper.findAll('path');
+      paths.forEach((path, index) => {
+        expect(path.attributes('fill')).toBe(cssVarColors[index]);
+      });
+    });
+  });
+
+  describe('Size Variations', () => {
+    it('should handle different size values', async () => {
+      const sizes = ['20', '40', '80', '100', '120'];
+
+      for (const size of sizes) {
+        await wrapper.setProps({ size });
+        const svg = wrapper.find('svg');
+        expect(svg.attributes('width')).toBe(size);
+      }
+    });
+
+    it('should maintain viewBox regardless of size', async () => {
+      await wrapper.setProps({ size: '200' });
+      const svg = wrapper.find('svg');
+      expect(svg.attributes('viewBox')).toBe('0 0 41 45');
+    });
+  });
+
+  describe('Text Variations', () => {
+    it('should handle different text types', async () => {
+      const textValues = ['A', '10', '99', 'XY', '!'];
+
+      for (const text of textValues) {
+        await wrapper.setProps({ text });
+        const textElement = wrapper.find('text');
+        expect(textElement.text()).toBe(text);
+      }
+    });
+
+    it('should handle long text', async () => {
+      await wrapper.setProps({ text: 'LONG' });
+      const textElement = wrapper.find('text');
+      expect(textElement.text()).toBe('LONG');
+    });
+  });
+
+  describe('Path Data', () => {
+    it('should have consistent path data across all segments', () => {
+      const paths = wrapper.findAll('path');
+      const expectedPathData = '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(expectedPathData);
+      });
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('should have proper DOM hierarchy', () => {
+      expect(wrapper.find('[data-testid="root"] svg').exists()).toBe(true);
+      expect(wrapper.find('svg path').exists()).toBe(true);
+      expect(wrapper.find('svg text').exists()).toBe(true);
+    });
+
+    it('should have all segments before text element', () => {
+      const svg = wrapper.find('svg');
+      const children = Array.from(svg.element.children);
+
+      // First 5 children should be paths, last should be text
+      for (let i = 0; i < 5; i++) {
+        expect(children[i].tagName.toLowerCase()).toBe('path');
+      }
+      expect(children[5].tagName.toLowerCase()).toBe('text');
+    });
+  });
 });