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

package/tests/unit/setup.ts

@@ -1,238 +1,238 @@
-import { config } from '@vue/test-utils';
-import { vi } from 'vitest';
-import { h } from 'vue';
-
-// Mock specific problematic CSS imports
-vi.mock('vuetify/lib/components/VCode/VCode.css', () => ({}));
-vi.mock('vuetify/styles', () => ({}));
-vi.mock('vuetify/lib/styles', () => ({}));
-vi.mock('flag-icons/css/flag-icons.min.css', () => ({}));
-vi.mock('v-phone-input/dist/v-phone-input.css', () => ({}));
-
-// Mock v-phone-input to prevent it from loading vuetify/components
-vi.mock('v-phone-input', () => ({
-  VPhoneInput: {
-    name: 'VPhoneInput',
-    props: ['modelValue', 'placeholder', 'label', 'variant', 'density', 'countryLabel', 'countryAriaLabel', 'phoneAriaLabel', 'preferredCountries', 'ignoredCountries', 'includedCountries', 'includeCountries', 'ariaLabel', 'appendInnerIcon', 'placeHolder', 'displayFormat', 'defaultCountry', 'hideDetails', 'ariaInvalid', 'countryIconMode', 'id', 'class'],
-    emits: ['update:modelValue', 'update:phone'],
-    setup(props: any, { emit }: any) {
-      return () => h('div', {
-        class: 'v-phone-input mocked-v-phone-input',
-        'data-testid': 'v-phone-input'
-      });
-    }
-  }
-}));
-
-// Mock vuetify/components to prevent CSS import issues
-vi.mock('vuetify/components', () => ({
-  VIcon: {
-    name: 'VIcon',
-    props: ['icon', 'size', 'color'],
-    emits: ['click'],
-    setup(props: any, { emit }: any) {
-      return () => h('i', {
-        class: 'v-icon mocked-v-icon',
-        'data-testid': 'v-icon',
-        onClick: () => emit('click')
-      });
-    }
-  },
-  VTextField: {
-    name: 'VTextField',
-    template: '<input data-testid="v-text-field" />',
-    props: ['modelValue']
-  },
-  VSelect: {
-    name: 'VSelect',
-    template: '<select data-testid="v-select"></select>',
-    props: ['modelValue', 'items']
-  },
-  VListItem: {
-    name: 'VListItem',
-    template: '<div data-testid="v-list-item"><slot /></div>'
-  }
-}));
-
-// Mock Vuetify
-vi.mock('vuetify', () => ({
-  createVuetify: () => ({
-    install: () => {},
-  }),
-}));
-
-// Global test configuration
-config.global.stubs = {
-  // Stub Vuetify components that are commonly used
-  'v-btn': {
-    template: '<button class="v-btn" :disabled="disabled" :readonly="readonly" @click="handleClick" data-testid="root" v-bind="$attrs"><span v-if="prependIcon" class="prepend-icon"></span><slot /><span v-if="appendIcon" class="append-icon"></span></button>',
-    props: ['disabled', 'loading', 'variant', 'color', 'size', 'density', 'rounded', 'elevation', 'flat', 'readonly', 'prependIcon', 'appendIcon'],
-    emits: ['click'],
-    inheritAttrs: false,
-    methods: {
-      handleClick(event) {
-        if (!this.disabled) {
-          this.$emit('click', event);
-        }
-      }
-    }
-  },
-  'v-text-field': {
-    template: '<div data-testid="root" class="v-text-field" :class="classes"><input :id="id" :type="type || \'text\'" :placeholder="placeholder" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" /><slot name="prepend"></slot><slot name="prepend-inner"></slot><slot name="append"></slot><slot name="append-inner"></slot><slot name="details"></slot></div>',
-    props: ['modelValue', 'disabled', 'error', 'label', 'placeholder', 'variant', 'density', 'hideDetails', 'persistentHint', 'prependIcon', 'prependInnerIcon', 'appendIcon', 'appendInnerIcon', 'success', 'warning', 'borderOnHover', 'class', 'type', 'id'],
-    emits: ['update:modelValue', 'click:prepend', 'click:prepend-inner', 'click:append', 'click:append-inner'],
-    computed: {
-      classes() {
-        return this.$props.class || '';
-      }
-    }
-  },
-  'v-icon': {
-    template: '<i class="v-icon" data-testid="v-icon" :icon="icon" :size="size" :color="color" v-bind="$attrs"></i>',
-    props: ['icon', 'color', 'size'],
-    inheritAttrs: false
-  },
-  'v-card': {
-    template: '<div class="v-card" data-testid="v-card" :elevation="elevation" :rounded="rounded" :color="color" :variant="variant" :style="style"><div class="v-card-item"><slot name="title" /></div><div class="v-card-text"><slot name="text" /></div><slot /></div>',
-    props: ['elevation', 'rounded', 'color', 'variant', 'style'],
-  },
-  'v-dialog': {
-    template: '<div data-testid="v-dialog" class="v-dialog"><slot /></div>',
-    props: ['modelValue', 'width'],
-  },
-  'v-checkbox': {
-    template: '<div data-testid="root" class="v-checkbox tick-box" :class="$props.class"><input type="checkbox" /><slot name="label"></slot></div>',
-    props: ['modelValue', 'disabled', 'label', 'value', 'density', 'color', 'baseColor', 'trueIcon', 'falseIcon', 'class'],
-  },
-  'v-select': {
-    template: '<select data-testid="v-select"></select>',
-    props: ['modelValue', 'items', 'disabled'],
-  },
-  'v-combobox': {
-    template: '<div data-testid="root" class="v-combobox"><input /><select><option v-for="item in items" :key="item.value" :value="item.value">{{ item.title }}</option></select><slot name="menu"></slot><slot name="prepend"></slot><slot name="prepend-inner"></slot><slot name="append"></slot><slot name="append-inner"></slot></div>',
-    props: ['modelValue', 'items', 'disabled', 'multiple', 'chips', 'clearable', 'variant', 'density', 'label', 'appendIcon', 'appendInnerIcon', 'prependIcon', 'prependInnerIcon', 'menuIcon', 'clearIcon', 'closableChips', 'hideDetails', 'error', 'itemTitle', 'itemValue', 'returnObject'],
-    emits: ['update:modelValue', 'click:append', 'click:appendInner', 'click:clear', 'click:prepend', 'click:prependInner', 'update:search']
-  },
-  'v-textarea': {
-    template: '<textarea data-testid="root" class="text-area v-textarea"></textarea>',
-    props: ['modelValue', 'disabled', 'clearable', 'clearIcon', 'label', 'prependIcon', 'prependInnerIcon', 'appendIcon', 'appendInnerIcon', 'baseColor', 'bgColor', 'variant', 'color', 'rounded'],
-    emits: ['update:modelValue', 'click:append', 'click:appendInner', 'click:clear', 'click:control', 'click:prepend', 'click:prependInner']
-  },
-  'v-expansion-panels': {
-    template: '<div data-testid="root" class="wl-accordion"><slot /></div>',
-    props: ['modelValue', 'multiple', 'variant', 'rounded', 'expandIcon', 'collapseIcon'],
-    emits: ['update:modelValue'],
-  },
-  'v-expansion-panel': {
-    template: '<div data-testid="root"><slot /></div>',
-    props: ['value', 'bgColor'],
-  },
-  'v-expansion-panel-title': {
-    template: '<div data-testid="v-expansion-panel-title"><slot /></div>',
-  },
-  'v-expansion-panel-text': {
-    template: '<div data-testid="v-expansion-panel-text"><slot /></div>',
-  },
-  'v-alert': {
-    template: '<div class="v-alert" data-testid="v-alert" :color="color" :rounded="rounded"><div class="v-alert__content"><slot name="title" /><slot name="text" /></div><slot /></div>',
-    props: ['type', 'color', 'rounded'],
-  },
-  'v-progress-circular': {
-    template: '<div data-testid="v-progress-circular"></div>',
-    props: ['value', 'size'],
-  },
-  'v-timeline': {
-    template: '<div class="v-timeline" data-testid="v-timeline" data-testid="root"><slot /></div>',
-    props: ['density', 'align']
-  },
-  'v-timeline-item': {
-    template: '<div class="v-timeline-item" data-testid="v-timeline-item"><template #icon><slot name="icon" /></template><slot /></div>',
-    props: ['size']
-  },
-  'v-list': {
-    template: '<div data-testid="v-list"><slot /></div>',
-  },
-  'v-list-item': {
-    template: '<div data-testid="v-list-item"><slot /></div>',
-  },
-  'v-hover': {
-    template: '<div data-testid="v-hover"><slot /></div>',
-  },
-  'v-sheet': {
-    template: '<div class="v-sheet" data-testid="v-sheet" :style="style" :elevation="elevation" :border="border" :rounded="rounded" v-bind="$attrs"><slot /></div>',
-    props: ['border', 'rounded', 'elevation', 'style'],
-    inheritAttrs: false
-  },
-  'v-divider': {
-    template: '<hr class="v-divider" data-testid="v-divider" v-bind="$attrs" />',
-    props: ['vertical', 'thickness'],
-    inheritAttrs: false
-  },
-  'v-fab': {
-    template: '<button class="v-fab" data-testid="v-fab"><slot /></button>',
-    props: ['baseColor', 'color', 'readonly', 'icon', 'size']
-  },
-  'v-badge': {
-    template: '<div class="v-badge" data-testid="v-badge"><slot /><template #badge><slot name="badge" /></template></div>',
-    props: ['color']
-  },
-  'v-img': {
-    template: '<img class="v-img" data-testid="v-img" :src="src" :aspect-ratio="aspectRatio" :rounded="rounded" :cover="cover" />',
-    props: ['src', 'aspectRatio', 'rounded', 'cover']
-  },
-  'v-card-actions': {
-    template: '<div class="v-card-actions" data-testid="v-card-actions"><slot /></div>',
-  },
-  'v-progress-linear': {
-    template: '<div class="v-progress-linear custom-progress-linear" data-testid="v-progress-linear" v-bind="$attrs"></div>',
-    props: ['modelValue', 'height', 'color', 'bgColor', 'bgOpacity'],
-    inheritAttrs: false
-  },
-  'teleport': {
-    template: '<div data-testid="teleport"><slot /></div>',
-    props: ['to']
-  },
-  'VPhoneInput': {
-    template: '<div data-testid="root" class="wl-phone-input"><input /></div>',
-    props: ['modelValue', 'placeholder', 'label', 'variant', 'density', 'countryLabel', 'countryAriaLabel', 'phoneAriaLabel', 'preferredCountries', 'ignoredCountries', 'includedCountries', 'includeCountries', 'ariaLabel', 'appendInnerIcon', 'placeHolder', 'displayFormat', 'defaultCountry', 'hideDetails', 'ariaInvalid', 'countryIconMode', 'id', 'class'],
-    emits: ['update:modelValue', 'update:phone']
-  },
-  'v-otp-input': {
-    template: '<div data-testid="v-otp-input"></div>',
-    props: ['modelValue', 'autofocus', 'rounded', 'loading', 'error', 'focus-all', 'focused', 'type'],
-    emits: ['update:modelValue']
-  },
-  'i18n-t': {
-    template: '<p data-testid="i18n-t"><slot></slot><slot name="phoneNumber"></slot></p>',
-    props: ['keypath', 'tag'],
-  },
-};
-
-// Mock window.matchMedia
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: vi.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: vi.fn(),
-    removeListener: vi.fn(),
-    addEventListener: vi.fn(),
-    removeEventListener: vi.fn(),
-    dispatchEvent: vi.fn(),
-  })),
-});
-
-// Mock IntersectionObserver
-global.IntersectionObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
-}));
-
-// Mock ResizeObserver
-global.ResizeObserver = vi.fn().mockImplementation(() => ({
-  observe: vi.fn(),
-  unobserve: vi.fn(),
-  disconnect: vi.fn(),
+import { config } from '@vue/test-utils';
+import { vi } from 'vitest';
+import { h } from 'vue';
+
+// Mock specific problematic CSS imports
+vi.mock('vuetify/lib/components/VCode/VCode.css', () => ({}));
+vi.mock('vuetify/styles', () => ({}));
+vi.mock('vuetify/lib/styles', () => ({}));
+vi.mock('flag-icons/css/flag-icons.min.css', () => ({}));
+vi.mock('v-phone-input/dist/v-phone-input.css', () => ({}));
+
+// Mock v-phone-input to prevent it from loading vuetify/components
+vi.mock('v-phone-input', () => ({
+  VPhoneInput: {
+    name: 'VPhoneInput',
+    props: ['modelValue', 'placeholder', 'label', 'variant', 'density', 'countryLabel', 'countryAriaLabel', 'phoneAriaLabel', 'preferredCountries', 'ignoredCountries', 'includedCountries', 'includeCountries', 'ariaLabel', 'appendInnerIcon', 'placeHolder', 'displayFormat', 'defaultCountry', 'hideDetails', 'ariaInvalid', 'countryIconMode', 'id', 'class'],
+    emits: ['update:modelValue', 'update:phone'],
+    setup(props: any, { emit }: any) {
+      return () => h('div', {
+        class: 'v-phone-input mocked-v-phone-input',
+        'data-testid': 'v-phone-input'
+      });
+    }
+  }
+}));
+
+// Mock vuetify/components to prevent CSS import issues
+vi.mock('vuetify/components', () => ({
+  VIcon: {
+    name: 'VIcon',
+    props: ['icon', 'size', 'color'],
+    emits: ['click'],
+    setup(props: any, { emit }: any) {
+      return () => h('i', {
+        class: 'v-icon mocked-v-icon',
+        'data-testid': 'v-icon',
+        onClick: () => emit('click')
+      });
+    }
+  },
+  VTextField: {
+    name: 'VTextField',
+    template: '<input data-testid="v-text-field" />',
+    props: ['modelValue']
+  },
+  VSelect: {
+    name: 'VSelect',
+    template: '<select data-testid="v-select"></select>',
+    props: ['modelValue', 'items']
+  },
+  VListItem: {
+    name: 'VListItem',
+    template: '<div data-testid="v-list-item"><slot /></div>'
+  }
+}));
+
+// Mock Vuetify
+vi.mock('vuetify', () => ({
+  createVuetify: () => ({
+    install: () => {},
+  }),
+}));
+
+// Global test configuration
+config.global.stubs = {
+  // Stub Vuetify components that are commonly used
+  'v-btn': {
+    template: '<button class="v-btn" :disabled="disabled" :readonly="readonly" @click="handleClick" data-testid="root" v-bind="$attrs"><span v-if="prependIcon" class="prepend-icon"></span><slot /><span v-if="appendIcon" class="append-icon"></span></button>',
+    props: ['disabled', 'loading', 'variant', 'color', 'size', 'density', 'rounded', 'elevation', 'flat', 'readonly', 'prependIcon', 'appendIcon'],
+    emits: ['click'],
+    inheritAttrs: false,
+    methods: {
+      handleClick(event) {
+        if (!this.disabled) {
+          this.$emit('click', event);
+        }
+      }
+    }
+  },
+  'v-text-field': {
+    template: '<div data-testid="root" class="v-text-field" :class="classes"><input :id="id" :type="type || \'text\'" :placeholder="placeholder" :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" /><slot name="prepend"></slot><slot name="prepend-inner"></slot><slot name="append"></slot><slot name="append-inner"></slot><slot name="details"></slot></div>',
+    props: ['modelValue', 'disabled', 'error', 'label', 'placeholder', 'variant', 'density', 'hideDetails', 'persistentHint', 'prependIcon', 'prependInnerIcon', 'appendIcon', 'appendInnerIcon', 'success', 'warning', 'borderOnHover', 'class', 'type', 'id'],
+    emits: ['update:modelValue', 'click:prepend', 'click:prepend-inner', 'click:append', 'click:append-inner'],
+    computed: {
+      classes() {
+        return this.$props.class || '';
+      }
+    }
+  },
+  'v-icon': {
+    template: '<i class="v-icon" data-testid="v-icon" :icon="icon" :size="size" :color="color" v-bind="$attrs"></i>',
+    props: ['icon', 'color', 'size'],
+    inheritAttrs: false
+  },
+  'v-card': {
+    template: '<div class="v-card" data-testid="v-card" :elevation="elevation" :rounded="rounded" :color="color" :variant="variant" :style="style"><div class="v-card-item"><slot name="title" /></div><div class="v-card-text"><slot name="text" /></div><slot /></div>',
+    props: ['elevation', 'rounded', 'color', 'variant', 'style'],
+  },
+  'v-dialog': {
+    template: '<div data-testid="v-dialog" class="v-dialog"><slot /></div>',
+    props: ['modelValue', 'width'],
+  },
+  'v-checkbox': {
+    template: '<div data-testid="root" class="v-checkbox tick-box" :class="$props.class"><input type="checkbox" /><slot name="label"></slot></div>',
+    props: ['modelValue', 'disabled', 'label', 'value', 'density', 'color', 'baseColor', 'trueIcon', 'falseIcon', 'class'],
+  },
+  'v-select': {
+    template: '<select data-testid="v-select"></select>',
+    props: ['modelValue', 'items', 'disabled'],
+  },
+  'v-combobox': {
+    template: '<div data-testid="root" class="v-combobox"><input /><select><option v-for="item in items" :key="item.value" :value="item.value">{{ item.title }}</option></select><slot name="menu"></slot><slot name="prepend"></slot><slot name="prepend-inner"></slot><slot name="append"></slot><slot name="append-inner"></slot></div>',
+    props: ['modelValue', 'items', 'disabled', 'multiple', 'chips', 'clearable', 'variant', 'density', 'label', 'appendIcon', 'appendInnerIcon', 'prependIcon', 'prependInnerIcon', 'menuIcon', 'clearIcon', 'closableChips', 'hideDetails', 'error', 'itemTitle', 'itemValue', 'returnObject'],
+    emits: ['update:modelValue', 'click:append', 'click:appendInner', 'click:clear', 'click:prepend', 'click:prependInner', 'update:search']
+  },
+  'v-textarea': {
+    template: '<textarea data-testid="root" class="text-area v-textarea"></textarea>',
+    props: ['modelValue', 'disabled', 'clearable', 'clearIcon', 'label', 'prependIcon', 'prependInnerIcon', 'appendIcon', 'appendInnerIcon', 'baseColor', 'bgColor', 'variant', 'color', 'rounded'],
+    emits: ['update:modelValue', 'click:append', 'click:appendInner', 'click:clear', 'click:control', 'click:prepend', 'click:prependInner']
+  },
+  'v-expansion-panels': {
+    template: '<div data-testid="root" class="wl-accordion"><slot /></div>',
+    props: ['modelValue', 'multiple', 'variant', 'rounded', 'expandIcon', 'collapseIcon'],
+    emits: ['update:modelValue'],
+  },
+  'v-expansion-panel': {
+    template: '<div data-testid="root"><slot /></div>',
+    props: ['value', 'bgColor'],
+  },
+  'v-expansion-panel-title': {
+    template: '<div data-testid="v-expansion-panel-title"><slot /></div>',
+  },
+  'v-expansion-panel-text': {
+    template: '<div data-testid="v-expansion-panel-text"><slot /></div>',
+  },
+  'v-alert': {
+    template: '<div class="v-alert" data-testid="v-alert" :color="color" :rounded="rounded"><div class="v-alert__content"><slot name="title" /><slot name="text" /></div><slot /></div>',
+    props: ['type', 'color', 'rounded'],
+  },
+  'v-progress-circular': {
+    template: '<div data-testid="v-progress-circular"></div>',
+    props: ['value', 'size'],
+  },
+  'v-timeline': {
+    template: '<div class="v-timeline" data-testid="v-timeline" data-testid="root"><slot /></div>',
+    props: ['density', 'align']
+  },
+  'v-timeline-item': {
+    template: '<div class="v-timeline-item" data-testid="v-timeline-item"><template #icon><slot name="icon" /></template><slot /></div>',
+    props: ['size']
+  },
+  'v-list': {
+    template: '<div data-testid="v-list"><slot /></div>',
+  },
+  'v-list-item': {
+    template: '<div data-testid="v-list-item"><slot /></div>',
+  },
+  'v-hover': {
+    template: '<div data-testid="v-hover"><slot /></div>',
+  },
+  'v-sheet': {
+    template: '<div class="v-sheet" data-testid="v-sheet" :style="style" :elevation="elevation" :border="border" :rounded="rounded" v-bind="$attrs"><slot /></div>',
+    props: ['border', 'rounded', 'elevation', 'style'],
+    inheritAttrs: false
+  },
+  'v-divider': {
+    template: '<hr class="v-divider" data-testid="v-divider" v-bind="$attrs" />',
+    props: ['vertical', 'thickness'],
+    inheritAttrs: false
+  },
+  'v-fab': {
+    template: '<button class="v-fab" data-testid="v-fab"><slot /></button>',
+    props: ['baseColor', 'color', 'readonly', 'icon', 'size']
+  },
+  'v-badge': {
+    template: '<div class="v-badge" data-testid="v-badge"><slot /><template #badge><slot name="badge" /></template></div>',
+    props: ['color']
+  },
+  'v-img': {
+    template: '<img class="v-img" data-testid="v-img" :src="src" :aspect-ratio="aspectRatio" :rounded="rounded" :cover="cover" />',
+    props: ['src', 'aspectRatio', 'rounded', 'cover']
+  },
+  'v-card-actions': {
+    template: '<div class="v-card-actions" data-testid="v-card-actions"><slot /></div>',
+  },
+  'v-progress-linear': {
+    template: '<div class="v-progress-linear custom-progress-linear" data-testid="v-progress-linear" v-bind="$attrs"></div>',
+    props: ['modelValue', 'height', 'color', 'bgColor', 'bgOpacity'],
+    inheritAttrs: false
+  },
+  'teleport': {
+    template: '<div data-testid="teleport"><slot /></div>',
+    props: ['to']
+  },
+  'VPhoneInput': {
+    template: '<div data-testid="root" class="wl-phone-input"><input /></div>',
+    props: ['modelValue', 'placeholder', 'label', 'variant', 'density', 'countryLabel', 'countryAriaLabel', 'phoneAriaLabel', 'preferredCountries', 'ignoredCountries', 'includedCountries', 'includeCountries', 'ariaLabel', 'appendInnerIcon', 'placeHolder', 'displayFormat', 'defaultCountry', 'hideDetails', 'ariaInvalid', 'countryIconMode', 'id', 'class'],
+    emits: ['update:modelValue', 'update:phone']
+  },
+  'v-otp-input': {
+    template: '<div data-testid="v-otp-input"></div>',
+    props: ['modelValue', 'autofocus', 'rounded', 'loading', 'error', 'focus-all', 'focused', 'type'],
+    emits: ['update:modelValue']
+  },
+  'i18n-t': {
+    template: '<p data-testid="i18n-t"><slot></slot><slot name="phoneNumber"></slot></p>',
+    props: ['keypath', 'tag'],
+  },
+};
+
+// Mock window.matchMedia
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// Mock IntersectionObserver
+global.IntersectionObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+// Mock ResizeObserver
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
 }));