@zap-wunschlachen/wl-shared-components 1.0.0

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

@@ -0,0 +1,513 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import Input from '@components/Input/Input.vue';
+
+// Mock vue-i18n
+const mockT = vi.fn().mockImplementation((key: string) => {
+  const translations: Record<string, string> = {
+    'wl.input.placeholder': 'Enter text here'
+  };
+  return translations[key] || key;
+});
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: mockT
+  })
+}));
+
+describe('Input', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Test default rendering and props
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(Input);
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.vm.variant).toBe('outlined');
+      expect(wrapper.vm.density).toBe('compact');
+      expect(wrapper.vm.hideDetails).toBe(true);
+      expect(wrapper.vm.disabled).toBe(false);
+      expect(wrapper.vm.persistentHint).toBe(false);
+    });
+
+    it('uses computed placeholder from i18n when no placeholder prop provided', () => {
+      const wrapper = mount(Input);
+      expect(mockT).toHaveBeenCalledWith('wl.input.placeholder');
+      expect(wrapper.vm.computedPlaceholder).toBe('Enter text here');
+    });
+
+    it('uses provided placeholder over i18n default', () => {
+      const wrapper = mount(Input, {
+        props: {
+          placeholder: 'Custom placeholder'
+        }
+      });
+      
+      expect(wrapper.vm.computedPlaceholder).toBe('Custom placeholder');
+    });
+
+    it('applies custom CSS classes', () => {
+      const wrapper = mount(Input);
+      expect(wrapper.find('.custom-prepend-icon').exists()).toBe(true);
+    });
+  });
+
+  // Test v-model functionality
+  describe('v-model', () => {
+    it('emits update:modelValue when input changes', async () => {
+      const wrapper = mount(Input);
+      
+      await wrapper.vm.onInput('test value');
+      
+      expect(wrapper.emitted('update:modelValue')).toBeTruthy();
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['test value']);
+    });
+
+    it('updates modelValue prop correctly', () => {
+      const wrapper = mount(Input, {
+        props: {
+          modelValue: 'initial value'
+        }
+      });
+      
+      expect(wrapper.vm.modelValue).toBe('initial value');
+    });
+
+    it('handles empty string modelValue', () => {
+      const wrapper = mount(Input, {
+        props: {
+          modelValue: ''
+        }
+      });
+      
+      expect(wrapper.vm.modelValue).toBe('');
+    });
+
+    it('handles undefined modelValue', () => {
+      const wrapper = mount(Input, {
+        props: {
+          modelValue: undefined
+        }
+      });
+      
+      expect(wrapper.vm.modelValue).toBeUndefined();
+    });
+  });
+
+  // Test state props
+  describe('State Props', () => {
+    it('applies success state', () => {
+      const wrapper = mount(Input, {
+        props: {
+          success: true
+        }
+      });
+      
+      expect(wrapper.find('.is-success').exists()).toBe(true);
+      expect(wrapper.vm.success).toBe(true);
+    });
+
+    it('applies error state', () => {
+      const wrapper = mount(Input, {
+        props: {
+          error: true
+        }
+      });
+      
+      expect(wrapper.find('.is-error').exists()).toBe(true);
+      expect(wrapper.vm.error).toBe(true);
+    });
+
+    it('applies warning state', () => {
+      const wrapper = mount(Input, {
+        props: {
+          warning: true
+        }
+      });
+      
+      expect(wrapper.find('.is-warning').exists()).toBe(true);
+      expect(wrapper.vm.warning).toBe(true);
+    });
+
+    it('applies disabled state', () => {
+      const wrapper = mount(Input, {
+        props: {
+          disabled: true
+        }
+      });
+      
+      expect(wrapper.vm.disabled).toBe(true);
+    });
+
+    it('applies border on hover', () => {
+      const wrapper = mount(Input, {
+        props: {
+          borderOnHover: true
+        }
+      });
+      
+      expect(wrapper.find('.border-on-hover').exists()).toBe(true);
+      expect(wrapper.vm.borderOnHover).toBe(true);
+    });
+
+    it('handles multiple states simultaneously', () => {
+      const wrapper = mount(Input, {
+        props: {
+          success: true,
+          disabled: true,
+          borderOnHover: true
+        }
+      });
+      
+      expect(wrapper.find('.is-success').exists()).toBe(true);
+      expect(wrapper.find('.border-on-hover').exists()).toBe(true);
+      expect(wrapper.vm.disabled).toBe(true);
+    });
+  });
+
+  // Test icons and click events
+  describe('Icons and Events', () => {
+    it('handles prepend icon', () => {
+      const wrapper = mount(Input, {
+        props: {
+          prependIcon: 'mdi-home'
+        }
+      });
+      
+      expect(wrapper.vm.prependIcon).toBe('mdi-home');
+    });
+
+    it('handles prepend inner icon', () => {
+      const wrapper = mount(Input, {
+        props: {
+          prependInnerIcon: 'mdi-search'
+        }
+      });
+      
+      expect(wrapper.vm.prependInnerIcon).toBe('mdi-search');
+    });
+
+    it('handles append icon', () => {
+      const wrapper = mount(Input, {
+        props: {
+          appendIcon: 'mdi-close'
+        }
+      });
+      
+      expect(wrapper.vm.appendIcon).toBe('mdi-close');
+    });
+
+    it('handles append inner icon', () => {
+      const wrapper = mount(Input, {
+        props: {
+          appendInnerIcon: 'mdi-eye'
+        }
+      });
+      
+      expect(wrapper.vm.appendInnerIcon).toBe('mdi-eye');
+    });
+
+    it('emits click:prepend event', async () => {
+      const wrapper = mount(Input);
+      
+      wrapper.vm.onPrependClick();
+      
+      expect(wrapper.emitted('click:prepend')).toBeTruthy();
+      expect(wrapper.emitted('click:prepend')).toHaveLength(1);
+    });
+
+    it('emits click:prepend-inner event', async () => {
+      const wrapper = mount(Input);
+      
+      wrapper.vm.onPrependInnerClick();
+      
+      expect(wrapper.emitted('click:prepend-inner')).toBeTruthy();
+      expect(wrapper.emitted('click:prepend-inner')).toHaveLength(1);
+    });
+
+    it('emits click:append event', async () => {
+      const wrapper = mount(Input);
+      
+      wrapper.vm.onAppendClick();
+      
+      expect(wrapper.emitted('click:append')).toBeTruthy();
+      expect(wrapper.emitted('click:append')).toHaveLength(1);
+    });
+
+    it('emits click:append-inner event', async () => {
+      const wrapper = mount(Input);
+      
+      wrapper.vm.onAppendInnerClick();
+      
+      expect(wrapper.emitted('click:append-inner')).toBeTruthy();
+      expect(wrapper.emitted('click:append-inner')).toHaveLength(1);
+    });
+  });
+
+  // Test slots
+  describe('Slots', () => {
+    it('renders prepend slot', () => {
+      const wrapper = mount(Input, {
+        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(Input, {
+        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(Input, {
+        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(Input, {
+        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(Input, {
+        slots: {
+          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="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 hint and details
+  describe('Hints and Details', () => {
+    it('renders hint in details slot', () => {
+      const wrapper = mount(Input, {
+        props: {
+          hint: 'This is a helpful hint',
+          hideDetails: false
+        }
+      });
+      
+      expect(wrapper.text()).toContain('This is a helpful hint');
+    });
+
+    it('shows persistent hint', () => {
+      const wrapper = mount(Input, {
+        props: {
+          hint: 'Persistent hint',
+          persistentHint: true,
+          hideDetails: false
+        }
+      });
+      
+      expect(wrapper.vm.persistentHint).toBe(true);
+      expect(wrapper.text()).toContain('Persistent hint');
+    });
+
+    it('hides details when hideDetails is true', () => {
+      const wrapper = mount(Input, {
+        props: {
+          hint: 'Hidden hint',
+          hideDetails: true
+        }
+      });
+      
+      expect(wrapper.vm.hideDetails).toBe(true);
+    });
+
+    it('shows details with exclamation icon', () => {
+      const wrapper = mount(Input, {
+        props: {
+          hint: 'Hint with icon',
+          hideDetails: false
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+    });
+  });
+
+  // Test exposed methods (focus, blur, select)
+  describe('Exposed Methods', () => {
+    it('exposes focus, blur, and select methods', () => {
+      const wrapper = mount(Input);
+      
+      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('calls getNativeInput helper method', () => {
+      const wrapper = mount(Input);
+      const nativeInput = wrapper.vm.getNativeInput();
+      
+      // Since our stub provides a real input element, getNativeInput will return the input
+      expect(nativeInput).toBeTruthy();
+      expect(nativeInput.tagName).toBe('INPUT');
+    });
+
+    it('focus method works with nextTick', async () => {
+      const wrapper = mount(Input);
+      
+      // Get the actual 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 nextTick', async () => {
+      const wrapper = mount(Input);
+      
+      // Get the actual 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 nextTick', async () => {
+      const wrapper = mount(Input);
+      
+      // Get the actual input element
+      const nativeInput = wrapper.vm.getNativeInput();
+      const selectSpy = vi.spyOn(nativeInput, 'select');
+      
+      wrapper.vm.select();
+      await nextTick();
+      
+      expect(selectSpy).toHaveBeenCalled();
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('has data-testid for testing', () => {
+      const wrapper = mount(Input);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('maintains accessibility with icons and states', () => {
+      const wrapper = mount(Input, {
+        props: {
+          prependIcon: 'mdi-search',
+          appendIcon: 'mdi-clear',
+          error: true,
+          hint: 'Error message'
+        }
+      });
+      
+      expect(wrapper.vm.prependIcon).toBe('mdi-search');
+      expect(wrapper.vm.appendIcon).toBe('mdi-clear');
+      expect(wrapper.vm.error).toBe(true);
+      expect(wrapper.vm.hint).toBe('Error message');
+    });
+  });
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles all props together', () => {
+      const wrapper = mount(Input, {
+        props: {
+          modelValue: 'test',
+          placeholder: 'Test placeholder',
+          variant: 'filled',
+          density: 'comfortable',
+          success: true,
+          error: false,
+          warning: false,
+          disabled: false,
+          prependIcon: 'mdi-home',
+          prependInnerIcon: 'mdi-search',
+          appendIcon: 'mdi-close',
+          appendInnerIcon: 'mdi-eye',
+          hint: 'Test hint',
+          persistentHint: true,
+          hideDetails: false,
+          borderOnHover: true
+        }
+      });
+      
+      expect(wrapper.vm.modelValue).toBe('test');
+      expect(wrapper.vm.placeholder).toBe('Test placeholder');
+      expect(wrapper.vm.variant).toBe('filled');
+      expect(wrapper.vm.density).toBe('comfortable');
+      expect(wrapper.vm.success).toBe(true);
+      expect(wrapper.vm.borderOnHover).toBe(true);
+    });
+
+    it('handles empty string values', () => {
+      const wrapper = mount(Input, {
+        props: {
+          modelValue: '',
+          placeholder: '',
+          hint: '',
+          prependIcon: '',
+          appendIcon: ''
+        }
+      });
+      
+      expect(wrapper.vm.modelValue).toBe('');
+      expect(wrapper.vm.placeholder).toBe('');
+      expect(wrapper.vm.hint).toBe('');
+      expect(wrapper.vm.prependIcon).toBe('');
+      expect(wrapper.vm.appendIcon).toBe('');
+    });
+
+    it('handles rapid input changes', async () => {
+      const wrapper = mount(Input);
+      
+      wrapper.vm.onInput('a');
+      wrapper.vm.onInput('ab');
+      wrapper.vm.onInput('abc');
+      
+      expect(wrapper.emitted('update:modelValue')).toHaveLength(3);
+      expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['a']);
+      expect(wrapper.emitted('update:modelValue')?.[1]).toEqual(['ab']);
+      expect(wrapper.emitted('update:modelValue')?.[2]).toEqual(['abc']);
+    });
+  });
+});