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

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

@@ -1,620 +1,758 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import PhoneInput from '@components/PhoneInput/PhoneInput.vue';
-
-// Mock v-phone-input
-vi.mock('v-phone-input', () => ({
-  VPhoneInput: {
-    template: '<div data-testid="v-phone-input"><slot /></div>',
-    props: [
-      'include-countries', 'aria-label', 'variant', 'label', 'appendInnerIcon',
-      'placeHolder', 'display-format', 'default-country', 'hide-details',
-      'aria-invalid', 'countryIconMode'
-    ]
-  }
-}));
-
-describe('PhoneInput', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  // Test default behavior and rendering
-  describe('Default Behavior', () => {
-    it('renders with default props', () => {
-      const wrapper = mount(PhoneInput);
-      
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.find('.wl-phone-input').exists()).toBe(true);
-      expect(wrapper.vm.state).toBe('default');
-      expect(wrapper.vm.placeholder).toBe('');
-      expect(wrapper.vm.countriesCodes).toEqual([]);
-      expect(wrapper.vm.defaultCountryCode).toBe('DE');
-      expect(wrapper.vm.appendInnerIcon).toBe('heroicons:phone');
-      expect(wrapper.vm.variant).toBe('outlined');
-      expect(wrapper.vm.borderOnHover).toBe(false);
-    });
-
-    it('has data-testid for testing', () => {
-      const wrapper = mount(PhoneInput);
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('applies wl-phone-input CSS class', () => {
-      const wrapper = mount(PhoneInput);
-      expect(wrapper.find('.wl-phone-input').exists()).toBe(true);
-    });
-
-    it('sets id attribute to "phone"', () => {
-      const wrapper = mount(PhoneInput);
-      // Since VPhoneInput is mocked, we can't directly test the id
-      // but we can verify the component renders correctly
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-  });
-
-  // Test validation states
-  describe('Validation States', () => {
-    it('handles default state', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          state: 'default'
-        }
-      });
-      
-      expect(wrapper.vm.state).toBe('default');
-    });
-
-    it('handles error state', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          state: 'error'
-        }
-      });
-      
-      expect(wrapper.vm.state).toBe('error');
-    });
-
-    it('handles success state', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          state: 'success'
-        }
-      });
-      
-      expect(wrapper.vm.state).toBe('success');
-    });
-
-    it('sets aria-invalid based on error state', () => {
-      const errorWrapper = mount(PhoneInput, {
-        props: {
-          state: 'error'
-        }
-      });
-      
-      expect(errorWrapper.vm.state).toBe('error');
-      
-      const defaultWrapper = mount(PhoneInput, {
-        props: {
-          state: 'default'
-        }
-      });
-      
-      expect(defaultWrapper.vm.state).toBe('default');
-    });
-  });
-
-  // Test placeholder functionality
-  describe('Placeholder', () => {
-    it('uses default empty placeholder', () => {
-      const wrapper = mount(PhoneInput);
-      expect(wrapper.vm.placeholder).toBe('');
-    });
-
-    it('accepts custom placeholder', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          placeholder: 'Enter your phone number'
-        }
-      });
-      
-      expect(wrapper.vm.placeholder).toBe('Enter your phone number');
-    });
-
-    it('uses placeholder for aria-label', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          placeholder: 'Phone number'
-        }
-      });
-      
-      expect(wrapper.vm.placeholder).toBe('Phone number');
-    });
-  });
-
-  // Test country configuration
-  describe('Country Configuration', () => {
-    it('uses default country code DE', () => {
-      const wrapper = mount(PhoneInput);
-      expect(wrapper.vm.defaultCountryCode).toBe('DE');
-    });
-
-    it('accepts custom default country code', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          defaultCountryCode: 'US'
-        }
-      });
-      
-      expect(wrapper.vm.defaultCountryCode).toBe('US');
-    });
-
-    it('uses empty countries list by default', () => {
-      const wrapper = mount(PhoneInput);
-      expect(wrapper.vm.countriesCodes).toEqual([]);
-    });
-
-    it('accepts custom countries list', () => {
-      const countries = ['US', 'GB', 'FR', 'DE'];
-      const wrapper = mount(PhoneInput, {
-        props: {
-          countriesCodes: countries
-        }
-      });
-      
-      expect(wrapper.vm.countriesCodes).toEqual(countries);
-    });
-
-    it('handles single country in list', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          countriesCodes: ['US']
-        }
-      });
-      
-      expect(wrapper.vm.countriesCodes).toEqual(['US']);
-    });
-  });
-
-  // Test icons and styling
-  describe('Icons and Styling', () => {
-    it('uses default phone icon', () => {
-      const wrapper = mount(PhoneInput);
-      expect(wrapper.vm.appendInnerIcon).toBe('heroicons:phone');
-    });
-
-    it('accepts custom append inner icon', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          appendInnerIcon: 'mdi-phone'
-        }
-      });
-      
-      expect(wrapper.vm.appendInnerIcon).toBe('mdi-phone');
-    });
-
-    it('uses default outlined variant', () => {
-      const wrapper = mount(PhoneInput);
-      expect(wrapper.vm.variant).toBe('outlined');
-    });
-
-    it('accepts custom variant', () => {
-      const variants = ['filled', 'outlined', 'underlined', 'solo'];
-      
-      variants.forEach(variant => {
-        const wrapper = mount(PhoneInput, {
-          props: { variant }
-        });
-        
-        expect(wrapper.vm.variant).toBe(variant);
-      });
-    });
-
-    it('handles border on hover', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          borderOnHover: true
-        }
-      });
-      
-      expect(wrapper.find('.border-on-hover').exists()).toBe(true);
-      expect(wrapper.vm.borderOnHover).toBe(true);
-    });
-
-    it('does not apply border-on-hover class by default', () => {
-      const wrapper = mount(PhoneInput);
-      
-      expect(wrapper.find('.border-on-hover').exists()).toBe(false);
-      expect(wrapper.vm.borderOnHover).toBe(false);
-    });
-  });
-
-  // Test event emission
-  describe('Event Emission', () => {
-    it('emits update:phone event', async () => {
-      const wrapper = mount(PhoneInput);
-      
-      // Simulate the event that would be emitted by VPhoneInput
-      wrapper.vm.$emit('update:phone', '+1234567890');
-      
-      expect(wrapper.emitted('update:phone')).toBeTruthy();
-      expect(wrapper.emitted('update:phone')?.[0]).toEqual(['+1234567890']);
-    });
-
-    it('handles different phone number formats', async () => {
-      const wrapper = mount(PhoneInput);
-      
-      const phoneNumbers = [
-        '+1 (555) 123-4567',
-        '+49 30 12345678',
-        '+44 20 7123 4567',
-        '555-123-4567'
-      ];
-      
-      phoneNumbers.forEach((phone, index) => {
-        wrapper.vm.$emit('update:phone', phone);
-      });
-      
-      expect(wrapper.emitted('update:phone')).toHaveLength(phoneNumbers.length);
-      phoneNumbers.forEach((phone, index) => {
-        expect(wrapper.emitted('update:phone')?.[index]).toEqual([phone]);
-      });
-    });
-
-    it('handles empty phone number', async () => {
-      const wrapper = mount(PhoneInput);
-      
-      wrapper.vm.$emit('update:phone', '');
-      
-      expect(wrapper.emitted('update:phone')?.[0]).toEqual(['']);
-    });
-  });
-
-  // Test exposed methods
-  describe('Exposed Methods', () => {
-    it('exposes focus, blur, and select methods', () => {
-      const wrapper = mount(PhoneInput);
-      
-      expect(wrapper.vm.focus).toBeDefined();
-      expect(wrapper.vm.blur).toBeDefined();
-      expect(wrapper.vm.select).toBeDefined();
-      expect(typeof wrapper.vm.focus).toBe('function');
-      expect(typeof wrapper.vm.blur).toBe('function');
-      expect(typeof wrapper.vm.select).toBe('function');
-    });
-
-    it('getNativeInput returns null with mocked component', () => {
-      const wrapper = mount(PhoneInput);
-      const nativeInput = wrapper.vm.getNativeInput();
-      
-      expect(nativeInput).toBeUndefined();
-    });
-
-    it('focus method works with mocked input', async () => {
-      const wrapper = mount(PhoneInput);
-      
-      // Get the real input element from the stub
-      const nativeInput = wrapper.vm.getNativeInput();
-      if (nativeInput) {
-        const focusSpy = vi.spyOn(nativeInput, 'focus');
-        
-        wrapper.vm.focus();
-        await nextTick();
-        
-        expect(focusSpy).toHaveBeenCalled();
-      } else {
-        // If no input is found, just verify the method exists
-        expect(wrapper.vm.focus).toBeDefined();
-      }
-    });
-
-    it('blur method works with mocked input', async () => {
-      const wrapper = mount(PhoneInput);
-      
-      // Get the real input element from the stub
-      const nativeInput = wrapper.vm.getNativeInput();
-      if (nativeInput) {
-        const blurSpy = vi.spyOn(nativeInput, 'blur');
-        
-        wrapper.vm.blur();
-        await nextTick();
-        
-        expect(blurSpy).toHaveBeenCalled();
-      } else {
-        // If no input is found, just verify the method exists
-        expect(wrapper.vm.blur).toBeDefined();
-      }
-    });
-
-    it('select method works with mocked input', async () => {
-      const wrapper = mount(PhoneInput);
-      
-      // Get the real input element from the stub
-      const nativeInput = wrapper.vm.getNativeInput();
-      if (nativeInput) {
-        const selectSpy = vi.spyOn(nativeInput, 'select');
-        
-        wrapper.vm.select();
-        await nextTick();
-        
-        expect(selectSpy).toHaveBeenCalled();
-      } else {
-        // If no input is found, just verify the method exists
-        expect(wrapper.vm.select).toBeDefined();
-      }
-    });
-
-    it('handles null inputRef gracefully', () => {
-      const wrapper = mount(PhoneInput);
-      wrapper.vm.inputRef = null;
-      
-      expect(() => wrapper.vm.focus()).not.toThrow();
-      expect(() => wrapper.vm.blur()).not.toThrow();
-      expect(() => wrapper.vm.select()).not.toThrow();
-    });
-  });
-
-  // Test VPhoneInput configuration
-  describe('VPhoneInput Configuration', () => {
-    it('configures VPhoneInput with correct props', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          placeholder: 'Enter phone',
-          variant: 'filled',
-          defaultCountryCode: 'US',
-          appendInnerIcon: 'mdi-phone',
-          borderOnHover: true
-        }
-      });
-      
-      // With mocked VPhoneInput, verify the component renders
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      expect(wrapper.vm.placeholder).toBe('Enter phone');
-      expect(wrapper.vm.variant).toBe('filled');
-      expect(wrapper.vm.defaultCountryCode).toBe('US');
-      expect(wrapper.vm.appendInnerIcon).toBe('mdi-phone');
-    });
-
-    it('sets display format to international', () => {
-      const wrapper = mount(PhoneInput);
-      
-      // Verify component renders correctly (display-format is hardcoded in template)
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('hides details by default', () => {
-      const wrapper = mount(PhoneInput);
-      
-      // hide-details is hardcoded in template
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('uses svg country icon mode', () => {
-      const wrapper = mount(PhoneInput);
-      
-      // countryIconMode="svg" is hardcoded in template
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('sets empty label', () => {
-      const wrapper = mount(PhoneInput);
-      
-      // label="" is hardcoded in template
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-  });
-
-  // Test accessibility
-  describe('Accessibility', () => {
-    it('has data-testid for testing', () => {
-      const wrapper = mount(PhoneInput);
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('sets aria-label from placeholder', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          placeholder: 'Enter your phone number'
-        }
-      });
-      
-      expect(wrapper.vm.placeholder).toBe('Enter your phone number');
-    });
-
-    it('handles aria-invalid for error state', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          state: 'error'
-        }
-      });
-      
-      expect(wrapper.vm.state).toBe('error');
-    });
-
-    it('provides meaningful placeholder text', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          placeholder: 'Phone number (including country code)'
-        }
-      });
-      
-      expect(wrapper.vm.placeholder).toBe('Phone number (including country code)');
-    });
-  });
-
-  // Test edge cases
-  describe('Edge Cases', () => {
-    it('handles empty countries array', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          countriesCodes: []
-        }
-      });
-      
-      expect(wrapper.vm.countriesCodes).toEqual([]);
-    });
-
-    it('handles invalid country codes gracefully', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          countriesCodes: ['XX', 'YY', 'ZZ'], // Invalid country codes
-          defaultCountryCode: 'XX'
-        }
-      });
-      
-      expect(wrapper.vm.countriesCodes).toEqual(['XX', 'YY', 'ZZ']);
-      expect(wrapper.vm.defaultCountryCode).toBe('XX');
-    });
-
-    it('handles special characters in placeholder', () => {
-      const specialPlaceholder = 'Téléphone (avec indicatif pays) +33...';
-      const wrapper = mount(PhoneInput, {
-        props: {
-          placeholder: specialPlaceholder
-        }
-      });
-      
-      expect(wrapper.vm.placeholder).toBe(specialPlaceholder);
-    });
-
-    it('handles empty string props', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          placeholder: '',
-          defaultCountryCode: '',
-          appendInnerIcon: '',
-          variant: ''
-        }
-      });
-      
-      expect(wrapper.vm.placeholder).toBe('');
-      expect(wrapper.vm.defaultCountryCode).toBe('');
-      expect(wrapper.vm.appendInnerIcon).toBe('');
-      expect(wrapper.vm.variant).toBe('');
-    });
-
-    it('handles large countries list', () => {
-      // Create a large list of country codes
-      const largeCountriesList = Array.from({ length: 100 }, (_, i) => 
-        `C${i.toString().padStart(2, '0')}`
-      );
-      
-      const wrapper = mount(PhoneInput, {
-        props: {
-          countriesCodes: largeCountriesList
-        }
-      });
-      
-      expect(wrapper.vm.countriesCodes).toHaveLength(100);
-    });
-  });
-
-  // Test attributes inheritance
-  describe('Attributes Inheritance', () => {
-    it('inherits v-bind="$attrs"', () => {
-      const wrapper = mount(PhoneInput, {
-        attrs: {
-          disabled: true,
-          readonly: true,
-          'data-custom': 'test'
-        }
-      });
-      
-      // With mocked VPhoneInput, verify component renders
-      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-    });
-
-    it('handles class inheritance', () => {
-      const wrapper = mount(PhoneInput, {
-        attrs: {
-          class: 'custom-phone-class'
-        }
-      });
-      
-      // Should still have wl-phone-input class
-      expect(wrapper.find('.wl-phone-input').exists()).toBe(true);
-    });
-  });
-
-  // Test complex scenarios
-  describe('Complex Scenarios', () => {
-    it('works with all props configured', () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          state: 'success',
-          placeholder: 'Enter international phone number',
-          countriesCodes: ['US', 'GB', 'FR', 'DE', 'ES'],
-          defaultCountryCode: 'US',
-          appendInnerIcon: 'mdi-phone-classic',
-          variant: 'filled',
-          borderOnHover: true
-        }
-      });
-      
-      expect(wrapper.vm.state).toBe('success');
-      expect(wrapper.vm.placeholder).toBe('Enter international phone number');
-      expect(wrapper.vm.countriesCodes).toEqual(['US', 'GB', 'FR', 'DE', 'ES']);
-      expect(wrapper.vm.defaultCountryCode).toBe('US');
-      expect(wrapper.vm.appendInnerIcon).toBe('mdi-phone-classic');
-      expect(wrapper.vm.variant).toBe('filled');
-      expect(wrapper.vm.borderOnHover).toBe(true);
-      expect(wrapper.find('.border-on-hover').exists()).toBe(true);
-    });
-
-    it('handles state changes', async () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          state: 'default'
-        }
-      });
-      
-      expect(wrapper.vm.state).toBe('default');
-      
-      await wrapper.setProps({ state: 'error' });
-      expect(wrapper.vm.state).toBe('error');
-      
-      await wrapper.setProps({ state: 'success' });
-      expect(wrapper.vm.state).toBe('success');
-      
-      await wrapper.setProps({ state: 'default' });
-      expect(wrapper.vm.state).toBe('default');
-    });
-
-    it('handles rapid prop changes', async () => {
-      const wrapper = mount(PhoneInput, {
-        props: {
-          placeholder: 'Initial',
-          defaultCountryCode: 'DE'
-        }
-      });
-      
-      await wrapper.setProps({ 
-        placeholder: 'Updated phone',
-        defaultCountryCode: 'US',
-        variant: 'filled'
-      });
-      
-      expect(wrapper.vm.placeholder).toBe('Updated phone');
-      expect(wrapper.vm.defaultCountryCode).toBe('US');
-      expect(wrapper.vm.variant).toBe('filled');
-    });
-
-    it('maintains functionality across all validation states', () => {
-      const states = ['default', 'error', 'success'];
-      
-      states.forEach(state => {
-        const wrapper = mount(PhoneInput, {
-          props: {
-            state: state as any,
-            placeholder: `Phone in ${state} state`
-          }
-        });
-        
-        expect(wrapper.vm.state).toBe(state);
-        expect(wrapper.vm.placeholder).toBe(`Phone in ${state} state`);
-        expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
-      });
-    });
-  });
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import PhoneInput from '@components/PhoneInput/PhoneInput.vue';
+
+// Mock v-phone-input
+vi.mock('v-phone-input', () => ({
+  VPhoneInput: {
+    template: '<div data-testid="v-phone-input"><slot /></div>',
+    props: [
+      'include-countries', 'aria-label', 'variant', 'label', 'appendInnerIcon',
+      'placeHolder', 'display-format', 'default-country', 'hide-details',
+      'aria-invalid', 'countryIconMode'
+    ]
+  }
+}));
+
+describe('PhoneInput', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // Test default behavior and rendering
+  describe('Default Behavior', () => {
+    it('renders with default props', () => {
+      const wrapper = mount(PhoneInput);
+      
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.find('.wl-phone-input').exists()).toBe(true);
+      expect(wrapper.vm.state).toBe('default');
+      expect(wrapper.vm.placeholder).toBe('');
+      expect(wrapper.vm.countriesCodes).toEqual([]);
+      expect(wrapper.vm.defaultCountryCode).toBe('DE');
+      expect(wrapper.vm.appendInnerIcon).toBe('heroicons:phone');
+      expect(wrapper.vm.variant).toBe('outlined');
+      expect(wrapper.vm.borderOnHover).toBe(false);
+    });
+
+    it('has data-testid for testing', () => {
+      const wrapper = mount(PhoneInput);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('applies wl-phone-input CSS class', () => {
+      const wrapper = mount(PhoneInput);
+      expect(wrapper.find('.wl-phone-input').exists()).toBe(true);
+    });
+
+    it('sets id attribute to "phone"', () => {
+      const wrapper = mount(PhoneInput);
+      // Since VPhoneInput is mocked, we can't directly test the id
+      // but we can verify the component renders correctly
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  // Test validation states
+  describe('Validation States', () => {
+    it('handles default state', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          state: 'default'
+        }
+      });
+      
+      expect(wrapper.vm.state).toBe('default');
+    });
+
+    it('handles error state', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          state: 'error'
+        }
+      });
+      
+      expect(wrapper.vm.state).toBe('error');
+    });
+
+    it('handles success state', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          state: 'success'
+        }
+      });
+      
+      expect(wrapper.vm.state).toBe('success');
+    });
+
+    it('sets aria-invalid based on error state', () => {
+      const errorWrapper = mount(PhoneInput, {
+        props: {
+          state: 'error'
+        }
+      });
+      
+      expect(errorWrapper.vm.state).toBe('error');
+      
+      const defaultWrapper = mount(PhoneInput, {
+        props: {
+          state: 'default'
+        }
+      });
+      
+      expect(defaultWrapper.vm.state).toBe('default');
+    });
+  });
+
+  // Test placeholder functionality
+  describe('Placeholder', () => {
+    it('uses default empty placeholder', () => {
+      const wrapper = mount(PhoneInput);
+      expect(wrapper.vm.placeholder).toBe('');
+    });
+
+    it('accepts custom placeholder', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          placeholder: 'Enter your phone number'
+        }
+      });
+      
+      expect(wrapper.vm.placeholder).toBe('Enter your phone number');
+    });
+
+    it('uses placeholder for aria-label', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          placeholder: 'Phone number'
+        }
+      });
+      
+      expect(wrapper.vm.placeholder).toBe('Phone number');
+    });
+  });
+
+  // Test country configuration
+  describe('Country Configuration', () => {
+    it('uses default country code DE', () => {
+      const wrapper = mount(PhoneInput);
+      expect(wrapper.vm.defaultCountryCode).toBe('DE');
+    });
+
+    it('accepts custom default country code', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          defaultCountryCode: 'US'
+        }
+      });
+      
+      expect(wrapper.vm.defaultCountryCode).toBe('US');
+    });
+
+    it('uses empty countries list by default', () => {
+      const wrapper = mount(PhoneInput);
+      expect(wrapper.vm.countriesCodes).toEqual([]);
+    });
+
+    it('accepts custom countries list', () => {
+      const countries = ['US', 'GB', 'FR', 'DE'];
+      const wrapper = mount(PhoneInput, {
+        props: {
+          countriesCodes: countries
+        }
+      });
+      
+      expect(wrapper.vm.countriesCodes).toEqual(countries);
+    });
+
+    it('handles single country in list', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          countriesCodes: ['US']
+        }
+      });
+      
+      expect(wrapper.vm.countriesCodes).toEqual(['US']);
+    });
+  });
+
+  // Test icons and styling
+  describe('Icons and Styling', () => {
+    it('uses default phone icon', () => {
+      const wrapper = mount(PhoneInput);
+      expect(wrapper.vm.appendInnerIcon).toBe('heroicons:phone');
+    });
+
+    it('accepts custom append inner icon', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          appendInnerIcon: 'mdi-phone'
+        }
+      });
+      
+      expect(wrapper.vm.appendInnerIcon).toBe('mdi-phone');
+    });
+
+    it('uses default outlined variant', () => {
+      const wrapper = mount(PhoneInput);
+      expect(wrapper.vm.variant).toBe('outlined');
+    });
+
+    it('accepts custom variant', () => {
+      const variants = ['filled', 'outlined', 'underlined', 'solo'];
+      
+      variants.forEach(variant => {
+        const wrapper = mount(PhoneInput, {
+          props: { variant }
+        });
+        
+        expect(wrapper.vm.variant).toBe(variant);
+      });
+    });
+
+    it('handles border on hover', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          borderOnHover: true
+        }
+      });
+      
+      expect(wrapper.find('.border-on-hover').exists()).toBe(true);
+      expect(wrapper.vm.borderOnHover).toBe(true);
+    });
+
+    it('does not apply border-on-hover class by default', () => {
+      const wrapper = mount(PhoneInput);
+      
+      expect(wrapper.find('.border-on-hover').exists()).toBe(false);
+      expect(wrapper.vm.borderOnHover).toBe(false);
+    });
+  });
+
+  // Test event emission
+  describe('Event Emission', () => {
+    it('emits update:phone event', async () => {
+      const wrapper = mount(PhoneInput);
+      
+      // Simulate the event that would be emitted by VPhoneInput
+      wrapper.vm.$emit('update:phone', '+1234567890');
+      
+      expect(wrapper.emitted('update:phone')).toBeTruthy();
+      expect(wrapper.emitted('update:phone')?.[0]).toEqual(['+1234567890']);
+    });
+
+    it('handles different phone number formats', async () => {
+      const wrapper = mount(PhoneInput);
+      
+      const phoneNumbers = [
+        '+1 (555) 123-4567',
+        '+49 30 12345678',
+        '+44 20 7123 4567',
+        '555-123-4567'
+      ];
+      
+      phoneNumbers.forEach((phone, index) => {
+        wrapper.vm.$emit('update:phone', phone);
+      });
+      
+      expect(wrapper.emitted('update:phone')).toHaveLength(phoneNumbers.length);
+      phoneNumbers.forEach((phone, index) => {
+        expect(wrapper.emitted('update:phone')?.[index]).toEqual([phone]);
+      });
+    });
+
+    it('handles empty phone number', async () => {
+      const wrapper = mount(PhoneInput);
+      
+      wrapper.vm.$emit('update:phone', '');
+      
+      expect(wrapper.emitted('update:phone')?.[0]).toEqual(['']);
+    });
+  });
+
+  // Test exposed methods
+  describe('Exposed Methods', () => {
+    it('exposes focus, blur, and select methods', () => {
+      const wrapper = mount(PhoneInput);
+      
+      expect(wrapper.vm.focus).toBeDefined();
+      expect(wrapper.vm.blur).toBeDefined();
+      expect(wrapper.vm.select).toBeDefined();
+      expect(typeof wrapper.vm.focus).toBe('function');
+      expect(typeof wrapper.vm.blur).toBe('function');
+      expect(typeof wrapper.vm.select).toBe('function');
+    });
+
+    it('getNativeInput returns null with mocked component', () => {
+      const wrapper = mount(PhoneInput);
+      const nativeInput = wrapper.vm.getNativeInput();
+      
+      expect(nativeInput).toBeUndefined();
+    });
+
+    it('focus method works with mocked input', async () => {
+      const wrapper = mount(PhoneInput);
+      
+      // Get the real input element from the stub
+      const nativeInput = wrapper.vm.getNativeInput();
+      if (nativeInput) {
+        const focusSpy = vi.spyOn(nativeInput, 'focus');
+        
+        wrapper.vm.focus();
+        await nextTick();
+        
+        expect(focusSpy).toHaveBeenCalled();
+      } else {
+        // If no input is found, just verify the method exists
+        expect(wrapper.vm.focus).toBeDefined();
+      }
+    });
+
+    it('blur method works with mocked input', async () => {
+      const wrapper = mount(PhoneInput);
+      
+      // Get the real input element from the stub
+      const nativeInput = wrapper.vm.getNativeInput();
+      if (nativeInput) {
+        const blurSpy = vi.spyOn(nativeInput, 'blur');
+        
+        wrapper.vm.blur();
+        await nextTick();
+        
+        expect(blurSpy).toHaveBeenCalled();
+      } else {
+        // If no input is found, just verify the method exists
+        expect(wrapper.vm.blur).toBeDefined();
+      }
+    });
+
+    it('select method works with mocked input', async () => {
+      const wrapper = mount(PhoneInput);
+      
+      // Get the real input element from the stub
+      const nativeInput = wrapper.vm.getNativeInput();
+      if (nativeInput) {
+        const selectSpy = vi.spyOn(nativeInput, 'select');
+        
+        wrapper.vm.select();
+        await nextTick();
+        
+        expect(selectSpy).toHaveBeenCalled();
+      } else {
+        // If no input is found, just verify the method exists
+        expect(wrapper.vm.select).toBeDefined();
+      }
+    });
+
+    it('handles null inputRef gracefully', () => {
+      const wrapper = mount(PhoneInput);
+      wrapper.vm.inputRef = null;
+      
+      expect(() => wrapper.vm.focus()).not.toThrow();
+      expect(() => wrapper.vm.blur()).not.toThrow();
+      expect(() => wrapper.vm.select()).not.toThrow();
+    });
+  });
+
+  // Test VPhoneInput configuration
+  describe('VPhoneInput Configuration', () => {
+    it('configures VPhoneInput with correct props', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          placeholder: 'Enter phone',
+          variant: 'filled',
+          defaultCountryCode: 'US',
+          appendInnerIcon: 'mdi-phone',
+          borderOnHover: true
+        }
+      });
+      
+      // With mocked VPhoneInput, verify the component renders
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      expect(wrapper.vm.placeholder).toBe('Enter phone');
+      expect(wrapper.vm.variant).toBe('filled');
+      expect(wrapper.vm.defaultCountryCode).toBe('US');
+      expect(wrapper.vm.appendInnerIcon).toBe('mdi-phone');
+    });
+
+    it('sets display format to international', () => {
+      const wrapper = mount(PhoneInput);
+      
+      // Verify component renders correctly (display-format is hardcoded in template)
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('hides details by default', () => {
+      const wrapper = mount(PhoneInput);
+      
+      // hide-details is hardcoded in template
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('uses svg country icon mode', () => {
+      const wrapper = mount(PhoneInput);
+      
+      // countryIconMode="svg" is hardcoded in template
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('sets empty label', () => {
+      const wrapper = mount(PhoneInput);
+      
+      // label="" is hardcoded in template
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+  });
+
+  // Test accessibility
+  describe('Accessibility', () => {
+    it('has data-testid for testing', () => {
+      const wrapper = mount(PhoneInput);
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('sets aria-label from placeholder', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          placeholder: 'Enter your phone number'
+        }
+      });
+      
+      expect(wrapper.vm.placeholder).toBe('Enter your phone number');
+    });
+
+    it('handles aria-invalid for error state', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          state: 'error'
+        }
+      });
+      
+      expect(wrapper.vm.state).toBe('error');
+    });
+
+    it('provides meaningful placeholder text', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          placeholder: 'Phone number (including country code)'
+        }
+      });
+      
+      expect(wrapper.vm.placeholder).toBe('Phone number (including country code)');
+    });
+  });
+
+  // Test edge cases
+  describe('Edge Cases', () => {
+    it('handles empty countries array', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          countriesCodes: []
+        }
+      });
+      
+      expect(wrapper.vm.countriesCodes).toEqual([]);
+    });
+
+    it('handles invalid country codes gracefully', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          countriesCodes: ['XX', 'YY', 'ZZ'], // Invalid country codes
+          defaultCountryCode: 'XX'
+        }
+      });
+      
+      expect(wrapper.vm.countriesCodes).toEqual(['XX', 'YY', 'ZZ']);
+      expect(wrapper.vm.defaultCountryCode).toBe('XX');
+    });
+
+    it('handles special characters in placeholder', () => {
+      const specialPlaceholder = 'Téléphone (avec indicatif pays) +33...';
+      const wrapper = mount(PhoneInput, {
+        props: {
+          placeholder: specialPlaceholder
+        }
+      });
+      
+      expect(wrapper.vm.placeholder).toBe(specialPlaceholder);
+    });
+
+    it('handles empty string props', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          placeholder: '',
+          defaultCountryCode: '',
+          appendInnerIcon: '',
+          variant: ''
+        }
+      });
+      
+      expect(wrapper.vm.placeholder).toBe('');
+      expect(wrapper.vm.defaultCountryCode).toBe('');
+      expect(wrapper.vm.appendInnerIcon).toBe('');
+      expect(wrapper.vm.variant).toBe('');
+    });
+
+    it('handles large countries list', () => {
+      // Create a large list of country codes
+      const largeCountriesList = Array.from({ length: 100 }, (_, i) => 
+        `C${i.toString().padStart(2, '0')}`
+      );
+      
+      const wrapper = mount(PhoneInput, {
+        props: {
+          countriesCodes: largeCountriesList
+        }
+      });
+      
+      expect(wrapper.vm.countriesCodes).toHaveLength(100);
+    });
+  });
+
+  // Test attributes inheritance
+  describe('Attributes Inheritance', () => {
+    it('inherits v-bind="$attrs"', () => {
+      const wrapper = mount(PhoneInput, {
+        attrs: {
+          disabled: true,
+          readonly: true,
+          'data-custom': 'test'
+        }
+      });
+      
+      // With mocked VPhoneInput, verify component renders
+      expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+    });
+
+    it('handles class inheritance', () => {
+      const wrapper = mount(PhoneInput, {
+        attrs: {
+          class: 'custom-phone-class'
+        }
+      });
+      
+      // Should still have wl-phone-input class
+      expect(wrapper.find('.wl-phone-input').exists()).toBe(true);
+    });
+  });
+
+  // Test complex scenarios
+  describe('Complex Scenarios', () => {
+    it('works with all props configured', () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          state: 'success',
+          placeholder: 'Enter international phone number',
+          countriesCodes: ['US', 'GB', 'FR', 'DE', 'ES'],
+          defaultCountryCode: 'US',
+          appendInnerIcon: 'mdi-phone-classic',
+          variant: 'filled',
+          borderOnHover: true
+        }
+      });
+      
+      expect(wrapper.vm.state).toBe('success');
+      expect(wrapper.vm.placeholder).toBe('Enter international phone number');
+      expect(wrapper.vm.countriesCodes).toEqual(['US', 'GB', 'FR', 'DE', 'ES']);
+      expect(wrapper.vm.defaultCountryCode).toBe('US');
+      expect(wrapper.vm.appendInnerIcon).toBe('mdi-phone-classic');
+      expect(wrapper.vm.variant).toBe('filled');
+      expect(wrapper.vm.borderOnHover).toBe(true);
+      expect(wrapper.find('.border-on-hover').exists()).toBe(true);
+    });
+
+    it('handles state changes', async () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          state: 'default'
+        }
+      });
+      
+      expect(wrapper.vm.state).toBe('default');
+      
+      await wrapper.setProps({ state: 'error' });
+      expect(wrapper.vm.state).toBe('error');
+      
+      await wrapper.setProps({ state: 'success' });
+      expect(wrapper.vm.state).toBe('success');
+      
+      await wrapper.setProps({ state: 'default' });
+      expect(wrapper.vm.state).toBe('default');
+    });
+
+    it('handles rapid prop changes', async () => {
+      const wrapper = mount(PhoneInput, {
+        props: {
+          placeholder: 'Initial',
+          defaultCountryCode: 'DE'
+        }
+      });
+      
+      await wrapper.setProps({ 
+        placeholder: 'Updated phone',
+        defaultCountryCode: 'US',
+        variant: 'filled'
+      });
+      
+      expect(wrapper.vm.placeholder).toBe('Updated phone');
+      expect(wrapper.vm.defaultCountryCode).toBe('US');
+      expect(wrapper.vm.variant).toBe('filled');
+    });
+
+    it('maintains functionality across all validation states', () => {
+      const states = ['default', 'error', 'success'];
+
+      states.forEach(state => {
+        const wrapper = mount(PhoneInput, {
+          props: {
+            state: state as any,
+            placeholder: `Phone in ${state} state`
+          }
+        });
+
+        expect(wrapper.vm.state).toBe(state);
+        expect(wrapper.vm.placeholder).toBe(`Phone in ${state} state`);
+        expect(wrapper.find('[data-testid="root"]').exists()).toBe(true);
+      });
+    });
+  });
+
+  // ─── Error Prop ───────────────────────────────────────────────────
+  describe('Error Prop', () => {
+    it('defaults error to false', () => {
+      const wrapper = mount(PhoneInput);
+      expect(wrapper.vm.error).toBe(false);
+    });
+
+    it('accepts error prop', () => {
+      const wrapper = mount(PhoneInput, { props: { error: true } });
+      expect(wrapper.vm.error).toBe(true);
+    });
+
+    it('adds is-error class when error is true', () => {
+      const wrapper = mount(PhoneInput, { props: { error: true } });
+      expect(wrapper.find('.is-error').exists()).toBe(true);
+    });
+
+    it('does not add is-error class when error is false', () => {
+      const wrapper = mount(PhoneInput, { props: { error: false } });
+      expect(wrapper.find('.is-error').exists()).toBe(false);
+    });
+
+    it('toggles is-error class reactively', async () => {
+      const wrapper = mount(PhoneInput, { props: { error: false } });
+      expect(wrapper.find('.is-error').exists()).toBe(false);
+
+      await wrapper.setProps({ error: true });
+      expect(wrapper.find('.is-error').exists()).toBe(true);
+
+      await wrapper.setProps({ error: false });
+      expect(wrapper.find('.is-error').exists()).toBe(false);
+    });
+  });
+
+  // ─── Hint Prop ────────────────────────────────────────────────────
+  describe('Hint Prop', () => {
+    it('defaults hint to empty string', () => {
+      const wrapper = mount(PhoneInput);
+      expect(wrapper.vm.hint).toBe('');
+    });
+
+    it('does not render hint when empty', () => {
+      const wrapper = mount(PhoneInput);
+      expect(wrapper.find('.wl-phone-hint').exists()).toBe(false);
+    });
+
+    it('renders hint text when provided', () => {
+      const wrapper = mount(PhoneInput, { props: { hint: 'Invalid number' } });
+      const hint = wrapper.find('.wl-phone-hint');
+      expect(hint.exists()).toBe(true);
+      expect(hint.text()).toContain('Invalid number');
+    });
+
+    it('renders hint icon', () => {
+      const wrapper = mount(PhoneInput, { props: { hint: 'Error' } });
+      const hint = wrapper.find('.wl-phone-hint');
+      expect(hint.find('.v-icon').exists()).toBe(true);
+    });
+
+    it('hint has alert role for accessibility', () => {
+      const wrapper = mount(PhoneInput, { props: { hint: 'Error text' } });
+      const hint = wrapper.find('.wl-phone-hint');
+      expect(hint.attributes('role')).toBe('alert');
+    });
+
+    it('hint has aria-hidden="true"', () => {
+      const wrapper = mount(PhoneInput, { props: { hint: 'Error text' } });
+      const hint = wrapper.find('.wl-phone-hint');
+      expect(hint.attributes('aria-hidden')).toBe('true');
+    });
+
+    it('hint has unique id for aria-describedby linkage', () => {
+      const wrapper = mount(PhoneInput, { props: { hint: 'Error' } });
+      const hint = wrapper.find('.wl-phone-hint');
+      expect(hint.attributes('id')).toMatch(/^phone-hint-/);
+    });
+  });
+
+  // ─── Hint Color ───────────────────────────────────────────────────
+  describe('Hint Color', () => {
+    it('uses error color when error prop is true', () => {
+      const wrapper = mount(PhoneInput, {
+        props: { hint: 'Error', error: true },
+      });
+      const hintSpan = wrapper.find('.wl-phone-hint span');
+      const style = hintSpan.attributes('style');
+      // Should use input_error_icon_color from siteColors
+      expect(style).toContain('color:');
+    });
+
+    it('uses primary color when error is false', () => {
+      const wrapper = mount(PhoneInput, {
+        props: { hint: 'Info', error: false },
+      });
+      const hintSpan = wrapper.find('.wl-phone-hint span');
+      const style = hintSpan.attributes('style');
+      expect(style).toContain('color:');
+    });
+  });
+
+  // ─── Wrapper Element ──────────────────────────────────────────────
+  describe('Wrapper Element', () => {
+    it('renders wl-phone-input-wrapper', () => {
+      const wrapper = mount(PhoneInput);
+      expect(wrapper.find('.wl-phone-input-wrapper').exists()).toBe(true);
+    });
+  });
+
+  // ─── Exposed Methods ──────────────────────────────────────────────
+  describe('Exposed Methods (extended)', () => {
+    it('exposes isValid computed', () => {
+      const wrapper = mount(PhoneInput);
+      expect(typeof wrapper.vm.isValid).toBe('boolean');
+    });
+  });
+
+  // ─── WCAG Accessibility (extended) ────────────────────────────────
+  describe('WCAG Accessibility (extended)', () => {
+    it('links hint to input via aria-describedby when hint exists', () => {
+      const wrapper = mount(PhoneInput, { props: { hint: 'Error' } });
+      const hintElement = wrapper.find('.wl-phone-hint');
+      const hintId = hintElement.attributes('id');
+      expect(hintId).toBeTruthy();
+      // The VPhoneInput should receive aria-describedby (verified via prop)
+    });
+
+    it('does not set aria-describedby when no hint', () => {
+      const wrapper = mount(PhoneInput);
+      expect(wrapper.find('.wl-phone-hint').exists()).toBe(false);
+    });
+
+    it('sets aria-invalid when error is true', () => {
+      const wrapper = mount(PhoneInput, { props: { error: true } });
+      // aria-invalid is passed to VPhoneInput
+      expect(wrapper.vm.error).toBe(true);
+    });
+  });
 });