@zap-wunschlachen/wl-shared-components 1.0.4 → 1.0.6

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

@@ -1,180 +1,180 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import ChatBoxImage from '../../../../src/components/Laboratory/ChatBoxImage/ChatBoxImage.vue';
-
-describe('ChatBoxImage', () => {
-  let wrapper: VueWrapper;
-
-  const defaultProps = {
-    paragraphText: 'Test paragraph content',
-    imageSources: [
-      'https://example.com/image1.jpg',
-      'https://example.com/image2.jpg'
-    ],
-  };
-
-  beforeEach(() => {
-    wrapper = mount(ChatBoxImage, {
-      props: defaultProps,
-      global: {
-        stubs: {
-          'Button': {
-            template: '<button :style="$attrs.style" data-testid="button" @click="$emit(\'click\')">{{ label }}</button>',
-            props: ['label', 'density', 'size', 'variant']
-          }
-        }
-      }
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component', () => {
-      expect(wrapper.find('.chat-box-image').exists()).toBe(true);
-      expect(wrapper.find('.v-card').exists()).toBe(true);
-    });
-
-    it('should display the paragraph text', () => {
-      expect(wrapper.text()).toContain('Test paragraph content');
-    });
-
-    it('should render images from imageSources prop', () => {
-      const images = wrapper.findAll('.v-img');
-      expect(images).toHaveLength(2);
-      expect(images[0].attributes('src')).toBe('https://example.com/image1.jpg');
-      expect(images[1].attributes('src')).toBe('https://example.com/image2.jpg');
-    });
-
-    it('should render two action buttons', () => {
-      const buttons = wrapper.findAll('[data-testid="button"]');
-      expect(buttons).toHaveLength(2);
-      expect(buttons[0].text()).toBe('Approved');
-      expect(buttons[1].text()).toBe('Not Approved');
-    });
-  });
-
-  describe('Props', () => {
-    it('should use default paragraph text when not provided', async () => {
-      await wrapper.setProps({ paragraphText: undefined });
-      expect(wrapper.text()).toContain('Lorem ipsum dolor sit amet, consetetur sadipscing elitr...');
-    });
-
-    it('should use default image sources when not provided', async () => {
-      await wrapper.setProps({ imageSources: undefined });
-      const images = wrapper.findAll('.v-img');
-      expect(images).toHaveLength(2);
-      expect(images[0].attributes('src')).toBe('https://cdn.vuetifyjs.com/images/parallax/material.jpg');
-      expect(images[1].attributes('src')).toBe('https://cdn.vuetifyjs.com/images/parallax/material.jpg');
-    });
-
-    it('should accept custom paragraph text', async () => {
-      const customText = 'Custom paragraph content for testing';
-      await wrapper.setProps({ paragraphText: customText });
-      expect(wrapper.text()).toContain(customText);
-    });
-
-    it('should accept custom image sources array', async () => {
-      const customImages = [
-        'https://custom.com/image1.jpg',
-        'https://custom.com/image2.jpg',
-        'https://custom.com/image3.jpg'
-      ];
-      await wrapper.setProps({ imageSources: customImages });
-
-      const images = wrapper.findAll('.v-img');
-      expect(images).toHaveLength(3);
-      expect(images[0].attributes('src')).toBe('https://custom.com/image1.jpg');
-      expect(images[1].attributes('src')).toBe('https://custom.com/image2.jpg');
-      expect(images[2].attributes('src')).toBe('https://custom.com/image3.jpg');
-    });
-
-    it('should handle empty image sources array', async () => {
-      await wrapper.setProps({ imageSources: [] });
-      const images = wrapper.findAll('.v-img');
-      expect(images).toHaveLength(0);
-    });
-  });
-
-  describe('Events', () => {
-    it('should emit click:approved when Approved button is clicked', async () => {
-      const buttons = wrapper.findAll('[data-testid="button"]');
-      const approvedButton = buttons[0];
-
-      await approvedButton.trigger('click');
-      expect(wrapper.emitted('click:approved')).toBeTruthy();
-      // Due to event bubbling in the test environment, each click triggers twice
-      expect(wrapper.emitted('click:approved')).toHaveLength(2);
-    });
-
-    it('should emit click:not-approved when Not Approved button is clicked', async () => {
-      const buttons = wrapper.findAll('[data-testid="button"]');
-      const notApprovedButton = buttons[1];
-
-      await notApprovedButton.trigger('click');
-      expect(wrapper.emitted('click:not-approved')).toBeTruthy();
-      // Due to event bubbling in the test environment, each click triggers twice
-      expect(wrapper.emitted('click:not-approved')).toHaveLength(2);
-    });
-  });
-
-  describe('Button Properties', () => {
-    it('should have correct button styles', () => {
-      const buttons = wrapper.findAll('[data-testid="button"]');
-      const approvedButton = buttons[0];
-      const notApprovedButton = buttons[1];
-
-      expect(approvedButton.exists()).toBe(true);
-      expect(notApprovedButton.exists()).toBe(true);
-    });
-
-    it('should have correct button labels', () => {
-      const buttons = wrapper.findAll('[data-testid="button"]');
-      expect(buttons[0].text()).toBe('Approved');
-      expect(buttons[1].text()).toBe('Not Approved');
-    });
-  });
-
-  describe('Layout and Structure', () => {
-    it('should have card with correct elevation and rounded properties', () => {
-      const card = wrapper.find('.v-card');
-      expect(card.attributes('elevation')).toBe('0');
-      expect(card.attributes('rounded')).toBe('lg');
-    });
-
-    it('should have images with correct properties', () => {
-      const images = wrapper.findAll('.v-img');
-      images.forEach(image => {
-        expect(image.attributes('aspect-ratio')).toBe('16/9');
-        expect(image.attributes('rounded')).toBe('lg');
-        expect(image.attributes('cover')).toBeDefined();
-        expect(image.classes()).toContain('ma-2');
-        expect(image.classes()).toContain('pa-2');
-      });
-    });
-
-    it('should have flex layout for images', () => {
-      const imageContainer = wrapper.find('.d-flex.flex-wrap');
-      expect(imageContainer.exists()).toBe(true);
-    });
-
-    it('should have centered button layout', () => {
-      const buttonContainer = wrapper.find('.d-flex.flex-row.align-center.ga-3.w-100.justify-center');
-      expect(buttonContainer.exists()).toBe(true);
-    });
-  });
-
-  describe('Styling', () => {
-    it('should apply custom styling to images', () => {
-      const images = wrapper.findAll('.v-img');
-      images.forEach(image => {
-        // Check for the presence of the image styling classes
-        expect(image.classes()).toContain('ma-2');
-        expect(image.classes()).toContain('pa-2');
-      });
-    });
-
-    it('should have padding on the card', () => {
-      const card = wrapper.find('.v-card');
-      expect(card.classes()).toContain('pa-2');
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import ChatBoxImage from '../../../../src/components/Laboratory/ChatBoxImage/ChatBoxImage.vue';
+
+describe('ChatBoxImage', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    paragraphText: 'Test paragraph content',
+    imageSources: [
+      'https://example.com/image1.jpg',
+      'https://example.com/image2.jpg'
+    ],
+  };
+
+  beforeEach(() => {
+    wrapper = mount(ChatBoxImage, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          'Button': {
+            template: '<button :style="$attrs.style" data-testid="button" @click="$emit(\'click\')">{{ label }}</button>',
+            props: ['label', 'density', 'size', 'variant']
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('.chat-box-image').exists()).toBe(true);
+      expect(wrapper.find('.v-card').exists()).toBe(true);
+    });
+
+    it('should display the paragraph text', () => {
+      expect(wrapper.text()).toContain('Test paragraph content');
+    });
+
+    it('should render images from imageSources prop', () => {
+      const images = wrapper.findAll('.v-img');
+      expect(images).toHaveLength(2);
+      expect(images[0].attributes('src')).toBe('https://example.com/image1.jpg');
+      expect(images[1].attributes('src')).toBe('https://example.com/image2.jpg');
+    });
+
+    it('should render two action buttons', () => {
+      const buttons = wrapper.findAll('[data-testid="button"]');
+      expect(buttons).toHaveLength(2);
+      expect(buttons[0].text()).toBe('Approved');
+      expect(buttons[1].text()).toBe('Not Approved');
+    });
+  });
+
+  describe('Props', () => {
+    it('should use default paragraph text when not provided', async () => {
+      await wrapper.setProps({ paragraphText: undefined });
+      expect(wrapper.text()).toContain('Lorem ipsum dolor sit amet, consetetur sadipscing elitr...');
+    });
+
+    it('should use default image sources when not provided', async () => {
+      await wrapper.setProps({ imageSources: undefined });
+      const images = wrapper.findAll('.v-img');
+      expect(images).toHaveLength(2);
+      expect(images[0].attributes('src')).toBe('https://cdn.vuetifyjs.com/images/parallax/material.jpg');
+      expect(images[1].attributes('src')).toBe('https://cdn.vuetifyjs.com/images/parallax/material.jpg');
+    });
+
+    it('should accept custom paragraph text', async () => {
+      const customText = 'Custom paragraph content for testing';
+      await wrapper.setProps({ paragraphText: customText });
+      expect(wrapper.text()).toContain(customText);
+    });
+
+    it('should accept custom image sources array', async () => {
+      const customImages = [
+        'https://custom.com/image1.jpg',
+        'https://custom.com/image2.jpg',
+        'https://custom.com/image3.jpg'
+      ];
+      await wrapper.setProps({ imageSources: customImages });
+
+      const images = wrapper.findAll('.v-img');
+      expect(images).toHaveLength(3);
+      expect(images[0].attributes('src')).toBe('https://custom.com/image1.jpg');
+      expect(images[1].attributes('src')).toBe('https://custom.com/image2.jpg');
+      expect(images[2].attributes('src')).toBe('https://custom.com/image3.jpg');
+    });
+
+    it('should handle empty image sources array', async () => {
+      await wrapper.setProps({ imageSources: [] });
+      const images = wrapper.findAll('.v-img');
+      expect(images).toHaveLength(0);
+    });
+  });
+
+  describe('Events', () => {
+    it('should emit click:approved when Approved button is clicked', async () => {
+      const buttons = wrapper.findAll('[data-testid="button"]');
+      const approvedButton = buttons[0];
+
+      await approvedButton.trigger('click');
+      expect(wrapper.emitted('click:approved')).toBeTruthy();
+      // Due to event bubbling in the test environment, each click triggers twice
+      expect(wrapper.emitted('click:approved')).toHaveLength(2);
+    });
+
+    it('should emit click:not-approved when Not Approved button is clicked', async () => {
+      const buttons = wrapper.findAll('[data-testid="button"]');
+      const notApprovedButton = buttons[1];
+
+      await notApprovedButton.trigger('click');
+      expect(wrapper.emitted('click:not-approved')).toBeTruthy();
+      // Due to event bubbling in the test environment, each click triggers twice
+      expect(wrapper.emitted('click:not-approved')).toHaveLength(2);
+    });
+  });
+
+  describe('Button Properties', () => {
+    it('should have correct button styles', () => {
+      const buttons = wrapper.findAll('[data-testid="button"]');
+      const approvedButton = buttons[0];
+      const notApprovedButton = buttons[1];
+
+      expect(approvedButton.exists()).toBe(true);
+      expect(notApprovedButton.exists()).toBe(true);
+    });
+
+    it('should have correct button labels', () => {
+      const buttons = wrapper.findAll('[data-testid="button"]');
+      expect(buttons[0].text()).toBe('Approved');
+      expect(buttons[1].text()).toBe('Not Approved');
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('should have card with correct elevation and rounded properties', () => {
+      const card = wrapper.find('.v-card');
+      expect(card.attributes('elevation')).toBe('0');
+      expect(card.attributes('rounded')).toBe('lg');
+    });
+
+    it('should have images with correct properties', () => {
+      const images = wrapper.findAll('.v-img');
+      images.forEach(image => {
+        expect(image.attributes('aspect-ratio')).toBe('16/9');
+        expect(image.attributes('rounded')).toBe('lg');
+        expect(image.attributes('cover')).toBeDefined();
+        expect(image.classes()).toContain('ma-2');
+        expect(image.classes()).toContain('pa-2');
+      });
+    });
+
+    it('should have flex layout for images', () => {
+      const imageContainer = wrapper.find('.d-flex.flex-wrap');
+      expect(imageContainer.exists()).toBe(true);
+    });
+
+    it('should have centered button layout', () => {
+      const buttonContainer = wrapper.find('.d-flex.flex-row.align-center.ga-3.w-100.justify-center');
+      expect(buttonContainer.exists()).toBe(true);
+    });
+  });
+
+  describe('Styling', () => {
+    it('should apply custom styling to images', () => {
+      const images = wrapper.findAll('.v-img');
+      images.forEach(image => {
+        // Check for the presence of the image styling classes
+        expect(image.classes()).toContain('ma-2');
+        expect(image.classes()).toContain('pa-2');
+      });
+    });
+
+    it('should have padding on the card', () => {
+      const card = wrapper.find('.v-card');
+      expect(card.classes()).toContain('pa-2');
+    });
+  });
 });