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

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

@@ -1,168 +1,168 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import AppointmentCard from '../../../../src/components/Laboratory/AppointmentCard/AppointmentCard.vue';
-
-describe('AppointmentCard', () => {
-  let wrapper: VueWrapper;
-
-  const defaultProps = {
-    date: '2024-01-15',
-    status: 'Done',
-    treatmentName: 'Root Canal',
-  };
-
-  beforeEach(() => {
-    wrapper = mount(AppointmentCard, {
-      props: defaultProps,
-      global: {
-        stubs: {
-          'TagLabel': {
-            template: '<div data-testid="tag-label">{{ status }}</div>',
-            props: ['status']
-          },
-          'v-btn': {
-            template: '<button class="v-btn" :readonly="readonly" :variant="variant" :prepend-icon="prependIcon" :size="size" :style="$attrs.style"><slot /></button>',
-            props: ['readonly', 'variant', 'prependIcon', 'size', 'rounded', 'color', 'appendIcon']
-          }
-        }
-      }
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component', () => {
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('.appointment-card').exists()).toBe(true);
-    });
-
-    it('should display the date', () => {
-      expect(wrapper.text()).toContain('2024-01-15');
-    });
-
-    it('should display the treatment name', () => {
-      expect(wrapper.text()).toContain('Root Canal');
-    });
-
-    it('should display status label', () => {
-      expect(wrapper.text()).toContain('Status:');
-      const tagLabel = wrapper.find('[data-testid="tag-label"]');
-      expect(tagLabel.exists()).toBe(true);
-      expect(tagLabel.text()).toBe('Done');
-    });
-
-    it('should display the default dentist name', () => {
-      expect(wrapper.text()).toContain('Martin Paetz');
-    });
-
-    it('should render two buttons', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons).toHaveLength(2);
-    });
-  });
-
-  describe('Props', () => {
-    it('should accept custom dentist name', async () => {
-      await wrapper.setProps({ dentistName: 'Dr. Smith' });
-      expect(wrapper.text()).toContain('Dr. Smith');
-    });
-
-    it('should accept custom button text color', async () => {
-      await wrapper.setProps({ buttonTextColor: '--custom-color' });
-      const button = wrapper.find('.v-btn');
-      expect(button.element.style.color).toContain('var(--custom-color)');
-    });
-
-    it('should accept custom button background color', async () => {
-      await wrapper.setProps({ buttonBackgroundColor: 'rgba(255, 0, 0, 0.5)' });
-      const button = wrapper.find('.v-btn');
-      expect(button.element.style.backgroundColor).toBe('rgba(255, 0, 0, 0.5)');
-    });
-
-    it('should accept custom button border color', async () => {
-      await wrapper.setProps({ buttonBorderColor: '--border-color' });
-      const button = wrapper.find('.v-btn');
-      const style = button.attributes('style');
-      expect(style).toContain('border:');
-      expect(style).toContain('--border-color');
-    });
-
-    it('should update when date prop changes', async () => {
-      await wrapper.setProps({ date: '2024-12-25' });
-      expect(wrapper.text()).toContain('2024-12-25');
-    });
-
-    it('should update when status prop changes', async () => {
-      await wrapper.setProps({ status: 'In Progress' });
-      const tagLabel = wrapper.find('[data-testid="tag-label"]');
-      expect(tagLabel.text()).toBe('In Progress');
-    });
-
-    it('should update when treatment name changes', async () => {
-      await wrapper.setProps({ treatmentName: 'Crown Installation' });
-      expect(wrapper.text()).toContain('Crown Installation');
-    });
-  });
-
-  describe('Button Properties', () => {
-    it('should have readonly treatment button', () => {
-      const treatmentButton = wrapper.findAll('.v-btn')[0];
-      expect(treatmentButton.attributes('readonly')).toBe('');
-    });
-
-    it('should have readonly dentist button', () => {
-      const dentistButton = wrapper.findAll('.v-btn')[1];
-      expect(dentistButton.attributes('readonly')).toBe('');
-    });
-
-    it('should have correct icons on buttons', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons[0].attributes('prepend-icon')).toBe('heroicons:document-check');
-      expect(buttons[1].attributes('prepend-icon')).toBe('heroicons:user-circle');
-    });
-
-    it('should have correct button sizes', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      buttons.forEach(button => {
-        expect(button.attributes('size')).toBe('compact');
-      });
-    });
-  });
-
-  describe('Styling', () => {
-    it('should apply correct card styling', () => {
-      const card = wrapper.find('.v-card');
-      expect(card.attributes('elevation')).toBe('0');
-      expect(card.attributes('rounded')).toBe('lg');
-    });
-
-    it('should have correct button variants', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons[0].attributes('variant')).toBe('outlined');
-      expect(buttons[1].attributes('variant')).toBe('text');
-    });
-
-    it('should apply text-none class to buttons', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      buttons.forEach(button => {
-        expect(button.classes()).toContain('text-none');
-      });
-    });
-  });
-
-  describe('Layout', () => {
-    it('should have flex layout for title', () => {
-      const titleDiv = wrapper.find('.d-flex.flex-row.align-center');
-      expect(titleDiv.exists()).toBe(true);
-    });
-
-    it('should have flex column layout for content', () => {
-      const contentDiv = wrapper.find('.d-flex.flex-column.ga-4');
-      expect(contentDiv.exists()).toBe(true);
-    });
-
-    it('should have mr-auto class for proper spacing', () => {
-      const elements = wrapper.findAll('.mr-auto');
-      expect(elements.length).toBeGreaterThan(0);
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import AppointmentCard from '../../../../src/components/Laboratory/AppointmentCard/AppointmentCard.vue';
+
+describe('AppointmentCard', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    date: '2024-01-15',
+    status: 'Done',
+    treatmentName: 'Root Canal',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(AppointmentCard, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          'TagLabel': {
+            template: '<div data-testid="tag-label">{{ status }}</div>',
+            props: ['status']
+          },
+          'v-btn': {
+            template: '<button class="v-btn" :readonly="readonly" :variant="variant" :prepend-icon="prependIcon" :size="size" :style="$attrs.style"><slot /></button>',
+            props: ['readonly', 'variant', 'prependIcon', 'size', 'rounded', 'color', 'appendIcon']
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.appointment-card').exists()).toBe(true);
+    });
+
+    it('should display the date', () => {
+      expect(wrapper.text()).toContain('2024-01-15');
+    });
+
+    it('should display the treatment name', () => {
+      expect(wrapper.text()).toContain('Root Canal');
+    });
+
+    it('should display status label', () => {
+      expect(wrapper.text()).toContain('Status:');
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.exists()).toBe(true);
+      expect(tagLabel.text()).toBe('Done');
+    });
+
+    it('should display the default dentist name', () => {
+      expect(wrapper.text()).toContain('Martin Paetz');
+    });
+
+    it('should render two buttons', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons).toHaveLength(2);
+    });
+  });
+
+  describe('Props', () => {
+    it('should accept custom dentist name', async () => {
+      await wrapper.setProps({ dentistName: 'Dr. Smith' });
+      expect(wrapper.text()).toContain('Dr. Smith');
+    });
+
+    it('should accept custom button text color', async () => {
+      await wrapper.setProps({ buttonTextColor: '--custom-color' });
+      const button = wrapper.find('.v-btn');
+      expect(button.element.style.color).toContain('var(--custom-color)');
+    });
+
+    it('should accept custom button background color', async () => {
+      await wrapper.setProps({ buttonBackgroundColor: 'rgba(255, 0, 0, 0.5)' });
+      const button = wrapper.find('.v-btn');
+      expect(button.element.style.backgroundColor).toBe('rgba(255, 0, 0, 0.5)');
+    });
+
+    it('should accept custom button border color', async () => {
+      await wrapper.setProps({ buttonBorderColor: '--border-color' });
+      const button = wrapper.find('.v-btn');
+      const style = button.attributes('style');
+      expect(style).toContain('border:');
+      expect(style).toContain('--border-color');
+    });
+
+    it('should update when date prop changes', async () => {
+      await wrapper.setProps({ date: '2024-12-25' });
+      expect(wrapper.text()).toContain('2024-12-25');
+    });
+
+    it('should update when status prop changes', async () => {
+      await wrapper.setProps({ status: 'In Progress' });
+      const tagLabel = wrapper.find('[data-testid="tag-label"]');
+      expect(tagLabel.text()).toBe('In Progress');
+    });
+
+    it('should update when treatment name changes', async () => {
+      await wrapper.setProps({ treatmentName: 'Crown Installation' });
+      expect(wrapper.text()).toContain('Crown Installation');
+    });
+  });
+
+  describe('Button Properties', () => {
+    it('should have readonly treatment button', () => {
+      const treatmentButton = wrapper.findAll('.v-btn')[0];
+      expect(treatmentButton.attributes('readonly')).toBe('');
+    });
+
+    it('should have readonly dentist button', () => {
+      const dentistButton = wrapper.findAll('.v-btn')[1];
+      expect(dentistButton.attributes('readonly')).toBe('');
+    });
+
+    it('should have correct icons on buttons', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons[0].attributes('prepend-icon')).toBe('heroicons:document-check');
+      expect(buttons[1].attributes('prepend-icon')).toBe('heroicons:user-circle');
+    });
+
+    it('should have correct button sizes', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      buttons.forEach(button => {
+        expect(button.attributes('size')).toBe('compact');
+      });
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply correct card styling', () => {
+      const card = wrapper.find('.v-card');
+      expect(card.attributes('elevation')).toBe('0');
+      expect(card.attributes('rounded')).toBe('lg');
+    });
+
+    it('should have correct button variants', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons[0].attributes('variant')).toBe('outlined');
+      expect(buttons[1].attributes('variant')).toBe('text');
+    });
+
+    it('should apply text-none class to buttons', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      buttons.forEach(button => {
+        expect(button.classes()).toContain('text-none');
+      });
+    });
+  });
+
+  describe('Layout', () => {
+    it('should have flex layout for title', () => {
+      const titleDiv = wrapper.find('.d-flex.flex-row.align-center');
+      expect(titleDiv.exists()).toBe(true);
+    });
+
+    it('should have flex column layout for content', () => {
+      const contentDiv = wrapper.find('.d-flex.flex-column.ga-4');
+      expect(contentDiv.exists()).toBe(true);
+    });
+
+    it('should have mr-auto class for proper spacing', () => {
+      const elements = wrapper.findAll('.mr-auto');
+      expect(elements.length).toBeGreaterThan(0);
+    });
+  });
 });