@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +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);
+    });
+  });
+});

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

@@ -0,0 +1,229 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import DocumentCard from '../../../../src/components/Laboratory/DocumentCard/DocumentCard.vue';
+
+describe('DocumentCard', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    title: 'Test Documents',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(DocumentCard, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          'Button': {
+            template: '<button data-testid="download-button" @click="$emit(\'click\')">{{ label }}</button>',
+            props: ['label', 'color', 'variant']
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.document-card').exists()).toBe(true);
+      expect(wrapper.find('.v-card').exists()).toBe(true);
+    });
+
+    it('should display the title', () => {
+      expect(wrapper.text()).toContain('Test Documents');
+    });
+
+    it('should render download all button', () => {
+      const button = wrapper.find('[data-testid="download-button"]');
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toBe('Download all');
+    });
+
+    it('should have slot for content', () => {
+      const contentContainer = wrapper.find('.d-flex.flex-column.ga-4');
+      expect(contentContainer.exists()).toBe(true);
+    });
+  });
+
+  describe('Props', () => {
+    it('should use default title when not provided', async () => {
+      await wrapper.setProps({ title: undefined });
+      expect(wrapper.text()).toContain('Attachments');
+    });
+
+    it('should accept custom title', async () => {
+      await wrapper.setProps({ title: 'Custom Documents' });
+      expect(wrapper.text()).toContain('Custom Documents');
+    });
+
+    it('should update title when prop changes', async () => {
+      await wrapper.setProps({ title: 'Updated Title' });
+      expect(wrapper.text()).toContain('Updated Title');
+      expect(wrapper.text()).not.toContain('Test Documents');
+    });
+  });
+
+  describe('Events', () => {
+    it('should emit download:all when download button is clicked', async () => {
+      const button = wrapper.find('[data-testid="download-button"]');
+      await button.trigger('click');
+
+      expect(wrapper.emitted('download:all')).toBeTruthy();
+    });
+
+    it('should call handleDownloadAll method when button is clicked', async () => {
+      const button = wrapper.find('[data-testid="download-button"]');
+      await button.trigger('click');
+
+      expect(wrapper.emitted('download:all')).toBeTruthy();
+    });
+  });
+
+  describe('Slot Content', () => {
+    it('should render slot content', () => {
+      const wrapperWithSlot = mount(DocumentCard, {
+        props: defaultProps,
+        slots: {
+          default: '<div data-testid="slot-content">Custom Slot Content</div>'
+        },
+        global: {
+          stubs: {
+            'Button': {
+              template: '<button @click="$emit(\'click\')" data-testid="download-button">{{ label }}</button>',
+              props: ['label', 'color', 'variant']
+            }
+          }
+        }
+      });
+
+      expect(wrapperWithSlot.find('[data-testid="slot-content"]').exists()).toBe(true);
+      expect(wrapperWithSlot.text()).toContain('Custom Slot Content');
+    });
+
+    it('should render multiple slot items', () => {
+      const wrapperWithSlots = mount(DocumentCard, {
+        props: defaultProps,
+        slots: {
+          default: `
+            <div data-testid="slot-item-1">Item 1</div>
+            <div data-testid="slot-item-2">Item 2</div>
+            <div data-testid="slot-item-3">Item 3</div>
+          `
+        },
+        global: {
+          stubs: {
+            'Button': {
+              template: '<button @click="$emit(\'click\')" data-testid="download-button">{{ label }}</button>',
+              props: ['label', 'color', 'variant']
+            }
+          }
+        }
+      });
+
+      expect(wrapperWithSlots.find('[data-testid="slot-item-1"]').exists()).toBe(true);
+      expect(wrapperWithSlots.find('[data-testid="slot-item-2"]').exists()).toBe(true);
+      expect(wrapperWithSlots.find('[data-testid="slot-item-3"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Card Properties', () => {
+    it('should have correct card elevation', () => {
+      const card = wrapper.find('.v-card');
+      expect(card.exists()).toBe(true);
+    });
+
+    it('should have correct card rounded property', () => {
+      const card = wrapper.find('.v-card');
+      expect(card.exists()).toBe(true);
+    });
+
+    it('should have document-card class', () => {
+      const card = wrapper.find('.v-card');
+      expect(card.classes()).toContain('document-card');
+    });
+  });
+
+  describe('Button Properties', () => {
+    it('should have correct button styling', () => {
+      const button = wrapper.find('[data-testid="download-button"]');
+      expect(button.exists()).toBe(true);
+    });
+
+    it('should have download all as button text', () => {
+      const button = wrapper.find('[data-testid="download-button"]');
+      expect(button.text()).toBe('Download all');
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('should have correct title layout', () => {
+      const titleContainer = wrapper.find('.d-flex.flex-row.align-center');
+      expect(titleContainer.exists()).toBe(true);
+    });
+
+    it('should have title with mr-auto class', () => {
+      const title = wrapper.find('h4.mr-auto');
+      expect(title.exists()).toBe(true);
+      expect(title.text()).toBe('Test Documents');
+    });
+
+    it('should have correct content layout', () => {
+      const contentContainer = wrapper.find('.d-flex.flex-column.ga-4');
+      expect(contentContainer.exists()).toBe(true);
+    });
+  });
+
+  describe('Title Variations', () => {
+    it('should handle long titles', async () => {
+      const longTitle = 'This is a very long title for testing how the component handles lengthy titles';
+      await wrapper.setProps({ title: longTitle });
+      expect(wrapper.text()).toContain(longTitle);
+    });
+
+    it('should handle empty title', async () => {
+      await wrapper.setProps({ title: '' });
+      const title = wrapper.find('h4');
+      expect(title.text()).toBe('');
+    });
+
+    it('should handle title with special characters', async () => {
+      const specialTitle = 'Documents & Attachments (2024) - Test #1';
+      await wrapper.setProps({ title: specialTitle });
+      expect(wrapper.text()).toContain(specialTitle);
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('should handle multiple download button clicks', async () => {
+      const button = wrapper.find('[data-testid="download-button"]');
+
+      await button.trigger('click');
+      await button.trigger('click');
+      await button.trigger('click');
+
+      // Due to event bubbling in the test environment, each click triggers twice
+      expect(wrapper.emitted('download:all')).toHaveLength(6); // 3 clicks * 2 events each
+    });
+
+    it('should emit event with correct event name', async () => {
+      const button = wrapper.find('[data-testid="download-button"]');
+      await button.trigger('click');
+
+      const emitted = wrapper.emitted();
+      expect(Object.keys(emitted)).toContain('download:all');
+    });
+  });
+
+  describe('Template Structure', () => {
+    it('should use template slots correctly', () => {
+      // Title template
+      const titleSection = wrapper.find('.v-card .d-flex.flex-row.align-center');
+      expect(titleSection.exists()).toBe(true);
+
+      // Content template should contain slot
+      const textSection = wrapper.find('.d-flex.flex-column.ga-4');
+      expect(textSection.exists()).toBe(true);
+    });
+  });
+});