From 310261d20ec53c4277a36de49a033bd55a910f90 Mon Sep 17 00:00:00 2001
From: albertjcuac <albertjcuac@gmail.com>
Date: Wed, 14 Aug 2024 14:41:07 +0200
Subject: [PATCH] test: fix baseIdTogglePanelButton test

---
 .../base-id-toggle-panel-button.spec.ts       | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel-button.spec.ts b/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel-button.spec.ts
index 89297144af..478734ae5d 100644
--- a/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel-button.spec.ts
+++ b/packages/x-components/src/components/panels/__tests__/base-id-toggle-panel-button.spec.ts
@@ -1,8 +1,10 @@
 import { AnyFunction } from '@empathyco/x-utils';
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XEvent } from '../../../wiring';
 import BaseIdTogglePanelButton from '../base-id-toggle-panel-button.vue';
+import { nextTick } from 'vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * Renders the {@link BaseIdTogglePanelButton} with the provided options.
@@ -12,15 +14,14 @@ import BaseIdTogglePanelButton from '../base-id-toggle-panel-button.vue';
  */
 function renderBaseIdToggleButton({
   panelId = 'myToggle',
-  scopedSlots = {
+  slots = {
     default: `<span data-test="default-slot">Panel: ${panelId}</span>`
   }
 }: RenderBaseIdToggleButtonOptions = {}): RenderBaseIdToggleButtonAPI {
-  const [, localVue] = installNewXPlugin();
   const containerWrapper = mount(BaseIdTogglePanelButton, {
-    localVue,
-    propsData: { panelId },
-    scopedSlots
+    props: { panelId },
+    global: { plugins: [installNewXPlugin()] },
+    slots
   });
 
   const wrapper = containerWrapper.findComponent(BaseIdTogglePanelButton);
@@ -32,8 +33,8 @@ function renderBaseIdToggleButton({
       await wrapper.trigger('click');
     },
     async emit(event: XEvent) {
-      wrapper.vm.$x.emit(event, true, { id: panelId });
-      await localVue.nextTick();
+      XPlugin.bus.emit(event, true, { id: panelId, moduleName: null });
+      await nextTick();
     }
   };
 }
@@ -42,7 +43,7 @@ describe('testing BaseIdTogglePanelButton component', () => {
   it('emits UserClickedPanelToggleButton with the panel id as payload', async () => {
     const { wrapper, panelId, click } = renderBaseIdToggleButton();
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedPanelToggleButton').subscribe(listener);
+    XPlugin.bus.on('UserClickedPanelToggleButton').subscribe(listener);
 
     await click();
 
@@ -52,7 +53,7 @@ describe('testing BaseIdTogglePanelButton component', () => {
 
   it('renders a custom slot content', () => {
     const { wrapper } = renderBaseIdToggleButton({
-      scopedSlots: { default: `<span data-test="custom-slot">Custom slot</span>` }
+      slots: { default: `<span data-test="custom-slot">Custom slot</span>` }
     });
 
     expect(wrapper.find(getDataTestSelector('custom-slot')).text()).toEqual('Custom slot');
@@ -60,7 +61,7 @@ describe('testing BaseIdTogglePanelButton component', () => {
 
   it('renders a custom slot using the isPanelOpen property', async () => {
     const { wrapper, emit } = renderBaseIdToggleButton({
-      scopedSlots: {
+      slots: {
         default: `
           <template #default="{ isPanelOpen }">
             <span data-test="custom-slot" v-if="isPanelOpen">Close aside</span>
@@ -82,12 +83,12 @@ interface RenderBaseIdToggleButtonOptions {
   /** Id of the panel to toggle. */
   panelId?: string;
   /** The scoped slots to render. */
-  scopedSlots?: Record<string, string | AnyFunction>;
+  slots?: Record<string, string | AnyFunction>;
 }
 
 interface RenderBaseIdToggleButtonAPI {
   /** The wrapper for the toggle button component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The panel id. */
   panelId: string;
   /** Emits the provided event. */