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

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

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