[ONL-7529] Update Vue dependencies (#1579)

* [ONL-7529] update dependencies

* [ONL-7529] fix deprecated warn

* [ONL-7529] update snapshots

* [ONL-7529] fix popover unit test

* [ONL-7529] remove warnSpy for unhandled errors

* [ONL-7529] fix ec-amount removeEventListener failing test

* [ONL-7529] change ec-dropdown-search watch and add test

* [ONL-7529] add ts-ignore to directives imports in ts script setup

* [ONL-7529] update vue-tsc

* [ONL-7529] update deps and fix ts errors in tests

* [ONL-7529] fix ec-popover snapshot

* 2.2.32

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.2.31",
+  "version": "2.2.32",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",
@@ -38,16 +38,16 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "@vueuse/core": "9.2.0",
-    "@vueuse/integrations": "9.2.0",
+    "@vueuse/core": "10.2.1",
+    "@vueuse/integrations": "10.2.1",
     "clipboard-copy": "3.2.0",
     "flatpickr": "4.6.13",
     "floating-vue": "2.0.0-beta.16",
     "focus-trap": "6.9.4",
     "mitt": "3.0.0",
     "svg-country-flags": "1.2.10",
     "tailwindcss": "2.2.19",
-    "vue": "3.2.39"
+    "vue": "3.3.4"
   },
   "devDependencies": {
     "@fullhuman/postcss-purgecss": "4.0.3",
@@ -76,7 +76,7 @@
     "@vue/babel-preset-app": "5.0.8",
     "@vue/eslint-config-airbnb-with-typescript": "7.0.0",
     "@vue/eslint-config-typescript": "11.0.3",
-    "@vue/test-utils": "2.0.2",
+    "@vue/test-utils": "2.4.0",
     "@vue/tsconfig": "0.1.3",
     "@vue/vue3-jest": "29.2.0",
     "autoprefixer": "10.4.12",
@@ -90,7 +90,7 @@
     "eslint-plugin-filenames": "1.3.2",
     "eslint-plugin-jest": "27.2.1",
     "eslint-plugin-simple-import-sort": "10.0.0",
-    "eslint-plugin-vue": "9.14.1",
+    "eslint-plugin-vue": "9.15.1",
     "eslint-plugin-vuejs-accessibility": "2.1.0",
     "intl": "1.2.5",
     "jest": "29.3.1",
@@ -122,8 +122,8 @@
     "ts-morph": "17.0.1",
     "typescript": "4.8.4",
     "vite": "3.2.7",
-    "vue-router": "4.1.5",
-    "vue-tsc": "0.40.13",
+    "vue-router": "4.2.2",
+    "vue-tsc": "1.8.3",
     "wait-on": "6.0.1",
     "webpack": "5.86.0",
     "webpack-cli": "5.1.4",

src/components/ec-alert/ec-alert.spec.ts

@@ -1,4 +1,4 @@
-import type { MountingOptions } from '@vue/test-utils';
+import type { ComponentMountingOptions } from '@vue/test-utils';
 import { mount } from '@vue/test-utils';
 import { defineComponent } from 'vue';
 
@@ -8,7 +8,7 @@ import type { AlertProps } from './types';
 import { AlertType } from './types';
 
 describe('EcAlert', () => {
-  function mountAlert(props?: Partial<AlertProps>, mountOpts?: MountingOptions<AlertProps>): CVueWrapper {
+  function mountAlert(props?: Partial<AlertProps>, mountOpts?: ComponentMountingOptions<AlertProps>): CVueWrapper {
     return mount(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       EcAlert as any,
@@ -26,7 +26,7 @@ describe('EcAlert', () => {
   function mountAlertAsTemplate(
     template: string,
     wrapperComponentOpts?: Record<string, unknown>,
-    mountOpts?: MountingOptions<AlertProps>,
+    mountOpts?: ComponentMountingOptions<AlertProps>,
   ) {
     const Component = defineComponent({
       components: { EcAlert },

src/components/ec-btn/ec-btn.spec.ts

@@ -1,4 +1,4 @@
-import type { MountingOptions } from '@vue/test-utils';
+import type { ComponentMountingOptions } from '@vue/test-utils';
 import { mount } from '@vue/test-utils';
 import type { RouteLocationNamedRaw } from 'vue-router';
 
@@ -9,7 +9,7 @@ import type { ButtonProps } from './types';
 import { ButtonCategory, ButtonSize } from './types';
 
 describe('EcBtn', () => {
-  function mountBtn(props?: ButtonProps, mountOpts?: MountingOptions<ButtonProps>) {
+  function mountBtn(props?: ButtonProps, mountOpts?: ComponentMountingOptions<ButtonProps>) {
     return mount(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       EcBtn as any,

src/components/ec-currency-filter/__snapshots__/ec-currency-filter.spec.js.snap

@@ -836,7 +836,13 @@ exports[`EcCurrencyFilter should render correctly 1`] = `
             <main
               class="ec-submenu__main"
             >
-              <transition-group-stub>
+              <transition-group-stub
+                appear="false"
+                css="true"
+                name="ec-submenu__fade"
+                persisted="false"
+                tag="div"
+              >
                 
                 <div
                   data-test="ec-submenu__panel-0"

src/components/ec-dropdown-search/ec-dropdown-search.spec.js

@@ -548,6 +548,21 @@ describe('EcDropdownSearch', () => {
       expect(wrapper.emitted('close').length).toBe(1);
     });
   });
+
+  it('should change max height after setting a new items prop', async () => {
+    const wrapper = mountDropdownSearch({
+      items: [],
+    });
+
+    wrapper.findComponentByDataTest('ec-popover-stub').vm.$emit('show');
+
+    expect(wrapper.findByDataTest('ec-dropdown-search__item-list').attributes('style')).toBe(undefined);
+
+    await wrapper.setProps({ items });
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.findByDataTest('ec-dropdown-search__item-list').attributes('style')).toBe('max-height: 0px;');
+  });
 });
 
 async function waitOnAfterOpenFocus() {

src/components/ec-dropdown-search/ec-dropdown-search.vue

@@ -458,8 +458,9 @@ function updateScroll() {
   }
 }
 
-watch(() => itemElements.value, () => {
+watch(() => props.items, async () => {
   if (isOpen.value) {
+    await nextTick();
     setOverflowHeight();
   }
 });

src/components/ec-full-screen-overlay/__snapshots__/ec-full-screen-overlay.spec.js.snap

@@ -1,7 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EcFullScreenOverlay #slots #content - should be rendered when passed 1`] = `
-<transition-stub>
+<transition-stub
+  appear="false"
+  css="true"
+  name="ec-full-screen-overlay__fade"
+  persisted="false"
+>
   <div
     class="ec-full-screen-overlay tw-bg-gray-8"
     data-test="ec-full-screen-overlay"
@@ -14,7 +19,12 @@ exports[`EcFullScreenOverlay #slots #content - should be rendered when passed 1`
 `;
 
 exports[`EcFullScreenOverlay #slots #header - should be rendered when passed 1`] = `
-<transition-stub>
+<transition-stub
+  appear="false"
+  css="true"
+  name="ec-full-screen-overlay__fade"
+  persisted="false"
+>
   <div
     class="ec-full-screen-overlay tw-bg-gray-8"
     data-test="ec-full-screen-overlay"
@@ -66,7 +76,12 @@ exports[`EcFullScreenOverlay #slots #header - should be rendered when passed 1`]
 `;
 
 exports[`EcFullScreenOverlay #slots #main - should be rendered when passed 1`] = `
-<transition-stub>
+<transition-stub
+  appear="false"
+  css="true"
+  name="ec-full-screen-overlay__fade"
+  persisted="false"
+>
   <div
     class="ec-full-screen-overlay tw-bg-gray-8"
     data-test="ec-full-screen-overlay"
@@ -184,7 +199,12 @@ exports[`EcFullScreenOverlay :props :title - should render the title 1`] = `
 `;
 
 exports[`EcFullScreenOverlay should render as expected 1`] = `
-<transition-stub>
+<transition-stub
+  appear="false"
+  css="true"
+  name="ec-full-screen-overlay__fade"
+  persisted="false"
+>
   <div
     class="ec-full-screen-overlay tw-bg-gray-8"
     data-test="ec-full-screen-overlay"

src/components/ec-icon/ec-icon.spec.ts

@@ -1,12 +1,12 @@
-import type { MountingOptions } from '@vue/test-utils';
+import type { ComponentMountingOptions } from '@vue/test-utils';
 import { mount } from '@vue/test-utils';
 
 import type { CVueWrapper } from '../../../tests/utils/global';
 import EcIcon from './ec-icon.vue';
 import { IconName, type IconProps, IconType } from './types';
 
 describe('EcIcon', () => {
-  function mountEcIcon(props?: IconProps, mountOpts?: MountingOptions<IconProps>): CVueWrapper {
+  function mountEcIcon(props?: IconProps, mountOpts?: ComponentMountingOptions<IconProps>): CVueWrapper {
     return mount(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       EcIcon as any,

src/components/ec-input-field/ec-input-field.spec.ts

@@ -1,4 +1,4 @@
-import type { MountingOptions } from '@vue/test-utils';
+import type { ComponentMountingOptions } from '@vue/test-utils';
 import { mount } from '@vue/test-utils';
 import { defineComponent } from 'vue';
 
@@ -11,7 +11,7 @@ import type { InputFieldExpose, InputFieldProps } from './types';
 import { InputFieldEvent, InputFieldType } from './types';
 
 describe('EcInputField', () => {
-  function mountInputField(props?: InputFieldProps, mountOpts?: MountingOptions<InputFieldProps>): CVueWrapper {
+  function mountInputField(props?: InputFieldProps, mountOpts?: ComponentMountingOptions<InputFieldProps>): CVueWrapper {
     return mount<InputFieldProps>(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       EcInputField as any,
@@ -27,25 +27,26 @@ describe('EcInputField', () => {
         },
         ...mountOpts,
       },
-    ) as CVueWrapper;
+    ) as unknown as CVueWrapper;
   }
 
   function mountInputFieldAsTemplate(
     template: string,
     props: InputFieldProps,
     wrapperComponentOpts: Record<string, unknown>,
-    mountOpts?: MountingOptions<InputFieldProps>,
+    mountOpts?: ComponentMountingOptions<InputFieldProps>,
   ) {
     const Component = defineComponent({
       components: { EcInputField },
       template,
       ...wrapperComponentOpts,
     });
 
-    return mount<InputFieldProps, MountingOptions<InputFieldProps>>(Component, {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return mount<InputFieldProps, ComponentMountingOptions<InputFieldProps>>(Component as any, {
       props,
       ...mountOpts,
-    });
+    }) as unknown as CVueWrapper;
   }
 
   it('should display properly with the given props', () => {

src/components/ec-input-field/ec-input-field.vue

@@ -88,6 +88,8 @@ import {
 
 import type { Maybe } from '../../../global';
 import useConfig from '../../composables/use-ec-config';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
 import vEcTooltip from '../../directives/ec-tooltip';
 import { getUid } from '../../utils/uid';
 import EcIcon from '../ec-icon';

src/components/ec-loading/ec-loading.spec.ts

@@ -1,11 +1,11 @@
-import { mount, type MountingOptions } from '@vue/test-utils';
+import { type ComponentMountingOptions, mount } from '@vue/test-utils';
 
 import { withMockedConsole } from '../../../tests/utils/console';
 import EcLoading from './ec-loading.vue';
 import type { LoadingProps } from './types';
 
 describe('EcLoading', () => {
-  function mountLoading(props?: Partial<LoadingProps>, mountOpts: MountingOptions<LoadingProps> = {}) {
+  function mountLoading(props?: Partial<LoadingProps>, mountOpts: ComponentMountingOptions<LoadingProps> = {}) {
     return mount<LoadingProps>(
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       EcLoading as any,

src/components/ec-main-container/ec-main-container.spec.ts

@@ -1,11 +1,11 @@
 
-import { mount, type MountingOptions } from '@vue/test-utils';
+import { type ComponentMountingOptions, mount } from '@vue/test-utils';
 
 import EcMainContainer from './ec-main-container.vue';
 import type { MainContainerProps } from './types';
 
 describe('EcMainContainer', () => {
-  function mountEcMainContainer(props?: Partial<MainContainerProps>, mountOpts: MountingOptions<MainContainerProps> = {}) {
+  function mountEcMainContainer(props?: Partial<MainContainerProps>, mountOpts: ComponentMountingOptions<MainContainerProps> = {}) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return mount(EcMainContainer as any, {
       props,