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

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

@@ -1,237 +1,237 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import DocumentCardItem from '../../../../src/components/Laboratory/DocumentCard/DocumentCardItem.vue';
-
-describe('DocumentCardItem', () => {
-  let wrapper: VueWrapper;
-
-  const defaultProps = {
-    header: 'Test Header',
-    subheader: 'Test Subheader',
-  };
-
-  beforeEach(() => {
-    wrapper = mount(DocumentCardItem, {
-      props: defaultProps,
-      global: {
-        stubs: {
-          'NotificationBubble': {
-            template: '<div data-testid="notification-bubble" @click="$emit(\'click\')">{{ text }}</div>',
-            props: ['iconSize', 'color', 'icon', 'textColor', 'text', 'size', 'readonly']
-          }
-        }
-      }
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component', () => {
-      expect(wrapper.find('.d-flex.flex-column').exists()).toBe(true);
-    });
-
-    it('should display the header', () => {
-      expect(wrapper.text()).toContain('Test Header');
-    });
-
-    it('should display the subheader', () => {
-      expect(wrapper.text()).toContain('Test Subheader');
-    });
-
-    it('should render NotificationBubble', () => {
-      const bubble = wrapper.find('[data-testid="notification-bubble"]');
-      expect(bubble.exists()).toBe(true);
-    });
-  });
-
-  describe('Props', () => {
-    it('should require header prop', () => {
-      const props = wrapper.vm.$options.props;
-      expect(props.header.required).toBe(true);
-    });
-
-    it('should require subheader prop', () => {
-      const props = wrapper.vm.$options.props;
-      expect(props.subheader.required).toBe(true);
-    });
-
-    it('should accept custom header', async () => {
-      await wrapper.setProps({ header: 'Custom Header Text' });
-      expect(wrapper.text()).toContain('Custom Header Text');
-    });
-
-    it('should accept custom subheader', async () => {
-      await wrapper.setProps({ subheader: 'Custom Subheader Text' });
-      expect(wrapper.text()).toContain('Custom Subheader Text');
-    });
-
-    it('should update when header prop changes', async () => {
-      await wrapper.setProps({ header: 'Updated Header' });
-      expect(wrapper.text()).toContain('Updated Header');
-      expect(wrapper.text()).not.toContain('Test Header');
-    });
-
-    it('should update when subheader prop changes', async () => {
-      await wrapper.setProps({ subheader: 'Updated Subheader' });
-      expect(wrapper.text()).toContain('Updated Subheader');
-      expect(wrapper.text()).not.toContain('Test Subheader');
-    });
-  });
-
-  describe('Events', () => {
-    it('should emit click:icon when NotificationBubble is clicked', async () => {
-      const bubble = wrapper.find('[data-testid="notification-bubble"]');
-      await bubble.trigger('click');
-
-      expect(wrapper.emitted('click:icon')).toBeTruthy();
-    });
-
-    it('should call handleIconClick method when bubble is clicked', async () => {
-      const bubble = wrapper.find('[data-testid="notification-bubble"]');
-      await bubble.trigger('click');
-
-      expect(wrapper.emitted('click:icon')).toBeTruthy();
-    });
-
-    it('should handle multiple icon clicks', async () => {
-      const bubble = wrapper.find('[data-testid="notification-bubble"]');
-
-      await bubble.trigger('click');
-      await bubble.trigger('click');
-      await bubble.trigger('click');
-
-      // Due to event bubbling in the test environment, each click triggers twice
-      expect(wrapper.emitted('click:icon')).toHaveLength(6); // 3 clicks * 2 events each
-    });
-  });
-
-  describe('NotificationBubble Properties', () => {
-    it('should have correct NotificationBubble props', () => {
-      const bubble = wrapper.find('[data-testid="notification-bubble"]');
-      expect(bubble.exists()).toBe(true);
-
-      // Verify the bubble component is present and functional
-      expect(bubble.exists()).toBe(true);
-    });
-  });
-
-  describe('Layout and Structure', () => {
-    it('should have correct root layout', () => {
-      const root = wrapper.find('.d-flex.flex-column');
-      expect(root.exists()).toBe(true);
-    });
-
-    it('should have correct header row layout', () => {
-      const headerRow = wrapper.find('.d-flex.flex-row.align-center');
-      expect(headerRow.exists()).toBe(true);
-    });
-
-    it('should have header with flex-grow-1 class', () => {
-      const header = wrapper.find('h5.flex-grow-1');
-      expect(header.exists()).toBe(true);
-      expect(header.text()).toBe('Test Header');
-    });
-  });
-
-  describe('Content Variations', () => {
-    it('should handle long header text', async () => {
-      const longHeader = 'This is a very long header text that should be displayed correctly without breaking the layout';
-      await wrapper.setProps({ header: longHeader });
-      expect(wrapper.text()).toContain(longHeader);
-    });
-
-    it('should handle long subheader text', async () => {
-      const longSubheader = 'This is a very long subheader text that provides detailed information about the document or item';
-      await wrapper.setProps({ subheader: longSubheader });
-      expect(wrapper.text()).toContain(longSubheader);
-    });
-
-    it('should handle special characters in header', async () => {
-      const specialHeader = 'Document #1 - Test & Validation (2024)';
-      await wrapper.setProps({ header: specialHeader });
-      expect(wrapper.text()).toContain(specialHeader);
-    });
-
-    it('should handle special characters in subheader', async () => {
-      const specialSubheader = 'Size: 2.5MB | Type: PDF | Modified: 01/15/2024 @ 14:30';
-      await wrapper.setProps({ subheader: specialSubheader });
-      expect(wrapper.text()).toContain(specialSubheader);
-    });
-  });
-
-  describe('Event Handling', () => {
-    it('should emit event with correct event name', async () => {
-      const bubble = wrapper.find('[data-testid="notification-bubble"]');
-      await bubble.trigger('click');
-
-      const emitted = wrapper.emitted();
-      expect(Object.keys(emitted)).toContain('click:icon');
-    });
-
-    it('should not emit other events when icon is clicked', async () => {
-      const bubble = wrapper.find('[data-testid="notification-bubble"]');
-      await bubble.trigger('click');
-
-      const emitted = wrapper.emitted();
-      expect(Object.keys(emitted)).toContain('click:icon');
-    });
-  });
-
-  describe('Typography', () => {
-    it('should use h5 tag for header', () => {
-      const header = wrapper.find('h5');
-      expect(header.exists()).toBe(true);
-      expect(header.text()).toBe('Test Header');
-    });
-
-    it('should use p tag for subheader', () => {
-      const subheader = wrapper.find('p');
-      expect(subheader.exists()).toBe(true);
-      expect(subheader.text()).toBe('Test Subheader');
-    });
-  });
-
-  describe('Responsive Behavior', () => {
-    it('should maintain layout with varying content lengths', async () => {
-      // Test with short content
-      await wrapper.setProps({
-        header: 'Short',
-        subheader: 'Brief'
-      });
-      expect(wrapper.find('.d-flex.flex-row.align-center').exists()).toBe(true);
-
-      // Test with long content
-      await wrapper.setProps({
-        header: 'Very Long Header That Should Still Display Properly',
-        subheader: 'Very Long Subheader That Contains Much More Detailed Information'
-      });
-      expect(wrapper.find('.d-flex.flex-row.align-center').exists()).toBe(true);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper heading hierarchy', () => {
-      const h5 = wrapper.find('h5');
-      expect(h5.exists()).toBe(true);
-
-      // Should not have higher-level headings (h1-h4) as default content
-      expect(wrapper.find('h1').exists()).toBe(false);
-      expect(wrapper.find('h2').exists()).toBe(false);
-      expect(wrapper.find('h3').exists()).toBe(false);
-      expect(wrapper.find('h4').exists()).toBe(false);
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('should integrate properly with NotificationBubble component', () => {
-      const bubble = wrapper.find('[data-testid="notification-bubble"]');
-      expect(bubble.exists()).toBe(true);
-    });
-
-    it('should pass click events from NotificationBubble correctly', async () => {
-      const bubble = wrapper.find('[data-testid="notification-bubble"]');
-      await bubble.trigger('click');
-
-      expect(wrapper.emitted('click:icon')).toBeTruthy();
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import DocumentCardItem from '../../../../src/components/Laboratory/DocumentCard/DocumentCardItem.vue';
+
+describe('DocumentCardItem', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    header: 'Test Header',
+    subheader: 'Test Subheader',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(DocumentCardItem, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          'NotificationBubble': {
+            template: '<div data-testid="notification-bubble" @click="$emit(\'click\')">{{ text }}</div>',
+            props: ['iconSize', 'color', 'icon', 'textColor', 'text', 'size', 'readonly']
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('.d-flex.flex-column').exists()).toBe(true);
+    });
+
+    it('should display the header', () => {
+      expect(wrapper.text()).toContain('Test Header');
+    });
+
+    it('should display the subheader', () => {
+      expect(wrapper.text()).toContain('Test Subheader');
+    });
+
+    it('should render NotificationBubble', () => {
+      const bubble = wrapper.find('[data-testid="notification-bubble"]');
+      expect(bubble.exists()).toBe(true);
+    });
+  });
+
+  describe('Props', () => {
+    it('should require header prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.header.required).toBe(true);
+    });
+
+    it('should require subheader prop', () => {
+      const props = wrapper.vm.$options.props;
+      expect(props.subheader.required).toBe(true);
+    });
+
+    it('should accept custom header', async () => {
+      await wrapper.setProps({ header: 'Custom Header Text' });
+      expect(wrapper.text()).toContain('Custom Header Text');
+    });
+
+    it('should accept custom subheader', async () => {
+      await wrapper.setProps({ subheader: 'Custom Subheader Text' });
+      expect(wrapper.text()).toContain('Custom Subheader Text');
+    });
+
+    it('should update when header prop changes', async () => {
+      await wrapper.setProps({ header: 'Updated Header' });
+      expect(wrapper.text()).toContain('Updated Header');
+      expect(wrapper.text()).not.toContain('Test Header');
+    });
+
+    it('should update when subheader prop changes', async () => {
+      await wrapper.setProps({ subheader: 'Updated Subheader' });
+      expect(wrapper.text()).toContain('Updated Subheader');
+      expect(wrapper.text()).not.toContain('Test Subheader');
+    });
+  });
+
+  describe('Events', () => {
+    it('should emit click:icon when NotificationBubble is clicked', async () => {
+      const bubble = wrapper.find('[data-testid="notification-bubble"]');
+      await bubble.trigger('click');
+
+      expect(wrapper.emitted('click:icon')).toBeTruthy();
+    });
+
+    it('should call handleIconClick method when bubble is clicked', async () => {
+      const bubble = wrapper.find('[data-testid="notification-bubble"]');
+      await bubble.trigger('click');
+
+      expect(wrapper.emitted('click:icon')).toBeTruthy();
+    });
+
+    it('should handle multiple icon clicks', async () => {
+      const bubble = wrapper.find('[data-testid="notification-bubble"]');
+
+      await bubble.trigger('click');
+      await bubble.trigger('click');
+      await bubble.trigger('click');
+
+      // Due to event bubbling in the test environment, each click triggers twice
+      expect(wrapper.emitted('click:icon')).toHaveLength(6); // 3 clicks * 2 events each
+    });
+  });
+
+  describe('NotificationBubble Properties', () => {
+    it('should have correct NotificationBubble props', () => {
+      const bubble = wrapper.find('[data-testid="notification-bubble"]');
+      expect(bubble.exists()).toBe(true);
+
+      // Verify the bubble component is present and functional
+      expect(bubble.exists()).toBe(true);
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('should have correct root layout', () => {
+      const root = wrapper.find('.d-flex.flex-column');
+      expect(root.exists()).toBe(true);
+    });
+
+    it('should have correct header row layout', () => {
+      const headerRow = wrapper.find('.d-flex.flex-row.align-center');
+      expect(headerRow.exists()).toBe(true);
+    });
+
+    it('should have header with flex-grow-1 class', () => {
+      const header = wrapper.find('h5.flex-grow-1');
+      expect(header.exists()).toBe(true);
+      expect(header.text()).toBe('Test Header');
+    });
+  });
+
+  describe('Content Variations', () => {
+    it('should handle long header text', async () => {
+      const longHeader = 'This is a very long header text that should be displayed correctly without breaking the layout';
+      await wrapper.setProps({ header: longHeader });
+      expect(wrapper.text()).toContain(longHeader);
+    });
+
+    it('should handle long subheader text', async () => {
+      const longSubheader = 'This is a very long subheader text that provides detailed information about the document or item';
+      await wrapper.setProps({ subheader: longSubheader });
+      expect(wrapper.text()).toContain(longSubheader);
+    });
+
+    it('should handle special characters in header', async () => {
+      const specialHeader = 'Document #1 - Test & Validation (2024)';
+      await wrapper.setProps({ header: specialHeader });
+      expect(wrapper.text()).toContain(specialHeader);
+    });
+
+    it('should handle special characters in subheader', async () => {
+      const specialSubheader = 'Size: 2.5MB | Type: PDF | Modified: 01/15/2024 @ 14:30';
+      await wrapper.setProps({ subheader: specialSubheader });
+      expect(wrapper.text()).toContain(specialSubheader);
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('should emit event with correct event name', async () => {
+      const bubble = wrapper.find('[data-testid="notification-bubble"]');
+      await bubble.trigger('click');
+
+      const emitted = wrapper.emitted();
+      expect(Object.keys(emitted)).toContain('click:icon');
+    });
+
+    it('should not emit other events when icon is clicked', async () => {
+      const bubble = wrapper.find('[data-testid="notification-bubble"]');
+      await bubble.trigger('click');
+
+      const emitted = wrapper.emitted();
+      expect(Object.keys(emitted)).toContain('click:icon');
+    });
+  });
+
+  describe('Typography', () => {
+    it('should use h5 tag for header', () => {
+      const header = wrapper.find('h5');
+      expect(header.exists()).toBe(true);
+      expect(header.text()).toBe('Test Header');
+    });
+
+    it('should use p tag for subheader', () => {
+      const subheader = wrapper.find('p');
+      expect(subheader.exists()).toBe(true);
+      expect(subheader.text()).toBe('Test Subheader');
+    });
+  });
+
+  describe('Responsive Behavior', () => {
+    it('should maintain layout with varying content lengths', async () => {
+      // Test with short content
+      await wrapper.setProps({
+        header: 'Short',
+        subheader: 'Brief'
+      });
+      expect(wrapper.find('.d-flex.flex-row.align-center').exists()).toBe(true);
+
+      // Test with long content
+      await wrapper.setProps({
+        header: 'Very Long Header That Should Still Display Properly',
+        subheader: 'Very Long Subheader That Contains Much More Detailed Information'
+      });
+      expect(wrapper.find('.d-flex.flex-row.align-center').exists()).toBe(true);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper heading hierarchy', () => {
+      const h5 = wrapper.find('h5');
+      expect(h5.exists()).toBe(true);
+
+      // Should not have higher-level headings (h1-h4) as default content
+      expect(wrapper.find('h1').exists()).toBe(false);
+      expect(wrapper.find('h2').exists()).toBe(false);
+      expect(wrapper.find('h3').exists()).toBe(false);
+      expect(wrapper.find('h4').exists()).toBe(false);
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('should integrate properly with NotificationBubble component', () => {
+      const bubble = wrapper.find('[data-testid="notification-bubble"]');
+      expect(bubble.exists()).toBe(true);
+    });
+
+    it('should pass click events from NotificationBubble correctly', async () => {
+      const bubble = wrapper.find('[data-testid="notification-bubble"]');
+      await bubble.trigger('click');
+
+      expect(wrapper.emitted('click:icon')).toBeTruthy();
+    });
+  });
 });