From 4e6691a58c45ab392007d25c8501661c25b4d934 Mon Sep 17 00:00:00 2001
From: albertjcuac <albertjcuac@gmail.com>
Date: Thu, 15 Aug 2024 12:41:47 +0200
Subject: [PATCH] test: fix base-column-picker-dropdown test

---
 .../base-column-picker-dropdown.spec.ts       | 33 +++++++++++--------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts
index 9333b07a2e..63f85e6215 100644
--- a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts
+++ b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-dropdown.spec.ts
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import { defineComponent, nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XPlugin } from '../../../plugins/x-plugin';
 import BaseColumnPickerDropdown from '../base-column-picker-dropdown.vue';
@@ -20,21 +20,26 @@ function render({
       </template>
     </BaseColumnPickerDropdown>`
 }: { selectedColumns?: number; columns?: number[]; template?: string } = {}) {
-  const [, localVue] = installNewXPlugin();
-
   const mountComponent = (options: { selectedColumns?: number } = {}) =>
     mount(
-      {
-        components: { BaseColumnPickerDropdown },
+      defineComponent({
+        components: {
+          BaseColumnPickerDropdown
+        },
         template,
         data: () => ({
           columns,
           selectedColumns: options.selectedColumns ?? selectedColumns
-        })
-      },
+        }),
+        props: {
+          columns: {
+            type: Array<number>
+          }
+        }
+      }),
       {
-        propsData: { columns },
-        localVue
+        global: { plugins: [installNewXPlugin()] },
+        props: { columns }
       }
     );
 
@@ -53,12 +58,12 @@ function render({
     },
     toggleDropdown,
     setWrapperSelectedColumns: async (column: number) => {
-      await wrapper.setData({ selectedColumns: column });
+      wrapper.vm.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;
@@ -163,9 +168,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', () => {