@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

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

@@ -1,382 +1,382 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import TimeLineEvent from '../../../../src/components/Laboratory/TimeLine/TimeLineEvent.vue';
-
-describe('TimeLineEvent', () => {
-  let wrapper: VueWrapper;
-
-  const defaultProps = {
-    urgent: false,
-    firstHeader: 'Project Duration',
-    secondHeader: 'Estimated Time',
-    firstDuration: '5 days 2 hours',
-    secondDuration: '7 days',
-    steps: [
-      { date: '15. Jan. 2024', description: 'Project started and initial setup completed' },
-      { date: '20. Jan. 2024', description: 'Development phase initiated' },
-      { date: '25. Jan. 2024', description: 'Testing and quality assurance' }
-    ],
-  };
-
-  beforeEach(() => {
-    wrapper = mount(TimeLineEvent, {
-      props: defaultProps,
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component', () => {
-      expect(wrapper.find('.d-flex.flex-column.ga-6').exists()).toBe(true);
-    });
-
-    it('should display the first header and duration', () => {
-      expect(wrapper.text()).toContain('Project Duration');
-      expect(wrapper.text()).toContain('5 days 2 hours');
-    });
-
-    it('should display the second header and duration', () => {
-      expect(wrapper.text()).toContain('Estimated Time');
-      expect(wrapper.text()).toContain('7 days');
-    });
-
-    it('should render all steps', () => {
-      expect(wrapper.text()).toContain('15. Jan. 2024');
-      expect(wrapper.text()).toContain('Project started and initial setup completed');
-      expect(wrapper.text()).toContain('20. Jan. 2024');
-      expect(wrapper.text()).toContain('Development phase initiated');
-      expect(wrapper.text()).toContain('25. Jan. 2024');
-      expect(wrapper.text()).toContain('Testing and quality assurance');
-    });
-  });
-
-  describe('Required Props', () => {
-    it('should require firstHeader prop', () => {
-      const props = wrapper.vm.$options.props;
-      expect(props.firstHeader.required).toBe(true);
-    });
-
-    it('should require secondHeader prop', () => {
-      const props = wrapper.vm.$options.props;
-      expect(props.secondHeader.required).toBe(true);
-    });
-
-    it('should require firstDuration prop', () => {
-      const props = wrapper.vm.$options.props;
-      expect(props.firstDuration.required).toBe(true);
-    });
-
-    it('should require secondDuration prop', () => {
-      const props = wrapper.vm.$options.props;
-      expect(props.secondDuration.required).toBe(true);
-    });
-
-    it('should require steps prop', () => {
-      const props = wrapper.vm.$options.props;
-      expect(props.steps.required).toBe(true);
-    });
-  });
-
-  describe('Default Values', () => {
-    it('should use default urgent value when not provided', async () => {
-      await wrapper.setProps({ urgent: undefined });
-      expect(wrapper.vm.$props.urgent).toBe(false);
-    });
-
-    it('should use default firstHeader when not provided', async () => {
-      await wrapper.setProps({ firstHeader: undefined });
-      expect(wrapper.text()).toContain('Projectdauer');
-    });
-
-    it('should use default secondHeader when not provided', async () => {
-      await wrapper.setProps({ secondHeader: undefined });
-      expect(wrapper.text()).toContain('Projectdauer');
-    });
-
-    it('should use default firstDuration when not provided', async () => {
-      await wrapper.setProps({ firstDuration: undefined });
-      expect(wrapper.text()).toContain('6 Tage 1 Stunde');
-    });
-
-    it('should use default secondDuration when not provided', async () => {
-      await wrapper.setProps({ secondDuration: undefined });
-      expect(wrapper.text()).toContain('6 Tage 1 Stunde');
-    });
-
-    it('should use default steps when not provided', async () => {
-      await wrapper.setProps({ steps: undefined });
-      expect(wrapper.text()).toContain('12. Sept. 2024');
-      expect(wrapper.text()).toContain('Lorem ipsum dolorem exusum latisim beruma estuf kenuria lerumi');
-    });
-  });
-
-  describe('Urgent State', () => {
-    it('should not display urgent icon when urgent is false', () => {
-      const icon = wrapper.find('[icon="heroicons:exclamation-circle"]');
-      expect(icon.exists()).toBe(false);
-    });
-
-    it('should display urgent icon when urgent is true', async () => {
-      await wrapper.setProps({ urgent: true });
-      const icon = wrapper.find('[icon="heroicons:exclamation-circle"]');
-      expect(icon.exists()).toBe(true);
-      // The color attribute is passed as a prop to v-icon, verify the icon selector
-      expect(icon.attributes('icon')).toBe('heroicons:exclamation-circle');
-    });
-
-    it('should apply urgent styling to first duration when urgent is true', async () => {
-      await wrapper.setProps({ urgent: true });
-      const firstDurationElement = wrapper.findAll('h3')[0];
-      // Check that the element exists and has content
-      expect(firstDurationElement.exists()).toBe(true);
-      expect(firstDurationElement.text()).toBe('5 days 2 hours');
-    });
-
-    it('should apply default styling to first duration when urgent is false', () => {
-      const firstDurationElement = wrapper.findAll('h3')[0];
-      // Check that the element exists and has content
-      expect(firstDurationElement.exists()).toBe(true);
-      expect(firstDurationElement.text()).toBe('5 days 2 hours');
-    });
-
-    it('should not affect second duration styling regardless of urgent state', async () => {
-      // Test when urgent is false
-      let secondDurationElement = wrapper.findAll('h3')[1];
-      expect(secondDurationElement.exists()).toBe(true);
-      expect(secondDurationElement.text()).toBe('7 days');
-
-      // Test when urgent is true
-      await wrapper.setProps({ urgent: true });
-      secondDurationElement = wrapper.findAll('h3')[1];
-      expect(secondDurationElement.exists()).toBe(true);
-      expect(secondDurationElement.text()).toBe('7 days');
-    });
-  });
-
-  describe('Steps Rendering', () => {
-    it('should render correct number of steps', () => {
-      const stepItems = wrapper.findAll('.step-item');
-      expect(stepItems).toHaveLength(3);
-    });
-
-    it('should render step dates and descriptions', () => {
-      const stepItems = wrapper.findAll('.step-item');
-
-      stepItems.forEach((item, index) => {
-        const stepContent = item.find('.step-content');
-        expect(stepContent.exists()).toBe(true);
-
-        const date = stepContent.find('h3');
-        const description = stepContent.find('p');
-
-        expect(date.text()).toBe(defaultProps.steps[index].date);
-        expect(description.text()).toBe(defaultProps.steps[index].description);
-      });
-    });
-
-    it('should handle empty steps array', async () => {
-      await wrapper.setProps({ steps: [] });
-      const stepItems = wrapper.findAll('.step-item');
-      expect(stepItems).toHaveLength(0);
-    });
-
-    it('should handle single step', async () => {
-      const singleStep = [{ date: '01. Jan. 2024', description: 'Single step description' }];
-      await wrapper.setProps({ steps: singleStep });
-
-      const stepItems = wrapper.findAll('.step-item');
-      expect(stepItems).toHaveLength(1);
-      expect(wrapper.text()).toContain('01. Jan. 2024');
-      expect(wrapper.text()).toContain('Single step description');
-    });
-  });
-
-  describe('Layout and Structure', () => {
-    it('should have correct root layout', () => {
-      const root = wrapper.find('.d-flex.flex-column.ga-6');
-      expect(root.exists()).toBe(true);
-    });
-
-    it('should have correct header section layout', () => {
-      const headerSection = wrapper.find('.d-flex.flex-row.ga-10.mx-4');
-      expect(headerSection.exists()).toBe(true);
-    });
-
-    it('should have correct steps section layout', () => {
-      const stepsSection = wrapper.find('.d-flex.flex-column.ga-4.w-100');
-      expect(stepsSection.exists()).toBe(true);
-      expect(stepsSection.element.style.maxWidth).toBe('250px');
-    });
-
-    it('should have flex column layout for header items', () => {
-      const headerItems = wrapper.findAll('.flex.flex-col');
-      expect(headerItems.length).toBe(2);
-    });
-  });
-
-  describe('Typography', () => {
-    it('should use p tags for headers', () => {
-      const headerParagraphs = wrapper.findAll('p');
-      const headerTexts = headerParagraphs.map(p => p.text());
-
-      expect(headerTexts).toContain('Project Duration');
-      expect(headerTexts).toContain('Estimated Time');
-    });
-
-    it('should use h3 tags for durations', () => {
-      const h3Elements = wrapper.findAll('h3');
-      expect(h3Elements.length).toBeGreaterThanOrEqual(2); // At least 2 for durations, plus step dates
-
-      expect(h3Elements[0].text()).toBe('5 days 2 hours');
-      expect(h3Elements[1].text()).toBe('7 days');
-    });
-
-    it('should use h3 tags for step dates', () => {
-      const stepItems = wrapper.findAll('.step-item');
-      stepItems.forEach(item => {
-        const stepDate = item.find('.step-content h3');
-        expect(stepDate.exists()).toBe(true);
-      });
-    });
-
-    it('should use p tags for step descriptions', () => {
-      const stepItems = wrapper.findAll('.step-item');
-      stepItems.forEach(item => {
-        const stepDescription = item.find('.step-content p');
-        expect(stepDescription.exists()).toBe(true);
-      });
-    });
-  });
-
-  describe('Content Variations', () => {
-    it('should handle long header texts', async () => {
-      const longHeaders = {
-        firstHeader: 'Very Long First Header That Should Display Correctly',
-        secondHeader: 'Very Long Second Header That Should Also Display Correctly'
-      };
-
-      await wrapper.setProps(longHeaders);
-      expect(wrapper.text()).toContain(longHeaders.firstHeader);
-      expect(wrapper.text()).toContain(longHeaders.secondHeader);
-    });
-
-    it('should handle long duration texts', async () => {
-      const longDurations = {
-        firstDuration: '10 days 5 hours 30 minutes and 45 seconds',
-        secondDuration: '15 days 12 hours 15 minutes'
-      };
-
-      await wrapper.setProps(longDurations);
-      expect(wrapper.text()).toContain(longDurations.firstDuration);
-      expect(wrapper.text()).toContain(longDurations.secondDuration);
-    });
-
-    it('should handle steps with long descriptions', async () => {
-      const longSteps = [
-        {
-          date: '01. Jan. 2024',
-          description: 'This is a very long description that provides detailed information about what happened on this particular date in the project timeline'
-        }
-      ];
-
-      await wrapper.setProps({ steps: longSteps });
-      expect(wrapper.text()).toContain(longSteps[0].description);
-    });
-
-    it('should handle special characters in content', async () => {
-      const specialContent = {
-        firstHeader: 'Project #1 - Duration & Timeline',
-        firstDuration: '5 days @ 8 hours/day',
-        steps: [
-          { date: '15. Jan. 2024', description: 'Project started (100% ready)' }
-        ]
-      };
-
-      await wrapper.setProps(specialContent);
-      expect(wrapper.text()).toContain(specialContent.firstHeader);
-      expect(wrapper.text()).toContain(specialContent.firstDuration);
-      expect(wrapper.text()).toContain(specialContent.steps[0].description);
-    });
-  });
-
-  describe('Icon Rendering', () => {
-    it('should render urgent icon with correct properties when urgent is true', async () => {
-      await wrapper.setProps({ urgent: true });
-      const icon = wrapper.find('[icon="heroicons:exclamation-circle"]');
-
-      expect(icon.exists()).toBe(true);
-      // The icon attribute verifies correct icon is used
-      expect(icon.attributes('icon')).toBe('heroicons:exclamation-circle');
-    });
-
-    it('should position urgent icon correctly', async () => {
-      await wrapper.setProps({ urgent: true });
-      const iconContainer = wrapper.find('.d-flex.flex-row.align-center.ga-1');
-      expect(iconContainer.exists()).toBe(true);
-
-      const icon = iconContainer.find('[icon="heroicons:exclamation-circle"]');
-      expect(icon.exists()).toBe(true);
-    });
-  });
-
-  describe('Responsive Design', () => {
-    it('should use flexbox layouts for responsiveness', () => {
-      expect(wrapper.find('.d-flex.flex-column.ga-6').exists()).toBe(true);
-      expect(wrapper.find('.d-flex.flex-row.ga-10.mx-4').exists()).toBe(true);
-      expect(wrapper.find('.d-flex.flex-column.ga-4.w-100').exists()).toBe(true);
-    });
-
-    it('should have proper spacing classes', () => {
-      const root = wrapper.find('.d-flex.flex-column.ga-6');
-      expect(root.classes()).toContain('ga-6');
-
-      const headerSection = wrapper.find('.d-flex.flex-row.ga-10.mx-4');
-      expect(headerSection.classes()).toContain('ga-10');
-      expect(headerSection.classes()).toContain('mx-4');
-
-      const stepsSection = wrapper.find('.d-flex.flex-column.ga-4.w-100');
-      expect(stepsSection.classes()).toContain('ga-4');
-    });
-  });
-
-  describe('Color Consistency', () => {
-    it('should use consistent color variables', async () => {
-      // Normal state
-      const firstDurationNormal = wrapper.findAll('h3')[0];
-      expect(firstDurationNormal.exists()).toBe(true);
-      expect(firstDurationNormal.text()).toBeTruthy();
-
-      // Urgent state
-      await wrapper.setProps({ urgent: true });
-      const firstDurationUrgent = wrapper.findAll('h3')[0];
-      expect(firstDurationUrgent.exists()).toBe(true);
-      // Verify urgent icon is displayed when urgent is true
-      const urgentIcon = wrapper.find('[icon="heroicons:exclamation-circle"]');
-      expect(urgentIcon.exists()).toBe(true);
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('should maintain proper DOM hierarchy', () => {
-      const root = wrapper.find('.d-flex.flex-column.ga-6');
-      const headerSection = root.find('.d-flex.flex-row.ga-10.mx-4');
-      const stepsSection = root.find('.d-flex.flex-column.ga-4.w-100');
-
-      expect(root.exists()).toBe(true);
-      expect(headerSection.exists()).toBe(true);
-      expect(stepsSection.exists()).toBe(true);
-    });
-
-    it('should have correct step item structure', () => {
-      const stepItems = wrapper.findAll('.step-item');
-      stepItems.forEach(item => {
-        const stepContent = item.find('.step-content');
-        expect(stepContent.exists()).toBe(true);
-
-        const date = stepContent.find('h3');
-        const description = stepContent.find('p');
-        expect(date.exists()).toBe(true);
-        expect(description.exists()).toBe(true);
-      });
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import TimeLineEvent from '../../../../src/components/Laboratory/TimeLine/TimeLineEvent.vue';
+
+describe('TimeLineEvent', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    urgent: false,
+    firstHeader: 'Project Duration',
+    secondHeader: 'Estimated Time',
+    firstDuration: '5 days 2 hours',
+    secondDuration: '7 days',
+    steps: [
+      { date: '15. Jan. 2024', description: 'Project started and initial setup completed' },
+      { date: '20. Jan. 2024', description: 'Development phase initiated' },
+      { date: '25. Jan. 2024', description: 'Testing and quality assurance' }
+    ],
+  };
+
+  beforeEach(() => {
+    wrapper = mount(TimeLineEvent, {
+      props: defaultProps,
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('.d-flex.flex-column.ga-6').exists()).toBe(true);
+    });
+
+    it('should display the first header and duration', () => {
+      expect(wrapper.text()).toContain('Project Duration');
+      expect(wrapper.text()).toContain('5 days 2 hours');
+    });
+
+    it('should display the second header and duration', () => {
+      expect(wrapper.text()).toContain('Estimated Time');
+      expect(wrapper.text()).toContain('7 days');
+    });
+
+    it('should render all steps', () => {
+      expect(wrapper.text()).toContain('15. Jan. 2024');
+      expect(wrapper.text()).toContain('Project started and initial setup completed');
+      expect(wrapper.text()).toContain('20. Jan. 2024');
+      expect(wrapper.text()).toContain('Development phase initiated');
+      expect(wrapper.text()).toContain('25. Jan. 2024');
+      expect(wrapper.text()).toContain('Testing and quality assurance');
+    });
+  });
+
+  describe('Required Props', () => {
+    it('should require firstHeader prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.firstHeader.required).toBe(true);
+    });
+
+    it('should require secondHeader prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.secondHeader.required).toBe(true);
+    });
+
+    it('should require firstDuration prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.firstDuration.required).toBe(true);
+    });
+
+    it('should require secondDuration prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.secondDuration.required).toBe(true);
+    });
+
+    it('should require steps prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.steps.required).toBe(true);
+    });
+  });
+
+  describe('Default Values', () => {
+    it('should use default urgent value when not provided', async () => {
+      await wrapper.setProps({ urgent: undefined });
+      expect(wrapper.vm.$props.urgent).toBe(false);
+    });
+
+    it('should use default firstHeader when not provided', async () => {
+      await wrapper.setProps({ firstHeader: undefined });
+      expect(wrapper.text()).toContain('Projectdauer');
+    });
+
+    it('should use default secondHeader when not provided', async () => {
+      await wrapper.setProps({ secondHeader: undefined });
+      expect(wrapper.text()).toContain('Projectdauer');
+    });
+
+    it('should use default firstDuration when not provided', async () => {
+      await wrapper.setProps({ firstDuration: undefined });
+      expect(wrapper.text()).toContain('6 Tage 1 Stunde');
+    });
+
+    it('should use default secondDuration when not provided', async () => {
+      await wrapper.setProps({ secondDuration: undefined });
+      expect(wrapper.text()).toContain('6 Tage 1 Stunde');
+    });
+
+    it('should use default steps when not provided', async () => {
+      await wrapper.setProps({ steps: undefined });
+      expect(wrapper.text()).toContain('12. Sept. 2024');
+      expect(wrapper.text()).toContain('Lorem ipsum dolorem exusum latisim beruma estuf kenuria lerumi');
+    });
+  });
+
+  describe('Urgent State', () => {
+    it('should not display urgent icon when urgent is false', () => {
+      const icon = wrapper.find('[icon="heroicons:exclamation-circle"]');
+      expect(icon.exists()).toBe(false);
+    });
+
+    it('should display urgent icon when urgent is true', async () => {
+      await wrapper.setProps({ urgent: true });
+      const icon = wrapper.find('[icon="heroicons:exclamation-circle"]');
+      expect(icon.exists()).toBe(true);
+      // The color attribute is passed as a prop to v-icon, verify the icon selector
+      expect(icon.attributes('icon')).toBe('heroicons:exclamation-circle');
+    });
+
+    it('should apply urgent styling to first duration when urgent is true', async () => {
+      await wrapper.setProps({ urgent: true });
+      const firstDurationElement = wrapper.findAll('h3')[0];
+      // Check that the element exists and has content
+      expect(firstDurationElement.exists()).toBe(true);
+      expect(firstDurationElement.text()).toBe('5 days 2 hours');
+    });
+
+    it('should apply default styling to first duration when urgent is false', () => {
+      const firstDurationElement = wrapper.findAll('h3')[0];
+      // Check that the element exists and has content
+      expect(firstDurationElement.exists()).toBe(true);
+      expect(firstDurationElement.text()).toBe('5 days 2 hours');
+    });
+
+    it('should not affect second duration styling regardless of urgent state', async () => {
+      // Test when urgent is false
+      let secondDurationElement = wrapper.findAll('h3')[1];
+      expect(secondDurationElement.exists()).toBe(true);
+      expect(secondDurationElement.text()).toBe('7 days');
+
+      // Test when urgent is true
+      await wrapper.setProps({ urgent: true });
+      secondDurationElement = wrapper.findAll('h3')[1];
+      expect(secondDurationElement.exists()).toBe(true);
+      expect(secondDurationElement.text()).toBe('7 days');
+    });
+  });
+
+  describe('Steps Rendering', () => {
+    it('should render correct number of steps', () => {
+      const stepItems = wrapper.findAll('.step-item');
+      expect(stepItems).toHaveLength(3);
+    });
+
+    it('should render step dates and descriptions', () => {
+      const stepItems = wrapper.findAll('.step-item');
+
+      stepItems.forEach((item, index) => {
+        const stepContent = item.find('.step-content');
+        expect(stepContent.exists()).toBe(true);
+
+        const date = stepContent.find('h3');
+        const description = stepContent.find('p');
+
+        expect(date.text()).toBe(defaultProps.steps[index].date);
+        expect(description.text()).toBe(defaultProps.steps[index].description);
+      });
+    });
+
+    it('should handle empty steps array', async () => {
+      await wrapper.setProps({ steps: [] });
+      const stepItems = wrapper.findAll('.step-item');
+      expect(stepItems).toHaveLength(0);
+    });
+
+    it('should handle single step', async () => {
+      const singleStep = [{ date: '01. Jan. 2024', description: 'Single step description' }];
+      await wrapper.setProps({ steps: singleStep });
+
+      const stepItems = wrapper.findAll('.step-item');
+      expect(stepItems).toHaveLength(1);
+      expect(wrapper.text()).toContain('01. Jan. 2024');
+      expect(wrapper.text()).toContain('Single step description');
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('should have correct root layout', () => {
+      const root = wrapper.find('.d-flex.flex-column.ga-6');
+      expect(root.exists()).toBe(true);
+    });
+
+    it('should have correct header section layout', () => {
+      const headerSection = wrapper.find('.d-flex.flex-row.ga-10.mx-4');
+      expect(headerSection.exists()).toBe(true);
+    });
+
+    it('should have correct steps section layout', () => {
+      const stepsSection = wrapper.find('.d-flex.flex-column.ga-4.w-100');
+      expect(stepsSection.exists()).toBe(true);
+      expect(stepsSection.element.style.maxWidth).toBe('250px');
+    });
+
+    it('should have flex column layout for header items', () => {
+      const headerItems = wrapper.findAll('.flex.flex-col');
+      expect(headerItems.length).toBe(2);
+    });
+  });
+
+  describe('Typography', () => {
+    it('should use p tags for headers', () => {
+      const headerParagraphs = wrapper.findAll('p');
+      const headerTexts = headerParagraphs.map(p => p.text());
+
+      expect(headerTexts).toContain('Project Duration');
+      expect(headerTexts).toContain('Estimated Time');
+    });
+
+    it('should use h3 tags for durations', () => {
+      const h3Elements = wrapper.findAll('h3');
+      expect(h3Elements.length).toBeGreaterThanOrEqual(2); // At least 2 for durations, plus step dates
+
+      expect(h3Elements[0].text()).toBe('5 days 2 hours');
+      expect(h3Elements[1].text()).toBe('7 days');
+    });
+
+    it('should use h3 tags for step dates', () => {
+      const stepItems = wrapper.findAll('.step-item');
+      stepItems.forEach(item => {
+        const stepDate = item.find('.step-content h3');
+        expect(stepDate.exists()).toBe(true);
+      });
+    });
+
+    it('should use p tags for step descriptions', () => {
+      const stepItems = wrapper.findAll('.step-item');
+      stepItems.forEach(item => {
+        const stepDescription = item.find('.step-content p');
+        expect(stepDescription.exists()).toBe(true);
+      });
+    });
+  });
+
+  describe('Content Variations', () => {
+    it('should handle long header texts', async () => {
+      const longHeaders = {
+        firstHeader: 'Very Long First Header That Should Display Correctly',
+        secondHeader: 'Very Long Second Header That Should Also Display Correctly'
+      };
+
+      await wrapper.setProps(longHeaders);
+      expect(wrapper.text()).toContain(longHeaders.firstHeader);
+      expect(wrapper.text()).toContain(longHeaders.secondHeader);
+    });
+
+    it('should handle long duration texts', async () => {
+      const longDurations = {
+        firstDuration: '10 days 5 hours 30 minutes and 45 seconds',
+        secondDuration: '15 days 12 hours 15 minutes'
+      };
+
+      await wrapper.setProps(longDurations);
+      expect(wrapper.text()).toContain(longDurations.firstDuration);
+      expect(wrapper.text()).toContain(longDurations.secondDuration);
+    });
+
+    it('should handle steps with long descriptions', async () => {
+      const longSteps = [
+        {
+          date: '01. Jan. 2024',
+          description: 'This is a very long description that provides detailed information about what happened on this particular date in the project timeline'
+        }
+      ];
+
+      await wrapper.setProps({ steps: longSteps });
+      expect(wrapper.text()).toContain(longSteps[0].description);
+    });
+
+    it('should handle special characters in content', async () => {
+      const specialContent = {
+        firstHeader: 'Project #1 - Duration & Timeline',
+        firstDuration: '5 days @ 8 hours/day',
+        steps: [
+          { date: '15. Jan. 2024', description: 'Project started (100% ready)' }
+        ]
+      };
+
+      await wrapper.setProps(specialContent);
+      expect(wrapper.text()).toContain(specialContent.firstHeader);
+      expect(wrapper.text()).toContain(specialContent.firstDuration);
+      expect(wrapper.text()).toContain(specialContent.steps[0].description);
+    });
+  });
+
+  describe('Icon Rendering', () => {
+    it('should render urgent icon with correct properties when urgent is true', async () => {
+      await wrapper.setProps({ urgent: true });
+      const icon = wrapper.find('[icon="heroicons:exclamation-circle"]');
+
+      expect(icon.exists()).toBe(true);
+      // The icon attribute verifies correct icon is used
+      expect(icon.attributes('icon')).toBe('heroicons:exclamation-circle');
+    });
+
+    it('should position urgent icon correctly', async () => {
+      await wrapper.setProps({ urgent: true });
+      const iconContainer = wrapper.find('.d-flex.flex-row.align-center.ga-1');
+      expect(iconContainer.exists()).toBe(true);
+
+      const icon = iconContainer.find('[icon="heroicons:exclamation-circle"]');
+      expect(icon.exists()).toBe(true);
+    });
+  });
+
+  describe('Responsive Design', () => {
+    it('should use flexbox layouts for responsiveness', () => {
+      expect(wrapper.find('.d-flex.flex-column.ga-6').exists()).toBe(true);
+      expect(wrapper.find('.d-flex.flex-row.ga-10.mx-4').exists()).toBe(true);
+      expect(wrapper.find('.d-flex.flex-column.ga-4.w-100').exists()).toBe(true);
+    });
+
+    it('should have proper spacing classes', () => {
+      const root = wrapper.find('.d-flex.flex-column.ga-6');
+      expect(root.classes()).toContain('ga-6');
+
+      const headerSection = wrapper.find('.d-flex.flex-row.ga-10.mx-4');
+      expect(headerSection.classes()).toContain('ga-10');
+      expect(headerSection.classes()).toContain('mx-4');
+
+      const stepsSection = wrapper.find('.d-flex.flex-column.ga-4.w-100');
+      expect(stepsSection.classes()).toContain('ga-4');
+    });
+  });
+
+  describe('Color Consistency', () => {
+    it('should use consistent color variables', async () => {
+      // Normal state
+      const firstDurationNormal = wrapper.findAll('h3')[0];
+      expect(firstDurationNormal.exists()).toBe(true);
+      expect(firstDurationNormal.text()).toBeTruthy();
+
+      // Urgent state
+      await wrapper.setProps({ urgent: true });
+      const firstDurationUrgent = wrapper.findAll('h3')[0];
+      expect(firstDurationUrgent.exists()).toBe(true);
+      // Verify urgent icon is displayed when urgent is true
+      const urgentIcon = wrapper.find('[icon="heroicons:exclamation-circle"]');
+      expect(urgentIcon.exists()).toBe(true);
+    });
+  });
+
+  describe('Component Structure', () => {
+    it('should maintain proper DOM hierarchy', () => {
+      const root = wrapper.find('.d-flex.flex-column.ga-6');
+      const headerSection = root.find('.d-flex.flex-row.ga-10.mx-4');
+      const stepsSection = root.find('.d-flex.flex-column.ga-4.w-100');
+
+      expect(root.exists()).toBe(true);
+      expect(headerSection.exists()).toBe(true);
+      expect(stepsSection.exists()).toBe(true);
+    });
+
+    it('should have correct step item structure', () => {
+      const stepItems = wrapper.findAll('.step-item');
+      stepItems.forEach(item => {
+        const stepContent = item.find('.step-content');
+        expect(stepContent.exists()).toBe(true);
+
+        const date = stepContent.find('h3');
+        const description = stepContent.find('p');
+        expect(date.exists()).toBe(true);
+        expect(description.exists()).toBe(true);
+      });
+    });
+  });
 });