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

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

@@ -1,378 +1,378 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import TagLabelGroup from '../../../../src/components/Laboratory/TagLabelGroup/TagLabelGroup.vue';
-
-describe('TagLabelGroup', () => {
-  let wrapper: VueWrapper;
-
-  const defaultProps = {
-    text: 'Test Text',
-    status: 'Draft',
-    iconSize: '30',
-    iconsBefore: [
-      { backgroundColor: 'red', borderColor: 'darkred' },
-      { backgroundColor: 'blue', borderColor: 'darkblue' }
-    ],
-    iconsAfter: [
-      { backgroundColor: 'green', borderColor: 'darkgreen' }
-    ],
-  };
-
-  beforeEach(() => {
-    wrapper = mount(TagLabelGroup, {
-      props: defaultProps,
-      global: {
-        stubs: {
-          'TagLabel': {
-            template: '<div class="v-btn" data-testid="root">{{ status }}</div>',
-            props: ['status']
-          }
-        }
-      }
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component', () => {
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('.tag-label-group').exists()).toBe(true);
-    });
-
-    it('should display the text', () => {
-      expect(wrapper.text()).toContain('Test Text');
-    });
-
-    it('should render TagLabel with status', () => {
-      const tagLabel = wrapper.find('.v-btn[data-testid="root"]');
-      expect(tagLabel.exists()).toBe(true);
-      expect(tagLabel.text()).toBe('Draft');
-    });
-
-    it('should render icons before and after text', () => {
-      const icons = wrapper.findAll('.v-icon');
-      expect(icons.length).toBe(3); // 2 before + 1 after
-    });
-  });
-
-  describe('Props', () => {
-    it('should use default text when not provided', async () => {
-      await wrapper.setProps({ text: undefined });
-      // Default text is empty string, should not display any text
-      expect(wrapper.find('p').text()).toBe('');
-    });
-
-    it('should use default status when not provided', async () => {
-      await wrapper.setProps({ status: undefined });
-      const tagLabel = wrapper.find('.v-btn[data-testid="root"]');
-      expect(tagLabel.text()).toBe('Done');
-    });
-
-    it('should use default icon size when not provided', async () => {
-      await wrapper.setProps({ iconSize: undefined });
-      const icons = wrapper.findAll('.v-icon');
-      icons.forEach(icon => {
-        expect(icon.attributes('size')).toBe('29');
-      });
-    });
-
-    it('should use default iconsBefore when not provided', async () => {
-      await wrapper.setProps({ iconsBefore: undefined });
-      // Should render no icons before (empty array default)
-      // When iconsBefore is empty, we should only have iconsAfter (1 icon)
-      const allIcons = wrapper.findAll('.v-icon');
-      expect(allIcons).toHaveLength(1); // Only the 1 icon from iconsAfter
-    });
-
-    it('should use default iconsAfter when not provided', async () => {
-      await wrapper.setProps({ iconsAfter: undefined });
-      // Should render no icons after (empty array default)
-      const iconsAfter = wrapper.findAll('[key^="after-"]');
-      expect(iconsAfter).toHaveLength(0);
-    });
-
-    it('should accept custom text', async () => {
-      await wrapper.setProps({ text: 'Custom Text Content' });
-      expect(wrapper.text()).toContain('Custom Text Content');
-    });
-
-    it('should accept custom status', async () => {
-      await wrapper.setProps({ status: 'Ready' });
-      const tagLabel = wrapper.find('.v-btn[data-testid="root"]');
-      expect(tagLabel.text()).toBe('Ready');
-    });
-
-    it('should accept custom icon size', async () => {
-      await wrapper.setProps({ iconSize: '40' });
-      const icons = wrapper.findAll('.v-icon');
-      icons.forEach(icon => {
-        expect(icon.attributes('size')).toBe('40');
-      });
-    });
-  });
-
-  describe('Icons Before', () => {
-    it('should render icons before text with correct properties', () => {
-      const allIcons = wrapper.findAll('.v-icon');
-      // First 2 icons are iconsBefore
-      const iconsBefore = allIcons.slice(0, 2);
-      expect(iconsBefore).toHaveLength(2);
-
-      iconsBefore.forEach(icon => {
-        expect(icon.attributes('size')).toBe('30');
-        expect(icon.attributes('icon')).toBe('heroicons:outline');
-      });
-    });
-
-    it('should apply correct icon styles for iconsBefore', async () => {
-      const customIconsBefore = [
-        { backgroundColor: 'yellow', borderColor: 'orange' },
-        { backgroundColor: 'purple', borderColor: 'violet' }
-      ];
-      await wrapper.setProps({ iconsBefore: customIconsBefore });
-
-      // The icon styles are applied through the getIconStyle method
-      // Check that icons are rendered
-      const allIcons = wrapper.findAll('.v-icon');
-      // 2 new iconsBefore + 1 original iconsAfter = 3 total
-      expect(allIcons).toHaveLength(3);
-    });
-
-    it('should handle empty iconsBefore array', async () => {
-      await wrapper.setProps({ iconsBefore: [] });
-      // When iconsBefore is empty, we should only have iconsAfter (1 icon)
-      const allIcons = wrapper.findAll('.v-icon');
-      expect(allIcons).toHaveLength(1); // Only the 1 icon from iconsAfter
-    });
-  });
-
-  describe('Icons After', () => {
-    it('should render icons after text with correct properties', () => {
-      const allIcons = wrapper.findAll('.v-icon');
-      // Last icon is iconsAfter (after 2 iconsBefore)
-      const iconsAfter = allIcons.slice(2, 3);
-      expect(iconsAfter).toHaveLength(1);
-
-      iconsAfter.forEach(icon => {
-        expect(icon.attributes('size')).toBe('30');
-        expect(icon.attributes('icon')).toBe('heroicons:outline');
-      });
-    });
-
-    it('should apply correct icon styles for iconsAfter', async () => {
-      const customIconsAfter = [
-        { backgroundColor: 'cyan', borderColor: 'teal' },
-        { backgroundColor: 'magenta', borderColor: 'pink' }
-      ];
-      await wrapper.setProps({ iconsAfter: customIconsAfter });
-
-      const allIcons = wrapper.findAll('.v-icon');
-      // 2 before + 2 after = 4 total
-      expect(allIcons).toHaveLength(4);
-    });
-
-    it('should handle empty iconsAfter array', async () => {
-      await wrapper.setProps({ iconsAfter: [] });
-      const allIcons = wrapper.findAll('.v-icon');
-      // Should only have the 2 iconsBefore when iconsAfter is empty
-      expect(allIcons).toHaveLength(2);
-    });
-  });
-
-  describe('Layout and Structure', () => {
-    it('should have correct root layout classes', () => {
-      const root = wrapper.find('.tag-label-group');
-      expect(root.classes()).toContain('d-flex');
-      expect(root.classes()).toContain('ga-1');
-      expect(root.classes()).toContain('flex-row');
-      expect(root.classes()).toContain('align-center');
-    });
-
-    it('should render elements in correct order', () => {
-      const root = wrapper.find('.tag-label-group');
-      const children = Array.from(root.element.children);
-
-      // Should have: text, icons before, TagLabel, icons after
-      // But the actual order in template is: text, iconsBefore, TagLabel, iconsAfter
-      expect(children.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('Icon Styling Function', () => {
-    it('should generate correct icon styles', () => {
-      const iconData = { backgroundColor: 'red', borderColor: 'blue' };
-      const expectedStyle = wrapper.vm.getIconStyle(iconData);
-
-      expect(expectedStyle).toEqual({
-        '--v-icon-fill': 'red',
-        '--v-icon-stroke': 'blue'
-      });
-    });
-
-    it('should handle missing icon properties', () => {
-      const iconData = {};
-      const expectedStyle = wrapper.vm.getIconStyle(iconData);
-
-      expect(expectedStyle).toEqual({
-        '--v-icon-fill': undefined,
-        '--v-icon-stroke': undefined
-      });
-    });
-  });
-
-  describe('Text Content', () => {
-    it('should display text content correctly', async () => {
-      await wrapper.setProps({ text: 'Sample Text' });
-      const textElement = wrapper.find('p');
-      expect(textElement.text()).toBe('Sample Text');
-    });
-
-    it('should handle empty text', async () => {
-      await wrapper.setProps({ text: '' });
-      const textElement = wrapper.find('p');
-      expect(textElement.text()).toBe('');
-    });
-
-    it('should handle long text', async () => {
-      const longText = 'This is a very long text content that should be displayed properly';
-      await wrapper.setProps({ text: longText });
-      expect(wrapper.text()).toContain(longText);
-    });
-  });
-
-  describe('Icon Variations', () => {
-    it('should handle multiple icons before', async () => {
-      const multipleIconsBefore = [
-        { backgroundColor: 'red', borderColor: 'darkred' },
-        { backgroundColor: 'blue', borderColor: 'darkblue' },
-        { backgroundColor: 'green', borderColor: 'darkgreen' },
-        { backgroundColor: 'yellow', borderColor: 'orange' }
-      ];
-      await wrapper.setProps({ iconsBefore: multipleIconsBefore });
-
-      const allIcons = wrapper.findAll('.v-icon');
-      // 4 iconsBefore + 1 iconsAfter = 5 total
-      expect(allIcons).toHaveLength(5);
-    });
-
-    it('should handle multiple icons after', async () => {
-      const multipleIconsAfter = [
-        { backgroundColor: 'purple', borderColor: 'violet' },
-        { backgroundColor: 'cyan', borderColor: 'teal' },
-        { backgroundColor: 'orange', borderColor: 'red' }
-      ];
-      await wrapper.setProps({ iconsAfter: multipleIconsAfter });
-
-      const allIcons = wrapper.findAll('.v-icon');
-      // 2 iconsBefore + 3 iconsAfter = 5 total
-      expect(allIcons).toHaveLength(5);
-    });
-
-    it('should handle mix of icons before and after', async () => {
-      await wrapper.setProps({
-        iconsBefore: [
-          { backgroundColor: 'red', borderColor: 'darkred' },
-          { backgroundColor: 'blue', borderColor: 'darkblue' }
-        ],
-        iconsAfter: [
-          { backgroundColor: 'green', borderColor: 'darkgreen' },
-          { backgroundColor: 'yellow', borderColor: 'orange' }
-        ]
-      });
-
-      const allIcons = wrapper.findAll('.v-icon');
-      // 2 iconsBefore + 2 iconsAfter = 4 total
-      expect(allIcons).toHaveLength(4);
-    });
-  });
-
-  describe('Icon Size Variations', () => {
-    it('should handle different icon sizes', async () => {
-      const sizes = ['20', '25', '35', '40'];
-
-      for (const size of sizes) {
-        await wrapper.setProps({ iconSize: size });
-        const icons = wrapper.findAll('.v-icon');
-        icons.forEach(icon => {
-          expect(icon.attributes('size')).toBe(size);
-        });
-      }
-    });
-  });
-
-  describe('Status Integration', () => {
-    it('should pass status to TagLabel correctly', async () => {
-      const statuses = ['Draft', 'Ready', 'Started', 'Done'];
-
-      for (const status of statuses) {
-        await wrapper.setProps({ status });
-        const tagLabel = wrapper.find('.v-btn[data-testid="root"]');
-        expect(tagLabel.text()).toBe(status);
-      }
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('should integrate properly with TagLabel component', () => {
-      const tagLabel = wrapper.find('.v-btn[data-testid="root"]');
-      expect(tagLabel.exists()).toBe(true);
-    });
-
-    it('should render with minimal props', async () => {
-      const minimalWrapper = mount(TagLabelGroup, {
-        props: {
-          status: 'Test'
-        },
-        global: {
-          stubs: {
-            'TagLabel': {
-              template: '<div data-testid="tag-label">{{ status }}</div>',
-              props: ['status']
-            }
-          }
-        }
-      });
-
-      expect(minimalWrapper.find('.tag-label-group').exists()).toBe(true);
-      expect(minimalWrapper.find('[data-testid="tag-label"]').exists()).toBe(true);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have semantic text element', () => {
-      const textElement = wrapper.find('p');
-      expect(textElement.exists()).toBe(true);
-    });
-
-    it('should maintain proper component structure', () => {
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('.tag-label-group').exists()).toBe(true);
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle missing icon properties gracefully', async () => {
-      const incompleteIcons = [
-        { backgroundColor: 'red' }, // Missing borderColor
-        { borderColor: 'blue' }, // Missing backgroundColor
-        {} // Empty object
-      ];
-
-      await wrapper.setProps({ iconsBefore: incompleteIcons });
-      const allIcons = wrapper.findAll('.v-icon');
-      // 3 iconsBefore + 1 iconsAfter = 4 total
-      expect(allIcons).toHaveLength(4);
-    });
-
-    it('should handle icon arrays with different structures', async () => {
-      const mixedIcons = [
-        { backgroundColor: 'red', borderColor: 'darkred', extraProp: 'ignored' },
-        { backgroundColor: 'blue', borderColor: 'darkblue' }
-      ];
-
-      await wrapper.setProps({ iconsAfter: mixedIcons });
-      const allIcons = wrapper.findAll('.v-icon');
-      // 2 iconsBefore + 2 iconsAfter = 4 total
-      expect(allIcons).toHaveLength(4);
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import TagLabelGroup from '../../../../src/components/Laboratory/TagLabelGroup/TagLabelGroup.vue';
+
+describe('TagLabelGroup', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    text: 'Test Text',
+    status: 'Draft',
+    iconSize: '30',
+    iconsBefore: [
+      { backgroundColor: 'red', borderColor: 'darkred' },
+      { backgroundColor: 'blue', borderColor: 'darkblue' }
+    ],
+    iconsAfter: [
+      { backgroundColor: 'green', borderColor: 'darkgreen' }
+    ],
+  };
+
+  beforeEach(() => {
+    wrapper = mount(TagLabelGroup, {
+      props: defaultProps,
+      global: {
+        stubs: {
+          'TagLabel': {
+            template: '<div class="v-btn" data-testid="root">{{ status }}</div>',
+            props: ['status']
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.tag-label-group').exists()).toBe(true);
+    });
+
+    it('should display the text', () => {
+      expect(wrapper.text()).toContain('Test Text');
+    });
+
+    it('should render TagLabel with status', () => {
+      const tagLabel = wrapper.find('.v-btn[data-testid="root"]');
+      expect(tagLabel.exists()).toBe(true);
+      expect(tagLabel.text()).toBe('Draft');
+    });
+
+    it('should render icons before and after text', () => {
+      const icons = wrapper.findAll('.v-icon');
+      expect(icons.length).toBe(3); // 2 before + 1 after
+    });
+  });
+
+  describe('Props', () => {
+    it('should use default text when not provided', async () => {
+      await wrapper.setProps({ text: undefined });
+      // Default text is empty string, should not display any text
+      expect(wrapper.find('p').text()).toBe('');
+    });
+
+    it('should use default status when not provided', async () => {
+      await wrapper.setProps({ status: undefined });
+      const tagLabel = wrapper.find('.v-btn[data-testid="root"]');
+      expect(tagLabel.text()).toBe('Done');
+    });
+
+    it('should use default icon size when not provided', async () => {
+      await wrapper.setProps({ iconSize: undefined });
+      const icons = wrapper.findAll('.v-icon');
+      icons.forEach(icon => {
+        expect(icon.attributes('size')).toBe('29');
+      });
+    });
+
+    it('should use default iconsBefore when not provided', async () => {
+      await wrapper.setProps({ iconsBefore: undefined });
+      // Should render no icons before (empty array default)
+      // When iconsBefore is empty, we should only have iconsAfter (1 icon)
+      const allIcons = wrapper.findAll('.v-icon');
+      expect(allIcons).toHaveLength(1); // Only the 1 icon from iconsAfter
+    });
+
+    it('should use default iconsAfter when not provided', async () => {
+      await wrapper.setProps({ iconsAfter: undefined });
+      // Should render no icons after (empty array default)
+      const iconsAfter = wrapper.findAll('[key^="after-"]');
+      expect(iconsAfter).toHaveLength(0);
+    });
+
+    it('should accept custom text', async () => {
+      await wrapper.setProps({ text: 'Custom Text Content' });
+      expect(wrapper.text()).toContain('Custom Text Content');
+    });
+
+    it('should accept custom status', async () => {
+      await wrapper.setProps({ status: 'Ready' });
+      const tagLabel = wrapper.find('.v-btn[data-testid="root"]');
+      expect(tagLabel.text()).toBe('Ready');
+    });
+
+    it('should accept custom icon size', async () => {
+      await wrapper.setProps({ iconSize: '40' });
+      const icons = wrapper.findAll('.v-icon');
+      icons.forEach(icon => {
+        expect(icon.attributes('size')).toBe('40');
+      });
+    });
+  });
+
+  describe('Icons Before', () => {
+    it('should render icons before text with correct properties', () => {
+      const allIcons = wrapper.findAll('.v-icon');
+      // First 2 icons are iconsBefore
+      const iconsBefore = allIcons.slice(0, 2);
+      expect(iconsBefore).toHaveLength(2);
+
+      iconsBefore.forEach(icon => {
+        expect(icon.attributes('size')).toBe('30');
+        expect(icon.attributes('icon')).toBe('heroicons:outline');
+      });
+    });
+
+    it('should apply correct icon styles for iconsBefore', async () => {
+      const customIconsBefore = [
+        { backgroundColor: 'yellow', borderColor: 'orange' },
+        { backgroundColor: 'purple', borderColor: 'violet' }
+      ];
+      await wrapper.setProps({ iconsBefore: customIconsBefore });
+
+      // The icon styles are applied through the getIconStyle method
+      // Check that icons are rendered
+      const allIcons = wrapper.findAll('.v-icon');
+      // 2 new iconsBefore + 1 original iconsAfter = 3 total
+      expect(allIcons).toHaveLength(3);
+    });
+
+    it('should handle empty iconsBefore array', async () => {
+      await wrapper.setProps({ iconsBefore: [] });
+      // When iconsBefore is empty, we should only have iconsAfter (1 icon)
+      const allIcons = wrapper.findAll('.v-icon');
+      expect(allIcons).toHaveLength(1); // Only the 1 icon from iconsAfter
+    });
+  });
+
+  describe('Icons After', () => {
+    it('should render icons after text with correct properties', () => {
+      const allIcons = wrapper.findAll('.v-icon');
+      // Last icon is iconsAfter (after 2 iconsBefore)
+      const iconsAfter = allIcons.slice(2, 3);
+      expect(iconsAfter).toHaveLength(1);
+
+      iconsAfter.forEach(icon => {
+        expect(icon.attributes('size')).toBe('30');
+        expect(icon.attributes('icon')).toBe('heroicons:outline');
+      });
+    });
+
+    it('should apply correct icon styles for iconsAfter', async () => {
+      const customIconsAfter = [
+        { backgroundColor: 'cyan', borderColor: 'teal' },
+        { backgroundColor: 'magenta', borderColor: 'pink' }
+      ];
+      await wrapper.setProps({ iconsAfter: customIconsAfter });
+
+      const allIcons = wrapper.findAll('.v-icon');
+      // 2 before + 2 after = 4 total
+      expect(allIcons).toHaveLength(4);
+    });
+
+    it('should handle empty iconsAfter array', async () => {
+      await wrapper.setProps({ iconsAfter: [] });
+      const allIcons = wrapper.findAll('.v-icon');
+      // Should only have the 2 iconsBefore when iconsAfter is empty
+      expect(allIcons).toHaveLength(2);
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('should have correct root layout classes', () => {
+      const root = wrapper.find('.tag-label-group');
+      expect(root.classes()).toContain('d-flex');
+      expect(root.classes()).toContain('ga-1');
+      expect(root.classes()).toContain('flex-row');
+      expect(root.classes()).toContain('align-center');
+    });
+
+    it('should render elements in correct order', () => {
+      const root = wrapper.find('.tag-label-group');
+      const children = Array.from(root.element.children);
+
+      // Should have: text, icons before, TagLabel, icons after
+      // But the actual order in template is: text, iconsBefore, TagLabel, iconsAfter
+      expect(children.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Icon Styling Function', () => {
+    it('should generate correct icon styles', () => {
+      const iconData = { backgroundColor: 'red', borderColor: 'blue' };
+      const expectedStyle = wrapper.vm.getIconStyle(iconData);
+
+      expect(expectedStyle).toEqual({
+        '--v-icon-fill': 'red',
+        '--v-icon-stroke': 'blue'
+      });
+    });
+
+    it('should handle missing icon properties', () => {
+      const iconData = {};
+      const expectedStyle = wrapper.vm.getIconStyle(iconData);
+
+      expect(expectedStyle).toEqual({
+        '--v-icon-fill': undefined,
+        '--v-icon-stroke': undefined
+      });
+    });
+  });
+
+  describe('Text Content', () => {
+    it('should display text content correctly', async () => {
+      await wrapper.setProps({ text: 'Sample Text' });
+      const textElement = wrapper.find('p');
+      expect(textElement.text()).toBe('Sample Text');
+    });
+
+    it('should handle empty text', async () => {
+      await wrapper.setProps({ text: '' });
+      const textElement = wrapper.find('p');
+      expect(textElement.text()).toBe('');
+    });
+
+    it('should handle long text', async () => {
+      const longText = 'This is a very long text content that should be displayed properly';
+      await wrapper.setProps({ text: longText });
+      expect(wrapper.text()).toContain(longText);
+    });
+  });
+
+  describe('Icon Variations', () => {
+    it('should handle multiple icons before', async () => {
+      const multipleIconsBefore = [
+        { backgroundColor: 'red', borderColor: 'darkred' },
+        { backgroundColor: 'blue', borderColor: 'darkblue' },
+        { backgroundColor: 'green', borderColor: 'darkgreen' },
+        { backgroundColor: 'yellow', borderColor: 'orange' }
+      ];
+      await wrapper.setProps({ iconsBefore: multipleIconsBefore });
+
+      const allIcons = wrapper.findAll('.v-icon');
+      // 4 iconsBefore + 1 iconsAfter = 5 total
+      expect(allIcons).toHaveLength(5);
+    });
+
+    it('should handle multiple icons after', async () => {
+      const multipleIconsAfter = [
+        { backgroundColor: 'purple', borderColor: 'violet' },
+        { backgroundColor: 'cyan', borderColor: 'teal' },
+        { backgroundColor: 'orange', borderColor: 'red' }
+      ];
+      await wrapper.setProps({ iconsAfter: multipleIconsAfter });
+
+      const allIcons = wrapper.findAll('.v-icon');
+      // 2 iconsBefore + 3 iconsAfter = 5 total
+      expect(allIcons).toHaveLength(5);
+    });
+
+    it('should handle mix of icons before and after', async () => {
+      await wrapper.setProps({
+        iconsBefore: [
+          { backgroundColor: 'red', borderColor: 'darkred' },
+          { backgroundColor: 'blue', borderColor: 'darkblue' }
+        ],
+        iconsAfter: [
+          { backgroundColor: 'green', borderColor: 'darkgreen' },
+          { backgroundColor: 'yellow', borderColor: 'orange' }
+        ]
+      });
+
+      const allIcons = wrapper.findAll('.v-icon');
+      // 2 iconsBefore + 2 iconsAfter = 4 total
+      expect(allIcons).toHaveLength(4);
+    });
+  });
+
+  describe('Icon Size Variations', () => {
+    it('should handle different icon sizes', async () => {
+      const sizes = ['20', '25', '35', '40'];
+
+      for (const size of sizes) {
+        await wrapper.setProps({ iconSize: size });
+        const icons = wrapper.findAll('.v-icon');
+        icons.forEach(icon => {
+          expect(icon.attributes('size')).toBe(size);
+        });
+      }
+    });
+  });
+
+  describe('Status Integration', () => {
+    it('should pass status to TagLabel correctly', async () => {
+      const statuses = ['Draft', 'Ready', 'Started', 'Done'];
+
+      for (const status of statuses) {
+        await wrapper.setProps({ status });
+        const tagLabel = wrapper.find('.v-btn[data-testid="root"]');
+        expect(tagLabel.text()).toBe(status);
+      }
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('should integrate properly with TagLabel component', () => {
+      const tagLabel = wrapper.find('.v-btn[data-testid="root"]');
+      expect(tagLabel.exists()).toBe(true);
+    });
+
+    it('should render with minimal props', async () => {
+      const minimalWrapper = mount(TagLabelGroup, {
+        props: {
+          status: 'Test'
+        },
+        global: {
+          stubs: {
+            'TagLabel': {
+              template: '<div data-testid="tag-label">{{ status }}</div>',
+              props: ['status']
+            }
+          }
+        }
+      });
+
+      expect(minimalWrapper.find('.tag-label-group').exists()).toBe(true);
+      expect(minimalWrapper.find('[data-testid="tag-label"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have semantic text element', () => {
+      const textElement = wrapper.find('p');
+      expect(textElement.exists()).toBe(true);
+    });
+
+    it('should maintain proper component structure', () => {
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.tag-label-group').exists()).toBe(true);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle missing icon properties gracefully', async () => {
+      const incompleteIcons = [
+        { backgroundColor: 'red' }, // Missing borderColor
+        { borderColor: 'blue' }, // Missing backgroundColor
+        {} // Empty object
+      ];
+
+      await wrapper.setProps({ iconsBefore: incompleteIcons });
+      const allIcons = wrapper.findAll('.v-icon');
+      // 3 iconsBefore + 1 iconsAfter = 4 total
+      expect(allIcons).toHaveLength(4);
+    });
+
+    it('should handle icon arrays with different structures', async () => {
+      const mixedIcons = [
+        { backgroundColor: 'red', borderColor: 'darkred', extraProp: 'ignored' },
+        { backgroundColor: 'blue', borderColor: 'darkblue' }
+      ];
+
+      await wrapper.setProps({ iconsAfter: mixedIcons });
+      const allIcons = wrapper.findAll('.v-icon');
+      // 2 iconsBefore + 2 iconsAfter = 4 total
+      expect(allIcons).toHaveLength(4);
+    });
+  });
 });