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

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

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