@zap-wunschlachen/wl-shared-components 1.0.11 → 1.0.13

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

@@ -1,252 +1,252 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import MainColumnsBar from '../../../../src/components/Laboratory/MainColumnsBar/MainColumnsBar.vue';
-
-describe('MainColumnsBar', () => {
-  let wrapper: VueWrapper;
-
-  beforeEach(() => {
-    wrapper = mount(MainColumnsBar, {
-      global: {
-        stubs: {
-          'v-divider': {
-            template: '<hr class="v-divider" data-testid="v-divider" v-bind="$attrs" />',
-            props: ['vertical', 'thickness'],
-            inheritAttrs: false
-          },
-          'v-btn': {
-            template: '<button class="v-btn" :disabled="disabled" :readonly="readonly" @click="handleClick" data-testid="root" v-bind="$attrs"><span v-if="prependIcon" class="prepend-icon"></span><slot /><span v-if="appendIcon" class="append-icon"></span></button>',
-            props: ['disabled', 'loading', 'variant', 'color', 'size', 'density', 'rounded', 'elevation', 'flat', 'readonly', 'prependIcon', 'appendIcon'],
-            emits: ['click'],
-            inheritAttrs: false,
-            methods: {
-              handleClick(event) {
-                if (!this.disabled) {
-                  this.$emit('click', event);
-                }
-              }
-            }
-          }
-        }
-      }
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component', () => {
-      expect(wrapper.find('.d-flex.flex-row.justify-space-between').exists()).toBe(true);
-    });
-
-    it('should render all five buttons', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons).toHaveLength(5);
-    });
-
-    it('should render all dividers', () => {
-      const dividers = wrapper.findAll('.v-divider');
-      expect(dividers).toHaveLength(6); // 6 vertical dividers
-    });
-
-    it('should have correct button labels', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      const expectedLabels = ['Draft', 'Design', 'Production', 'Shipping', 'Treatment'];
-
-      buttons.forEach((button, index) => {
-        expect(button.text()).toContain(expectedLabels[index]);
-      });
-    });
-  });
-
-  describe('Button Properties', () => {
-    it('should have correct button styling', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      buttons.forEach(button => {
-        expect(button.exists()).toBe(true);
-      });
-    });
-
-    it('should have h4 tags for button text', () => {
-      const headers = wrapper.findAll('h4');
-      expect(headers).toHaveLength(5);
-
-      const expectedTexts = ['Draft', 'Design', 'Production', 'Shipping', 'Treatment'];
-      headers.forEach((header, index) => {
-        expect(header.text()).toBe(expectedTexts[index]);
-      });
-    });
-  });
-
-  describe('Events', () => {
-    it('should emit click:draft when Draft button is clicked', async () => {
-      const draftButton = wrapper.findAll('.v-btn')[0];
-      await draftButton.trigger('click');
-
-      expect(wrapper.emitted('click:draft')).toBeTruthy();
-    });
-
-    it('should emit click:design when Design button is clicked', async () => {
-      const designButton = wrapper.findAll('.v-btn')[1];
-      await designButton.trigger('click');
-
-      expect(wrapper.emitted('click:design')).toBeTruthy();
-    });
-
-    it('should emit click:production when Production button is clicked', async () => {
-      const productionButton = wrapper.findAll('.v-btn')[2];
-      await productionButton.trigger('click');
-
-      expect(wrapper.emitted('click:production')).toBeTruthy();
-    });
-
-    it('should emit click:shipping when Shipping button is clicked', async () => {
-      const shippingButton = wrapper.findAll('.v-btn')[3];
-      await shippingButton.trigger('click');
-
-      expect(wrapper.emitted('click:shipping')).toBeTruthy();
-    });
-
-    it('should emit click:treatment when Treatment button is clicked', async () => {
-      const treatmentButton = wrapper.findAll('.v-btn')[4];
-      await treatmentButton.trigger('click');
-
-      expect(wrapper.emitted('click:treatment')).toBeTruthy();
-    });
-  });
-
-  describe('Event Handling', () => {
-    it('should handle multiple clicks on the same button', async () => {
-      const draftButton = wrapper.findAll('.v-btn')[0];
-
-      await draftButton.trigger('click');
-      await draftButton.trigger('click');
-      await draftButton.trigger('click');
-
-      expect(wrapper.emitted('click:draft')).toHaveLength(3);
-    });
-
-    it('should handle clicks on different buttons', async () => {
-      const buttons = wrapper.findAll('.v-btn');
-
-      await buttons[0].trigger('click'); // Draft
-      await buttons[1].trigger('click'); // Design
-      await buttons[2].trigger('click'); // Production
-      await buttons[3].trigger('click'); // Shipping
-      await buttons[4].trigger('click'); // Treatment
-
-      expect(wrapper.emitted('click:draft')).toHaveLength(1);
-      expect(wrapper.emitted('click:design')).toHaveLength(1);
-      expect(wrapper.emitted('click:production')).toHaveLength(1);
-      expect(wrapper.emitted('click:shipping')).toHaveLength(1);
-      expect(wrapper.emitted('click:treatment')).toHaveLength(1);
-    });
-
-    it('should emit correct event names', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      const expectedEvents = [
-        'click:draft',
-        'click:design',
-        'click:production',
-        'click:shipping',
-        'click:treatment'
-      ];
-
-      // Check that all expected events are defined in emits
-      const emitsOptions = wrapper.vm.$options.emits;
-      expectedEvents.forEach(event => {
-        expect(emitsOptions).toContain(event);
-      });
-    });
-  });
-
-  describe('Layout and Structure', () => {
-    it('should have correct root layout', () => {
-      const root = wrapper.find('.d-flex.flex-row.justify-space-between');
-      expect(root.exists()).toBe(true);
-    });
-
-    it('should have vertical dividers', () => {
-      const dividers = wrapper.findAll('.v-divider');
-      expect(dividers).toHaveLength(6);
-    });
-
-    it('should alternate between dividers and buttons', () => {
-      const children = wrapper.find('.d-flex.flex-row.justify-space-between').element.children;
-
-      // Should start with divider, then button, then divider, etc.
-      for (let i = 0; i < children.length; i++) {
-        if (i % 2 === 0) {
-          // Even indices should be dividers
-          expect(children[i].classList.contains('v-divider')).toBe(true);
-        } else {
-          // Odd indices should be buttons
-          expect(children[i].classList.contains('v-btn')).toBe(true);
-        }
-      }
-    });
-  });
-
-  describe('Button Icons', () => {
-    it('should have correct append icons', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons).toHaveLength(5);
-    });
-  });
-
-  describe('Component Behavior', () => {
-    it('should be functional without any props', () => {
-      // The component doesn't take any props, so it should work with default mount
-      expect(wrapper.vm).toBeTruthy();
-      expect(wrapper.findAll('.v-btn')).toHaveLength(5);
-    });
-
-    it('should maintain consistent styling across all buttons', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons).toHaveLength(5);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have meaningful button text', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      const buttonTexts = buttons.map(button => button.text());
-
-      buttonTexts.forEach(text => {
-        expect(text.trim()).not.toBe('');
-        expect(text.trim().length).toBeGreaterThan(0);
-      });
-    });
-
-    it('should use semantic h4 elements for button text', () => {
-      const headers = wrapper.findAll('h4');
-      expect(headers).toHaveLength(5);
-
-      headers.forEach(header => {
-        expect(header.text().trim()).not.toBe('');
-      });
-    });
-  });
-
-  describe('Visual Structure', () => {
-    it('should have correct number of elements', () => {
-      // Should have 6 dividers + 5 buttons = 11 total children
-      const container = wrapper.find('.d-flex.flex-row.justify-space-between');
-      expect(container.element.children).toHaveLength(11);
-    });
-
-    it('should start and end with dividers', () => {
-      const container = wrapper.find('.d-flex.flex-row.justify-space-between');
-      const firstChild = container.element.children[0];
-      const lastChild = container.element.children[container.element.children.length - 1];
-
-      expect(firstChild.classList.contains('v-divider')).toBe(true);
-      expect(lastChild.classList.contains('v-divider')).toBe(true);
-    });
-  });
-
-  describe('Responsiveness', () => {
-    it('should use justify-space-between for even distribution', () => {
-      const container = wrapper.find('.d-flex.flex-row.justify-space-between');
-      expect(container.exists()).toBe(true);
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import MainColumnsBar from '../../../../src/components/Laboratory/MainColumnsBar/MainColumnsBar.vue';
+
+describe('MainColumnsBar', () => {
+  let wrapper: VueWrapper;
+
+  beforeEach(() => {
+    wrapper = mount(MainColumnsBar, {
+      global: {
+        stubs: {
+          'v-divider': {
+            template: '<hr class="v-divider" data-testid="v-divider" v-bind="$attrs" />',
+            props: ['vertical', 'thickness'],
+            inheritAttrs: false
+          },
+          'v-btn': {
+            template: '<button class="v-btn" :disabled="disabled" :readonly="readonly" @click="handleClick" data-testid="root" v-bind="$attrs"><span v-if="prependIcon" class="prepend-icon"></span><slot /><span v-if="appendIcon" class="append-icon"></span></button>',
+            props: ['disabled', 'loading', 'variant', 'color', 'size', 'density', 'rounded', 'elevation', 'flat', 'readonly', 'prependIcon', 'appendIcon'],
+            emits: ['click'],
+            inheritAttrs: false,
+            methods: {
+              handleClick(event) {
+                if (!this.disabled) {
+                  this.$emit('click', event);
+                }
+              }
+            }
+          }
+        }
+      }
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('.d-flex.flex-row.justify-space-between').exists()).toBe(true);
+    });
+
+    it('should render all five buttons', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons).toHaveLength(5);
+    });
+
+    it('should render all dividers', () => {
+      const dividers = wrapper.findAll('.v-divider');
+      expect(dividers).toHaveLength(6); // 6 vertical dividers
+    });
+
+    it('should have correct button labels', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      const expectedLabels = ['Draft', 'Design', 'Production', 'Shipping', 'Treatment'];
+
+      buttons.forEach((button, index) => {
+        expect(button.text()).toContain(expectedLabels[index]);
+      });
+    });
+  });
+
+  describe('Button Properties', () => {
+    it('should have correct button styling', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      buttons.forEach(button => {
+        expect(button.exists()).toBe(true);
+      });
+    });
+
+    it('should have h4 tags for button text', () => {
+      const headers = wrapper.findAll('h4');
+      expect(headers).toHaveLength(5);
+
+      const expectedTexts = ['Draft', 'Design', 'Production', 'Shipping', 'Treatment'];
+      headers.forEach((header, index) => {
+        expect(header.text()).toBe(expectedTexts[index]);
+      });
+    });
+  });
+
+  describe('Events', () => {
+    it('should emit click:draft when Draft button is clicked', async () => {
+      const draftButton = wrapper.findAll('.v-btn')[0];
+      await draftButton.trigger('click');
+
+      expect(wrapper.emitted('click:draft')).toBeTruthy();
+    });
+
+    it('should emit click:design when Design button is clicked', async () => {
+      const designButton = wrapper.findAll('.v-btn')[1];
+      await designButton.trigger('click');
+
+      expect(wrapper.emitted('click:design')).toBeTruthy();
+    });
+
+    it('should emit click:production when Production button is clicked', async () => {
+      const productionButton = wrapper.findAll('.v-btn')[2];
+      await productionButton.trigger('click');
+
+      expect(wrapper.emitted('click:production')).toBeTruthy();
+    });
+
+    it('should emit click:shipping when Shipping button is clicked', async () => {
+      const shippingButton = wrapper.findAll('.v-btn')[3];
+      await shippingButton.trigger('click');
+
+      expect(wrapper.emitted('click:shipping')).toBeTruthy();
+    });
+
+    it('should emit click:treatment when Treatment button is clicked', async () => {
+      const treatmentButton = wrapper.findAll('.v-btn')[4];
+      await treatmentButton.trigger('click');
+
+      expect(wrapper.emitted('click:treatment')).toBeTruthy();
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('should handle multiple clicks on the same button', async () => {
+      const draftButton = wrapper.findAll('.v-btn')[0];
+
+      await draftButton.trigger('click');
+      await draftButton.trigger('click');
+      await draftButton.trigger('click');
+
+      expect(wrapper.emitted('click:draft')).toHaveLength(3);
+    });
+
+    it('should handle clicks on different buttons', async () => {
+      const buttons = wrapper.findAll('.v-btn');
+
+      await buttons[0].trigger('click'); // Draft
+      await buttons[1].trigger('click'); // Design
+      await buttons[2].trigger('click'); // Production
+      await buttons[3].trigger('click'); // Shipping
+      await buttons[4].trigger('click'); // Treatment
+
+      expect(wrapper.emitted('click:draft')).toHaveLength(1);
+      expect(wrapper.emitted('click:design')).toHaveLength(1);
+      expect(wrapper.emitted('click:production')).toHaveLength(1);
+      expect(wrapper.emitted('click:shipping')).toHaveLength(1);
+      expect(wrapper.emitted('click:treatment')).toHaveLength(1);
+    });
+
+    it('should emit correct event names', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      const expectedEvents = [
+        'click:draft',
+        'click:design',
+        'click:production',
+        'click:shipping',
+        'click:treatment'
+      ];
+
+      // Check that all expected events are defined in emits
+      const emitsOptions = wrapper.vm.$options.emits;
+      expectedEvents.forEach(event => {
+        expect(emitsOptions).toContain(event);
+      });
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('should have correct root layout', () => {
+      const root = wrapper.find('.d-flex.flex-row.justify-space-between');
+      expect(root.exists()).toBe(true);
+    });
+
+    it('should have vertical dividers', () => {
+      const dividers = wrapper.findAll('.v-divider');
+      expect(dividers).toHaveLength(6);
+    });
+
+    it('should alternate between dividers and buttons', () => {
+      const children = wrapper.find('.d-flex.flex-row.justify-space-between').element.children;
+
+      // Should start with divider, then button, then divider, etc.
+      for (let i = 0; i < children.length; i++) {
+        if (i % 2 === 0) {
+          // Even indices should be dividers
+          expect(children[i].classList.contains('v-divider')).toBe(true);
+        } else {
+          // Odd indices should be buttons
+          expect(children[i].classList.contains('v-btn')).toBe(true);
+        }
+      }
+    });
+  });
+
+  describe('Button Icons', () => {
+    it('should have correct append icons', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons).toHaveLength(5);
+    });
+  });
+
+  describe('Component Behavior', () => {
+    it('should be functional without any props', () => {
+      // The component doesn't take any props, so it should work with default mount
+      expect(wrapper.vm).toBeTruthy();
+      expect(wrapper.findAll('.v-btn')).toHaveLength(5);
+    });
+
+    it('should maintain consistent styling across all buttons', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons).toHaveLength(5);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have meaningful button text', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      const buttonTexts = buttons.map(button => button.text());
+
+      buttonTexts.forEach(text => {
+        expect(text.trim()).not.toBe('');
+        expect(text.trim().length).toBeGreaterThan(0);
+      });
+    });
+
+    it('should use semantic h4 elements for button text', () => {
+      const headers = wrapper.findAll('h4');
+      expect(headers).toHaveLength(5);
+
+      headers.forEach(header => {
+        expect(header.text().trim()).not.toBe('');
+      });
+    });
+  });
+
+  describe('Visual Structure', () => {
+    it('should have correct number of elements', () => {
+      // Should have 6 dividers + 5 buttons = 11 total children
+      const container = wrapper.find('.d-flex.flex-row.justify-space-between');
+      expect(container.element.children).toHaveLength(11);
+    });
+
+    it('should start and end with dividers', () => {
+      const container = wrapper.find('.d-flex.flex-row.justify-space-between');
+      const firstChild = container.element.children[0];
+      const lastChild = container.element.children[container.element.children.length - 1];
+
+      expect(firstChild.classList.contains('v-divider')).toBe(true);
+      expect(lastChild.classList.contains('v-divider')).toBe(true);
+    });
+  });
+
+  describe('Responsiveness', () => {
+    it('should use justify-space-between for even distribution', () => {
+      const container = wrapper.find('.d-flex.flex-row.justify-space-between');
+      expect(container.exists()).toBe(true);
+    });
+  });
 });