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

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

@@ -1,541 +1,541 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { mount, flushPromises } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import EditField from '@components/EditField/EditField.vue';
-
-// Mock siteColors
-vi.mock('@/utils/index', () => ({
-  siteColors: {
-    'primary-color': '#172774',
-    'font_color_title_code': '#333333'
-  }
-}));
-
-describe('EditField', () => {
-  const createGlobalConfig = () => ({
-    stubs: {
-      Input: {
-        name: 'Input',
-        template: '<input class="input-stub" data-testid="input-component" @blur="$emit(\'blur\')" @focus="$emit(\'focus\')" @keyup.enter="$emit(\'keyup\', { key: \'Enter\' })" @keyup.esc="$emit(\'keyup\', { key: \'Escape\' })" />',
-        props: ['modelValue', 'reverse', 'borderOnHover'],
-        emits: ['blur', 'focus', 'keyup', 'update:modelValue'],
-        methods: {
-          focus() {},
-          blur() {},
-          select() {}
-        }
-      },
-      Select: {
-        name: 'Select',
-        template: '<select class="select-stub" data-testid="select-component"></select>',
-        props: ['modelValue', 'items', 'reverse', 'label', 'returnObject', 'borderOnHover'],
-        emits: ['blur', 'focus', 'update:model-value'],
-        methods: {
-          focus() {},
-          blur() {}
-        }
-      },
-      DateInput: {
-        name: 'DateInput',
-        template: '<input class="date-input-stub" data-testid="date-input-component" />',
-        props: ['modelValue', 'reverse', 'layout', 'borderOnHover'],
-        emits: ['blur', 'focus', 'update:modelValue'],
-        methods: {
-          focus() {},
-          blur() {}
-        }
-      },
-      PhoneInput: {
-        name: 'PhoneInput',
-        template: '<input class="phone-input-stub" data-testid="phone-input-component" />',
-        props: ['modelValue', 'density', 'hideDetails', 'reverse', 'borderOnHover', 'appendInnerIcon'],
-        emits: ['blur', 'focus', 'update:phone'],
-        methods: {
-          focus() {},
-          blur() {}
-        }
-      }
-    },
-    provide: {
-      themeColors: {
-        value: {
-          'primary-color': '#172774',
-          'font_color_title_code': '#333333'
-        }
-      }
-    }
-  });
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Default Behavior', () => {
-    it('renders with required props', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Test Field',
-          value: 'test value'
-        },
-        global: createGlobalConfig()
-      });
-
-      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);
-    });
-
-    it('displays title correctly', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Field Title',
-          value: 'test'
-        },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.find('.title-container p').text()).toBe('Field Title');
-    });
-
-    it('has data-testid for testing', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Test',
-          value: 'test'
-        },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-  });
-
-  describe('Icon', () => {
-    it('displays icon when provided', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'With Icon',
-          value: 'test',
-          icon: 'mdi-home'
-        },
-        global: createGlobalConfig()
-      });
-
-      const titleIcon = wrapper.find('.title-container .v-icon');
-      expect(titleIcon.exists()).toBe(true);
-    });
-
-    it('hides icon when empty string', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'No Icon',
-          value: 'test',
-          icon: ''
-        },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.find('.title-container .v-icon').exists()).toBe(false);
-    });
-
-    it('displays default append icon when not specified', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Default Append Icon',
-          value: 'test'
-        },
-        global: createGlobalConfig()
-      });
-
-      const appendIcon = wrapper.find('.input-wrapper .v-icon');
-      expect(appendIcon.exists()).toBe(true);
-    });
-
-    it('hides append icon when explicitly set to empty string', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'No Append Icon',
-          value: 'test',
-          appendIcon: ''
-        },
-        global: createGlobalConfig()
-      });
-
-      // When appendIcon is empty string, computedAppendIcon returns empty string
-      // and v-if="computedAppendIcon" evaluates to false
-      const appendIcons = wrapper.findAll('.input-wrapper > .v-icon');
-      expect(appendIcons.length).toBe(0);
-    });
-  });
-
-  describe('Input Types', () => {
-    it('renders text input when type is "text"', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Text Field',
-          value: 'text value',
-          type: 'text'
-        },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.find('[data-testid="input-component"]').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(EditField, {
-        props: {
-          title: 'Select Field',
-          value: 'opt1',
-          type: 'select',
-          items
-        },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.find('[data-testid="select-component"]').exists()).toBe(true);
-    });
-
-    it('renders date input when type is "date"', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Date Field',
-          value: '2023-12-25',
-          type: 'date'
-        },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.find('[data-testid="date-input-component"]').exists()).toBe(true);
-    });
-
-    it('renders phone input when type is "phone"', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Phone Field',
-          value: '+1234567890',
-          type: 'phone'
-        },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.find('[data-testid="phone-input-component"]').exists()).toBe(true);
-    });
-  });
-
-  describe('v-model', () => {
-    it('updates internalValue when value prop changes', async () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Test',
-          value: 'initial'
-        },
-        global: createGlobalConfig()
-      });
-
-      await wrapper.setProps({ value: 'updated' });
-      await nextTick();
-
-      // The watcher should have updated internalValue
-      expect(wrapper.vm.internalValue).toBe('updated');
-    });
-  });
-
-  describe('Editing Functionality', () => {
-    it('reverts value on Escape key via onEsc method', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Test',
-          value: 'original'
-        },
-        global: createGlobalConfig()
-      });
-
-      // Simulate changing value
-      wrapper.vm.internalValue = 'modified';
-
-      // Call onEsc
-      wrapper.vm.onEsc();
-
-      expect(wrapper.vm.internalValue).toBe('original');
-      expect(wrapper.vm.skipSave).toBe(true);
-    });
-
-    it('calls save on blur when skipSave is false', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Test',
-          value: 'original'
-        },
-        global: createGlobalConfig()
-      });
-
-      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(EditField, {
-        props: {
-          title: 'Test',
-          value: 'original'
-        },
-        global: createGlobalConfig()
-      });
-
-      wrapper.vm.internalValue = 'modified';
-      wrapper.vm.skipSave = true;
-
-      wrapper.vm.handleBlur();
-
-      expect(wrapper.emitted('update:value')).toBeFalsy();
-      expect(wrapper.vm.skipSave).toBe(false);
-    });
-
-    it('does not emit update:value when internalValue equals prop value', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Test',
-          value: 'same'
-        },
-        global: createGlobalConfig()
-      });
-
-      wrapper.vm.internalValue = 'same';
-      wrapper.vm.save();
-
-      expect(wrapper.emitted('update:value')).toBeFalsy();
-    });
-  });
-
-  describe('Slot Functionality', () => {
-    it('renders input slot when provided', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Custom Slot',
-          value: 'test'
-        },
-        global: createGlobalConfig(),
-        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(EditField, {
-        props: {
-          title: 'Slot Props',
-          value: 'test'
-        },
-        global: createGlobalConfig(),
-        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');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has proper tabindex on title container', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Accessibility Test',
-          value: 'test'
-        },
-        global: createGlobalConfig()
-      });
-
-      const titleContainer = wrapper.find('.title-container');
-      expect(titleContainer.attributes('tabindex')).toBe('-1');
-    });
-
-    it('provides meaningful title text', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'User Email Address',
-          value: 'user@example.com'
-        },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.find('.title-container p').text()).toBe('User Email Address');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles empty string values', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Empty Value',
-          value: ''
-        },
-        global: createGlobalConfig()
-      });
-
-      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(EditField, {
-        props: {
-          title: 'Special Chars',
-          value: specialValue
-        },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.vm.internalValue).toBe(specialValue);
-    });
-
-    it('handles number values', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Number Value',
-          value: 42
-        },
-        global: createGlobalConfig()
-      });
-
-      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(EditField, {
-        props: {
-          title: 'Boolean Value',
-          value: true
-        },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.vm.internalValue).toBe(true);
-
-      wrapper.vm.internalValue = false;
-      wrapper.vm.save();
-
-      expect(wrapper.emitted('update:value')?.[0]).toEqual([false]);
-    });
-  });
-
-  describe('Complex Scenarios', () => {
-    it('handles escape during editing', () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Escape Test',
-          value: 'original'
-        },
-        global: createGlobalConfig()
-      });
-
-      // 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);
-
-      // 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);
-    });
-
-    it('works with select type and items', () => {
-      const items = [
-        { value: 'opt1', title: 'Option 1' },
-        { value: 'opt2', title: 'Option 2' },
-        { value: 'opt3', title: 'Option 3' }
-      ];
-
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Select Test',
-          value: 'opt1',
-          type: 'select',
-          items
-        },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.find('[data-testid="select-component"]').exists()).toBe(true);
-    });
-
-    it('passes inputProps to child components', () => {
-      const inputProps = {
-        placeholder: 'Enter text here',
-        disabled: false
-      };
-
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Props Test',
-          value: 'test',
-          type: 'text',
-          inputProps
-        },
-        global: createGlobalConfig()
-      });
-
-      expect(wrapper.find('[data-testid="input-component"]').exists()).toBe(true);
-    });
-  });
-
-  describe('Append Icon Click', () => {
-    it('clicking append icon triggers onStartEditing', async () => {
-      const wrapper = mount(EditField, {
-        props: {
-          title: 'Test',
-          value: 'test'
-        },
-        global: createGlobalConfig()
-      });
-
-      const appendIcon = wrapper.find('.input-wrapper > .v-icon');
-      expect(appendIcon.exists()).toBe(true);
-
-      // The onStartEditing calls inputElementRef?.focus?.()
-      // Since we're using stubs, we verify the click is handled
-      await appendIcon.trigger('click');
-    });
-  });
-});
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount, flushPromises } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import EditField from '@components/EditField/EditField.vue';
+
+// Mock siteColors
+vi.mock('@/utils/index', () => ({
+  siteColors: {
+    'primary-color': '#172774',
+    'font_color_title_code': '#333333'
+  }
+}));
+
+describe('EditField', () => {
+  const createGlobalConfig = () => ({
+    stubs: {
+      Input: {
+        name: 'Input',
+        template: '<input class="input-stub" data-testid="input-component" @blur="$emit(\'blur\')" @focus="$emit(\'focus\')" @keyup.enter="$emit(\'keyup\', { key: \'Enter\' })" @keyup.esc="$emit(\'keyup\', { key: \'Escape\' })" />',
+        props: ['modelValue', 'reverse', 'borderOnHover'],
+        emits: ['blur', 'focus', 'keyup', 'update:modelValue'],
+        methods: {
+          focus() {},
+          blur() {},
+          select() {}
+        }
+      },
+      Select: {
+        name: 'Select',
+        template: '<select class="select-stub" data-testid="select-component"></select>',
+        props: ['modelValue', 'items', 'reverse', 'label', 'returnObject', 'borderOnHover'],
+        emits: ['blur', 'focus', 'update:model-value'],
+        methods: {
+          focus() {},
+          blur() {}
+        }
+      },
+      DateInput: {
+        name: 'DateInput',
+        template: '<input class="date-input-stub" data-testid="date-input-component" />',
+        props: ['modelValue', 'reverse', 'layout', 'borderOnHover'],
+        emits: ['blur', 'focus', 'update:modelValue'],
+        methods: {
+          focus() {},
+          blur() {}
+        }
+      },
+      PhoneInput: {
+        name: 'PhoneInput',
+        template: '<input class="phone-input-stub" data-testid="phone-input-component" />',
+        props: ['modelValue', 'density', 'hideDetails', 'reverse', 'borderOnHover', 'appendInnerIcon'],
+        emits: ['blur', 'focus', 'update:phone'],
+        methods: {
+          focus() {},
+          blur() {}
+        }
+      }
+    },
+    provide: {
+      themeColors: {
+        value: {
+          'primary-color': '#172774',
+          'font_color_title_code': '#333333'
+        }
+      }
+    }
+  });
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Default Behavior', () => {
+    it('renders with required props', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Test Field',
+          value: 'test value'
+        },
+        global: createGlobalConfig()
+      });
+
+      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);
+    });
+
+    it('displays title correctly', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Field Title',
+          value: 'test'
+        },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.find('.title-container p').text()).toBe('Field Title');
+    });
+
+    it('has data-testid for testing', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Test',
+          value: 'test'
+        },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Icon', () => {
+    it('displays icon when provided', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'With Icon',
+          value: 'test',
+          icon: 'mdi-home'
+        },
+        global: createGlobalConfig()
+      });
+
+      const titleIcon = wrapper.find('.title-container .v-icon');
+      expect(titleIcon.exists()).toBe(true);
+    });
+
+    it('hides icon when empty string', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'No Icon',
+          value: 'test',
+          icon: ''
+        },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.find('.title-container .v-icon').exists()).toBe(false);
+    });
+
+    it('displays default append icon when not specified', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Default Append Icon',
+          value: 'test'
+        },
+        global: createGlobalConfig()
+      });
+
+      const appendIcon = wrapper.find('.input-wrapper .v-icon');
+      expect(appendIcon.exists()).toBe(true);
+    });
+
+    it('hides append icon when explicitly set to empty string', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'No Append Icon',
+          value: 'test',
+          appendIcon: ''
+        },
+        global: createGlobalConfig()
+      });
+
+      // When appendIcon is empty string, computedAppendIcon returns empty string
+      // and v-if="computedAppendIcon" evaluates to false
+      const appendIcons = wrapper.findAll('.input-wrapper > .v-icon');
+      expect(appendIcons.length).toBe(0);
+    });
+  });
+
+  describe('Input Types', () => {
+    it('renders text input when type is "text"', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Text Field',
+          value: 'text value',
+          type: 'text'
+        },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.find('[data-testid="input-component"]').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(EditField, {
+        props: {
+          title: 'Select Field',
+          value: 'opt1',
+          type: 'select',
+          items
+        },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.find('[data-testid="select-component"]').exists()).toBe(true);
+    });
+
+    it('renders date input when type is "date"', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Date Field',
+          value: '2023-12-25',
+          type: 'date'
+        },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.find('[data-testid="date-input-component"]').exists()).toBe(true);
+    });
+
+    it('renders phone input when type is "phone"', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Phone Field',
+          value: '+1234567890',
+          type: 'phone'
+        },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.find('[data-testid="phone-input-component"]').exists()).toBe(true);
+    });
+  });
+
+  describe('v-model', () => {
+    it('updates internalValue when value prop changes', async () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Test',
+          value: 'initial'
+        },
+        global: createGlobalConfig()
+      });
+
+      await wrapper.setProps({ value: 'updated' });
+      await nextTick();
+
+      // The watcher should have updated internalValue
+      expect(wrapper.vm.internalValue).toBe('updated');
+    });
+  });
+
+  describe('Editing Functionality', () => {
+    it('reverts value on Escape key via onEsc method', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Test',
+          value: 'original'
+        },
+        global: createGlobalConfig()
+      });
+
+      // Simulate changing value
+      wrapper.vm.internalValue = 'modified';
+
+      // Call onEsc
+      wrapper.vm.onEsc();
+
+      expect(wrapper.vm.internalValue).toBe('original');
+      expect(wrapper.vm.skipSave).toBe(true);
+    });
+
+    it('calls save on blur when skipSave is false', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Test',
+          value: 'original'
+        },
+        global: createGlobalConfig()
+      });
+
+      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(EditField, {
+        props: {
+          title: 'Test',
+          value: 'original'
+        },
+        global: createGlobalConfig()
+      });
+
+      wrapper.vm.internalValue = 'modified';
+      wrapper.vm.skipSave = true;
+
+      wrapper.vm.handleBlur();
+
+      expect(wrapper.emitted('update:value')).toBeFalsy();
+      expect(wrapper.vm.skipSave).toBe(false);
+    });
+
+    it('does not emit update:value when internalValue equals prop value', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Test',
+          value: 'same'
+        },
+        global: createGlobalConfig()
+      });
+
+      wrapper.vm.internalValue = 'same';
+      wrapper.vm.save();
+
+      expect(wrapper.emitted('update:value')).toBeFalsy();
+    });
+  });
+
+  describe('Slot Functionality', () => {
+    it('renders input slot when provided', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Custom Slot',
+          value: 'test'
+        },
+        global: createGlobalConfig(),
+        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(EditField, {
+        props: {
+          title: 'Slot Props',
+          value: 'test'
+        },
+        global: createGlobalConfig(),
+        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');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper tabindex on title container', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Accessibility Test',
+          value: 'test'
+        },
+        global: createGlobalConfig()
+      });
+
+      const titleContainer = wrapper.find('.title-container');
+      expect(titleContainer.attributes('tabindex')).toBe('-1');
+    });
+
+    it('provides meaningful title text', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'User Email Address',
+          value: 'user@example.com'
+        },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.find('.title-container p').text()).toBe('User Email Address');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty string values', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Empty Value',
+          value: ''
+        },
+        global: createGlobalConfig()
+      });
+
+      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(EditField, {
+        props: {
+          title: 'Special Chars',
+          value: specialValue
+        },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.vm.internalValue).toBe(specialValue);
+    });
+
+    it('handles number values', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Number Value',
+          value: 42
+        },
+        global: createGlobalConfig()
+      });
+
+      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(EditField, {
+        props: {
+          title: 'Boolean Value',
+          value: true
+        },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.vm.internalValue).toBe(true);
+
+      wrapper.vm.internalValue = false;
+      wrapper.vm.save();
+
+      expect(wrapper.emitted('update:value')?.[0]).toEqual([false]);
+    });
+  });
+
+  describe('Complex Scenarios', () => {
+    it('handles escape during editing', () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Escape Test',
+          value: 'original'
+        },
+        global: createGlobalConfig()
+      });
+
+      // 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);
+
+      // 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);
+    });
+
+    it('works with select type and items', () => {
+      const items = [
+        { value: 'opt1', title: 'Option 1' },
+        { value: 'opt2', title: 'Option 2' },
+        { value: 'opt3', title: 'Option 3' }
+      ];
+
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Select Test',
+          value: 'opt1',
+          type: 'select',
+          items
+        },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.find('[data-testid="select-component"]').exists()).toBe(true);
+    });
+
+    it('passes inputProps to child components', () => {
+      const inputProps = {
+        placeholder: 'Enter text here',
+        disabled: false
+      };
+
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Props Test',
+          value: 'test',
+          type: 'text',
+          inputProps
+        },
+        global: createGlobalConfig()
+      });
+
+      expect(wrapper.find('[data-testid="input-component"]').exists()).toBe(true);
+    });
+  });
+
+  describe('Append Icon Click', () => {
+    it('clicking append icon triggers onStartEditing', async () => {
+      const wrapper = mount(EditField, {
+        props: {
+          title: 'Test',
+          value: 'test'
+        },
+        global: createGlobalConfig()
+      });
+
+      const appendIcon = wrapper.find('.input-wrapper > .v-icon');
+      expect(appendIcon.exists()).toBe(true);
+
+      // The onStartEditing calls inputElementRef?.focus?.()
+      // Since we're using stubs, we verify the click is handled
+      await appendIcon.trigger('click');
+    });
+  });
+});