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

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

@@ -1,283 +1,283 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import ChatMessageBadge from '../../../../src/components/Laboratory/ChatMessage/ChatMessageBadge.vue';
-
-describe('ChatMessageBadge', () => {
-  let wrapper: VueWrapper;
-
-  const defaultProps = {
-    badgeColor: 'var(--Power-Red-0)',
-    icon: 'mdi-mail',
-    iconColor: 'white',
-    fabBaseColor: 'white',
-    fabColor: 'var(--Dental-Blue-0)',
-    fabIcon: '$vuetify',
-    fabText: 'MP',
-    textColor: 'white',
-  };
-
-  beforeEach(() => {
-    wrapper = mount(ChatMessageBadge, {
-      props: defaultProps,
-      global: {
-        stubs: {
-          'v-badge': {
-            template: '<div class="v-badge" :color="color"><slot name="badge" /><slot /></div>',
-            props: ['color']
-          },
-          'v-fab': {
-            template: '<button class="v-fab" :base-color="baseColor" :color="color" :readonly="readonly" :icon="icon" :size="size"><slot /></button>',
-            props: ['baseColor', 'color', 'readonly', 'icon', 'size']
-          },
-          'v-icon': {
-            template: '<i class="v-icon" :color="color" :icon="icon"></i>',
-            props: ['color', 'icon']
-          }
-        }
-      }
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component', () => {
-      expect(wrapper.find('.v-badge').exists()).toBe(true);
-      expect(wrapper.find('.v-fab').exists()).toBe(true);
-    });
-
-    it('should display FAB text', () => {
-      expect(wrapper.text()).toContain('MP');
-    });
-
-    it('should render badge with icon', () => {
-      expect(wrapper.find('.v-icon').exists()).toBe(true);
-    });
-
-    it('should render FAB with readonly attribute', () => {
-      const fab = wrapper.find('.v-fab');
-      expect(fab.attributes('readonly')).toBe('');
-    });
-  });
-
-  describe('Props', () => {
-    it('should use default badge color when not provided', async () => {
-      await wrapper.setProps({ badgeColor: undefined });
-      const badge = wrapper.find('.v-badge');
-      expect(badge.attributes('color')).toBe('var(--Power-Red-0)');
-    });
-
-    it('should accept custom badge color', async () => {
-      await wrapper.setProps({ badgeColor: 'red' });
-      const badge = wrapper.find('.v-badge');
-      expect(badge.attributes('color')).toBe('red');
-    });
-
-    it('should use default icon when not provided', async () => {
-      await wrapper.setProps({ icon: undefined });
-      const icon = wrapper.find('.v-icon');
-      expect(icon.attributes('icon')).toBe('mdi-mail');
-    });
-
-    it('should accept custom icon', async () => {
-      await wrapper.setProps({ icon: 'mdi-phone' });
-      const icon = wrapper.find('.v-icon');
-      expect(icon.attributes('icon')).toBe('mdi-phone');
-    });
-
-    it('should use default icon color when not provided', async () => {
-      await wrapper.setProps({ iconColor: undefined });
-      const icon = wrapper.find('.v-icon');
-      expect(icon.attributes('color')).toBe('white');
-    });
-
-    it('should accept custom icon color', async () => {
-      await wrapper.setProps({ iconColor: 'blue' });
-      const icon = wrapper.find('.v-icon');
-      expect(icon.attributes('color')).toBe('blue');
-    });
-
-    it('should use default FAB base color when not provided', async () => {
-      await wrapper.setProps({ fabBaseColor: undefined });
-      const fab = wrapper.find('.v-fab');
-      expect(fab.attributes('base-color')).toBe('white');
-    });
-
-    it('should accept custom FAB base color', async () => {
-      await wrapper.setProps({ fabBaseColor: 'gray' });
-      const fab = wrapper.find('.v-fab');
-      expect(fab.attributes('base-color')).toBe('gray');
-    });
-
-    it('should use default FAB color when not provided', async () => {
-      await wrapper.setProps({ fabColor: undefined });
-      const fab = wrapper.find('.v-fab');
-      expect(fab.attributes('color')).toBe('var(--Dental-Blue-0)');
-    });
-
-    it('should accept custom FAB color', async () => {
-      await wrapper.setProps({ fabColor: 'green' });
-      const fab = wrapper.find('.v-fab');
-      expect(fab.attributes('color')).toBe('green');
-    });
-
-    it('should use default FAB icon when not provided', async () => {
-      await wrapper.setProps({ fabIcon: undefined });
-      const fab = wrapper.find('.v-fab');
-      expect(fab.attributes('icon')).toBe('$vuetify');
-    });
-
-    it('should accept custom FAB icon', async () => {
-      await wrapper.setProps({ fabIcon: 'mdi-account' });
-      const fab = wrapper.find('.v-fab');
-      expect(fab.attributes('icon')).toBe('mdi-account');
-    });
-
-    it('should use default FAB text when not provided', async () => {
-      await wrapper.setProps({ fabText: undefined });
-      expect(wrapper.text()).toContain('Mj');
-    });
-
-    it('should accept custom FAB text', async () => {
-      await wrapper.setProps({ fabText: 'JD' });
-      expect(wrapper.text()).toContain('JD');
-    });
-
-    it('should use default text color when not provided', async () => {
-      await wrapper.setProps({ textColor: undefined });
-      const textElement = wrapper.find('span');
-      expect(textElement.exists()).toBe(true);
-      expect(wrapper.vm.textColor).toBe('white');
-    });
-
-    it('should accept custom text color', async () => {
-      await wrapper.setProps({ textColor: 'black' });
-      const textElement = wrapper.find('span');
-      expect(textElement.exists()).toBe(true);
-      expect(wrapper.vm.textColor).toBe('black');
-    });
-  });
-
-  describe('Badge Properties', () => {
-    it('should have correct badge structure', () => {
-      const badge = wrapper.find('.v-badge');
-      expect(badge.exists()).toBe(true);
-      expect(badge.attributes('color')).toBe('var(--Power-Red-0)');
-    });
-
-    it('should render icon in badge slot', () => {
-      const badgeIcon = wrapper.find('.v-icon');
-      expect(badgeIcon.exists()).toBe(true);
-      expect(badgeIcon.attributes('icon')).toBe('mdi-mail');
-      expect(badgeIcon.attributes('color')).toBe('white');
-    });
-  });
-
-  describe('FAB Properties', () => {
-    it('should have correct FAB attributes', () => {
-      const fab = wrapper.find('.v-fab');
-      expect(fab.attributes('base-color')).toBe('white');
-      expect(fab.attributes('color')).toBe('var(--Dental-Blue-0)');
-      expect(fab.attributes('readonly')).toBeDefined();
-      expect(fab.attributes('icon')).toBe('$vuetify');
-      expect(fab.attributes('size')).toBe('x-small');
-    });
-
-    it('should contain text span with correct styling', () => {
-      const textSpan = wrapper.find('span');
-      expect(textSpan.exists()).toBe(true);
-      expect(textSpan.text()).toBe('MP');
-      expect(wrapper.vm.textColor).toBe('white');
-    });
-  });
-
-  describe('Styling and Layout', () => {
-    it('should apply correct FAB size', () => {
-      const fab = wrapper.find('.v-fab');
-      expect(fab.attributes('size')).toBe('x-small');
-    });
-
-    it('should have badge as parent and FAB as child', () => {
-      const badge = wrapper.find('.v-badge');
-      const fab = wrapper.find('.v-fab');
-
-      expect(badge.exists()).toBe(true);
-      expect(fab.exists()).toBe(true);
-
-      // FAB should be inside the badge
-      expect(badge.element.contains(fab.element)).toBe(true);
-    });
-  });
-
-  describe('Text Content', () => {
-    it('should render text content correctly', async () => {
-      await wrapper.setProps({ fabText: 'AB' });
-      expect(wrapper.text()).toContain('AB');
-    });
-
-    it('should handle empty text', async () => {
-      await wrapper.setProps({ fabText: '' });
-      const textSpan = wrapper.find('span');
-      expect(textSpan.text()).toBe('');
-    });
-
-    it('should handle longer text', async () => {
-      await wrapper.setProps({ fabText: 'TEST' });
-      const textSpan = wrapper.find('span');
-      expect(textSpan.text()).toBe('TEST');
-    });
-  });
-
-  describe('Color Variations', () => {
-    it('should apply different badge colors correctly', async () => {
-      const colors = ['red', 'blue', 'green', 'yellow'];
-
-      for (const color of colors) {
-        await wrapper.setProps({ badgeColor: color });
-        const badge = wrapper.find('.v-badge');
-        expect(badge.attributes('color')).toBe(color);
-      }
-    });
-
-    it('should apply different FAB colors correctly', async () => {
-      const colors = ['red', 'blue', 'green', 'yellow'];
-
-      for (const color of colors) {
-        await wrapper.setProps({ fabColor: color });
-        const fab = wrapper.find('.v-fab');
-        expect(fab.attributes('color')).toBe(color);
-      }
-    });
-
-    it('should apply different text colors correctly', async () => {
-      const colors = ['red', 'blue', 'green', 'yellow'];
-
-      for (const color of colors) {
-        await wrapper.setProps({ textColor: color });
-        const textSpan = wrapper.find('span');
-        expect(textSpan.exists()).toBe(true);
-        expect(wrapper.vm.textColor).toBe(color);
-      }
-    });
-  });
-
-  describe('Icon Variations', () => {
-    it('should handle different icons correctly', async () => {
-      const icons = ['mdi-phone', 'mdi-email', 'mdi-account', 'mdi-home'];
-
-      for (const icon of icons) {
-        await wrapper.setProps({ icon: icon });
-        const iconElement = wrapper.find('.v-icon');
-        expect(iconElement.attributes('icon')).toBe(icon);
-      }
-    });
-
-    it('should handle different FAB icons correctly', async () => {
-      const fabIcons = ['mdi-plus', 'mdi-edit', 'mdi-delete', 'mdi-check'];
-
-      for (const fabIcon of fabIcons) {
-        await wrapper.setProps({ fabIcon: fabIcon });
-        const fab = wrapper.find('.v-fab');
-        expect(fab.attributes('icon')).toBe(fabIcon);
-      }
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import ChatMessageBadge from '../../../../src/components/Laboratory/ChatMessage/ChatMessageBadge.vue';
+
+describe('ChatMessageBadge', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    badgeColor: 'var(--Power-Red-0)',
+    icon: 'mdi-mail',
+    iconColor: 'white',
+    fabBaseColor: 'white',
+    fabColor: 'var(--Dental-Blue-0)',
+    fabIcon: '$vuetify',
+    fabText: 'MP',
+    textColor: 'white',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(ChatMessageBadge, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          'v-badge': {
+            template: '<div class="v-badge" :color="color"><slot name="badge" /><slot /></div>',
+            props: ['color']
+          },
+          'v-fab': {
+            template: '<button class="v-fab" :base-color="baseColor" :color="color" :readonly="readonly" :icon="icon" :size="size"><slot /></button>',
+            props: ['baseColor', 'color', 'readonly', 'icon', 'size']
+          },
+          'v-icon': {
+            template: '<i class="v-icon" :color="color" :icon="icon"></i>',
+            props: ['color', 'icon']
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('.v-badge').exists()).toBe(true);
+      expect(wrapper.find('.v-fab').exists()).toBe(true);
+    });
+
+    it('should display FAB text', () => {
+      expect(wrapper.text()).toContain('MP');
+    });
+
+    it('should render badge with icon', () => {
+      expect(wrapper.find('.v-icon').exists()).toBe(true);
+    });
+
+    it('should render FAB with readonly attribute', () => {
+      const fab = wrapper.find('.v-fab');
+      expect(fab.attributes('readonly')).toBe('');
+    });
+  });
+
+  describe('Props', () => {
+    it('should use default badge color when not provided', async () => {
+      await wrapper.setProps({ badgeColor: undefined });
+      const badge = wrapper.find('.v-badge');
+      expect(badge.attributes('color')).toBe('var(--Power-Red-0)');
+    });
+
+    it('should accept custom badge color', async () => {
+      await wrapper.setProps({ badgeColor: 'red' });
+      const badge = wrapper.find('.v-badge');
+      expect(badge.attributes('color')).toBe('red');
+    });
+
+    it('should use default icon when not provided', async () => {
+      await wrapper.setProps({ icon: undefined });
+      const icon = wrapper.find('.v-icon');
+      expect(icon.attributes('icon')).toBe('mdi-mail');
+    });
+
+    it('should accept custom icon', async () => {
+      await wrapper.setProps({ icon: 'mdi-phone' });
+      const icon = wrapper.find('.v-icon');
+      expect(icon.attributes('icon')).toBe('mdi-phone');
+    });
+
+    it('should use default icon color when not provided', async () => {
+      await wrapper.setProps({ iconColor: undefined });
+      const icon = wrapper.find('.v-icon');
+      expect(icon.attributes('color')).toBe('white');
+    });
+
+    it('should accept custom icon color', async () => {
+      await wrapper.setProps({ iconColor: 'blue' });
+      const icon = wrapper.find('.v-icon');
+      expect(icon.attributes('color')).toBe('blue');
+    });
+
+    it('should use default FAB base color when not provided', async () => {
+      await wrapper.setProps({ fabBaseColor: undefined });
+      const fab = wrapper.find('.v-fab');
+      expect(fab.attributes('base-color')).toBe('white');
+    });
+
+    it('should accept custom FAB base color', async () => {
+      await wrapper.setProps({ fabBaseColor: 'gray' });
+      const fab = wrapper.find('.v-fab');
+      expect(fab.attributes('base-color')).toBe('gray');
+    });
+
+    it('should use default FAB color when not provided', async () => {
+      await wrapper.setProps({ fabColor: undefined });
+      const fab = wrapper.find('.v-fab');
+      expect(fab.attributes('color')).toBe('var(--Dental-Blue-0)');
+    });
+
+    it('should accept custom FAB color', async () => {
+      await wrapper.setProps({ fabColor: 'green' });
+      const fab = wrapper.find('.v-fab');
+      expect(fab.attributes('color')).toBe('green');
+    });
+
+    it('should use default FAB icon when not provided', async () => {
+      await wrapper.setProps({ fabIcon: undefined });
+      const fab = wrapper.find('.v-fab');
+      expect(fab.attributes('icon')).toBe('$vuetify');
+    });
+
+    it('should accept custom FAB icon', async () => {
+      await wrapper.setProps({ fabIcon: 'mdi-account' });
+      const fab = wrapper.find('.v-fab');
+      expect(fab.attributes('icon')).toBe('mdi-account');
+    });
+
+    it('should use default FAB text when not provided', async () => {
+      await wrapper.setProps({ fabText: undefined });
+      expect(wrapper.text()).toContain('Mj');
+    });
+
+    it('should accept custom FAB text', async () => {
+      await wrapper.setProps({ fabText: 'JD' });
+      expect(wrapper.text()).toContain('JD');
+    });
+
+    it('should use default text color when not provided', async () => {
+      await wrapper.setProps({ textColor: undefined });
+      const textElement = wrapper.find('span');
+      expect(textElement.exists()).toBe(true);
+      expect(wrapper.vm.textColor).toBe('white');
+    });
+
+    it('should accept custom text color', async () => {
+      await wrapper.setProps({ textColor: 'black' });
+      const textElement = wrapper.find('span');
+      expect(textElement.exists()).toBe(true);
+      expect(wrapper.vm.textColor).toBe('black');
+    });
+  });
+
+  describe('Badge Properties', () => {
+    it('should have correct badge structure', () => {
+      const badge = wrapper.find('.v-badge');
+      expect(badge.exists()).toBe(true);
+      expect(badge.attributes('color')).toBe('var(--Power-Red-0)');
+    });
+
+    it('should render icon in badge slot', () => {
+      const badgeIcon = wrapper.find('.v-icon');
+      expect(badgeIcon.exists()).toBe(true);
+      expect(badgeIcon.attributes('icon')).toBe('mdi-mail');
+      expect(badgeIcon.attributes('color')).toBe('white');
+    });
+  });
+
+  describe('FAB Properties', () => {
+    it('should have correct FAB attributes', () => {
+      const fab = wrapper.find('.v-fab');
+      expect(fab.attributes('base-color')).toBe('white');
+      expect(fab.attributes('color')).toBe('var(--Dental-Blue-0)');
+      expect(fab.attributes('readonly')).toBeDefined();
+      expect(fab.attributes('icon')).toBe('$vuetify');
+      expect(fab.attributes('size')).toBe('x-small');
+    });
+
+    it('should contain text span with correct styling', () => {
+      const textSpan = wrapper.find('span');
+      expect(textSpan.exists()).toBe(true);
+      expect(textSpan.text()).toBe('MP');
+      expect(wrapper.vm.textColor).toBe('white');
+    });
+  });
+
+  describe('Styling and Layout', () => {
+    it('should apply correct FAB size', () => {
+      const fab = wrapper.find('.v-fab');
+      expect(fab.attributes('size')).toBe('x-small');
+    });
+
+    it('should have badge as parent and FAB as child', () => {
+      const badge = wrapper.find('.v-badge');
+      const fab = wrapper.find('.v-fab');
+
+      expect(badge.exists()).toBe(true);
+      expect(fab.exists()).toBe(true);
+
+      // FAB should be inside the badge
+      expect(badge.element.contains(fab.element)).toBe(true);
+    });
+  });
+
+  describe('Text Content', () => {
+    it('should render text content correctly', async () => {
+      await wrapper.setProps({ fabText: 'AB' });
+      expect(wrapper.text()).toContain('AB');
+    });
+
+    it('should handle empty text', async () => {
+      await wrapper.setProps({ fabText: '' });
+      const textSpan = wrapper.find('span');
+      expect(textSpan.text()).toBe('');
+    });
+
+    it('should handle longer text', async () => {
+      await wrapper.setProps({ fabText: 'TEST' });
+      const textSpan = wrapper.find('span');
+      expect(textSpan.text()).toBe('TEST');
+    });
+  });
+
+  describe('Color Variations', () => {
+    it('should apply different badge colors correctly', async () => {
+      const colors = ['red', 'blue', 'green', 'yellow'];
+
+      for (const color of colors) {
+        await wrapper.setProps({ badgeColor: color });
+        const badge = wrapper.find('.v-badge');
+        expect(badge.attributes('color')).toBe(color);
+      }
+    });
+
+    it('should apply different FAB colors correctly', async () => {
+      const colors = ['red', 'blue', 'green', 'yellow'];
+
+      for (const color of colors) {
+        await wrapper.setProps({ fabColor: color });
+        const fab = wrapper.find('.v-fab');
+        expect(fab.attributes('color')).toBe(color);
+      }
+    });
+
+    it('should apply different text colors correctly', async () => {
+      const colors = ['red', 'blue', 'green', 'yellow'];
+
+      for (const color of colors) {
+        await wrapper.setProps({ textColor: color });
+        const textSpan = wrapper.find('span');
+        expect(textSpan.exists()).toBe(true);
+        expect(wrapper.vm.textColor).toBe(color);
+      }
+    });
+  });
+
+  describe('Icon Variations', () => {
+    it('should handle different icons correctly', async () => {
+      const icons = ['mdi-phone', 'mdi-email', 'mdi-account', 'mdi-home'];
+
+      for (const icon of icons) {
+        await wrapper.setProps({ icon: icon });
+        const iconElement = wrapper.find('.v-icon');
+        expect(iconElement.attributes('icon')).toBe(icon);
+      }
+    });
+
+    it('should handle different FAB icons correctly', async () => {
+      const fabIcons = ['mdi-plus', 'mdi-edit', 'mdi-delete', 'mdi-check'];
+
+      for (const fabIcon of fabIcons) {
+        await wrapper.setProps({ fabIcon: fabIcon });
+        const fab = wrapper.find('.v-fab');
+        expect(fab.attributes('icon')).toBe(fabIcon);
+      }
+    });
+  });
 });