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

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

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