test(components) fix tests after vue3 update (#1599)

Co-authored-by: Diego Pascual <[email protected]>

packages/x-components/src/components/animations/__tests__/create-directional-animation-factory.spec.ts

@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { DOMWrapper, mount } from '@vue/test-utils';
 import { getDataTestSelector } from '../../../__tests__/utils';
 import { createDirectionalAnimationFactory } from '../create-directional-animation-factory';
 
@@ -26,7 +25,7 @@ describe('testing animation abstract factory', () => {
       open(): void | Promise<void> {
         return wrapper.setProps({ open: true });
       },
-      getContentWrapper(): Wrapper<Vue> {
+      getContentWrapper(): DOMWrapper<Element> {
         return wrapper.find(getDataTestSelector('animation-content'));
       }
     };
@@ -43,5 +42,5 @@ describe('testing animation abstract factory', () => {
 
 interface RenderApi {
   open: () => void | Promise<void>;
-  getContentWrapper: () => Wrapper<Vue>;
+  getContentWrapper: () => DOMWrapper<Element>;
 }

packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts

@@ -1,23 +1,18 @@
 import { mount } from '@vue/test-utils';
-import { defineComponent, provide, ref } from 'vue';
+import { defineComponent, provide, ref, h, Transition } from 'vue';
 import { DISABLE_ANIMATIONS_KEY } from '../../decorators/injection.consts';
 import { useDisableAnimation } from '../use-disable-animation';
-
+import { TransitionGroup } from 'vue';
 const Provider = defineComponent({
   props: {
     disableAnimation: Boolean
   },
-  setup(props) {
+  setup(props, { slots }) {
     provide(DISABLE_ANIMATIONS_KEY as string, ref(props.disableAnimation));
-  },
-  render(h) {
-    return this.$slots.default?.[0] ?? h();
+    return () => (slots.default ? slots.default() : h('div'));
   }
 });
 
-/**
- * Animation component.
- */
 const Animation = defineComponent({
   setup() {
     return useDisableAnimation('x-animation');
@@ -29,12 +24,6 @@ const Animation = defineComponent({
   `
 });
 
-/**
- * Function that returns an Animation wrapper.
- *
- * @param disableAnimation - Flag to disable the animation.
- * @returns Animation wrapper.
- */
 function renderDisableAnimation({ disableAnimation = true }: DisableAnimationOptions = {}) {
   const wrapper = mount({
     template: `
@@ -51,25 +40,25 @@ function renderDisableAnimation({ disableAnimation = true }: DisableAnimationOpt
   });
 
   return {
-    wrapper
+    wrapper,
+    transitionGroup: wrapper.findComponent(TransitionGroup)
   };
 }
 
 describe('testing disable animation', () => {
   it('should disable the animations', () => {
-    const { wrapper } = renderDisableAnimation();
+    const { transitionGroup } = renderDisableAnimation();
 
-    expect(wrapper.attributes('name')).toBe('__no-animation__');
+    expect(transitionGroup.attributes('name')).toBe('__no-animation__');
   });
 
   it('should enable the animations', () => {
-    const { wrapper } = renderDisableAnimation({ disableAnimation: false });
+    const { transitionGroup } = renderDisableAnimation({ disableAnimation: false });
 
-    expect(wrapper.attributes('name')).toBe('x-animation');
+    expect(transitionGroup.attributes('name')).toBe('x-animation');
   });
 });
 
 interface DisableAnimationOptions {
-  /** Flag to disable the animation. */
   disableAnimation?: boolean;
 }

packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts

@@ -1,17 +1,19 @@
-import { mount } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XPlugin } from '../../../plugins/x-plugin';
 import BaseColumnPickerDropdown from '../base-column-picker-dropdown.vue';
+import { XDummyBus } from '../../../__tests__/bus.dummy';
+let bus = new XDummyBus();
 
 function render({
   selectedColumns,
   columns = [2, 4, 6],
   template = `
     <BaseColumnPickerDropdown
+      @update:modelValue="col => selectedColumns = col"
       :columns="columns"
       :modelValue="selectedColumns"
-      @update:modelValue="col => selectedColumns = col"
     >
       <template #item="{ item, isSelected, isHighlighted }">
         <span v-if="isHighlighted">🟢</span>
@@ -20,26 +22,28 @@ function render({
       </template>
     </BaseColumnPickerDropdown>`
 }: { selectedColumns?: number; columns?: number[]; template?: string } = {}) {
-  const [, localVue] = installNewXPlugin();
-
-  const mountComponent = (options: { selectedColumns?: number } = {}) =>
-    mount(
+  const mountComponent = (options: { selectedColumns?: number } = {}): VueWrapper => {
+    return mount(
       {
-        components: { BaseColumnPickerDropdown },
-        template,
-        data: () => ({
-          columns,
-          selectedColumns: options.selectedColumns ?? selectedColumns
-        })
+        components: {
+          BaseColumnPickerDropdown
+        },
+        data() {
+          return {
+            columns,
+            selectedColumns: options.selectedColumns ?? selectedColumns
+          };
+        },
+        template
       },
       {
-        propsData: { columns },
-        localVue
+        global: { plugins: [installNewXPlugin({}, bus)] }
       }
     );
+  };
 
   const columnPickerDropdownWrapper = mountComponent();
-  const wrapper = columnPickerDropdownWrapper.findComponent(BaseColumnPickerDropdown);
+  const wrapper: VueWrapper = columnPickerDropdownWrapper.findComponent(BaseColumnPickerDropdown);
   const toggleWrapper = wrapper.find(getDataTestSelector('dropdown-toggle'));
   const toggleDropdown = async () => await toggleWrapper.trigger('click');
 
@@ -53,18 +57,22 @@ function render({
     },
     toggleDropdown,
     setWrapperSelectedColumns: async (column: number) => {
-      await wrapper.setData({ selectedColumns: column });
+      await columnPickerDropdownWrapper.setData({ selectedColumns: column });
       await nextTick();
     },
     clickNthItem: async (nth: number) => {
       await toggleDropdown();
-      await wrapper.findAll(getDataTestSelector('dropdown-item')).at(nth).trigger('click');
+      await wrapper.findAll(getDataTestSelector('dropdown-item')).at(nth)?.trigger('click');
       await nextTick();
     }
   } as const;
 }
 
 describe('testing BaseColumnPickerDropdown component', () => {
+  beforeEach(() => {
+    bus = new XDummyBus();
+  });
+
   it('emits ColumnsNumberProvided event with the column number on init', () => {
     render();
 
@@ -163,9 +171,9 @@ describe('testing BaseColumnPickerDropdown component', () => {
 
     const itemWrapperArray = wrapper.findAll(getDataTestSelector('dropdown-item'));
 
-    expect(itemWrapperArray.at(0).text()).toEqual('🟢 ✅ 2');
-    expect(itemWrapperArray.at(1).text()).toEqual('4');
-    expect(itemWrapperArray.at(2).text()).toEqual('6');
+    expect(itemWrapperArray.at(0)?.text()).toEqual('🟢✅2');
+    expect(itemWrapperArray.at(1)?.text()).toEqual('4');
+    expect(itemWrapperArray.at(2)?.text()).toEqual('6');
   });
 
   it('renders the item slot as toggle when its slot is not defined', () => {

packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts

@@ -1,9 +1,10 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XPlugin } from '../../../plugins/x-plugin';
 import BaseColumnPickerList from '../base-column-picker-list.vue';
-
+import { XDummyBus } from '../../../__tests__/bus.dummy';
+let bus = new XDummyBus();
 function render({
   selectedColumns,
   columns,
@@ -22,8 +23,6 @@ function render({
       ${customItemSlot ?? ''}
    </BaseColumnPickerList>`
 }: BaseColumnPickerListRenderOptions = {}) {
-  const [, localVue] = installNewXPlugin();
-
   function mountComponent(options: { selectedColumns?: number } = {}) {
     return mount(
       {
@@ -36,8 +35,8 @@ function render({
         })
       },
       {
-        propsData: { columns, buttonClass },
-        localVue
+        props: { columns, buttonClass },
+        global: { plugins: [installNewXPlugin({}, bus)] }
       }
     );
   }
@@ -57,14 +56,17 @@ function render({
       await nextTick();
     },
     clickNthItem: async (nth: number) => {
-      await wrapper.findAll(getDataTestSelector('column-picker-button')).at(nth).trigger('click');
+      await wrapper.findAll(getDataTestSelector('column-picker-button')).at(nth)?.trigger('click');
       await nextTick();
     },
     getSelectedItem: () => wrapper.find('[aria-pressed=true]')
   } as const;
 }
 
 describe('testing BaseColumnPickerList component', () => {
+  beforeEach(() => {
+    bus = new XDummyBus();
+  });
   it('emits ColumnsNumberProvided event with the column number on init', () => {
     render({ columns: [1, 3, 6] });
 
@@ -100,7 +102,7 @@ describe('testing BaseColumnPickerList component', () => {
       eventPayload: columns[index],
       metadata: {
         moduleName: null, // no module registered for this base component
-        target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index).element,
+        target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index)?.element,
         location: 'none',
         replaceable: true
       }
@@ -114,7 +116,7 @@ describe('testing BaseColumnPickerList component', () => {
       eventPayload: columns[index],
       metadata: {
         moduleName: null, // no module registered for this base component
-        target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index).element,
+        target: wrapper.findAll(getDataTestSelector('column-picker-button')).at(index)?.element,
         location: 'none',
         replaceable: true
       }
@@ -127,7 +129,7 @@ describe('testing BaseColumnPickerList component', () => {
     const columnPickerListWrapper = wrapper.findAll(getDataTestSelector('column-picker-button'));
 
     columns.forEach((column, index) => {
-      expect(columnPickerListWrapper.at(index).classes()).toContain(
+      expect(columnPickerListWrapper.at(index)?.classes()).toContain(
         `x-column-picker-list__button--${column}-cols`
       );
     });
@@ -144,7 +146,7 @@ describe('testing BaseColumnPickerList component', () => {
 
     expect(columnsSlots).toHaveLength(columns.length);
     columns.forEach((column, index) => {
-      expect(columnsSlots.at(index).text()).toEqual(column.toString());
+      expect(columnsSlots.at(index)?.text()).toEqual(column.toString());
     });
   });
 
@@ -173,7 +175,7 @@ describe('testing BaseColumnPickerList component', () => {
   });
 
   it('updates selected value on fresh mounts correctly', async () => {
-    const getSelectedItem = (wrapper: Wrapper<Vue>): string =>
+    const getSelectedItem = (wrapper: VueWrapper): string =>
       wrapper.get('[aria-pressed=true]').text();
     const { wrapper, mountComponent, clickNthItem, setWrapperSelectedColumns } = render({
       columns: [4, 6, 0]
@@ -210,7 +212,7 @@ describe('testing BaseColumnPickerList component', () => {
       buttonClass: 'custom-class'
     });
 
-    wrapper.findAll('button').wrappers.forEach(button => {
+    wrapper.findAll('button').forEach(button => {
       expect(button.classes()).toContain('custom-class');
     });
   });

packages/x-components/src/components/currency/__tests__/base-currency.spec.ts

@@ -1,24 +1,24 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { defineComponent, provide, ref } from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent, provide, ref } from 'vue';
 import BaseCurrency from '../base-currency.vue';
 
-function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapper<Vue> {
+function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): VueWrapper {
   return mount(
     {
       components: { BaseCurrency },
       template: `<BaseCurrency :value="value" :format="format"/>`,
       props: ['value', 'format']
     },
     {
-      propsData: {
+      props: {
         value,
         format
       }
     }
   );
 }
 
-function renderInjectedBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapper<Vue> {
+function renderInjectedBaseCurrency({ value, format }: RenderBaseCurrencyOptions): VueWrapper {
   const Provider = defineComponent({
     setup() {
       const providedFormat = ref('$i,iii.ddd');