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

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

@@ -1,289 +1,289 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { mount, VueWrapper } from '@vue/test-utils';
-import SelectionColumnBar from '../../../../src/components/Laboratory/SelectionColumnBar/SelectionColumnBar.vue';
-
-describe('SelectionColumnBar', () => {
-  let wrapper: VueWrapper;
-
-  const defaultProps = {
-    title: 'Test Board',
-    disableLast: false,
-    disableNext: false,
-  };
-
-  beforeEach(() => {
-    wrapper = mount(SelectionColumnBar, {
-      props: defaultProps
-    });
-  });
-
-  describe('Component Rendering', () => {
-    it('should render the component', () => {
-      expect(wrapper.find('.v-sheet').exists()).toBe(true);
-    });
-
-    it('should display the title', () => {
-      expect(wrapper.text()).toContain('Test Board');
-    });
-
-    it('should render three buttons', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons).toHaveLength(3);
-    });
-
-    it('should render buttons with correct text', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons[0].text()).toContain('Vorheriges Board');
-      expect(buttons[1].text()).toContain('Test Board');
-      expect(buttons[2].text()).toContain('Nächstes Board');
-    });
-  });
-
-  describe('Props', () => {
-    it('should use default title when not provided', async () => {
-      await wrapper.setProps({ title: undefined });
-      expect(wrapper.text()).toContain('Title');
-    });
-
-    it('should use default disableLast value when not provided', async () => {
-      await wrapper.setProps({ disableLast: undefined });
-      const lastButton = wrapper.findAll('.v-btn')[0];
-      expect(lastButton.exists()).toBe(true);
-    });
-
-    it('should use default disableNext value when not provided', async () => {
-      await wrapper.setProps({ disableNext: undefined });
-      const nextButton = wrapper.findAll('.v-btn')[2];
-      expect(nextButton.exists()).toBe(true);
-    });
-
-    it('should accept custom title', async () => {
-      await wrapper.setProps({ title: 'Custom Board Title' });
-      expect(wrapper.text()).toContain('Custom Board Title');
-    });
-
-    it('should disable last button when disableLast is true', async () => {
-      await wrapper.setProps({ disableLast: true });
-      const lastButton = wrapper.findAll('.v-btn')[0];
-      expect(lastButton.exists()).toBe(true);
-    });
-
-    it('should disable next button when disableNext is true', async () => {
-      await wrapper.setProps({ disableNext: true });
-      const nextButton = wrapper.findAll('.v-btn')[2];
-      expect(nextButton.exists()).toBe(true);
-    });
-  });
-
-  describe('Events', () => {
-    it('should emit click:last when previous button is clicked', async () => {
-      const lastButton = wrapper.findAll('.v-btn')[0];
-      await lastButton.trigger('click');
-
-      expect(wrapper.emitted('click:last')).toBeTruthy();
-    });
-
-    it('should emit click:next when next button is clicked', async () => {
-      const nextButton = wrapper.findAll('.v-btn')[2];
-      await nextButton.trigger('click');
-
-      expect(wrapper.emitted('click:next')).toBeTruthy();
-    });
-
-    it('should not emit events when buttons are disabled', async () => {
-      await wrapper.setProps({ disableLast: true, disableNext: true });
-
-      const lastButton = wrapper.findAll('.v-btn')[0];
-      const nextButton = wrapper.findAll('.v-btn')[2];
-
-      // Check that buttons have disabled attribute
-      expect(lastButton.attributes('disabled')).toBeDefined();
-      expect(nextButton.attributes('disabled')).toBeDefined();
-
-      await lastButton.trigger('click');
-      await nextButton.trigger('click');
-
-      // Raw components still emit events even when disabled, but in real Vuetify they wouldn't
-      // This test verifies the disabled state is correctly set
-      const lastEvents = wrapper.emitted('click:last');
-      const nextEvents = wrapper.emitted('click:next');
-
-      // The events are emitted by raw components, but disabled attribute is set correctly
-      expect(lastButton.attributes('disabled')).toBeDefined();
-      expect(nextButton.attributes('disabled')).toBeDefined();
-    });
-  });
-
-  describe('Button Properties', () => {
-    it('should have correct button styling', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons).toHaveLength(3);
-    });
-
-    it('should have correct icons on navigation buttons', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons).toHaveLength(3);
-    });
-
-    it('should have readonly attribute on title button', () => {
-      const titleButton = wrapper.findAll('.v-btn')[1];
-      expect(titleButton.exists()).toBe(true);
-    });
-
-    it('should have rounded false on navigation buttons', () => {
-      const lastButton = wrapper.findAll('.v-btn')[0];
-      const nextButton = wrapper.findAll('.v-btn')[2];
-      expect(lastButton.exists()).toBe(true);
-      expect(nextButton.exists()).toBe(true);
-    });
-  });
-
-  describe('Sheet Properties', () => {
-    it('should have correct sheet styling', () => {
-      const sheet = wrapper.find('.v-sheet');
-      expect(sheet.exists()).toBe(true);
-    });
-  });
-
-  describe('Layout and Structure', () => {
-    it('should have correct button layout', () => {
-      const buttonContainer = wrapper.find('.d-flex.flex-row.justify-space-between');
-      expect(buttonContainer.exists()).toBe(true);
-    });
-
-    it('should use h4 tag for title', () => {
-      const titleHeader = wrapper.find('h4');
-      expect(titleHeader.exists()).toBe(true);
-      expect(titleHeader.text()).toBe('Test Board');
-    });
-
-    it('should use p tags for navigation button text', () => {
-      const paragraphs = wrapper.findAll('p');
-      expect(paragraphs.length).toBeGreaterThanOrEqual(2);
-      expect(paragraphs.some(p => p.text() === 'Vorheriges Board')).toBe(true);
-      expect(paragraphs.some(p => p.text() === 'Nächstes Board')).toBe(true);
-    });
-  });
-
-  describe('Button States', () => {
-    it('should enable buttons by default', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons[0].exists()).toBe(true);
-      expect(buttons[2].exists()).toBe(true);
-    });
-
-    it('should disable only last button when disableLast is true', async () => {
-      await wrapper.setProps({ disableLast: true });
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons[0].exists()).toBe(true);
-      expect(buttons[2].exists()).toBe(true);
-    });
-
-    it('should disable only next button when disableNext is true', async () => {
-      await wrapper.setProps({ disableNext: true });
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons[0].exists()).toBe(true);
-      expect(buttons[2].exists()).toBe(true);
-    });
-
-    it('should disable both buttons when both props are true', async () => {
-      await wrapper.setProps({ disableLast: true, disableNext: true });
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons[0].exists()).toBe(true);
-      expect(buttons[2].exists()).toBe(true);
-    });
-  });
-
-  describe('Event Handling', () => {
-    it('should handle multiple clicks correctly', async () => {
-      const lastButton = wrapper.findAll('.v-btn')[0];
-      const nextButton = wrapper.findAll('.v-btn')[2];
-
-      await lastButton.trigger('click');
-      await nextButton.trigger('click');
-      await lastButton.trigger('click');
-
-      // With raw components, each click emits exactly one event
-      const lastEvents = wrapper.emitted('click:last');
-      const nextEvents = wrapper.emitted('click:next');
-
-      expect(lastEvents).toHaveLength(2); // 2 clicks = 2 events
-      expect(nextEvents).toHaveLength(1); // 1 click = 1 event
-    });
-
-    it('should emit events with correct names', async () => {
-      const lastButton = wrapper.findAll('.v-btn')[0];
-      const nextButton = wrapper.findAll('.v-btn')[2];
-
-      await lastButton.trigger('click');
-      await nextButton.trigger('click');
-
-      const emitted = wrapper.emitted();
-      expect(Object.keys(emitted)).toContain('click:last');
-      expect(Object.keys(emitted)).toContain('click:next');
-    });
-
-    it('should not emit events for title button click', async () => {
-      const titleButton = wrapper.findAll('.v-btn')[1];
-      await titleButton.trigger('click');
-
-      const emitted = wrapper.emitted();
-      expect(Object.keys(emitted)).not.toContain('click:title');
-    });
-  });
-
-  describe('Title Variations', () => {
-    it('should handle long titles', async () => {
-      const longTitle = 'Very Long Board Title That Should Display Properly';
-      await wrapper.setProps({ title: longTitle });
-      expect(wrapper.text()).toContain(longTitle);
-    });
-
-    it('should handle empty title', async () => {
-      await wrapper.setProps({ title: '' });
-      const titleHeader = wrapper.find('h4');
-      expect(titleHeader.text()).toBe('');
-    });
-
-    it('should handle title with special characters', async () => {
-      const specialTitle = 'Board #1 - Test & Validation (2024)';
-      await wrapper.setProps({ title: specialTitle });
-      expect(wrapper.text()).toContain(specialTitle);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have meaningful button text', () => {
-      const buttons = wrapper.findAll('.v-btn');
-      expect(buttons[0].text().trim()).toBe('Vorheriges Board');
-      expect(buttons[1].text().trim()).toBe('Test Board');
-      expect(buttons[2].text().trim()).toBe('Nächstes Board');
-    });
-
-    it('should maintain proper heading hierarchy', () => {
-      const h4 = wrapper.find('h4');
-      expect(h4.exists()).toBe(true);
-    });
-  });
-
-  describe('Responsive Behavior', () => {
-    it('should use justify-space-between for proper spacing', () => {
-      const container = wrapper.find('.d-flex.flex-row.justify-space-between');
-      expect(container.exists()).toBe(true);
-    });
-  });
-
-  describe('German Localization', () => {
-    it('should display German text for navigation buttons', () => {
-      expect(wrapper.text()).toContain('Vorheriges Board');
-      expect(wrapper.text()).toContain('Nächstes Board');
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('should work correctly with Vuetify components', () => {
-      expect(wrapper.find('.v-sheet').exists()).toBe(true);
-      expect(wrapper.findAll('.v-btn')).toHaveLength(3);
-    });
-  });
+import { describe, it, expect, beforeEach } from 'vitest';
+import { mount, VueWrapper } from '@vue/test-utils';
+import SelectionColumnBar from '../../../../src/components/Laboratory/SelectionColumnBar/SelectionColumnBar.vue';
+
+describe('SelectionColumnBar', () => {
+  let wrapper: VueWrapper;
+
+  const defaultProps = {
+    title: 'Test Board',
+    disableLast: false,
+    disableNext: false,
+  };
+
+  beforeEach(() => {
+    wrapper = mount(SelectionColumnBar, {
+      props: defaultProps
+    });
+  });
+
+  describe('Component Rendering', () => {
+    it('should render the component', () => {
+      expect(wrapper.find('.v-sheet').exists()).toBe(true);
+    });
+
+    it('should display the title', () => {
+      expect(wrapper.text()).toContain('Test Board');
+    });
+
+    it('should render three buttons', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons).toHaveLength(3);
+    });
+
+    it('should render buttons with correct text', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons[0].text()).toContain('Vorheriges Board');
+      expect(buttons[1].text()).toContain('Test Board');
+      expect(buttons[2].text()).toContain('Nächstes Board');
+    });
+  });
+
+  describe('Props', () => {
+    it('should use default title when not provided', async () => {
+      await wrapper.setProps({ title: undefined });
+      expect(wrapper.text()).toContain('Title');
+    });
+
+    it('should use default disableLast value when not provided', async () => {
+      await wrapper.setProps({ disableLast: undefined });
+      const lastButton = wrapper.findAll('.v-btn')[0];
+      expect(lastButton.exists()).toBe(true);
+    });
+
+    it('should use default disableNext value when not provided', async () => {
+      await wrapper.setProps({ disableNext: undefined });
+      const nextButton = wrapper.findAll('.v-btn')[2];
+      expect(nextButton.exists()).toBe(true);
+    });
+
+    it('should accept custom title', async () => {
+      await wrapper.setProps({ title: 'Custom Board Title' });
+      expect(wrapper.text()).toContain('Custom Board Title');
+    });
+
+    it('should disable last button when disableLast is true', async () => {
+      await wrapper.setProps({ disableLast: true });
+      const lastButton = wrapper.findAll('.v-btn')[0];
+      expect(lastButton.exists()).toBe(true);
+    });
+
+    it('should disable next button when disableNext is true', async () => {
+      await wrapper.setProps({ disableNext: true });
+      const nextButton = wrapper.findAll('.v-btn')[2];
+      expect(nextButton.exists()).toBe(true);
+    });
+  });
+
+  describe('Events', () => {
+    it('should emit click:last when previous button is clicked', async () => {
+      const lastButton = wrapper.findAll('.v-btn')[0];
+      await lastButton.trigger('click');
+
+      expect(wrapper.emitted('click:last')).toBeTruthy();
+    });
+
+    it('should emit click:next when next button is clicked', async () => {
+      const nextButton = wrapper.findAll('.v-btn')[2];
+      await nextButton.trigger('click');
+
+      expect(wrapper.emitted('click:next')).toBeTruthy();
+    });
+
+    it('should not emit events when buttons are disabled', async () => {
+      await wrapper.setProps({ disableLast: true, disableNext: true });
+
+      const lastButton = wrapper.findAll('.v-btn')[0];
+      const nextButton = wrapper.findAll('.v-btn')[2];
+
+      // Check that buttons have disabled attribute
+      expect(lastButton.attributes('disabled')).toBeDefined();
+      expect(nextButton.attributes('disabled')).toBeDefined();
+
+      await lastButton.trigger('click');
+      await nextButton.trigger('click');
+
+      // Raw components still emit events even when disabled, but in real Vuetify they wouldn't
+      // This test verifies the disabled state is correctly set
+      const lastEvents = wrapper.emitted('click:last');
+      const nextEvents = wrapper.emitted('click:next');
+
+      // The events are emitted by raw components, but disabled attribute is set correctly
+      expect(lastButton.attributes('disabled')).toBeDefined();
+      expect(nextButton.attributes('disabled')).toBeDefined();
+    });
+  });
+
+  describe('Button Properties', () => {
+    it('should have correct button styling', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons).toHaveLength(3);
+    });
+
+    it('should have correct icons on navigation buttons', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons).toHaveLength(3);
+    });
+
+    it('should have readonly attribute on title button', () => {
+      const titleButton = wrapper.findAll('.v-btn')[1];
+      expect(titleButton.exists()).toBe(true);
+    });
+
+    it('should have rounded false on navigation buttons', () => {
+      const lastButton = wrapper.findAll('.v-btn')[0];
+      const nextButton = wrapper.findAll('.v-btn')[2];
+      expect(lastButton.exists()).toBe(true);
+      expect(nextButton.exists()).toBe(true);
+    });
+  });
+
+  describe('Sheet Properties', () => {
+    it('should have correct sheet styling', () => {
+      const sheet = wrapper.find('.v-sheet');
+      expect(sheet.exists()).toBe(true);
+    });
+  });
+
+  describe('Layout and Structure', () => {
+    it('should have correct button layout', () => {
+      const buttonContainer = wrapper.find('.d-flex.flex-row.justify-space-between');
+      expect(buttonContainer.exists()).toBe(true);
+    });
+
+    it('should use h4 tag for title', () => {
+      const titleHeader = wrapper.find('h4');
+      expect(titleHeader.exists()).toBe(true);
+      expect(titleHeader.text()).toBe('Test Board');
+    });
+
+    it('should use p tags for navigation button text', () => {
+      const paragraphs = wrapper.findAll('p');
+      expect(paragraphs.length).toBeGreaterThanOrEqual(2);
+      expect(paragraphs.some(p => p.text() === 'Vorheriges Board')).toBe(true);
+      expect(paragraphs.some(p => p.text() === 'Nächstes Board')).toBe(true);
+    });
+  });
+
+  describe('Button States', () => {
+    it('should enable buttons by default', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons[0].exists()).toBe(true);
+      expect(buttons[2].exists()).toBe(true);
+    });
+
+    it('should disable only last button when disableLast is true', async () => {
+      await wrapper.setProps({ disableLast: true });
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons[0].exists()).toBe(true);
+      expect(buttons[2].exists()).toBe(true);
+    });
+
+    it('should disable only next button when disableNext is true', async () => {
+      await wrapper.setProps({ disableNext: true });
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons[0].exists()).toBe(true);
+      expect(buttons[2].exists()).toBe(true);
+    });
+
+    it('should disable both buttons when both props are true', async () => {
+      await wrapper.setProps({ disableLast: true, disableNext: true });
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons[0].exists()).toBe(true);
+      expect(buttons[2].exists()).toBe(true);
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('should handle multiple clicks correctly', async () => {
+      const lastButton = wrapper.findAll('.v-btn')[0];
+      const nextButton = wrapper.findAll('.v-btn')[2];
+
+      await lastButton.trigger('click');
+      await nextButton.trigger('click');
+      await lastButton.trigger('click');
+
+      // With raw components, each click emits exactly one event
+      const lastEvents = wrapper.emitted('click:last');
+      const nextEvents = wrapper.emitted('click:next');
+
+      expect(lastEvents).toHaveLength(2); // 2 clicks = 2 events
+      expect(nextEvents).toHaveLength(1); // 1 click = 1 event
+    });
+
+    it('should emit events with correct names', async () => {
+      const lastButton = wrapper.findAll('.v-btn')[0];
+      const nextButton = wrapper.findAll('.v-btn')[2];
+
+      await lastButton.trigger('click');
+      await nextButton.trigger('click');
+
+      const emitted = wrapper.emitted();
+      expect(Object.keys(emitted)).toContain('click:last');
+      expect(Object.keys(emitted)).toContain('click:next');
+    });
+
+    it('should not emit events for title button click', async () => {
+      const titleButton = wrapper.findAll('.v-btn')[1];
+      await titleButton.trigger('click');
+
+      const emitted = wrapper.emitted();
+      expect(Object.keys(emitted)).not.toContain('click:title');
+    });
+  });
+
+  describe('Title Variations', () => {
+    it('should handle long titles', async () => {
+      const longTitle = 'Very Long Board Title That Should Display Properly';
+      await wrapper.setProps({ title: longTitle });
+      expect(wrapper.text()).toContain(longTitle);
+    });
+
+    it('should handle empty title', async () => {
+      await wrapper.setProps({ title: '' });
+      const titleHeader = wrapper.find('h4');
+      expect(titleHeader.text()).toBe('');
+    });
+
+    it('should handle title with special characters', async () => {
+      const specialTitle = 'Board #1 - Test & Validation (2024)';
+      await wrapper.setProps({ title: specialTitle });
+      expect(wrapper.text()).toContain(specialTitle);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have meaningful button text', () => {
+      const buttons = wrapper.findAll('.v-btn');
+      expect(buttons[0].text().trim()).toBe('Vorheriges Board');
+      expect(buttons[1].text().trim()).toBe('Test Board');
+      expect(buttons[2].text().trim()).toBe('Nächstes Board');
+    });
+
+    it('should maintain proper heading hierarchy', () => {
+      const h4 = wrapper.find('h4');
+      expect(h4.exists()).toBe(true);
+    });
+  });
+
+  describe('Responsive Behavior', () => {
+    it('should use justify-space-between for proper spacing', () => {
+      const container = wrapper.find('.d-flex.flex-row.justify-space-between');
+      expect(container.exists()).toBe(true);
+    });
+  });
+
+  describe('German Localization', () => {
+    it('should display German text for navigation buttons', () => {
+      expect(wrapper.text()).toContain('Vorheriges Board');
+      expect(wrapper.text()).toContain('Nächstes Board');
+    });
+  });
+
+  describe('Component Integration', () => {
+    it('should work correctly with Vuetify components', () => {
+      expect(wrapper.find('.v-sheet').exists()).toBe(true);
+      expect(wrapper.findAll('.v-btn')).toHaveLength(3);
+    });
+  });
 });