@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,264 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import ChatMessage from '../../../../src/components/Laboratory/ChatMessage/ChatMessage.vue';
+
+describe('ChatMessage', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    type: 'income',
+    username: 'John Doe',
+    time: '14:30',
+    message: 'Hello, this is a test message',
+  };
+
+  beforeEach(() => {
+    wrapper = mount(ChatMessage, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          'ChatMessageBadge': {
+            template: '<div data-testid="chat-message-badge">{{ fabText }}</div>',
+            props: ['fabText']
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.v-alert').exists()).toBe(true);
+    });
+
+    it('should display the username', () => {
+      expect(wrapper.text()).toContain('John Doe');
+    });
+
+    it('should display the time', () => {
+      expect(wrapper.text()).toContain('14:30');
+    });
+
+    it('should display the message', () => {
+      expect(wrapper.text()).toContain('Hello, this is a test message');
+    });
+
+    it('should display badge for income type', () => {
+      expect(wrapper.find('[data-testid="chat-message-badge"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Props', () => {
+    it('should require type prop', async () => {
+      // Type prop is required, so test with valid values
+      await wrapper.setProps({ type: 'outcome' });
+      expect(wrapper.find('.v-alert').exists()).toBe(true);
+    });
+
+    it('should validate type prop correctly', () => {
+      // The component should only accept 'income' or 'outcome'
+      const props = wrapper.vm.$props;
+      expect(['income', 'outcome']).toContain(props.type);
+    });
+
+    it('should use default username when not provided', async () => {
+      await wrapper.setProps({ username: undefined });
+      expect(wrapper.text()).toContain('Martin Paetz');
+    });
+
+    it('should use default time when not provided', async () => {
+      await wrapper.setProps({ time: undefined });
+      expect(wrapper.text()).toContain('11:24');
+    });
+
+    it('should use default message when not provided', async () => {
+      await wrapper.setProps({ message: undefined });
+      expect(wrapper.text()).toContain('Lorem ipsum dolor sit amet...');
+    });
+
+    it('should accept custom username', async () => {
+      await wrapper.setProps({ username: 'Jane Smith' });
+      expect(wrapper.text()).toContain('Jane Smith');
+    });
+
+    it('should accept custom time', async () => {
+      await wrapper.setProps({ time: '09:15' });
+      expect(wrapper.text()).toContain('09:15');
+    });
+
+    it('should accept custom message', async () => {
+      const customMessage = 'This is a custom test message for validation';
+      await wrapper.setProps({ message: customMessage });
+      expect(wrapper.text()).toContain(customMessage);
+    });
+  });
+
+  describe('Message Types', () => {
+    it('should render badge before message for income type', async () => {
+      await wrapper.setProps({ type: 'income' });
+      const badge = wrapper.find('[data-testid="chat-message-badge"]');
+      const alert = wrapper.find('.v-alert');
+
+      expect(badge.exists()).toBe(true);
+      // Badge should appear before the alert in DOM
+      const badgeElement = badge.element;
+      const alertElement = alert.element;
+      expect(badgeElement.compareDocumentPosition(alertElement) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
+
+    it('should render badge after message for outcome type', async () => {
+      await wrapper.setProps({ type: 'outcome' });
+      const badge = wrapper.find('[data-testid="chat-message-badge"]');
+      const alert = wrapper.find('.v-alert');
+
+      expect(badge.exists()).toBe(true);
+      // Badge should appear after the alert in DOM
+      const badgeElement = badge.element;
+      const alertElement = alert.element;
+      expect(alertElement.compareDocumentPosition(badgeElement) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    });
+
+    it('should have correct styling for income type', async () => {
+      await wrapper.setProps({ type: 'income' });
+      const alert = wrapper.find('.v-alert');
+      expect(alert.attributes('color')).toBe('var(--Dental-Light-Blue--2)');
+    });
+
+    it('should have correct styling for outcome type', async () => {
+      await wrapper.setProps({ type: 'outcome' });
+      const alert = wrapper.find('.v-alert');
+      expect(alert.attributes('color')).toBe('white');
+    });
+  });
+
+  describe('FAB Text Computation', () => {
+    it('should compute FAB text from username correctly', async () => {
+      await wrapper.setProps({ username: 'John Doe' });
+      const badge = wrapper.find('[data-testid="chat-message-badge"]');
+      expect(badge.text()).toBe('JD');
+    });
+
+    it('should handle single name', async () => {
+      await wrapper.setProps({ username: 'John' });
+      const badge = wrapper.find('[data-testid="chat-message-badge"]');
+      expect(badge.text()).toBe('JJ'); // Single name uses same letter twice
+    });
+
+    it('should handle multiple names', async () => {
+      await wrapper.setProps({ username: 'John Michael Doe Smith' });
+      const badge = wrapper.find('[data-testid="chat-message-badge"]');
+      expect(badge.text()).toBe('JS'); // First and last name initials
+    });
+
+    it('should handle empty username', async () => {
+      await wrapper.setProps({ username: '' });
+      const badge = wrapper.find('[data-testid="chat-message-badge"]');
+      expect(badge.text()).toBe('');
+    });
+
+    it('should convert FAB text to uppercase', async () => {
+      await wrapper.setProps({ username: 'jane doe' });
+      const badge = wrapper.find('[data-testid="chat-message-badge"]');
+      expect(badge.text()).toBe('JD');
+    });
+  });
+
+  describe('Slots', () => {
+    it('should render custom title slot content', () => {
+      const wrapperWithSlot = mount(ChatMessage, {
+        props: defaultProps,
+        slots: {
+          title: '<div data-testid="custom-title">Custom Title Content</div>'
+        },
+        global: {
+          stubs: {
+            'ChatMessageBadge': {
+              template: '<div data-testid="chat-message-badge">{{ fabText }}</div>',
+              props: ['fabText']
+            }
+          }
+        }
+      });
+
+      expect(wrapperWithSlot.find('[data-testid="custom-title"]').exists()).toBe(true);
+      expect(wrapperWithSlot.text()).toContain('Custom Title Content');
+    });
+
+    it('should render custom text slot content', () => {
+      const wrapperWithSlot = mount(ChatMessage, {
+        props: defaultProps,
+        slots: {
+          text: '<div data-testid="custom-text">Custom Message Content</div>'
+        },
+        global: {
+          stubs: {
+            'ChatMessageBadge': {
+              template: '<div data-testid="chat-message-badge">{{ fabText }}</div>',
+              props: ['fabText']
+            }
+          }
+        }
+      });
+
+      expect(wrapperWithSlot.find('[data-testid="custom-text"]').exists()).toBe(true);
+      expect(wrapperWithSlot.text()).toContain('Custom Message Content');
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('should have correct root layout classes', () => {
+      const root = wrapper.find('[data-testid="root"]');
+      expect(root.classes()).toContain('d-flex');
+      expect(root.classes()).toContain('flex-row');
+      expect(root.classes()).toContain('ga-2');
+      expect(root.classes()).toContain('align-end');
+    });
+
+    it('should have correct alert styling', () => {
+      const alert = wrapper.find('.v-alert');
+      expect(alert.attributes('rounded')).toBe('lg');
+    });
+
+    it('should have correct title layout', () => {
+      const titleDiv = wrapper.find('.d-flex.flex-row.w-100.align-center.mb-1');
+      expect(titleDiv.exists()).toBe(true);
+    });
+
+    it('should have badge container with correct styling for income', async () => {
+      await wrapper.setProps({ type: 'income' });
+      const badgeContainer = wrapper.find('div[style*="width: 40px"]');
+      expect(badgeContainer.exists()).toBe(true);
+    });
+
+    it('should have badge container with correct styling for outcome', async () => {
+      await wrapper.setProps({ type: 'outcome' });
+      const badgeContainer = wrapper.find('div[style*="width: 50px"]');
+      expect(badgeContainer.exists()).toBe(true);
+    });
+  });
+
+  describe('Computed Properties', () => {
+    it('should compute message color correctly for income', async () => {
+      await wrapper.setProps({ type: 'income' });
+      const alert = wrapper.find('.v-alert');
+      expect(alert.attributes('color')).toBe('var(--Dental-Light-Blue--2)');
+    });
+
+    it('should compute message color correctly for outcome', async () => {
+      await wrapper.setProps({ type: 'outcome' });
+      const alert = wrapper.find('.v-alert');
+      expect(alert.attributes('color')).toBe('white');
+    });
+
+    it('should compute text color correctly', () => {
+      // Text color is applied via style attribute in the template
+      const usernameElement = wrapper.find('h5');
+      const timeElement = wrapper.find('.p-regular');
+
+      // For income type, text color should be set
+      expect(usernameElement.exists()).toBe(true);
+      expect(timeElement.exists()).toBe(true);
+    });
+  });
+});

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

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