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

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

@@ -1,783 +1,783 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { mount, flushPromises } from '@vue/test-utils';
-import { nextTick } from 'vue';
-// Temporarily skip EditField tests due to Vuetify CSS import issue
-// import EditField from '@components/EditField/EditField.vue';
-
-describe.skip('EditField', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  // Test default behavior and rendering
-  describe('Default Behavior', () => {
-    it('renders with required props', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test Field',
-          value: 'test value'
-        }
-      });
-      
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('.wl-edit-field').exists()).toBe(true);
-      expect(wrapper.find('.title-container').exists()).toBe(true);
-      expect(wrapper.find('.input-wrapper').exists()).toBe(true);
-      expect(wrapper.vm.title).toBe('Test Field');
-      expect(wrapper.vm.value).toBe('test value');
-      expect(wrapper.vm.internalValue).toBe('test value');
-    });
-
-    it('displays title correctly', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Field Title',
-          value: 'test'
-        }
-      });
-      
-      expect(wrapper.find('.title-container p').text()).toBe('Field Title');
-    });
-
-    it('has data-testid for testing', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test',
-          value: 'test'
-        }
-      });
-      
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('initializes with default props', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test',
-          value: 'test'
-        }
-      });
-      
-      expect(wrapper.vm.selectOnFocus).toBe(false);
-      expect(wrapper.vm.inputProps).toEqual({});
-      expect(wrapper.vm.isInputFocused).toBe(false);
-      expect(wrapper.vm.skipSave).toBe(false);
-    });
-  });
-
-  // Test icon functionality
-  describe('Icon', () => {
-    it('displays icon when provided', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'With Icon',
-          value: 'test',
-          icon: 'mdi-home'
-        }
-      });
-      
-      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
-      expect(wrapper.vm.icon).toBe('mdi-home');
-    });
-
-    it('hides icon when empty string', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'No Icon',
-          value: 'test',
-          icon: ''
-        }
-      });
-      
-      expect(wrapper.find('.title-container [data-testid="v-icon"]').exists()).toBe(false);
-    });
-
-    it('displays default append icon when not specified', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Default Append Icon',
-          value: 'test'
-        }
-      });
-      
-      expect(wrapper.vm.computedAppendIcon).toBe('heroicons:pencil');
-      expect(wrapper.find('.input-wrapper [data-testid="v-icon"]').exists()).toBe(true);
-    });
-
-    it('uses custom append icon when provided', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Custom Append Icon',
-          value: 'test',
-          appendIcon: 'mdi-edit'
-        }
-      });
-      
-      expect(wrapper.vm.computedAppendIcon).toBe('mdi-edit');
-    });
-
-    it('hides append icon when explicitly set to empty string', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'No Append Icon',
-          value: 'test',
-          appendIcon: ''
-        }
-      });
-      
-      expect(wrapper.vm.computedAppendIcon).toBe('');
-      expect(wrapper.find('.input-wrapper [data-testid="v-icon"]').exists()).toBe(false);
-    });
-  });
-
-  // Test different input types
-  describe('Input Types', () => {
-    it('renders text input by default', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Text Field',
-          value: 'text value'
-        }
-      });
-      
-      // Since type is not specified, it should render text input
-      expect(wrapper.vm.type).toBeUndefined();
-    });
-
-    it('renders text input when type is "text"', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Text Field',
-          value: 'text value',
-          type: 'text'
-        }
-      });
-      
-      expect(wrapper.vm.type).toBe('text');
-      // Input component should be rendered (stubbed as v-text-field)
-      expect(wrapper.find('[data-testid="v-text-field"]').exists()).toBe(true);
-    });
-
-    it('renders select input when type is "select"', () => {
-      const items = [
-        { value: 'opt1', title: 'Option 1' },
-        { value: 'opt2', title: 'Option 2' }
-      ];
-      
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Select Field',
-          value: 'opt1',
-          type: 'select',
-          items
-        }
-      });
-      
-      expect(wrapper.vm.type).toBe('select');
-      expect(wrapper.vm.items).toEqual(items);
-      // Select component should be rendered (stubbed as v-combobox)
-      expect(wrapper.find('[data-testid="v-combobox"]').exists()).toBe(true);
-    });
-
-    it('renders date input when type is "date"', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Date Field',
-          value: '2023-12-25',
-          type: 'date'
-        }
-      });
-      
-      expect(wrapper.vm.type).toBe('date');
-      // DateInput renders an Input component internally
-      expect(wrapper.find('[data-testid="v-text-field"]').exists()).toBe(true);
-    });
-
-    it('renders phone input when type is "phone"', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Phone Field',
-          value: '+1234567890',
-          type: 'phone'
-        }
-      });
-      
-      expect(wrapper.vm.type).toBe('phone');
-      // PhoneInput should be rendered
-      expect(wrapper.find('[data-testid="v-text-field"]').exists()).toBe(true);
-    });
-  });
-
-  // Test v-model functionality
-  describe('v-model', () => {
-    it('initializes internalValue with value prop', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test',
-          value: 'initial value'
-        }
-      });
-      
-      expect(wrapper.vm.internalValue).toBe('initial value');
-    });
-
-    it('updates internalValue when value prop changes', async () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test',
-          value: 'initial'
-        }
-      });
-      
-      expect(wrapper.vm.internalValue).toBe('initial');
-      
-      await wrapper.setProps({ value: 'updated' });
-      
-      expect(wrapper.vm.internalValue).toBe('updated');
-    });
-
-    it('emits update:value when internalValue changes and differs from prop', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test',
-          value: 'original'
-        }
-      });
-      
-      wrapper.vm.internalValue = 'modified';
-      wrapper.vm.save();
-      
-      expect(wrapper.emitted('update:value')).toBeTruthy();
-      expect(wrapper.emitted('update:value')?.[0]).toEqual(['modified']);
-    });
-
-    it('does not emit update:value when internalValue equals prop value', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test',
-          value: 'same'
-        }
-      });
-      
-      wrapper.vm.internalValue = 'same';
-      wrapper.vm.save();
-      
-      expect(wrapper.emitted('update:value')).toBeFalsy();
-    });
-  });
-
-  // Test editing functionality
-  describe('Editing Functionality', () => {
-    it('focuses input when append icon is clicked', async () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test',
-          value: 'test'
-        }
-      });
-      
-      const mockFocus = vi.fn();
-      wrapper.vm.inputElementRef = { focus: mockFocus };
-      
-      await wrapper.vm.onStartEditing();
-      
-      expect(mockFocus).toHaveBeenCalled();
-    });
-
-    it('calls save on blur when skipSave is false', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test',
-          value: 'original'
-        }
-      });
-      
-      wrapper.vm.internalValue = 'modified';
-      wrapper.vm.skipSave = false;
-      
-      wrapper.vm.handleBlur();
-      
-      expect(wrapper.emitted('update:value')).toBeTruthy();
-      expect(wrapper.emitted('update:value')?.[0]).toEqual(['modified']);
-    });
-
-    it('does not save on blur when skipSave is true', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test',
-          value: 'original'
-        }
-      });
-      
-      wrapper.vm.internalValue = 'modified';
-      wrapper.vm.skipSave = true;
-      
-      wrapper.vm.handleBlur();
-      
-      expect(wrapper.emitted('update:value')).toBeFalsy();
-      expect(wrapper.vm.skipSave).toBe(false); // Should reset skipSave
-    });
-
-    it('blurs input on Enter key', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test',
-          value: 'test'
-        }
-      });
-      
-      const mockBlur = vi.fn();
-      wrapper.vm.inputElementRef = { blur: mockBlur };
-      
-      wrapper.vm.onEnter();
-      
-      expect(mockBlur).toHaveBeenCalled();
-    });
-
-    it('reverts value and skips save on Escape key', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test',
-          value: 'original'
-        }
-      });
-      
-      wrapper.vm.internalValue = 'modified';
-      
-      const mockBlur = vi.fn();
-      wrapper.vm.inputElementRef = { blur: mockBlur };
-      
-      wrapper.vm.onEsc();
-      
-      expect(wrapper.vm.internalValue).toBe('original');
-      expect(wrapper.vm.skipSave).toBe(true);
-      expect(mockBlur).toHaveBeenCalled();
-    });
-
-    it('selects text on focus when selectOnFocus is true', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test',
-          value: 'test',
-          selectOnFocus: true
-        }
-      });
-      
-      const mockSelect = vi.fn();
-      wrapper.vm.inputElementRef = { select: mockSelect };
-      
-      wrapper.vm.onFocus();
-      
-      expect(mockSelect).toHaveBeenCalled();
-    });
-
-    it('does not select text on focus when selectOnFocus is false', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Test',
-          value: 'test',
-          selectOnFocus: false
-        }
-      });
-      
-      const mockSelect = vi.fn();
-      wrapper.vm.inputElementRef = { select: mockSelect };
-      
-      wrapper.vm.onFocus();
-      
-      expect(mockSelect).not.toHaveBeenCalled();
-    });
-  });
-
-  // Test items and select functionality
-  describe('Items and Select', () => {
-    it('creates items lookup for select type', () => {
-      const items = [
-        { value: 'opt1', title: 'Option 1' },
-        { value: 'opt2', title: 'Option 2' },
-        { value: 'opt3', title: 'Option 3' }
-      ];
-      
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Select Test',
-          value: 'opt1',
-          type: 'select',
-          items
-        }
-      });
-      
-      expect(wrapper.vm.itemsLookup).toEqual({
-        'opt1': 'Option 1',
-        'opt2': 'Option 2',
-        'opt3': 'Option 3'
-      });
-    });
-
-    it('handles empty items array', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Empty Select',
-          value: '',
-          type: 'select',
-          items: []
-        }
-      });
-      
-      expect(wrapper.vm.itemsLookup).toEqual({});
-    });
-
-    it('handles undefined items', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'No Items',
-          value: 'test'
-        }
-      });
-      
-      expect(wrapper.vm.itemsLookup).toEqual({});
-    });
-  });
-
-  // Test input props
-  describe('Input Props', () => {
-    it('passes inputProps to child components', () => {
-      const inputProps = {
-        placeholder: 'Enter text here',
-        disabled: false,
-        variant: 'outlined'
-      };
-      
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Props Test',
-          value: 'test',
-          type: 'text',
-          inputProps
-        }
-      });
-      
-      expect(wrapper.vm.inputProps).toEqual(inputProps);
-    });
-
-    it('handles empty inputProps object', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Empty Props',
-          value: 'test'
-        }
-      });
-      
-      expect(wrapper.vm.inputProps).toEqual({});
-    });
-
-    it('passes complex inputProps', () => {
-      const complexProps = {
-        disabled: true,
-        variant: 'filled',
-        density: 'compact',
-        placeholder: 'Complex placeholder',
-        'append-inner-icon': 'mdi-search',
-        rules: [(v: string) => !!v || 'Required']
-      };
-      
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Complex Props',
-          value: 'test',
-          inputProps: complexProps
-        }
-      });
-      
-      expect(wrapper.vm.inputProps).toEqual(complexProps);
-    });
-  });
-
-  // Test slot functionality
-  describe('Slot Functionality', () => {
-    it('renders input slot when provided', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Custom Slot',
-          value: 'test'
-        },
-        slots: {
-          input: '<div data-testid="custom-input">Custom Input Content</div>'
-        }
-      });
-      
-      expect(wrapper.find('[data-testid="custom-input"]').exists()).toBe(true);
-      expect(wrapper.find('[data-testid="custom-input"]').text()).toBe('Custom Input Content');
-    });
-
-    it('passes isInputFocused to input slot', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Slot Props',
-          value: 'test'
-        },
-        slots: {
-          input: `
-            <template #input="{ isInputFocused }">
-              <div data-testid="focused-indicator">
-                Focused: {{ isInputFocused }}
-              </div>
-            </template>
-          `
-        }
-      });
-      
-      const indicator = wrapper.find('[data-testid="focused-indicator"]');
-      expect(indicator.exists()).toBe(true);
-      expect(indicator.text()).toContain('Focused: false');
-    });
-  });
-
-  // Test accessibility
-  describe('Accessibility', () => {
-    it('has proper tabindex on title container', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Accessibility Test',
-          value: 'test'
-        }
-      });
-      
-      const titleContainer = wrapper.find('.title-container');
-      expect(titleContainer.attributes('tabindex')).toBe('-1');
-    });
-
-    it('provides meaningful title text', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'User Email Address',
-          value: 'user@example.com'
-        }
-      });
-      
-      expect(wrapper.find('.title-container p').text()).toBe('User Email Address');
-    });
-
-    it('supports keyboard interactions', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Keyboard Test',
-          value: 'test'
-        }
-      });
-      
-      const mockBlur = vi.fn();
-      wrapper.vm.inputElementRef = { blur: mockBlur };
-      
-      // Test Enter key
-      wrapper.vm.onEnter();
-      expect(mockBlur).toHaveBeenCalled();
-      
-      // Test Escape key
-      wrapper.vm.onEsc();
-      expect(wrapper.vm.internalValue).toBe('test');
-    });
-  });
-
-  // Test edge cases
-  describe('Edge Cases', () => {
-    it('handles null/undefined input element ref gracefully', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Null Ref',
-          value: 'test'
-        }
-      });
-      
-      wrapper.vm.inputElementRef = null;
-      
-      // These should not throw errors
-      expect(() => wrapper.vm.onStartEditing()).not.toThrow();
-      expect(() => wrapper.vm.onEnter()).not.toThrow();
-      expect(() => wrapper.vm.onEsc()).not.toThrow();
-      expect(() => wrapper.vm.onFocus()).not.toThrow();
-    });
-
-    it('handles missing methods on input element ref', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Missing Methods',
-          value: 'test'
-        }
-      });
-      
-      wrapper.vm.inputElementRef = {}; // Empty object without methods
-      
-      // These should not throw errors
-      expect(() => wrapper.vm.onStartEditing()).not.toThrow();
-      expect(() => wrapper.vm.onEnter()).not.toThrow();
-      expect(() => wrapper.vm.onEsc()).not.toThrow();
-      expect(() => wrapper.vm.onFocus()).not.toThrow();
-    });
-
-    it('handles empty string values', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Empty Value',
-          value: ''
-        }
-      });
-      
-      expect(wrapper.vm.internalValue).toBe('');
-      
-      wrapper.vm.internalValue = 'new value';
-      wrapper.vm.save();
-      
-      expect(wrapper.emitted('update:value')?.[0]).toEqual(['new value']);
-    });
-
-    it('handles special characters in values', () => {
-      const specialValue = '!@#$%^&*()_+{}|:"<>?`~[]\\;\',./ ñáéíóú';
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Special Chars',
-          value: specialValue
-        }
-      });
-      
-      expect(wrapper.vm.internalValue).toBe(specialValue);
-    });
-
-    it('handles number values', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Number Value',
-          value: 42
-        }
-      });
-      
-      expect(wrapper.vm.internalValue).toBe(42);
-      
-      wrapper.vm.internalValue = 100;
-      wrapper.vm.save();
-      
-      expect(wrapper.emitted('update:value')?.[0]).toEqual([100]);
-    });
-
-    it('handles boolean values', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Boolean Value',
-          value: true
-        }
-      });
-      
-      expect(wrapper.vm.internalValue).toBe(true);
-      
-      wrapper.vm.internalValue = false;
-      wrapper.vm.save();
-      
-      expect(wrapper.emitted('update:value')?.[0]).toEqual([false]);
-    });
-  });
-
-  // Test complex scenarios
-  describe('Complex Scenarios', () => {
-    it('handles complete editing workflow', async () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Full Workflow',
-          value: 'original value',
-          selectOnFocus: true
-        }
-      });
-      
-      const mockFocus = vi.fn();
-      const mockSelect = vi.fn();
-      const mockBlur = vi.fn();
-      
-      wrapper.vm.inputElementRef = {
-        focus: mockFocus,
-        select: mockSelect,
-        blur: mockBlur
-      };
-      
-      // Start editing
-      await wrapper.vm.onStartEditing();
-      expect(mockFocus).toHaveBeenCalled();
-      
-      // Focus and select
-      wrapper.vm.onFocus();
-      expect(mockSelect).toHaveBeenCalled();
-      
-      // Change value
-      wrapper.vm.internalValue = 'modified value';
-      
-      // Save with Enter
-      wrapper.vm.onEnter();
-      expect(mockBlur).toHaveBeenCalled();
-      
-      // Simulate blur
-      wrapper.vm.handleBlur();
-      
-      expect(wrapper.emitted('update:value')).toBeTruthy();
-      expect(wrapper.emitted('update:value')?.[0]).toEqual(['modified value']);
-    });
-
-    it('handles escape during editing', () => {
-      const wrapper = mount({template: '<div></div>'} as any, {
-        props: {
-          title: 'Escape Test',
-          value: 'original'
-        }
-      });
-      
-      const mockBlur = vi.fn();
-      wrapper.vm.inputElementRef = { blur: mockBlur };
-      
-      // Start editing and change value
-      wrapper.vm.internalValue = 'modified';
-      
-      // Press escape
-      wrapper.vm.onEsc();
-      
-      expect(wrapper.vm.internalValue).toBe('original');
-      expect(wrapper.vm.skipSave).toBe(true);
-      expect(mockBlur).toHaveBeenCalled();
-      
-      // Simulate blur after escape
-      wrapper.vm.handleBlur();
-      
-      // Should not emit update because skipSave was true
-      expect(wrapper.emitted('update:value')).toBeFalsy();
-      expect(wrapper.vm.skipSave).toBe(false); // Should be reset
-    });
-
-    it('works with all input types and props', () => {
-      const inputTypes = ['text', 'select', 'date', 'phone'];
-      
-      inputTypes.forEach(type => {
-        const props: any = {
-          title: `${type} field`,
-          value: type === 'select' ? 'opt1' : 'test value',
-          type,
-          icon: 'mdi-test',
-          appendIcon: 'mdi-edit',
-          selectOnFocus: true,
-          inputProps: { placeholder: `Enter ${type}` }
-        };
-        
-        if (type === 'select') {
-          props.items = [
-            { value: 'opt1', title: 'Option 1' },
-            { value: 'opt2', title: 'Option 2' }
-          ];
-        }
-        
-        const wrapper = mount({template: '<div></div>'} as any, { props });
-        
-        expect(wrapper.vm.title).toBe(`${type} field`);
-        expect(wrapper.vm.type).toBe(type);
-        expect(wrapper.vm.icon).toBe('mdi-test');
-        expect(wrapper.vm.appendIcon).toBe('mdi-edit');
-        expect(wrapper.vm.selectOnFocus).toBe(true);
-        expect(wrapper.find('.wl-edit-field').exists()).toBe(true);
-      });
-    });
-  });
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { nextTick } from 'vue';
+// Temporarily skip EditField tests due to Vuetify CSS import issue
+// import EditField from '@components/EditField/EditField.vue';
+
+describe.skip('EditField', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Test default behavior and rendering
+  describe('Default Behavior', () => {
+    it('renders with required props', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test Field',
+          value: 'test value'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.wl-edit-field').exists()).toBe(true);
+      expect(wrapper.find('.title-container').exists()).toBe(true);
+      expect(wrapper.find('.input-wrapper').exists()).toBe(true);
+      expect(wrapper.vm.title).toBe('Test Field');
+      expect(wrapper.vm.value).toBe('test value');
+      expect(wrapper.vm.internalValue).toBe('test value');
+    });
+
+    it('displays title correctly', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Field Title',
+          value: 'test'
+        }
+      });
+      
+      expect(wrapper.find('.title-container p').text()).toBe('Field Title');
+    });
+
+    it('has data-testid for testing', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test',
+          value: 'test'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('initializes with default props', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test',
+          value: 'test'
+        }
+      });
+      
+      expect(wrapper.vm.selectOnFocus).toBe(false);
+      expect(wrapper.vm.inputProps).toEqual({});
+      expect(wrapper.vm.isInputFocused).toBe(false);
+      expect(wrapper.vm.skipSave).toBe(false);
+    });
+  });
+
+  // Test icon functionality
+  describe('Icon', () => {
+    it('displays icon when provided', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'With Icon',
+          value: 'test',
+          icon: 'mdi-home'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="v-icon"]').exists()).toBe(true);
+      expect(wrapper.vm.icon).toBe('mdi-home');
+    });
+
+    it('hides icon when empty string', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'No Icon',
+          value: 'test',
+          icon: ''
+        }
+      });
+      
+      expect(wrapper.find('.title-container [data-testid="v-icon"]').exists()).toBe(false);
+    });
+
+    it('displays default append icon when not specified', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Default Append Icon',
+          value: 'test'
+        }
+      });
+      
+      expect(wrapper.vm.computedAppendIcon).toBe('heroicons:pencil');
+      expect(wrapper.find('.input-wrapper [data-testid="v-icon"]').exists()).toBe(true);
+    });
+
+    it('uses custom append icon when provided', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Custom Append Icon',
+          value: 'test',
+          appendIcon: 'mdi-edit'
+        }
+      });
+      
+      expect(wrapper.vm.computedAppendIcon).toBe('mdi-edit');
+    });
+
+    it('hides append icon when explicitly set to empty string', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'No Append Icon',
+          value: 'test',
+          appendIcon: ''
+        }
+      });
+      
+      expect(wrapper.vm.computedAppendIcon).toBe('');
+      expect(wrapper.find('.input-wrapper [data-testid="v-icon"]').exists()).toBe(false);
+    });
+  });
+
+  // Test different input types
+  describe('Input Types', () => {
+    it('renders text input by default', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Text Field',
+          value: 'text value'
+        }
+      });
+      
+      // Since type is not specified, it should render text input
+      expect(wrapper.vm.type).toBeUndefined();
+    });
+
+    it('renders text input when type is "text"', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Text Field',
+          value: 'text value',
+          type: 'text'
+        }
+      });
+      
+      expect(wrapper.vm.type).toBe('text');
+      // Input component should be rendered (stubbed as v-text-field)
+      expect(wrapper.find('[data-testid="v-text-field"]').exists()).toBe(true);
+    });
+
+    it('renders select input when type is "select"', () => {
+      const items = [
+        { value: 'opt1', title: 'Option 1' },
+        { value: 'opt2', title: 'Option 2' }
+      ];
+      
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Select Field',
+          value: 'opt1',
+          type: 'select',
+          items
+        }
+      });
+      
+      expect(wrapper.vm.type).toBe('select');
+      expect(wrapper.vm.items).toEqual(items);
+      // Select component should be rendered (stubbed as v-combobox)
+      expect(wrapper.find('[data-testid="v-combobox"]').exists()).toBe(true);
+    });
+
+    it('renders date input when type is "date"', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Date Field',
+          value: '2023-12-25',
+          type: 'date'
+        }
+      });
+      
+      expect(wrapper.vm.type).toBe('date');
+      // DateInput renders an Input component internally
+      expect(wrapper.find('[data-testid="v-text-field"]').exists()).toBe(true);
+    });
+
+    it('renders phone input when type is "phone"', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Phone Field',
+          value: '+1234567890',
+          type: 'phone'
+        }
+      });
+      
+      expect(wrapper.vm.type).toBe('phone');
+      // PhoneInput should be rendered
+      expect(wrapper.find('[data-testid="v-text-field"]').exists()).toBe(true);
+    });
+  });
+
+  // Test v-model functionality
+  describe('v-model', () => {
+    it('initializes internalValue with value prop', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test',
+          value: 'initial value'
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('initial value');
+    });
+
+    it('updates internalValue when value prop changes', async () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test',
+          value: 'initial'
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('initial');
+      
+      await wrapper.setProps({ value: 'updated' });
+      
+      expect(wrapper.vm.internalValue).toBe('updated');
+    });
+
+    it('emits update:value when internalValue changes and differs from prop', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test',
+          value: 'original'
+        }
+      });
+      
+      wrapper.vm.internalValue = 'modified';
+      wrapper.vm.save();
+      
+      expect(wrapper.emitted('update:value')).toBeTruthy();
+      expect(wrapper.emitted('update:value')?.[0]).toEqual(['modified']);
+    });
+
+    it('does not emit update:value when internalValue equals prop value', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test',
+          value: 'same'
+        }
+      });
+      
+      wrapper.vm.internalValue = 'same';
+      wrapper.vm.save();
+      
+      expect(wrapper.emitted('update:value')).toBeFalsy();
+    });
+  });
+
+  // Test editing functionality
+  describe('Editing Functionality', () => {
+    it('focuses input when append icon is clicked', async () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test',
+          value: 'test'
+        }
+      });
+      
+      const mockFocus = vi.fn();
+      wrapper.vm.inputElementRef = { focus: mockFocus };
+      
+      await wrapper.vm.onStartEditing();
+      
+      expect(mockFocus).toHaveBeenCalled();
+    });
+
+    it('calls save on blur when skipSave is false', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test',
+          value: 'original'
+        }
+      });
+      
+      wrapper.vm.internalValue = 'modified';
+      wrapper.vm.skipSave = false;
+      
+      wrapper.vm.handleBlur();
+      
+      expect(wrapper.emitted('update:value')).toBeTruthy();
+      expect(wrapper.emitted('update:value')?.[0]).toEqual(['modified']);
+    });
+
+    it('does not save on blur when skipSave is true', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test',
+          value: 'original'
+        }
+      });
+      
+      wrapper.vm.internalValue = 'modified';
+      wrapper.vm.skipSave = true;
+      
+      wrapper.vm.handleBlur();
+      
+      expect(wrapper.emitted('update:value')).toBeFalsy();
+      expect(wrapper.vm.skipSave).toBe(false); // Should reset skipSave
+    });
+
+    it('blurs input on Enter key', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test',
+          value: 'test'
+        }
+      });
+      
+      const mockBlur = vi.fn();
+      wrapper.vm.inputElementRef = { blur: mockBlur };
+      
+      wrapper.vm.onEnter();
+      
+      expect(mockBlur).toHaveBeenCalled();
+    });
+
+    it('reverts value and skips save on Escape key', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test',
+          value: 'original'
+        }
+      });
+      
+      wrapper.vm.internalValue = 'modified';
+      
+      const mockBlur = vi.fn();
+      wrapper.vm.inputElementRef = { blur: mockBlur };
+      
+      wrapper.vm.onEsc();
+      
+      expect(wrapper.vm.internalValue).toBe('original');
+      expect(wrapper.vm.skipSave).toBe(true);
+      expect(mockBlur).toHaveBeenCalled();
+    });
+
+    it('selects text on focus when selectOnFocus is true', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test',
+          value: 'test',
+          selectOnFocus: true
+        }
+      });
+      
+      const mockSelect = vi.fn();
+      wrapper.vm.inputElementRef = { select: mockSelect };
+      
+      wrapper.vm.onFocus();
+      
+      expect(mockSelect).toHaveBeenCalled();
+    });
+
+    it('does not select text on focus when selectOnFocus is false', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Test',
+          value: 'test',
+          selectOnFocus: false
+        }
+      });
+      
+      const mockSelect = vi.fn();
+      wrapper.vm.inputElementRef = { select: mockSelect };
+      
+      wrapper.vm.onFocus();
+      
+      expect(mockSelect).not.toHaveBeenCalled();
+    });
+  });
+
+  // Test items and select functionality
+  describe('Items and Select', () => {
+    it('creates items lookup for select type', () => {
+      const items = [
+        { value: 'opt1', title: 'Option 1' },
+        { value: 'opt2', title: 'Option 2' },
+        { value: 'opt3', title: 'Option 3' }
+      ];
+      
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Select Test',
+          value: 'opt1',
+          type: 'select',
+          items
+        }
+      });
+      
+      expect(wrapper.vm.itemsLookup).toEqual({
+        'opt1': 'Option 1',
+        'opt2': 'Option 2',
+        'opt3': 'Option 3'
+      });
+    });
+
+    it('handles empty items array', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Empty Select',
+          value: '',
+          type: 'select',
+          items: []
+        }
+      });
+      
+      expect(wrapper.vm.itemsLookup).toEqual({});
+    });
+
+    it('handles undefined items', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'No Items',
+          value: 'test'
+        }
+      });
+      
+      expect(wrapper.vm.itemsLookup).toEqual({});
+    });
+  });
+
+  // Test input props
+  describe('Input Props', () => {
+    it('passes inputProps to child components', () => {
+      const inputProps = {
+        placeholder: 'Enter text here',
+        disabled: false,
+        variant: 'outlined'
+      };
+      
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Props Test',
+          value: 'test',
+          type: 'text',
+          inputProps
+        }
+      });
+      
+      expect(wrapper.vm.inputProps).toEqual(inputProps);
+    });
+
+    it('handles empty inputProps object', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Empty Props',
+          value: 'test'
+        }
+      });
+      
+      expect(wrapper.vm.inputProps).toEqual({});
+    });
+
+    it('passes complex inputProps', () => {
+      const complexProps = {
+        disabled: true,
+        variant: 'filled',
+        density: 'compact',
+        placeholder: 'Complex placeholder',
+        'append-inner-icon': 'mdi-search',
+        rules: [(v: string) => !!v || 'Required']
+      };
+      
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Complex Props',
+          value: 'test',
+          inputProps: complexProps
+        }
+      });
+      
+      expect(wrapper.vm.inputProps).toEqual(complexProps);
+    });
+  });
+
+  // Test slot functionality
+  describe('Slot Functionality', () => {
+    it('renders input slot when provided', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Custom Slot',
+          value: 'test'
+        },
+        slots: {
+          input: '<div data-testid="custom-input">Custom Input Content</div>'
+        }
+      });
+      
+      expect(wrapper.find('[data-testid="custom-input"]').exists()).toBe(true);
+      expect(wrapper.find('[data-testid="custom-input"]').text()).toBe('Custom Input Content');
+    });
+
+    it('passes isInputFocused to input slot', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Slot Props',
+          value: 'test'
+        },
+        slots: {
+          input: `
+            <template #input="{ isInputFocused }">
+              <div data-testid="focused-indicator">
+                Focused: {{ isInputFocused }}
+              </div>
+            </template>
+          `
+        }
+      });
+      
+      const indicator = wrapper.find('[data-testid="focused-indicator"]');
+      expect(indicator.exists()).toBe(true);
+      expect(indicator.text()).toContain('Focused: false');
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('has proper tabindex on title container', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Accessibility Test',
+          value: 'test'
+        }
+      });
+      
+      const titleContainer = wrapper.find('.title-container');
+      expect(titleContainer.attributes('tabindex')).toBe('-1');
+    });
+
+    it('provides meaningful title text', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'User Email Address',
+          value: 'user@example.com'
+        }
+      });
+      
+      expect(wrapper.find('.title-container p').text()).toBe('User Email Address');
+    });
+
+    it('supports keyboard interactions', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Keyboard Test',
+          value: 'test'
+        }
+      });
+      
+      const mockBlur = vi.fn();
+      wrapper.vm.inputElementRef = { blur: mockBlur };
+      
+      // Test Enter key
+      wrapper.vm.onEnter();
+      expect(mockBlur).toHaveBeenCalled();
+      
+      // Test Escape key
+      wrapper.vm.onEsc();
+      expect(wrapper.vm.internalValue).toBe('test');
+    });
+  });
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles null/undefined input element ref gracefully', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Null Ref',
+          value: 'test'
+        }
+      });
+      
+      wrapper.vm.inputElementRef = null;
+      
+      // These should not throw errors
+      expect(() => wrapper.vm.onStartEditing()).not.toThrow();
+      expect(() => wrapper.vm.onEnter()).not.toThrow();
+      expect(() => wrapper.vm.onEsc()).not.toThrow();
+      expect(() => wrapper.vm.onFocus()).not.toThrow();
+    });
+
+    it('handles missing methods on input element ref', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Missing Methods',
+          value: 'test'
+        }
+      });
+      
+      wrapper.vm.inputElementRef = {}; // Empty object without methods
+      
+      // These should not throw errors
+      expect(() => wrapper.vm.onStartEditing()).not.toThrow();
+      expect(() => wrapper.vm.onEnter()).not.toThrow();
+      expect(() => wrapper.vm.onEsc()).not.toThrow();
+      expect(() => wrapper.vm.onFocus()).not.toThrow();
+    });
+
+    it('handles empty string values', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Empty Value',
+          value: ''
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe('');
+      
+      wrapper.vm.internalValue = 'new value';
+      wrapper.vm.save();
+      
+      expect(wrapper.emitted('update:value')?.[0]).toEqual(['new value']);
+    });
+
+    it('handles special characters in values', () => {
+      const specialValue = '!@#$%^&*()_+{}|:"<>?`~[]\\;\',./ ñáéíóú';
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Special Chars',
+          value: specialValue
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe(specialValue);
+    });
+
+    it('handles number values', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Number Value',
+          value: 42
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe(42);
+      
+      wrapper.vm.internalValue = 100;
+      wrapper.vm.save();
+      
+      expect(wrapper.emitted('update:value')?.[0]).toEqual([100]);
+    });
+
+    it('handles boolean values', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Boolean Value',
+          value: true
+        }
+      });
+      
+      expect(wrapper.vm.internalValue).toBe(true);
+      
+      wrapper.vm.internalValue = false;
+      wrapper.vm.save();
+      
+      expect(wrapper.emitted('update:value')?.[0]).toEqual([false]);
+    });
+  });
+
+  // Test complex scenarios
+  describe('Complex Scenarios', () => {
+    it('handles complete editing workflow', async () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Full Workflow',
+          value: 'original value',
+          selectOnFocus: true
+        }
+      });
+      
+      const mockFocus = vi.fn();
+      const mockSelect = vi.fn();
+      const mockBlur = vi.fn();
+      
+      wrapper.vm.inputElementRef = {
+        focus: mockFocus,
+        select: mockSelect,
+        blur: mockBlur
+      };
+      
+      // Start editing
+      await wrapper.vm.onStartEditing();
+      expect(mockFocus).toHaveBeenCalled();
+      
+      // Focus and select
+      wrapper.vm.onFocus();
+      expect(mockSelect).toHaveBeenCalled();
+      
+      // Change value
+      wrapper.vm.internalValue = 'modified value';
+      
+      // Save with Enter
+      wrapper.vm.onEnter();
+      expect(mockBlur).toHaveBeenCalled();
+      
+      // Simulate blur
+      wrapper.vm.handleBlur();
+      
+      expect(wrapper.emitted('update:value')).toBeTruthy();
+      expect(wrapper.emitted('update:value')?.[0]).toEqual(['modified value']);
+    });
+
+    it('handles escape during editing', () => {
+      const wrapper = mount({template: '<div></div>'} as any, {
+        props: {
+          title: 'Escape Test',
+          value: 'original'
+        }
+      });
+      
+      const mockBlur = vi.fn();
+      wrapper.vm.inputElementRef = { blur: mockBlur };
+      
+      // Start editing and change value
+      wrapper.vm.internalValue = 'modified';
+      
+      // Press escape
+      wrapper.vm.onEsc();
+      
+      expect(wrapper.vm.internalValue).toBe('original');
+      expect(wrapper.vm.skipSave).toBe(true);
+      expect(mockBlur).toHaveBeenCalled();
+      
+      // Simulate blur after escape
+      wrapper.vm.handleBlur();
+      
+      // Should not emit update because skipSave was true
+      expect(wrapper.emitted('update:value')).toBeFalsy();
+      expect(wrapper.vm.skipSave).toBe(false); // Should be reset
+    });
+
+    it('works with all input types and props', () => {
+      const inputTypes = ['text', 'select', 'date', 'phone'];
+      
+      inputTypes.forEach(type => {
+        const props: any = {
+          title: `${type} field`,
+          value: type === 'select' ? 'opt1' : 'test value',
+          type,
+          icon: 'mdi-test',
+          appendIcon: 'mdi-edit',
+          selectOnFocus: true,
+          inputProps: { placeholder: `Enter ${type}` }
+        };
+        
+        if (type === 'select') {
+          props.items = [
+            { value: 'opt1', title: 'Option 1' },
+            { value: 'opt2', title: 'Option 2' }
+          ];
+        }
+        
+        const wrapper = mount({template: '<div></div>'} as any, { props });
+        
+        expect(wrapper.vm.title).toBe(`${type} field`);
+        expect(wrapper.vm.type).toBe(type);
+        expect(wrapper.vm.icon).toBe('mdi-test');
+        expect(wrapper.vm.appendIcon).toBe('mdi-edit');
+        expect(wrapper.vm.selectOnFocus).toBe(true);
+        expect(wrapper.find('.wl-edit-field').exists()).toBe(true);
+      });
+    });
+  });
 });