@zap-wunschlachen/wl-shared-components 1.0.0

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

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

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

@@ -0,0 +1,309 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import InfoCard from '../../../../src/components/Laboratory/InfoCard/InfoCard.vue';
+
+describe('InfoCard', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    dentist: 'Dr. Smith',
+    material: 'Ceramic',
+    color: 'White',
+    patientName: 'John Doe',
+    patientNumber: 'P12345',
+    header: 'Crown Installation',
+    subHeader: 'Upper right molar',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(InfoCard, {
+      props: defaultProps,
+      slots: {
+        tagLabel: '<div data-testid="tag-label-slot">Draft</div>',
+        progress: '<div data-testid="progress-slot">75%</div>'
+      },
+      global: {
+        stubs: {
+          'v-icon': {
+            template: '<i class="v-icon" :color="color" :icon="icon" :size="size" @click="$emit(\'click\')"></i>',
+            props: ['color', 'icon', 'size']
+          },
+          'v-divider': {
+            template: '<hr class="v-divider" :thickness="thickness" />',
+            props: ['thickness']
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.info-card').exists()).toBe(true);
+      expect(wrapper.find('.v-card').exists()).toBe(true);
+    });
+
+    it('should display patient information', () => {
+      expect(wrapper.text()).toContain('John Doe');
+      expect(wrapper.text()).toContain('#P12345');
+    });
+
+    it('should display header and subheader', () => {
+      expect(wrapper.text()).toContain('Crown Installation');
+      expect(wrapper.text()).toContain('Upper right molar');
+    });
+
+    it('should display material and color information', () => {
+      expect(wrapper.text()).toContain('Color');
+      expect(wrapper.text()).toContain('White');
+      expect(wrapper.text()).toContain('Material');
+      expect(wrapper.text()).toContain('Ceramic');
+    });
+
+    it('should display dentist information', () => {
+      expect(wrapper.text()).toContain('Dr. Smith');
+    });
+
+    it('should render action icons', () => {
+      const icons = wrapper.findAll('.v-icon');
+      expect(icons.length).toBeGreaterThanOrEqual(2); // pencil, printer, and user-circle icons
+    });
+  });
+
+  describe('Props', () => {
+    it('should use default dentist when not provided', async () => {
+      await wrapper.setProps({ dentist: undefined });
+      expect(wrapper.text()).toContain('Martin Paetz');
+    });
+
+    it('should use default material when not provided', async () => {
+      await wrapper.setProps({ material: undefined });
+      expect(wrapper.text()).toContain('color'); // Default material is 'color'
+    });
+
+    it('should use default color when not provided', async () => {
+      await wrapper.setProps({ color: undefined });
+      expect(wrapper.text()).toContain('material'); // Default color is 'material'
+    });
+
+    it('should use default patient name when not provided', async () => {
+      await wrapper.setProps({ patientName: undefined });
+      expect(wrapper.text()).toContain('Rainer Zufall');
+    });
+
+    it('should use default patient number when not provided', async () => {
+      await wrapper.setProps({ patientNumber: undefined });
+      expect(wrapper.text()).toContain('numbeer'); // Default patient number
+    });
+
+    it('should use default header when not provided', async () => {
+      await wrapper.setProps({ header: undefined });
+      expect(wrapper.text()).toContain('header');
+    });
+
+    it('should use default sub header when not provided', async () => {
+      await wrapper.setProps({ subHeader: undefined });
+      expect(wrapper.text()).toContain('subHeader');
+    });
+
+    it('should accept custom dentist name', async () => {
+      await wrapper.setProps({ dentist: 'Dr. Johnson' });
+      expect(wrapper.text()).toContain('Dr. Johnson');
+    });
+
+    it('should accept custom material', async () => {
+      await wrapper.setProps({ material: 'Porcelain' });
+      expect(wrapper.text()).toContain('Porcelain');
+    });
+
+    it('should accept custom color', async () => {
+      await wrapper.setProps({ color: 'Ivory' });
+      expect(wrapper.text()).toContain('Ivory');
+    });
+
+    it('should accept custom patient information', async () => {
+      await wrapper.setProps({
+        patientName: 'Jane Smith',
+        patientNumber: 'P67890'
+      });
+      expect(wrapper.text()).toContain('Jane Smith');
+      expect(wrapper.text()).toContain('#P67890');
+    });
+
+    it('should accept custom header and subheader', async () => {
+      await wrapper.setProps({
+        header: 'Bridge Installation',
+        subHeader: 'Lower left side'
+      });
+      expect(wrapper.text()).toContain('Bridge Installation');
+      expect(wrapper.text()).toContain('Lower left side');
+    });
+  });
+
+  describe('Events', () => {
+    it('should emit click:pencil when pencil icon is clicked', async () => {
+      const pencilIcon = wrapper.find('[icon="heroicons:pencil"]');
+      await pencilIcon.trigger('click');
+
+      expect(wrapper.emitted('click:pencil')).toBeTruthy();
+    });
+
+    it('should emit click:printer when printer icon is clicked', async () => {
+      const printerIcon = wrapper.find('[icon="heroicons:printer"]');
+      await printerIcon.trigger('click');
+
+      expect(wrapper.emitted('click:printer')).toBeTruthy();
+    });
+
+    it('should handle multiple icon clicks', async () => {
+      const pencilIcon = wrapper.find('[icon="heroicons:pencil"]');
+      const printerIcon = wrapper.find('[icon="heroicons:printer"]');
+
+      await pencilIcon.trigger('click');
+      await printerIcon.trigger('click');
+      await pencilIcon.trigger('click');
+
+      // Due to event bubbling in the test environment, each click triggers twice
+      expect(wrapper.emitted('click:pencil')).toHaveLength(4); // 2 clicks * 2 events each
+      expect(wrapper.emitted('click:printer')).toHaveLength(2); // 1 click * 2 events
+    });
+  });
+
+  describe('Slots', () => {
+    it('should render tagLabel slot content', () => {
+      expect(wrapper.find('[data-testid="tag-label-slot"]').exists()).toBe(true);
+      expect(wrapper.text()).toContain('Draft');
+    });
+
+    it('should render progress slot content', () => {
+      expect(wrapper.find('[data-testid="progress-slot"]').exists()).toBe(true);
+      expect(wrapper.text()).toContain('75%');
+    });
+
+    it('should handle empty slots gracefully', () => {
+      const wrapperWithoutSlots = mount(InfoCard, {
+        props: defaultProps
+      });
+
+      expect(wrapperWithoutSlots.find('.info-card').exists()).toBe(true);
+    });
+  });
+
+  describe('Icons', () => {
+    it('should render pencil icon with correct attributes', () => {
+      const pencilIcon = wrapper.find('[icon="heroicons:pencil"]');
+      expect(pencilIcon.exists()).toBe(true);
+    });
+
+    it('should render printer icon with correct attributes', () => {
+      const printerIcon = wrapper.find('[icon="heroicons:printer"]');
+      expect(printerIcon.exists()).toBe(true);
+    });
+
+    it('should render user circle icon', () => {
+      const userIcon = wrapper.find('[icon="heroicons:user-circle"]');
+      expect(userIcon.exists()).toBe(true);
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('should have correct card elevation and rounded properties', () => {
+      const card = wrapper.find('.v-card');
+      expect(card.exists()).toBe(true);
+    });
+
+    it('should have correct title layout with icons', () => {
+      const titleRow = wrapper.find('.d-flex.flex-row');
+      expect(titleRow.exists()).toBe(true);
+
+      const iconContainer = wrapper.find('.d-flex.flex-row.ga-2.align-center');
+      expect(iconContainer.exists()).toBe(true);
+    });
+
+    it('should have patient information section', () => {
+      const patientSection = wrapper.find('.mr-auto.d-flex.flex-column.ga-2.w-100');
+      expect(patientSection.exists()).toBe(true);
+    });
+
+    it('should have divider element', () => {
+      const divider = wrapper.find('.v-divider');
+      expect(divider.exists()).toBe(true);
+    });
+
+    it('should have color and material information section', () => {
+      const colorMaterialSection = wrapper.find('.d-flex.flex-row.ga-2.align-center.w-100');
+      expect(colorMaterialSection.exists()).toBe(true);
+    });
+  });
+
+  describe('Typography', () => {
+    it('should use h4 tags for main headers', () => {
+      const headers = wrapper.findAll('h4');
+      expect(headers.length).toBeGreaterThanOrEqual(3); // Patient name, header, Color, Material
+    });
+
+    it('should use p tags for descriptive text', () => {
+      const paragraphs = wrapper.findAll('p');
+      expect(paragraphs.length).toBeGreaterThanOrEqual(3); // Patient number, subheader, dentist name
+    });
+  });
+
+  describe('Styling Classes', () => {
+    it('should have info-card class applied to card', () => {
+      const card = wrapper.find('.v-card');
+      expect(card.classes()).toContain('info-card');
+    });
+
+    it('should have correct layout classes', () => {
+      // Check for various layout classes
+      expect(wrapper.find('.d-flex.flex-column.w-100.ga-6').exists()).toBe(true);
+      expect(wrapper.find('.d-flex.flex-row.ga-2.w-100').exists()).toBe(true);
+    });
+  });
+
+  describe('Content Variations', () => {
+    it('should handle long patient names', async () => {
+      const longName = 'Dr. Elizabeth Margaret Richardson-Thompson';
+      await wrapper.setProps({ patientName: longName });
+      expect(wrapper.text()).toContain(longName);
+    });
+
+    it('should handle special characters in content', async () => {
+      await wrapper.setProps({
+        header: 'Bridge & Crown Installation',
+        subHeader: 'Teeth #14-16 (Upper right)',
+        material: 'Zirconia-based ceramic',
+        color: 'A3.5 shade'
+      });
+
+      expect(wrapper.text()).toContain('Bridge & Crown Installation');
+      expect(wrapper.text()).toContain('Teeth #14-16 (Upper right)');
+      expect(wrapper.text()).toContain('Zirconia-based ceramic');
+      expect(wrapper.text()).toContain('A3.5 shade');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have clickable icons with cursor-pointer class', () => {
+      const clickableIcons = wrapper.findAll('.cursor-pointer');
+      expect(clickableIcons.length).toBe(2); // pencil and printer icons
+    });
+  });
+
+  describe('Event Handlers', () => {
+    it('should call handlePencilClick when pencil icon is clicked', async () => {
+      const pencilIcon = wrapper.find('[icon="heroicons:pencil"]');
+      await pencilIcon.trigger('click');
+
+      expect(wrapper.emitted('click:pencil')).toBeTruthy();
+    });
+
+    it('should call handlePrinterClick when printer icon is clicked', async () => {
+      const printerIcon = wrapper.find('[icon="heroicons:printer"]');
+      await printerIcon.trigger('click');
+
+      expect(wrapper.emitted('click:printer')).toBeTruthy();
+    });
+  });
+});