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

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

@@ -1,276 +1,276 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import ProgressLinear from '../../../../src/components/Laboratory/ProgressLinear/ProgressLinear.vue';
-
-describe('ProgressLinear', () => {
-  let wrapper: VueWrapper;
-
-  const defaultProps = {
-    date: '2024-12-31',
-    progressValue: 75,
-    status: 'In Progress',
-  };
-
-  beforeEach(() => {
-    wrapper = mount(ProgressLinear, {
-      props: defaultProps,
-      global: {
-        stubs: {
-          'TagLabel': {
-            template: '<div data-testid="tag-label" :class="$attrs.class" :style="$attrs.style" v-bind="$attrs">{{ status }}</div>',
-            props: ['status'],
-            inheritAttrs: false
-          },
-          'v-progress-linear': {
-            template: '<div class="v-progress-linear custom-progress-linear" data-testid="v-progress-linear" :model-value="modelValue" v-bind="$attrs"></div>',
-            props: ['modelValue', 'height', 'color', 'bgColor', 'bgOpacity'],
-            inheritAttrs: false
-          },
-          'v-icon': {
-            template: '<i data-testid="v-icon" :icon="icon" v-bind="$attrs"></i>',
-            props: ['icon', 'color', 'size'],
-            inheritAttrs: false
-          }
-        }
-      }
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component', () => {
-      expect(wrapper.find('.d-flex.flex-column.align-center.ga-6').exists()).toBe(true);
-    });
-
-
-
-    it('should display the date', () => {
-      expect(wrapper.text()).toContain('Geschätzte Projektdauer ca.');
-      expect(wrapper.text()).toContain('2024-12-31');
-    });
-
-    it('should render progress container for non-Treatment Done status', () => {
-      expect(wrapper.find('.progress-container').exists()).toBe(true);
-    });
-
-    it('should render progress linear element', () => {
-      expect(wrapper.find('.v-progress-linear').exists()).toBe(true);
-    });
-
-    it('should display TagLabel with progress positioning', () => {
-      const tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
-      expect(tagLabel.exists()).toBe(true);
-    });
-
-    it('should render start and end icons', () => {
-      const startIcon = wrapper.find('[icon="heroicons:solid-arrow-right"]');
-      const endIcon = wrapper.find('[icon="heroicons:filled-circle"]');
-      expect(startIcon.exists()).toBe(true);
-      expect(endIcon.exists()).toBe(true);
-    });
-  });
-
-  describe('Props', () => {
-    it('should use default date when not provided', async () => {
-      await wrapper.setProps({ date: undefined });
-      // Default date is empty string, should still render the text structure
-      expect(wrapper.text()).toContain('Geschätzte Projektdauer ca.');
-    });
-
-    it('should use default progress value when not provided', async () => {
-      await wrapper.setProps({ progressValue: undefined });
-      const progressLinear = wrapper.find('.v-progress-linear');
-      expect(progressLinear.attributes('model-value')).toBe('55');
-    });
-
-    it('should use default status when not provided', async () => {
-      await wrapper.setProps({ status: undefined });
-      const tagLabel = wrapper.find('[data-testid="tag-label"]');
-      expect(tagLabel.text()).toBe('Done');
-    });
-
-    it('should accept custom date', async () => {
-      await wrapper.setProps({ date: '2025-06-15' });
-      expect(wrapper.text()).toContain('2025-06-15');
-    });
-
-    it('should accept custom progress value', async () => {
-      await wrapper.setProps({ progressValue: 90 });
-      const progressLinear = wrapper.find('.v-progress-linear');
-      expect(progressLinear.attributes('model-value')).toBe('90');
-    });
-
-    it('should accept custom status', async () => {
-      await wrapper.setProps({ status: 'Ready' });
-      const tagLabel = wrapper.find('[data-testid="tag-label"]');
-      expect(tagLabel.text()).toBe('Ready');
-    });
-  });
-
-  describe('Progress Linear Properties', () => {
-    it('should have correct progress linear attributes', () => {
-      const progressLinear = wrapper.find('.v-progress-linear');
-      expect(progressLinear.exists()).toBe(true);
-    });
-
-    it('should have custom-progress-linear class', () => {
-      const progressLinear = wrapper.find('.v-progress-linear');
-      expect(progressLinear.classes()).toContain('custom-progress-linear');
-    });
-
-    it('should update progress value when prop changes', async () => {
-      await wrapper.setProps({ progressValue: 25 });
-      const progressLinear = wrapper.find('.v-progress-linear');
-      expect(progressLinear.attributes('model-value')).toBe('25');
-    });
-  });
-
-  describe('TagLabel Positioning', () => {
-    it('should position TagLabel based on progress value', async () => {
-      await wrapper.setProps({ progressValue: 60 });
-      const tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
-      expect(tagLabel.attributes('style')).toContain('left: 60%');
-    });
-
-    it('should update TagLabel position when progress changes', async () => {
-      await wrapper.setProps({ progressValue: 25 });
-      const tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
-      expect(tagLabel.attributes('style')).toContain('left: 25%');
-
-      await wrapper.setProps({ progressValue: 90 });
-      expect(tagLabel.attributes('style')).toContain('left: 90%');
-    });
-
-    it('should have progress-label class', () => {
-      const tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
-      expect(tagLabel.exists()).toBe(true);
-      expect(tagLabel.classes()).toContain('progress-label');
-    });
-  });
-
-  describe('Icons', () => {
-    it('should render start icon with correct attributes', () => {
-      const startIcon = wrapper.find('[icon="heroicons:solid-arrow-right"]');
-      expect(startIcon.exists()).toBe(true);
-    });
-
-    it('should render end icon with correct attributes', () => {
-      const endIcon = wrapper.find('[icon="heroicons:filled-circle"]');
-      expect(endIcon.exists()).toBe(true);
-    });
-  });
-
-  describe('Treatment Done Status', () => {
-    it('should hide progress container for Treatment Done status', async () => {
-      await wrapper.setProps({ status: 'Treatment Done' });
-      expect(wrapper.find('.progress-container').exists()).toBe(false);
-    });
-
-    it('should show full-width TagLabel for Treatment Done status', async () => {
-      await wrapper.setProps({ status: 'Treatment Done' });
-      const tagLabel = wrapper.find('[data-testid="tag-label"].w-100');
-      expect(tagLabel.exists()).toBe(true);
-      expect(tagLabel.classes()).toContain('w-100');
-    });
-
-    it('should not show progress elements for Treatment Done status', async () => {
-      await wrapper.setProps({ status: 'Treatment Done' });
-      expect(wrapper.find('.v-progress-linear').exists()).toBe(false);
-      expect(wrapper.find('.start-icon').exists()).toBe(false);
-      expect(wrapper.find('.end-icon').exists()).toBe(false);
-    });
-  });
-
-  describe('Layout and Structure', () => {
-    it('should have correct root layout', () => {
-      const root = wrapper.find('.d-flex.flex-column.align-center.ga-6');
-      expect(root.exists()).toBe(true);
-    });
-
-    it('should have correct date section layout', () => {
-      const dateSection = wrapper.find('.d-flex.flex-row.ga-2');
-      expect(dateSection.exists()).toBe(true);
-    });
-
-    it('should have h3 tag for date display', () => {
-      const dateHeader = wrapper.find('h3');
-      expect(dateHeader.exists()).toBe(true);
-      expect(dateHeader.text()).toBe('2024-12-31');
-    });
-  });
-
-  describe('Conditional Rendering', () => {
-    it('should show progress container when status is not Treatment Done', async () => {
-      const statuses = ['In Progress', 'Ready', 'Started', 'Done'];
-
-      for (const status of statuses) {
-        await wrapper.setProps({ status });
-        expect(wrapper.find('.progress-container').exists()).toBe(true);
-      }
-    });
-
-    it('should hide progress container only for Treatment Done', async () => {
-      await wrapper.setProps({ status: 'Treatment Done' });
-      expect(wrapper.find('.progress-container').exists()).toBe(false);
-
-      await wrapper.setProps({ status: 'Some Other Status' });
-      expect(wrapper.find('.progress-container').exists()).toBe(true);
-    });
-  });
-
-  describe('Text Content', () => {
-    it('should display German text for project duration', () => {
-      expect(wrapper.text()).toContain('Geschätzte Projektdauer ca.');
-    });
-
-    it('should handle empty date', async () => {
-      await wrapper.setProps({ date: '' });
-      const dateHeader = wrapper.find('h3');
-      expect(dateHeader.text()).toBe('');
-    });
-  });
-
-  describe('Progress Values', () => {
-    it('should handle edge progress values', async () => {
-      // Test 0%
-      await wrapper.setProps({ progressValue: 0 });
-      let progressLinear = wrapper.find('.v-progress-linear');
-      let tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
-      expect(progressLinear.attributes('model-value')).toBe('0');
-      expect(tagLabel.attributes('style')).toContain('left: 0%');
-
-      // Test 100%
-      await wrapper.setProps({ progressValue: 100 });
-      progressLinear = wrapper.find('.v-progress-linear');
-      tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
-      expect(progressLinear.attributes('model-value')).toBe('100');
-      expect(tagLabel.attributes('style')).toContain('left: 100%');
-    });
-
-    it('should handle decimal progress values', async () => {
-      await wrapper.setProps({ progressValue: 33.33 });
-      const progressLinear = wrapper.find('.v-progress-linear');
-      const tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
-      expect(progressLinear.attributes('model-value')).toBe('33.33');
-      expect(tagLabel.attributes('style')).toContain('left: 33.33%');
-    });
-  });
-
-  describe('Status Variations', () => {
-    it('should pass status to TagLabel correctly', async () => {
-      const statuses = ['Draft', 'Ready', 'Started', 'Done', 'Treatment Done'];
-
-      for (const status of statuses) {
-        await wrapper.setProps({ status });
-        const tagLabel = wrapper.find('[data-testid="tag-label"]');
-        expect(tagLabel.text()).toBe(status);
-      }
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('should integrate properly with TagLabel component', () => {
-      const tagLabels = wrapper.findAll('[data-testid="tag-label"]');
-      expect(tagLabels.length).toBeGreaterThanOrEqual(1);
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import ProgressLinear from '../../../../src/components/Laboratory/ProgressLinear/ProgressLinear.vue';
+
+describe('ProgressLinear', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    date: '2024-12-31',
+    progressValue: 75,
+    status: 'In Progress',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(ProgressLinear, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          'TagLabel': {
+            template: '<div data-testid="tag-label" :class="$attrs.class" :style="$attrs.style" v-bind="$attrs">{{ status }}</div>',
+            props: ['status'],
+            inheritAttrs: false
+          },
+          'v-progress-linear': {
+            template: '<div class="v-progress-linear custom-progress-linear" data-testid="v-progress-linear" :model-value="modelValue" v-bind="$attrs"></div>',
+            props: ['modelValue', 'height', 'color', 'bgColor', 'bgOpacity'],
+            inheritAttrs: false
+          },
+          'v-icon': {
+            template: '<i data-testid="v-icon" :icon="icon" v-bind="$attrs"></i>',
+            props: ['icon', 'color', 'size'],
+            inheritAttrs: false
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('.d-flex.flex-column.align-center.ga-6').exists()).toBe(true);
+    });
+
+
+
+    it('should display the date', () => {
+      expect(wrapper.text()).toContain('Geschätzte Projektdauer ca.');
+      expect(wrapper.text()).toContain('2024-12-31');
+    });
+
+    it('should render progress container for non-Treatment Done status', () => {
+      expect(wrapper.find('.progress-container').exists()).toBe(true);
+    });
+
+    it('should render progress linear element', () => {
+      expect(wrapper.find('.v-progress-linear').exists()).toBe(true);
+    });
+
+    it('should display TagLabel with progress positioning', () => {
+      const tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
+      expect(tagLabel.exists()).toBe(true);
+    });
+
+    it('should render start and end icons', () => {
+      const startIcon = wrapper.find('[icon="heroicons:solid-arrow-right"]');
+      const endIcon = wrapper.find('[icon="heroicons:filled-circle"]');
+      expect(startIcon.exists()).toBe(true);
+      expect(endIcon.exists()).toBe(true);
+    });
+  });
+
+  describe('Props', () => {
+    it('should use default date when not provided', async () => {
+      await wrapper.setProps({ date: undefined });
+      // Default date is empty string, should still render the text structure
+      expect(wrapper.text()).toContain('Geschätzte Projektdauer ca.');
+    });
+
+    it('should use default progress value when not provided', async () => {
+      await wrapper.setProps({ progressValue: undefined });
+      const progressLinear = wrapper.find('.v-progress-linear');
+      expect(progressLinear.attributes('model-value')).toBe('55');
+    });
+
+    it('should use default status when not provided', async () => {
+      await wrapper.setProps({ status: undefined });
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.text()).toBe('Done');
+    });
+
+    it('should accept custom date', async () => {
+      await wrapper.setProps({ date: '2025-06-15' });
+      expect(wrapper.text()).toContain('2025-06-15');
+    });
+
+    it('should accept custom progress value', async () => {
+      await wrapper.setProps({ progressValue: 90 });
+      const progressLinear = wrapper.find('.v-progress-linear');
+      expect(progressLinear.attributes('model-value')).toBe('90');
+    });
+
+    it('should accept custom status', async () => {
+      await wrapper.setProps({ status: 'Ready' });
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.text()).toBe('Ready');
+    });
+  });
+
+  describe('Progress Linear Properties', () => {
+    it('should have correct progress linear attributes', () => {
+      const progressLinear = wrapper.find('.v-progress-linear');
+      expect(progressLinear.exists()).toBe(true);
+    });
+
+    it('should have custom-progress-linear class', () => {
+      const progressLinear = wrapper.find('.v-progress-linear');
+      expect(progressLinear.classes()).toContain('custom-progress-linear');
+    });
+
+    it('should update progress value when prop changes', async () => {
+      await wrapper.setProps({ progressValue: 25 });
+      const progressLinear = wrapper.find('.v-progress-linear');
+      expect(progressLinear.attributes('model-value')).toBe('25');
+    });
+  });
+
+  describe('TagLabel Positioning', () => {
+    it('should position TagLabel based on progress value', async () => {
+      await wrapper.setProps({ progressValue: 60 });
+      const tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
+      expect(tagLabel.attributes('style')).toContain('left: 60%');
+    });
+
+    it('should update TagLabel position when progress changes', async () => {
+      await wrapper.setProps({ progressValue: 25 });
+      const tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
+      expect(tagLabel.attributes('style')).toContain('left: 25%');
+
+      await wrapper.setProps({ progressValue: 90 });
+      expect(tagLabel.attributes('style')).toContain('left: 90%');
+    });
+
+    it('should have progress-label class', () => {
+      const tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
+      expect(tagLabel.exists()).toBe(true);
+      expect(tagLabel.classes()).toContain('progress-label');
+    });
+  });
+
+  describe('Icons', () => {
+    it('should render start icon with correct attributes', () => {
+      const startIcon = wrapper.find('[icon="heroicons:solid-arrow-right"]');
+      expect(startIcon.exists()).toBe(true);
+    });
+
+    it('should render end icon with correct attributes', () => {
+      const endIcon = wrapper.find('[icon="heroicons:filled-circle"]');
+      expect(endIcon.exists()).toBe(true);
+    });
+  });
+
+  describe('Treatment Done Status', () => {
+    it('should hide progress container for Treatment Done status', async () => {
+      await wrapper.setProps({ status: 'Treatment Done' });
+      expect(wrapper.find('.progress-container').exists()).toBe(false);
+    });
+
+    it('should show full-width TagLabel for Treatment Done status', async () => {
+      await wrapper.setProps({ status: 'Treatment Done' });
+      const tagLabel = wrapper.find('[data-testid="tag-label"].w-100');
+      expect(tagLabel.exists()).toBe(true);
+      expect(tagLabel.classes()).toContain('w-100');
+    });
+
+    it('should not show progress elements for Treatment Done status', async () => {
+      await wrapper.setProps({ status: 'Treatment Done' });
+      expect(wrapper.find('.v-progress-linear').exists()).toBe(false);
+      expect(wrapper.find('.start-icon').exists()).toBe(false);
+      expect(wrapper.find('.end-icon').exists()).toBe(false);
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('should have correct root layout', () => {
+      const root = wrapper.find('.d-flex.flex-column.align-center.ga-6');
+      expect(root.exists()).toBe(true);
+    });
+
+    it('should have correct date section layout', () => {
+      const dateSection = wrapper.find('.d-flex.flex-row.ga-2');
+      expect(dateSection.exists()).toBe(true);
+    });
+
+    it('should have h3 tag for date display', () => {
+      const dateHeader = wrapper.find('h3');
+      expect(dateHeader.exists()).toBe(true);
+      expect(dateHeader.text()).toBe('2024-12-31');
+    });
+  });
+
+  describe('Conditional Rendering', () => {
+    it('should show progress container when status is not Treatment Done', async () => {
+      const statuses = ['In Progress', 'Ready', 'Started', 'Done'];
+
+      for (const status of statuses) {
+        await wrapper.setProps({ status });
+        expect(wrapper.find('.progress-container').exists()).toBe(true);
+      }
+    });
+
+    it('should hide progress container only for Treatment Done', async () => {
+      await wrapper.setProps({ status: 'Treatment Done' });
+      expect(wrapper.find('.progress-container').exists()).toBe(false);
+
+      await wrapper.setProps({ status: 'Some Other Status' });
+      expect(wrapper.find('.progress-container').exists()).toBe(true);
+    });
+  });
+
+  describe('Text Content', () => {
+    it('should display German text for project duration', () => {
+      expect(wrapper.text()).toContain('Geschätzte Projektdauer ca.');
+    });
+
+    it('should handle empty date', async () => {
+      await wrapper.setProps({ date: '' });
+      const dateHeader = wrapper.find('h3');
+      expect(dateHeader.text()).toBe('');
+    });
+  });
+
+  describe('Progress Values', () => {
+    it('should handle edge progress values', async () => {
+      // Test 0%
+      await wrapper.setProps({ progressValue: 0 });
+      let progressLinear = wrapper.find('.v-progress-linear');
+      let tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
+      expect(progressLinear.attributes('model-value')).toBe('0');
+      expect(tagLabel.attributes('style')).toContain('left: 0%');
+
+      // Test 100%
+      await wrapper.setProps({ progressValue: 100 });
+      progressLinear = wrapper.find('.v-progress-linear');
+      tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
+      expect(progressLinear.attributes('model-value')).toBe('100');
+      expect(tagLabel.attributes('style')).toContain('left: 100%');
+    });
+
+    it('should handle decimal progress values', async () => {
+      await wrapper.setProps({ progressValue: 33.33 });
+      const progressLinear = wrapper.find('.v-progress-linear');
+      const tagLabel = wrapper.find('[data-testid="tag-label"].progress-label');
+      expect(progressLinear.attributes('model-value')).toBe('33.33');
+      expect(tagLabel.attributes('style')).toContain('left: 33.33%');
+    });
+  });
+
+  describe('Status Variations', () => {
+    it('should pass status to TagLabel correctly', async () => {
+      const statuses = ['Draft', 'Ready', 'Started', 'Done', 'Treatment Done'];
+
+      for (const status of statuses) {
+        await wrapper.setProps({ status });
+        const tagLabel = wrapper.find('[data-testid="tag-label"]');
+        expect(tagLabel.text()).toBe(status);
+      }
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('should integrate properly with TagLabel component', () => {
+      const tagLabels = wrapper.findAll('[data-testid="tag-label"]');
+      expect(tagLabels.length).toBeGreaterThanOrEqual(1);
+    });
+  });
 });