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

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

@@ -1,257 +1,257 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import ChatNotification from '../../../../src/components/Laboratory/ChatNotification/ChatNotification.vue';
-
-describe('ChatNotification', () => {
-  let wrapper: VueWrapper;
-
-  const defaultProps = {
-    type: 'cta',
-    date: '2024-01-15',
-    patient: 'John Doe',
-    status: 'Ready',
-  };
-
-  beforeEach(() => {
-    wrapper = mount(ChatNotification, {
-      props: defaultProps,
-      global: {
-        stubs: {
-          'TagLabel': {
-            template: '<div data-testid="tag-label">{{ status }}</div>',
-            props: ['status']
-          },
-          'Button': {
-            template: '<button @click="$emit(\'click\')" data-testid="button">{{ label }}</button>',
-            props: ['label', 'variant', 'style']
-          }
-        }
-      }
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component', () => {
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('should have correct layout structure', () => {
-      const root = wrapper.find('[data-testid="root"]');
-      expect(root.classes()).toContain('w-100');
-      expect(root.classes()).toContain('d-flex');
-      expect(root.classes()).toContain('flex-column');
-      expect(root.classes()).toContain('align-center');
-      expect(root.classes()).toContain('ga-4');
-    });
-  });
-
-  describe('Props', () => {
-    it('should use default type when not provided', async () => {
-      await wrapper.setProps({ type: undefined });
-      // Default type is empty string, should render default notification
-      expect(wrapper.text()).toContain('Es gibt neue Update Notifications');
-    });
-
-    it('should use default date when not provided', async () => {
-      await wrapper.setProps({ date: undefined });
-      // Date is used in template, should handle empty string
-      expect(wrapper.vm.$props.date).toBe('');
-    });
-
-    it('should use default patient when not provided', async () => {
-      await wrapper.setProps({ patient: undefined });
-      expect(wrapper.vm.$props.patient).toBe('Patient');
-    });
-
-    it('should use default status when not provided', async () => {
-      await wrapper.setProps({ status: undefined });
-      expect(wrapper.vm.$props.status).toBe('Done');
-    });
-
-    it('should accept custom date', async () => {
-      await wrapper.setProps({ type: 'date', date: '2024-12-25' });
-      expect(wrapper.text()).toContain('2024-12-25');
-    });
-
-    it('should accept custom patient name', async () => {
-      await wrapper.setProps({ type: 'tag', patient: 'Jane Smith' });
-      expect(wrapper.text()).toContain('Jane Smith');
-    });
-
-    it('should accept custom status', async () => {
-      await wrapper.setProps({ status: 'Treatment Done' });
-      const tagLabel = wrapper.find('[data-testid="tag-label"]');
-      expect(tagLabel.text()).toBe('Treatment Done');
-    });
-  });
-
-  describe('Type Variations', () => {
-    it('should render CTA content for cta type', async () => {
-      await wrapper.setProps({ type: 'cta' });
-      expect(wrapper.text()).toContain('Hier klicken um nächsten Arbeitsschritt zu starten');
-      expect(wrapper.text()).toContain('Nachster Schritt');
-    });
-
-    it('should render date content for date type', async () => {
-      await wrapper.setProps({ type: 'date', date: '2024-01-15' });
-      expect(wrapper.text()).toContain('2024-01-15');
-      expect(wrapper.text()).toContain('Es gibt neue Update Notifications');
-    });
-
-    it('should render tag content for tag type', async () => {
-      await wrapper.setProps({ type: 'tag', patient: 'John Doe', status: 'Ready' });
-      expect(wrapper.text()).toContain('John Doe wurde zurück nach');
-      expect(wrapper.text()).toContain('verschoben');
-      expect(wrapper.find('[icon="heroicons:information-circle"]').exists()).toBe(true);
-    });
-
-    it('should render default content for empty type', async () => {
-      await wrapper.setProps({ type: '' });
-      expect(wrapper.text()).toContain('Es gibt neue Update Notifications');
-    });
-  });
-
-  describe('Line Color Computation', () => {
-    it('should have blue line color for cta type', async () => {
-      await wrapper.setProps({ type: 'cta' });
-      const lines = wrapper.findAll('.line');
-      expect(lines.length).toBeGreaterThan(0);
-      expect(wrapper.vm.type).toBe('cta');
-    });
-
-    it('should have gray line color for non-cta type', async () => {
-      await wrapper.setProps({ type: 'date' });
-      const lines = wrapper.findAll('.line');
-      expect(lines.length).toBeGreaterThan(0);
-      expect(wrapper.vm.type).toBe('date');
-    });
-  });
-
-  describe('Button Rendering', () => {
-    it('should render start button for cta type with appropriate status', async () => {
-      await wrapper.setProps({ type: 'cta', status: 'Ready' });
-      const button = wrapper.find('[data-testid="button"]');
-      expect(button.exists()).toBe(true);
-      expect(button.text()).toBe('Starten');
-    });
-
-    it('should render further button for Follow-up Case Created status', async () => {
-      await wrapper.setProps({ type: 'cta', status: 'Follow-up Case Created' });
-      const button = wrapper.find('[data-testid="button"]');
-      expect(button.exists()).toBe(true);
-      expect(button.text()).toBe('Weiter');
-    });
-
-    it('should render dual buttons for Treatment Done status', async () => {
-      await wrapper.setProps({ type: 'cta', status: 'Treatment Done' });
-      const buttons = wrapper.findAll('[data-testid="button"]');
-      expect(buttons).toHaveLength(2);
-      expect(buttons[0].text()).toBe('Zurücklegen');
-      expect(buttons[1].text()).toBe('Abschließen');
-    });
-
-    it('should not render start button for Treatment Done status', async () => {
-      await wrapper.setProps({ type: 'cta', status: 'Treatment Done' });
-      const startButton = wrapper.findAll('[data-testid="button"]').find(btn => btn.text() === 'Starten');
-      expect(startButton).toBeUndefined();
-    });
-
-    it('should not render start button for Follow-up Case Created status', async () => {
-      await wrapper.setProps({ type: 'cta', status: 'Follow-up Case Created' });
-      const startButton = wrapper.findAll('[data-testid="button"]').find(btn => btn.text() === 'Starten');
-      expect(startButton).toBeUndefined();
-    });
-  });
-
-  describe('Events', () => {
-    it('should emit click:start when start button is clicked', async () => {
-      await wrapper.setProps({ type: 'cta', status: 'Ready' });
-      const button = wrapper.find('[data-testid="button"]');
-      await button.trigger('click');
-
-      expect(wrapper.emitted('click:start')).toBeTruthy();
-    });
-
-    it('should emit click:further when further button is clicked', async () => {
-      await wrapper.setProps({ type: 'cta', status: 'Follow-up Case Created' });
-      const button = wrapper.find('[data-testid="button"]');
-      await button.trigger('click');
-
-      expect(wrapper.emitted('click:further')).toBeTruthy();
-    });
-
-    it('should emit click:cancel when cancel button is clicked', async () => {
-      await wrapper.setProps({ type: 'cta', status: 'Treatment Done' });
-      const buttons = wrapper.findAll('[data-testid="button"]');
-      const cancelButton = buttons.find(btn => btn.text() === 'Zurücklegen');
-      await cancelButton!.trigger('click');
-
-      expect(wrapper.emitted('click:cancel')).toBeTruthy();
-    });
-
-    it('should emit click:finish when finish button is clicked', async () => {
-      await wrapper.setProps({ type: 'cta', status: 'Treatment Done' });
-      const buttons = wrapper.findAll('[data-testid="button"]');
-      const finishButton = buttons.find(btn => btn.text() === 'Abschließen');
-      await finishButton!.trigger('click');
-
-      expect(wrapper.emitted('click:finish')).toBeTruthy();
-    });
-  });
-
-  describe('Styling and Layout', () => {
-    it('should have correct line styling', () => {
-      const lines = wrapper.findAll('.line');
-      expect(lines.length).toBeGreaterThan(0);
-
-      lines.forEach(line => {
-        expect(line.exists()).toBe(true);
-        // flexGrow is set via CSS class
-        expect(line.classes()).toContain('line');
-      });
-    });
-
-    it('should have correct button container styling for dual buttons', async () => {
-      await wrapper.setProps({ type: 'cta', status: 'Treatment Done' });
-      const buttonContainer = wrapper.find('.d-flex.flex-row.align-center.justify-between.ga-4');
-      expect(buttonContainer.exists()).toBe(true);
-    });
-
-    it('should have correct icon styling in tag section', async () => {
-      await wrapper.setProps({ type: 'tag' });
-      const icon = wrapper.find('[icon="heroicons:information-circle"]');
-      expect(icon.exists()).toBe(true);
-    });
-  });
-
-  describe('Conditional Rendering', () => {
-    it('should show appropriate content based on type', async () => {
-      const types = ['cta', 'date', 'tag', ''];
-
-      for (const type of types) {
-        await wrapper.setProps({ type });
-
-        if (type === 'cta') {
-          expect(wrapper.text()).toContain('Nachster Schritt');
-        } else if (type === 'date') {
-          expect(wrapper.text()).toContain('Es gibt neue Update Notifications');
-        } else if (type === 'tag') {
-          expect(wrapper.text()).toContain('wurde zurück nach');
-          expect(wrapper.text()).toContain('verschoben');
-        } else {
-          expect(wrapper.text()).toContain('Es gibt neue Update Notifications');
-        }
-      }
-    });
-
-    it('should render TagLabel in appropriate sections', async () => {
-      await wrapper.setProps({ type: 'cta' });
-      let tagLabels = wrapper.findAll('[data-testid="tag-label"]');
-      expect(tagLabels).toHaveLength(1);
-
-      await wrapper.setProps({ type: 'tag' });
-      tagLabels = wrapper.findAll('[data-testid="tag-label"]');
-      expect(tagLabels).toHaveLength(1);
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import ChatNotification from '../../../../src/components/Laboratory/ChatNotification/ChatNotification.vue';
+
+describe('ChatNotification', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    type: 'cta',
+    date: '2024-01-15',
+    patient: 'John Doe',
+    status: 'Ready',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(ChatNotification, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          'TagLabel': {
+            template: '<div data-testid="tag-label">{{ status }}</div>',
+            props: ['status']
+          },
+          'Button': {
+            template: '<button @click="$emit(\'click\')" data-testid="button">{{ label }}</button>',
+            props: ['label', 'variant', 'style']
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('should have correct layout structure', () => {
+      const root = wrapper.find('[data-testid="root"]');
+      expect(root.classes()).toContain('w-100');
+      expect(root.classes()).toContain('d-flex');
+      expect(root.classes()).toContain('flex-column');
+      expect(root.classes()).toContain('align-center');
+      expect(root.classes()).toContain('ga-4');
+    });
+  });
+
+  describe('Props', () => {
+    it('should use default type when not provided', async () => {
+      await wrapper.setProps({ type: undefined });
+      // Default type is empty string, should render default notification
+      expect(wrapper.text()).toContain('Es gibt neue Update Notifications');
+    });
+
+    it('should use default date when not provided', async () => {
+      await wrapper.setProps({ date: undefined });
+      // Date is used in template, should handle empty string
+      expect(wrapper.vm.$props.date).toBe('');
+    });
+
+    it('should use default patient when not provided', async () => {
+      await wrapper.setProps({ patient: undefined });
+      expect(wrapper.vm.$props.patient).toBe('Patient');
+    });
+
+    it('should use default status when not provided', async () => {
+      await wrapper.setProps({ status: undefined });
+      expect(wrapper.vm.$props.status).toBe('Done');
+    });
+
+    it('should accept custom date', async () => {
+      await wrapper.setProps({ type: 'date', date: '2024-12-25' });
+      expect(wrapper.text()).toContain('2024-12-25');
+    });
+
+    it('should accept custom patient name', async () => {
+      await wrapper.setProps({ type: 'tag', patient: 'Jane Smith' });
+      expect(wrapper.text()).toContain('Jane Smith');
+    });
+
+    it('should accept custom status', async () => {
+      await wrapper.setProps({ status: 'Treatment Done' });
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.text()).toBe('Treatment Done');
+    });
+  });
+
+  describe('Type Variations', () => {
+    it('should render CTA content for cta type', async () => {
+      await wrapper.setProps({ type: 'cta' });
+      expect(wrapper.text()).toContain('Hier klicken um nächsten Arbeitsschritt zu starten');
+      expect(wrapper.text()).toContain('Nachster Schritt');
+    });
+
+    it('should render date content for date type', async () => {
+      await wrapper.setProps({ type: 'date', date: '2024-01-15' });
+      expect(wrapper.text()).toContain('2024-01-15');
+      expect(wrapper.text()).toContain('Es gibt neue Update Notifications');
+    });
+
+    it('should render tag content for tag type', async () => {
+      await wrapper.setProps({ type: 'tag', patient: 'John Doe', status: 'Ready' });
+      expect(wrapper.text()).toContain('John Doe wurde zurück nach');
+      expect(wrapper.text()).toContain('verschoben');
+      expect(wrapper.find('[icon="heroicons:information-circle"]').exists()).toBe(true);
+    });
+
+    it('should render default content for empty type', async () => {
+      await wrapper.setProps({ type: '' });
+      expect(wrapper.text()).toContain('Es gibt neue Update Notifications');
+    });
+  });
+
+  describe('Line Color Computation', () => {
+    it('should have blue line color for cta type', async () => {
+      await wrapper.setProps({ type: 'cta' });
+      const lines = wrapper.findAll('.line');
+      expect(lines.length).toBeGreaterThan(0);
+      expect(wrapper.vm.type).toBe('cta');
+    });
+
+    it('should have gray line color for non-cta type', async () => {
+      await wrapper.setProps({ type: 'date' });
+      const lines = wrapper.findAll('.line');
+      expect(lines.length).toBeGreaterThan(0);
+      expect(wrapper.vm.type).toBe('date');
+    });
+  });
+
+  describe('Button Rendering', () => {
+    it('should render start button for cta type with appropriate status', async () => {
+      await wrapper.setProps({ type: 'cta', status: 'Ready' });
+      const button = wrapper.find('[data-testid="button"]');
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('Starten');
+    });
+
+    it('should render further button for Follow-up Case Created status', async () => {
+      await wrapper.setProps({ type: 'cta', status: 'Follow-up Case Created' });
+      const button = wrapper.find('[data-testid="button"]');
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('Weiter');
+    });
+
+    it('should render dual buttons for Treatment Done status', async () => {
+      await wrapper.setProps({ type: 'cta', status: 'Treatment Done' });
+      const buttons = wrapper.findAll('[data-testid="button"]');
+      expect(buttons).toHaveLength(2);
+      expect(buttons[0].text()).toBe('Zurücklegen');
+      expect(buttons[1].text()).toBe('Abschließen');
+    });
+
+    it('should not render start button for Treatment Done status', async () => {
+      await wrapper.setProps({ type: 'cta', status: 'Treatment Done' });
+      const startButton = wrapper.findAll('[data-testid="button"]').find(btn => btn.text() === 'Starten');
+      expect(startButton).toBeUndefined();
+    });
+
+    it('should not render start button for Follow-up Case Created status', async () => {
+      await wrapper.setProps({ type: 'cta', status: 'Follow-up Case Created' });
+      const startButton = wrapper.findAll('[data-testid="button"]').find(btn => btn.text() === 'Starten');
+      expect(startButton).toBeUndefined();
+    });
+  });
+
+  describe('Events', () => {
+    it('should emit click:start when start button is clicked', async () => {
+      await wrapper.setProps({ type: 'cta', status: 'Ready' });
+      const button = wrapper.find('[data-testid="button"]');
+      await button.trigger('click');
+
+      expect(wrapper.emitted('click:start')).toBeTruthy();
+    });
+
+    it('should emit click:further when further button is clicked', async () => {
+      await wrapper.setProps({ type: 'cta', status: 'Follow-up Case Created' });
+      const button = wrapper.find('[data-testid="button"]');
+      await button.trigger('click');
+
+      expect(wrapper.emitted('click:further')).toBeTruthy();
+    });
+
+    it('should emit click:cancel when cancel button is clicked', async () => {
+      await wrapper.setProps({ type: 'cta', status: 'Treatment Done' });
+      const buttons = wrapper.findAll('[data-testid="button"]');
+      const cancelButton = buttons.find(btn => btn.text() === 'Zurücklegen');
+      await cancelButton!.trigger('click');
+
+      expect(wrapper.emitted('click:cancel')).toBeTruthy();
+    });
+
+    it('should emit click:finish when finish button is clicked', async () => {
+      await wrapper.setProps({ type: 'cta', status: 'Treatment Done' });
+      const buttons = wrapper.findAll('[data-testid="button"]');
+      const finishButton = buttons.find(btn => btn.text() === 'Abschließen');
+      await finishButton!.trigger('click');
+
+      expect(wrapper.emitted('click:finish')).toBeTruthy();
+    });
+  });
+
+  describe('Styling and Layout', () => {
+    it('should have correct line styling', () => {
+      const lines = wrapper.findAll('.line');
+      expect(lines.length).toBeGreaterThan(0);
+
+      lines.forEach(line => {
+        expect(line.exists()).toBe(true);
+        // flexGrow is set via CSS class
+        expect(line.classes()).toContain('line');
+      });
+    });
+
+    it('should have correct button container styling for dual buttons', async () => {
+      await wrapper.setProps({ type: 'cta', status: 'Treatment Done' });
+      const buttonContainer = wrapper.find('.d-flex.flex-row.align-center.justify-between.ga-4');
+      expect(buttonContainer.exists()).toBe(true);
+    });
+
+    it('should have correct icon styling in tag section', async () => {
+      await wrapper.setProps({ type: 'tag' });
+      const icon = wrapper.find('[icon="heroicons:information-circle"]');
+      expect(icon.exists()).toBe(true);
+    });
+  });
+
+  describe('Conditional Rendering', () => {
+    it('should show appropriate content based on type', async () => {
+      const types = ['cta', 'date', 'tag', ''];
+
+      for (const type of types) {
+        await wrapper.setProps({ type });
+
+        if (type === 'cta') {
+          expect(wrapper.text()).toContain('Nachster Schritt');
+        } else if (type === 'date') {
+          expect(wrapper.text()).toContain('Es gibt neue Update Notifications');
+        } else if (type === 'tag') {
+          expect(wrapper.text()).toContain('wurde zurück nach');
+          expect(wrapper.text()).toContain('verschoben');
+        } else {
+          expect(wrapper.text()).toContain('Es gibt neue Update Notifications');
+        }
+      }
+    });
+
+    it('should render TagLabel in appropriate sections', async () => {
+      await wrapper.setProps({ type: 'cta' });
+      let tagLabels = wrapper.findAll('[data-testid="tag-label"]');
+      expect(tagLabels).toHaveLength(1);
+
+      await wrapper.setProps({ type: 'tag' });
+      tagLabels = wrapper.findAll('[data-testid="tag-label"]');
+      expect(tagLabels).toHaveLength(1);
+    });
+  });
 });