@zap-wunschlachen/wl-shared-components 1.0.0

package/tests/unit/components/Core/Select.spec.ts

@@ -0,0 +1,713 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import Select from '@components/Select/Select.vue';
+
+describe('Select', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Test default behavior and rendering
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(Select);
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.vm.disabled).toBe(false);
+      expect(wrapper.vm.error).toBe(false);
+      expect(wrapper.vm.clearable).toBe(false);
+      expect(wrapper.vm.label).toBe('Label');
+      expect(wrapper.vm.chips).toBe(false);
+      expect(wrapper.vm.multiple).toBe(false);
+      expect(wrapper.vm.returnObject).toBe(true);
+      expect(wrapper.vm.density).toBe('compact');
+      expect(wrapper.vm.variant).toBe('outlined');
+      expect(wrapper.vm.menuIcon).toBe('');
+      expect(wrapper.vm.clearIcon).toBe('x-mark');
+      expect(wrapper.vm.closableChips).toBe(false);
+      expect(wrapper.vm.borderOnHover).toBe(false);
+      expect(Array.isArray(wrapper.vm.items)).toBe(true);
+      expect(wrapper.vm.items).toEqual([]);
+    });
+
+    it('applies wl-select class', () => {
+      const wrapper = mount(Select);
+      expect(wrapper.find('.wl-select').exists()).toBe(true);
+    });
+
+    it('has data-testid for testing', () => {
+      const wrapper = mount(Select);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  // Test v-model functionality
+  describe('v-model', () => {
+    it('initializes internalValue with modelValue prop', () => {
+      const wrapper = mount(Select, {
+        props: {
+          modelValue: 'test-value'
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('test-value');
+    });
+
+    it('updates internalValue when modelValue prop changes', async () => {
+      const wrapper = mount(Select, {
+        props: {
+          modelValue: 'initial'
+        }
+      });
+      
+      await wrapper.setProps({ modelValue: 'updated' });
+      
+      expect(wrapper.vm.internalValue).toBe('updated');
+    });
+
+    it('emits update:modelValue when internalValue changes', async () => {
+      const wrapper = mount(Select);
+      
+      wrapper.vm.internalValue = 'new-value';
+      await nextTick();
+      
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new-value']);
+    });
+
+    it('handles array modelValue for multiple selection', () => {
+      const wrapper = mount(Select, {
+        props: {
+          modelValue: ['option1', 'option2'],
+          multiple: true
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toEqual(['option1', 'option2']);
+      expect(wrapper.vm.multiple).toBe(true);
+    });
+
+    it('handles object modelValue', () => {
+      const objectValue = { id: 1, name: 'Test Object' };
+      const wrapper = mount(Select, {
+        props: {
+          modelValue: objectValue
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toEqual(objectValue);
+    });
+  });
+
+  // Test items and selection
+  describe('Items and Selection', () => {
+    const testItems = [
+      { title: 'Option 1', value: 'opt1' },
+      { title: 'Option 2', value: 'opt2' },
+      { title: 'Option 3', value: 'opt3' }
+    ];
+
+    it('accepts items array', () => {
+      const wrapper = mount(Select, {
+        props: {
+          items: testItems
+        }
+      });
+      
+      expect(wrapper.vm.items).toEqual(testItems);
+    });
+
+    it('handles empty items array', () => {
+      const wrapper = mount(Select, {
+        props: {
+          items: []
+        }
+      });
+      
+      expect(wrapper.vm.items).toEqual([]);
+    });
+
+    it('uses title and value properties correctly', () => {
+      const wrapper = mount(Select, {
+        props: {
+          items: testItems
+        }
+      });
+      
+      // The component uses hardcoded 'title' and 'value' for item-title and item-value
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('handles returnObject prop', () => {
+      const wrapper = mount(Select, {
+        props: {
+          returnObject: false
+        }
+      });
+      
+      expect(wrapper.vm.returnObject).toBe(false);
+    });
+  });
+
+  // Test state props
+  describe('State Props', () => {
+    it('applies disabled state', () => {
+      const wrapper = mount(Select, {
+        props: {
+          disabled: true
+        }
+      });
+      
+      expect(wrapper.vm.disabled).toBe(true);
+    });
+
+    it('applies error state', () => {
+      const wrapper = mount(Select, {
+        props: {
+          error: true
+        }
+      });
+      
+      expect(wrapper.vm.error).toBe(true);
+    });
+
+    it('applies clearable state', () => {
+      const wrapper = mount(Select, {
+        props: {
+          clearable: true
+        }
+      });
+      
+      expect(wrapper.vm.clearable).toBe(true);
+    });
+
+    it('applies border on hover', () => {
+      const wrapper = mount(Select, {
+        props: {
+          borderOnHover: true
+        }
+      });
+      
+      expect(wrapper.find('.border-on-hover').exists()).toBe(true);
+      expect(wrapper.vm.borderOnHover).toBe(true);
+    });
+  });
+
+  // Test chip functionality
+  describe('Chips', () => {
+    it('enables chips display', () => {
+      const wrapper = mount(Select, {
+        props: {
+          chips: true
+        }
+      });
+      
+      expect(wrapper.vm.chips).toBe(true);
+    });
+
+    it('enables closable chips', () => {
+      const wrapper = mount(Select, {
+        props: {
+          chips: true,
+          closableChips: true
+        }
+      });
+      
+      expect(wrapper.vm.chips).toBe(true);
+      expect(wrapper.vm.closableChips).toBe(true);
+    });
+
+    it('works with multiple selection and chips', () => {
+      const wrapper = mount(Select, {
+        props: {
+          multiple: true,
+          chips: true,
+          closableChips: true
+        }
+      });
+      
+      expect(wrapper.vm.multiple).toBe(true);
+      expect(wrapper.vm.chips).toBe(true);
+      expect(wrapper.vm.closableChips).toBe(true);
+    });
+  });
+
+  // Test icons
+  describe('Icons', () => {
+    it('handles append icon', () => {
+      const wrapper = mount(Select, {
+        props: {
+          appendIcon: 'mdi-arrow-down'
+        }
+      });
+      
+      expect(wrapper.vm.appendIcon).toBe('mdi-arrow-down');
+    });
+
+    it('handles append inner icon', () => {
+      const wrapper = mount(Select, {
+        props: {
+          appendInnerIcon: 'mdi-magnify'
+        }
+      });
+      
+      expect(wrapper.vm.appendInnerIcon).toBe('mdi-magnify');
+    });
+
+    it('handles prepend icon', () => {
+      const wrapper = mount(Select, {
+        props: {
+          prependIcon: 'mdi-home'
+        }
+      });
+      
+      expect(wrapper.vm.prependIcon).toBe('mdi-home');
+    });
+
+    it('handles prepend inner icon', () => {
+      const wrapper = mount(Select, {
+        props: {
+          prependInnerIcon: 'mdi-search'
+        }
+      });
+      
+      expect(wrapper.vm.prependInnerIcon).toBe('mdi-search');
+    });
+
+    it('uses custom menu icon', () => {
+      const wrapper = mount(Select, {
+        props: {
+          menuIcon: 'mdi-chevron-down'
+        }
+      });
+      
+      expect(wrapper.vm.menuIcon).toBe('mdi-chevron-down');
+    });
+
+    it('uses custom clear icon', () => {
+      const wrapper = mount(Select, {
+        props: {
+          clearIcon: 'mdi-close'
+        }
+      });
+      
+      expect(wrapper.vm.clearIcon).toBe('mdi-close');
+    });
+
+    it('handles all icons together', () => {
+      const wrapper = mount(Select, {
+        props: {
+          appendIcon: 'mdi-arrow-down',
+          appendInnerIcon: 'mdi-magnify',
+          prependIcon: 'mdi-home',
+          prependInnerIcon: 'mdi-search',
+          menuIcon: 'mdi-chevron-down',
+          clearIcon: 'mdi-close'
+        }
+      });
+      
+      expect(wrapper.vm.appendIcon).toBe('mdi-arrow-down');
+      expect(wrapper.vm.appendInnerIcon).toBe('mdi-magnify');
+      expect(wrapper.vm.prependIcon).toBe('mdi-home');
+      expect(wrapper.vm.prependInnerIcon).toBe('mdi-search');
+      expect(wrapper.vm.menuIcon).toBe('mdi-chevron-down');
+      expect(wrapper.vm.clearIcon).toBe('mdi-close');
+    });
+  });
+
+  // Test click events
+  describe('Click Events', () => {
+    it('emits click:append event', () => {
+      const wrapper = mount(Select);
+      const mockEvent = { target: {} };
+      
+      wrapper.vm.onClickAppend(mockEvent);
+      
+      expect(wrapper.emitted('click:append')).toBeTruthy();
+      expect(wrapper.emitted('click:append')?.[0]).toEqual([mockEvent]);
+    });
+
+    it('emits click:appendInner event', () => {
+      const wrapper = mount(Select);
+      const mockEvent = { target: {} };
+      
+      wrapper.vm.onClickAppendInner(mockEvent);
+      
+      expect(wrapper.emitted('click:appendInner')).toBeTruthy();
+      expect(wrapper.emitted('click:appendInner')?.[0]).toEqual([mockEvent]);
+    });
+
+    it('emits click:clear event', () => {
+      const wrapper = mount(Select);
+      const mockEvent = { target: {} };
+      
+      wrapper.vm.onClickClear(mockEvent);
+      
+      expect(wrapper.emitted('click:clear')).toBeTruthy();
+      expect(wrapper.emitted('click:clear')?.[0]).toEqual([mockEvent]);
+    });
+
+    it('emits click:prepend event', () => {
+      const wrapper = mount(Select);
+      const mockEvent = { target: {} };
+      
+      wrapper.vm.onClickPrepend(mockEvent);
+      
+      expect(wrapper.emitted('click:prepend')).toBeTruthy();
+      expect(wrapper.emitted('click:prepend')?.[0]).toEqual([mockEvent]);
+    });
+
+    it('emits click:prependInner event', () => {
+      const wrapper = mount(Select);
+      const mockEvent = { target: {} };
+      
+      wrapper.vm.onClickPrependInner(mockEvent);
+      
+      expect(wrapper.emitted('click:prependInner')).toBeTruthy();
+      expect(wrapper.emitted('click:prependInner')?.[0]).toEqual([mockEvent]);
+    });
+
+    it('emits update:search event', () => {
+      const wrapper = mount(Select);
+      const searchValue = 'test search';
+      
+      wrapper.vm.onUpdateSearch(searchValue);
+      
+      expect(wrapper.emitted('update:search')).toBeTruthy();
+      expect(wrapper.emitted('update:search')?.[0]).toEqual([searchValue]);
+    });
+  });
+
+  // Test slots
+  describe('Slots', () => {
+    it('renders menu slot', () => {
+      const wrapper = mount(Select, {
+        slots: {
+          menu: '<div data-testid="menu-slot">Custom Menu</div>'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="menu-slot"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="menu-slot"]').text()).toBe('Custom Menu');
+    });
+
+    it('renders prepend slot', () => {
+      const wrapper = mount(Select, {
+        slots: {
+          prepend: '<div data-testid="prepend-slot">Prepend Content</div>'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="prepend-slot"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="prepend-slot"]').text()).toBe('Prepend Content');
+    });
+
+    it('renders prepend-inner slot', () => {
+      const wrapper = mount(Select, {
+        slots: {
+          'prepend-inner': '<div data-testid="prepend-inner-slot">Prepend Inner</div>'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="prepend-inner-slot"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="prepend-inner-slot"]').text()).toBe('Prepend Inner');
+    });
+
+    it('renders append slot', () => {
+      const wrapper = mount(Select, {
+        slots: {
+          append: '<div data-testid="append-slot">Append Content</div>'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="append-slot"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="append-slot"]').text()).toBe('Append Content');
+    });
+
+    it('renders append-inner slot', () => {
+      const wrapper = mount(Select, {
+        slots: {
+          'append-inner': '<div data-testid="append-inner-slot">Append Inner</div>'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="append-inner-slot"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="append-inner-slot"]').text()).toBe('Append Inner');
+    });
+
+    it('renders multiple slots simultaneously', () => {
+      const wrapper = mount(Select, {
+        slots: {
+          menu: '<div data-testid="menu-slot">Menu</div>',
+          prepend: '<div data-testid="prepend-slot">Prepend</div>',
+          'prepend-inner': '<div data-testid="prepend-inner-slot">Prepend Inner</div>',
+          append: '<div data-testid="append-slot">Append</div>',
+          'append-inner': '<div data-testid="append-inner-slot">Append Inner</div>'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="menu-slot"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="prepend-slot"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="prepend-inner-slot"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="append-slot"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="append-inner-slot"]').exists()).toBe(true);
+    });
+  });
+
+  // Test exposed methods
+  describe('Exposed Methods', () => {
+    it('exposes focus, blur, and select methods', () => {
+      const wrapper = mount(Select);
+      
+      expect(wrapper.vm.focus).toBeDefined();
+      expect(wrapper.vm.blur).toBeDefined();
+      expect(wrapper.vm.select).toBeDefined();
+      expect(typeof wrapper.vm.focus).toBe('function');
+      expect(typeof wrapper.vm.blur).toBe('function');
+      expect(typeof wrapper.vm.select).toBe('function');
+    });
+
+    it('getNativeInput returns input element with stub', () => {
+      const wrapper = mount(Select);
+      const nativeInput = wrapper.vm.getNativeInput();
+      
+      // Since our stub provides a real input element, getNativeInput will return it
+      expect(nativeInput).toBeTruthy();
+      expect(nativeInput.tagName).toBe('INPUT');
+    });
+
+    it('focus method works with mocked input', async () => {
+      const wrapper = mount(Select);
+      
+      // Get the real input element
+      const nativeInput = wrapper.vm.getNativeInput();
+      const focusSpy = vi.spyOn(nativeInput, 'focus');
+      
+      wrapper.vm.focus();
+      await nextTick();
+      
+      expect(focusSpy).toHaveBeenCalled();
+    });
+
+    it('blur method works with mocked input', async () => {
+      const wrapper = mount(Select);
+      
+      // Get the real input element
+      const nativeInput = wrapper.vm.getNativeInput();
+      const blurSpy = vi.spyOn(nativeInput, 'blur');
+      
+      wrapper.vm.blur();
+      await nextTick();
+      
+      expect(blurSpy).toHaveBeenCalled();
+    });
+
+    it('select method works with mocked input', async () => {
+      const wrapper = mount(Select);
+      
+      // Get the real input element
+      const nativeInput = wrapper.vm.getNativeInput();
+      const selectSpy = vi.spyOn(nativeInput, 'select');
+      
+      wrapper.vm.select();
+      await nextTick();
+      
+      expect(selectSpy).toHaveBeenCalled();
+    });
+  });
+
+  // Test accessibility and styling
+  describe('Accessibility and Styling', () => {
+    it('applies proper label', () => {
+      const wrapper = mount(Select, {
+        props: {
+          label: 'Select an option'
+        }
+      });
+      
+      expect(wrapper.vm.label).toBe('Select an option');
+    });
+
+    it('maintains accessibility with disabled state', () => {
+      const wrapper = mount(Select, {
+        props: {
+          disabled: true,
+          label: 'Disabled Select'
+        }
+      });
+      
+      expect(wrapper.vm.disabled).toBe(true);
+      expect(wrapper.vm.label).toBe('Disabled Select');
+    });
+
+    it('applies variant styling', () => {
+      const variants = ['outlined', 'filled', 'underlined', 'solo', 'solo-inverted'];
+      
+      variants.forEach(variant => {
+        const wrapper = mount(Select, {
+          props: { variant }
+        });
+        
+        expect(wrapper.vm.variant).toBe(variant);
+      });
+    });
+
+    it('applies density correctly', () => {
+      const densities = ['compact', 'comfortable', 'default'];
+      
+      densities.forEach(density => {
+        const wrapper = mount(Select, {
+          props: { density }
+        });
+        
+        expect(wrapper.vm.density).toBe(density);
+      });
+    });
+  });
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles undefined modelValue', () => {
+      const wrapper = mount(Select, {
+        props: {
+          modelValue: undefined
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBeUndefined();
+    });
+
+    it('handles null modelValue', () => {
+      const wrapper = mount(Select, {
+        props: {
+          modelValue: null
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBeNull();
+    });
+
+    it('handles empty string modelValue', () => {
+      const wrapper = mount(Select, {
+        props: {
+          modelValue: ''
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('');
+    });
+
+    it('handles large items array', () => {
+      const largeItems = Array.from({ length: 1000 }, (_, i) => ({
+        title: `Option ${i}`,
+        value: `opt${i}`
+      }));
+      
+      const wrapper = mount(Select, {
+        props: {
+          items: largeItems
+        }
+      });
+      
+      expect(wrapper.vm.items).toHaveLength(1000);
+    });
+
+    it('handles complex object items', () => {
+      const complexItems = [
+        {
+          title: 'Complex Item 1',
+          value: { id: 1, data: { nested: 'value1' } },
+          metadata: { category: 'test' }
+        },
+        {
+          title: 'Complex Item 2',
+          value: { id: 2, data: { nested: 'value2' } },
+          metadata: { category: 'production' }
+        }
+      ];
+      
+      const wrapper = mount(Select, {
+        props: {
+          items: complexItems
+        }
+      });
+      
+      expect(wrapper.vm.items).toEqual(complexItems);
+    });
+
+    it('handles rapid prop changes', async () => {
+      const wrapper = mount(Select, {
+        props: {
+          modelValue: 'initial'
+        }
+      });
+
+      await wrapper.setProps({ modelValue: 'change1' });
+      await wrapper.setProps({ modelValue: 'change2' });
+      await wrapper.setProps({ modelValue: 'change3' });
+
+      expect(wrapper.vm.internalValue).toBe('change3');
+    });
+  });
+
+  // Test complex scenarios
+  describe('Complex Scenarios', () => {
+    it('works with all features enabled', () => {
+      const testItems = [
+        { title: 'Option 1', value: 'opt1' },
+        { title: 'Option 2', value: 'opt2' }
+      ];
+
+      const wrapper = mount(Select, {
+        props: {
+          label: 'Full Featured Select',
+          items: testItems,
+          modelValue: ['opt1'],
+          multiple: true,
+          chips: true,
+          closableChips: true,
+          clearable: true,
+          disabled: false,
+          error: false,
+          variant: 'outlined',
+          density: 'comfortable',
+          returnObject: false,
+          borderOnHover: true,
+          appendIcon: 'mdi-chevron-down',
+          prependIcon: 'mdi-magnify',
+          clearIcon: 'mdi-close',
+          menuIcon: 'mdi-menu-down'
+        }
+      });
+      
+      expect(wrapper.vm.multiple).toBe(true);
+      expect(wrapper.vm.chips).toBe(true);
+      expect(wrapper.vm.closableChips).toBe(true);
+      expect(wrapper.vm.clearable).toBe(true);
+      expect(wrapper.vm.borderOnHover).toBe(true);
+      expect(wrapper.vm.returnObject).toBe(false);
+      expect(wrapper.find('.border-on-hover').exists()).toBe(true);
+    });
+
+    it('handles switching between single and multiple modes', async () => {
+      const wrapper = mount(Select, {
+        props: {
+          modelValue: 'single-value',
+          multiple: false
+        }
+      });
+
+      expect(wrapper.vm.internalValue).toBe('single-value');
+      expect(wrapper.vm.multiple).toBe(false);
+
+      await wrapper.setProps({
+        modelValue: ['array-value'],
+        multiple: true
+      });
+
+      expect(wrapper.vm.internalValue).toEqual(['array-value']);
+      expect(wrapper.vm.multiple).toBe(true);
+    });
+  });
+});