@zap-wunschlachen/wl-shared-components 1.0.76 → 1.0.78

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

@@ -0,0 +1,361 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import SelectAutocomplete from '@components/SelectAutocomplete/SelectAutocomplete.vue';
+
+// Add v-autocomplete stub for this test
+const vAutocompleteStub = {
+  name: 'v-autocomplete',
+  template: `<div class="v-autocomplete" data-testid="root" :aria-label="ariaLabel" :aria-invalid="ariaInvalid" :aria-describedby="ariaDescribedby">
+    <input data-testid="autocomplete-input" />
+    <slot name="menu" />
+    <slot name="item" />
+    <slot name="selection" />
+    <slot name="no-data" />
+    <slot name="prepend" />
+    <slot name="prepend-inner" />
+    <slot name="append" />
+    <slot name="append-inner" />
+  </div>`,
+  props: [
+    'modelValue', 'items', 'disabled', 'error', 'label', 'clearable', 'chips',
+    'multiple', 'variant', 'density', 'returnObject', 'itemTitle', 'itemValue',
+    'placeholder', 'persistentPlaceholder', 'appendIcon', 'appendInnerIcon',
+    'prependIcon', 'prependInnerIcon', 'menuIcon', 'clearIcon', 'closableChips',
+    'autoSelectFirst', 'customFilter', 'hideNoData', 'hideDetails', 'ariaLabel',
+    'ariaInvalid', 'ariaDescribedby', 'menuProps', 'rounded', 'rules',
+  ],
+  emits: [
+    'update:modelValue', 'click:append', 'click:append-inner',
+    'click:clear', 'click:prepend', 'click:prepend-inner', 'update:search',
+  ],
+};
+
+const mountSelect = (props: Record<string, any> = {}, options: Record<string, any> = {}) => {
+  return mount(SelectAutocomplete, {
+    props,
+    global: {
+      stubs: {
+        'v-autocomplete': vAutocompleteStub,
+      },
+      ...options?.global,
+    },
+    ...options,
+  });
+};
+
+describe('SelectAutocomplete', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ─── Default Rendering ────────────────────────────────────────────
+  describe('Default Rendering', () => {
+    it('renders with data-testid="root"', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies wl-select CSS class', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.find('.wl-select').exists()).toBe(true);
+    });
+
+    it('wraps in v-autocomplete', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.findComponent({ name: 'v-autocomplete' }).exists()).toBe(true);
+    });
+  });
+
+  // ─── Default Props ────────────────────────────────────────────────
+  describe('Default Props', () => {
+    it('defaults label to "Label"', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.vm.label).toBe('Label');
+    });
+
+    it('defaults density to "compact"', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.vm.density).toBe('compact');
+    });
+
+    it('defaults variant to "outlined"', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.vm.variant).toBe('outlined');
+    });
+
+    it('defaults disabled to false', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.vm.disabled).toBe(false);
+    });
+
+    it('defaults error to false', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.vm.error).toBe(false);
+    });
+
+    it('defaults clearable to false', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.vm.clearable).toBe(false);
+    });
+
+    it('defaults returnObject to true', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.vm.returnObject).toBe(true);
+    });
+
+    it('defaults hideDetails to true', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.vm.hideDetails).toBe(true);
+    });
+
+    it('defaults items to empty array', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.vm.items).toEqual([]);
+    });
+  });
+
+  // ─── v-model ──────────────────────────────────────────────────────
+  describe('v-model', () => {
+    it('accepts modelValue prop', () => {
+      const wrapper = mountSelect({ modelValue: 'test' });
+      expect(wrapper.vm.modelValue).toBe('test');
+    });
+
+    it('emits update:modelValue when internal value changes', async () => {
+      const wrapper = mountSelect({ modelValue: 'a' });
+      // Trigger internal value change
+      (wrapper.vm as any).internalValue = 'b';
+      await nextTick();
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')![0]).toEqual(['b']);
+    });
+
+    it('syncs external modelValue changes', async () => {
+      const wrapper = mountSelect({ modelValue: 'x' });
+      await wrapper.setProps({ modelValue: 'y' });
+      expect((wrapper.vm as any).internalValue).toBe('y');
+    });
+
+    it('handles array modelValue for multiple mode', () => {
+      const wrapper = mountSelect({
+        modelValue: ['a', 'b'],
+        multiple: true,
+      });
+      expect(wrapper.vm.modelValue).toEqual(['a', 'b']);
+    });
+  });
+
+  // ─── Event Emission ───────────────────────────────────────────────
+  describe('Event Emission', () => {
+    it('emits click:append', () => {
+      const wrapper = mountSelect();
+      const autocomplete = wrapper.findComponent({ name: 'v-autocomplete' });
+      autocomplete.vm.$emit('click:append', new MouseEvent('click'));
+      expect(wrapper.emitted('click:append')).toBeTruthy();
+    });
+
+    it('emits click:appendInner', () => {
+      const wrapper = mountSelect();
+      const autocomplete = wrapper.findComponent({ name: 'v-autocomplete' });
+      autocomplete.vm.$emit('click:append-inner', new MouseEvent('click'));
+      expect(wrapper.emitted('click:appendInner')).toBeTruthy();
+    });
+
+    it('emits click:clear', () => {
+      const wrapper = mountSelect();
+      const autocomplete = wrapper.findComponent({ name: 'v-autocomplete' });
+      autocomplete.vm.$emit('click:clear', new MouseEvent('click'));
+      expect(wrapper.emitted('click:clear')).toBeTruthy();
+    });
+
+    it('emits click:prepend', () => {
+      const wrapper = mountSelect();
+      const autocomplete = wrapper.findComponent({ name: 'v-autocomplete' });
+      autocomplete.vm.$emit('click:prepend', new MouseEvent('click'));
+      expect(wrapper.emitted('click:prepend')).toBeTruthy();
+    });
+
+    it('emits click:prependInner', () => {
+      const wrapper = mountSelect();
+      const autocomplete = wrapper.findComponent({ name: 'v-autocomplete' });
+      autocomplete.vm.$emit('click:prepend-inner', new MouseEvent('click'));
+      expect(wrapper.emitted('click:prependInner')).toBeTruthy();
+    });
+
+    it('emits update:search', () => {
+      const wrapper = mountSelect();
+      const autocomplete = wrapper.findComponent({ name: 'v-autocomplete' });
+      autocomplete.vm.$emit('update:search', 'query');
+      expect(wrapper.emitted('update:search')).toBeTruthy();
+      expect(wrapper.emitted('update:search')![0]).toEqual(['query']);
+    });
+  });
+
+  // ─── Items & Filtering ────────────────────────────────────────────
+  describe('Items & Filtering', () => {
+    it('passes items to v-autocomplete', () => {
+      const items = [
+        { title: 'Item 1', value: '1' },
+        { title: 'Item 2', value: '2' },
+      ];
+      const wrapper = mountSelect({ items });
+      expect(wrapper.vm.items).toEqual(items);
+    });
+
+    it('passes customFilter function', () => {
+      const filter = vi.fn();
+      const wrapper = mountSelect({ customFilter: filter });
+      expect(wrapper.vm.customFilter).toBe(filter);
+    });
+
+    it('passes autoSelectFirst', () => {
+      const wrapper = mountSelect({ autoSelectFirst: true });
+      expect(wrapper.vm.autoSelectFirst).toBe(true);
+    });
+
+    it('passes hideNoData', () => {
+      const wrapper = mountSelect({ hideNoData: true });
+      expect(wrapper.vm.hideNoData).toBe(true);
+    });
+  });
+
+  // ─── Slots ────────────────────────────────────────────────────────
+  describe('Slots', () => {
+    it('renders menu slot', () => {
+      const wrapper = mountSelect({}, {
+        slots: { menu: '<div class="custom-menu">Menu</div>' },
+      });
+      expect(wrapper.find('.custom-menu').exists()).toBe(true);
+    });
+
+    it('renders prepend slot', () => {
+      const wrapper = mountSelect({}, {
+        slots: { prepend: '<div class="custom-prepend">P</div>' },
+      });
+      expect(wrapper.find('.custom-prepend').exists()).toBe(true);
+    });
+
+    it('renders append slot', () => {
+      const wrapper = mountSelect({}, {
+        slots: { append: '<div class="custom-append">A</div>' },
+      });
+      expect(wrapper.find('.custom-append').exists()).toBe(true);
+    });
+  });
+
+  // ─── Exposed Methods ──────────────────────────────────────────────
+  describe('Exposed Methods', () => {
+    it('exposes focus method', () => {
+      const wrapper = mountSelect();
+      expect(typeof wrapper.vm.focus).toBe('function');
+    });
+
+    it('exposes blur method', () => {
+      const wrapper = mountSelect();
+      expect(typeof wrapper.vm.blur).toBe('function');
+    });
+
+    it('exposes select method', () => {
+      const wrapper = mountSelect();
+      expect(typeof wrapper.vm.select).toBe('function');
+    });
+  });
+
+  // ─── borderOnHover ────────────────────────────────────────────────
+  describe('borderOnHover', () => {
+    it('does not add border-on-hover class by default', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.find('.border-on-hover').exists()).toBe(false);
+    });
+
+    it('adds border-on-hover class when prop is true', () => {
+      const wrapper = mountSelect({ borderOnHover: true });
+      expect(wrapper.find('.border-on-hover').exists()).toBe(true);
+    });
+  });
+
+  // ─── Theme Colors ─────────────────────────────────────────────────
+  describe('Theme Colors', () => {
+    it('uses siteColors by default', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('uses injected themeColors when provided', () => {
+      const themeColors = {
+        value: {
+          select_item_text: '#111',
+          select_item_default_bg: '#222',
+          select_item_hovered_bg: '#333',
+          select_item_selected_left_border: '#444',
+          select_item_selected_bg: '#555',
+        },
+      };
+      const wrapper = mount(SelectAutocomplete, {
+        global: {
+          provide: { themeColors },
+          stubs: { 'v-autocomplete': vAutocompleteStub },
+        },
+      });
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  // ─── WCAG Accessibility ───────────────────────────────────────────
+  describe('WCAG Accessibility', () => {
+    it('sets aria-label when provided (WCAG 4.1.2)', () => {
+      const wrapper = mountSelect({ ariaLabel: 'Select a patient' });
+      const autocomplete = wrapper.findComponent({ name: 'v-autocomplete' });
+      expect(autocomplete.props('ariaLabel')).toBe('Select a patient');
+    });
+
+    it('does not set aria-label when not provided', () => {
+      const wrapper = mountSelect();
+      const autocomplete = wrapper.findComponent({ name: 'v-autocomplete' });
+      expect(autocomplete.props('ariaLabel')).toBeUndefined();
+    });
+
+    it('sets aria-invalid when error is true', () => {
+      const wrapper = mountSelect({ error: true });
+      const autocomplete = wrapper.findComponent({ name: 'v-autocomplete' });
+      expect(autocomplete.props('ariaInvalid')).toBe(true);
+    });
+
+    it('does not set aria-invalid when no error', () => {
+      const wrapper = mountSelect({ error: false });
+      const autocomplete = wrapper.findComponent({ name: 'v-autocomplete' });
+      expect(autocomplete.props('ariaInvalid')).toBeUndefined();
+    });
+
+    it('sets aria-describedby when provided (WCAG 1.3.1)', () => {
+      const wrapper = mountSelect({ ariaDescribedby: 'error-msg' });
+      const autocomplete = wrapper.findComponent({ name: 'v-autocomplete' });
+      expect(autocomplete.props('ariaDescribedby')).toBe('error-msg');
+    });
+
+    it('does not set aria-describedby when not provided', () => {
+      const wrapper = mountSelect();
+      const autocomplete = wrapper.findComponent({ name: 'v-autocomplete' });
+      expect(autocomplete.props('ariaDescribedby')).toBeUndefined();
+    });
+  });
+
+  // ─── Edge Cases ───────────────────────────────────────────────────
+  describe('Edge Cases', () => {
+    it('handles empty items', () => {
+      const wrapper = mountSelect({ items: [] });
+      expect(wrapper.vm.items).toEqual([]);
+    });
+
+    it('handles disabled state', () => {
+      const wrapper = mountSelect({ disabled: true });
+      expect(wrapper.vm.disabled).toBe(true);
+    });
+
+    it('handles undefined modelValue', () => {
+      const wrapper = mountSelect();
+      expect(wrapper.vm.modelValue).toBeUndefined();
+    });
+  });
+});