test: fix modal tests

empathyco · Aug 15, 2024 · b35e792 · b35e792
1 parent 4e6691a
commit b35e792
Show file tree

Hide file tree

Showing 8 changed files with 127 additions and 125 deletions.
diff --git a/packages/x-components/src/components/modals/__tests__/base-events-modal-open-button.spec.ts b/packages/x-components/src/components/modals/__tests__/base-events-modal-open-button.spec.ts
@@ -1,58 +1,61 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
+import { defineComponent, nextTick } from 'vue';
 import { installNewXPlugin } from '../../../__tests__/utils';
 import { XEvent } from '../../../wiring/events.types';
 import BaseEventsModalOpen from '../base-events-modal-open.vue';
-
+import { XPlugin } from '../../../plugins/index';
 /**
  * Renders the {@link BaseEventsModalOpen} with the provided options.
  *
  * @param options - The options to render the component with.
  * @returns An small API to test the component.
  */
 function renderBaseEventsModalOpen({
-  template = '<BaseEventsModalOpen v-bind="$attrs"/>',
+  template = '<BaseEventsModalOpen :openingEvent="openingEvent"/>',
   openingEvent
 }: RenderBaseEventsModalOpenOptions = {}): RenderBaseEventsModalOpenAPI {
-  const [, localVue] = installNewXPlugin();
-  const containerWrapper = mount(
-    {
-      components: {
-        BaseEventsModalOpen
-      },
-      template
+  const containerWrapper = defineComponent({
+    components: {
+      BaseEventsModalOpen
     },
-    { propsData: { openingEvent }, localVue }
-  );
-
-  const wrapper = containerWrapper.findComponent(BaseEventsModalOpen);
+    props: {
+      openingEvent: {
+        type: String
+      }
+    },
+    template
+  });
+  const wrapper = mount(containerWrapper, {
+    global: { plugins: [installNewXPlugin()] },
+    props: { openingEvent }
+  });
 
   return {
-    wrapper,
+    wrapper: wrapper.findComponent(BaseEventsModalOpen),
     async click() {
       wrapper.trigger('click');
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
 
 describe('testing Open Button component', () => {
   it('emits UserClickedOpenX by default when clicked', async () => {
-    const { wrapper, click } = renderBaseEventsModalOpen();
+    const { click } = renderBaseEventsModalOpen();
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedOpenEventsModal').subscribe(listener);
+    XPlugin.bus.on('UserClickedOpenEventsModal').subscribe(listener);
 
     await click();
 
     expect(listener).toHaveBeenCalledTimes(1);
   });
 
   it('emits the defined openingEvent when clicked', async () => {
-    const { wrapper, click } = renderBaseEventsModalOpen({
+    const { click } = renderBaseEventsModalOpen({
       openingEvent: 'UserClickedAFilter'
     });
     const listener = jest.fn();
-    wrapper.vm.$x.on('UserClickedAFilter').subscribe(listener);
+    XPlugin.bus.on('UserClickedAFilter').subscribe(listener);
 
     await click();
 
@@ -61,7 +64,7 @@ describe('testing Open Button component', () => {
 
   it('renders the default slot contents', () => {
     const { wrapper } = renderBaseEventsModalOpen({
-      template: '<BaseEventsModalOpen v-bind="$attrs">Open</BaseEventsModalOpen>'
+      template: '<BaseEventsModalOpen :openingEvent="openingEvent">Open</BaseEventsModalOpen>'
     });
 
     expect(wrapper.text()).toEqual('Open');
@@ -77,7 +80,7 @@ interface RenderBaseEventsModalOpenOptions {
 
 interface RenderBaseEventsModalOpenAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Clicks the button. */
   click: () => Promise<void>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/base-events-modal.spec.ts b/packages/x-components/src/components/modals/__tests__/base-events-modal.spec.ts
@@ -1,10 +1,10 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseEventsModal from '../base-events-modal.vue';
 import { PropsWithType } from '../../../utils/types';
 import { XEventsTypes, XEvent } from '../../../wiring/events.types';
-
+import { XPlugin } from '../../../plugins/index';
+import { nextTick } from 'vue';
 /**
  * Mounts a {@link BaseEventsModal} component with the provided options and offers an API to easily
  * test it.
@@ -19,17 +19,16 @@ function mountBaseEventsModal({
   eventsToOpenModal,
   contentClass
 }: MountBaseEventsModalOptions = {}): MountBaseEventsModalAPI {
-  const [, localVue] = installNewXPlugin();
   const parent = document.createElement('div');
   document.body.appendChild(parent);
 
   const wrapper = mount(BaseEventsModal, {
     attachTo: parent,
-    localVue,
-    propsData: { bodyClickEvent, eventsToCloseModal, eventsToOpenModal, contentClass },
+    props: { bodyClickEvent, eventsToCloseModal, eventsToOpenModal, contentClass },
     slots: {
       default: defaultSlot
-    }
+    },
+    global: { plugins: [installNewXPlugin()] }
   });
 
   return {
@@ -38,16 +37,16 @@ function mountBaseEventsModal({
       await wrapper.find(getDataTestSelector('modal-overlay'))?.trigger('click');
     },
     async emit(event) {
-      wrapper.vm.$x.emit(event);
-      await localVue.nextTick();
+      XPlugin.bus.emit(event);
+      await nextTick();
     },
     getModalContent() {
       return wrapper.find(getDataTestSelector('modal-content'));
     },
     async fakeFocusIn() {
       jest.runAllTimers();
       document.body.dispatchEvent(new FocusEvent('focusin'));
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
@@ -115,9 +114,9 @@ describe('testing Base Events Modal  component', () => {
     });
 
     const openListener = jest.fn();
-    wrapper.vm.$x.on(eventToOpen).subscribe(openListener);
+    XPlugin.bus.on(eventToOpen).subscribe(openListener);
     const closeListener = jest.fn();
-    wrapper.vm.$x.on(eventToClose).subscribe(closeListener);
+    XPlugin.bus.on(eventToClose).subscribe(closeListener);
 
     await emit(eventToOpen);
     expect(getModalContent().exists()).toBe(true);
@@ -135,7 +134,7 @@ describe('testing Base Events Modal  component', () => {
       eventsToCloseModal: [bodyClickEvent]
     });
     const listener = jest.fn();
-    wrapper.vm.$x.on(bodyClickEvent).subscribe(listener);
+    XPlugin.bus.on(bodyClickEvent).subscribe(listener);
 
     await emit('UserClickedOpenEventsModal');
     expect(getModalContent().exists()).toBe(true);
@@ -170,13 +169,13 @@ interface MountBaseEventsModalOptions {
 
 interface MountBaseEventsModalAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Fakes a click on the modal overlay. */
   clickModalOverlay: () => Promise<void>;
   /** Emits the provided event. */
   emit: (event: PropsWithType<XEventsTypes, void>) => Promise<void>;
   /** Fakes a focusin event in another HTMLElement of the body. */
   fakeFocusIn: () => Promise<void>;
   /** Retrieves the modal content. */
-  getModalContent: () => Wrapper<Vue>;
+  getModalContent: () => DOMWrapper<Element>;
 }
diff --git a/packages/x-components/src/components/modals/__tests__/base-id-modal-close.spec.ts b/packages/x-components/src/components/modals/__tests__/base-id-modal-close.spec.ts
@@ -1,8 +1,8 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseIdModalClose from '../base-id-modal-close.vue';
 import { XPlugin } from '../../../plugins/index';
+import { defineComponent } from 'vue';
 
 /**
  * Renders the {@link BaseIdModalClose} with the provided options.
@@ -12,25 +12,28 @@ import { XPlugin } from '../../../plugins/index';
  */
 function renderBaseIdModalClose({
   id = 'random',
-  template = `<BaseIdModalClose modalId="${id}" v-bind="$attrs"/>`
+  template = `<BaseIdModalClose modalId="${id}" :modalId="modalId"/>`
 }: RenderBaseIdModalCloseOptions = {}): RenderBaseIdModalCloseAPI {
-  const [, localVue] = installNewXPlugin();
-  const containerWrapper = mount(
-    {
-      components: {
-        BaseIdModalClose
-      },
-      template
+  const containerWrapper = defineComponent({
+    components: {
+      BaseIdModalClose
     },
-    { propsData: { modalId: id }, localVue }
-  );
+    props: {
+      modalId: {
+        type: String
+      }
+    },
+    template
+  });
 
-  const wrapper = containerWrapper.findComponent(BaseIdModalClose);
-  const modalId = wrapper.props('modalId');
+  const wrapper = mount(containerWrapper, {
+    global: { plugins: [installNewXPlugin()] },
+    props: { modalId: id }
+  });
 
   return {
-    wrapper,
-    modalId,
+    wrapper: wrapper.findComponent(BaseIdModalClose),
+    modalId: id,
     async click() {
       await wrapper.trigger('click');
     }
@@ -51,7 +54,7 @@ describe('testing Close Button component', () => {
 
   it('renders the default slot contents', () => {
     const { wrapper } = renderBaseIdModalClose({
-      template: '<BaseIdModalClose modalId="modal" v-bind="$attrs">Close</BaseIdModalClose>'
+      template: '<BaseIdModalClose modalId="modal" >Close</BaseIdModalClose>'
     });
 
     expect(wrapper.text()).toEqual('Close');
@@ -60,7 +63,7 @@ describe('testing Close Button component', () => {
   // eslint-disable-next-line max-len
   it('renders custom content replacing the default exposing the function that closes the modal', async () => {
     const { wrapper, click, modalId } = renderBaseIdModalClose({
-      template: `<BaseIdModalClose modalId="modal" v-bind="$attrs">
+      template: `<BaseIdModalClose :modalId="modalId">
                     <template #closing-element="{ closeModal }">
                       <div>
                         Close <span data-test="custom-close-modal" @click="closeModal">HERE</span>
@@ -92,7 +95,7 @@ interface RenderBaseIdModalCloseOptions {
 
 interface RenderBaseIdModalCloseAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The modal id. */
   modalId: string;
   /** Clicks the button. */

diff --git a/packages/x-components/src/components/modals/__tests__/base-id-modal-open.spec.ts b/packages/x-components/src/components/modals/__tests__/base-id-modal-open.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import BaseIdModalOpen from '../base-id-modal-open.vue';
 import { bus } from '../../../plugins/x-bus';
@@ -19,7 +18,6 @@ function renderBaseIdModalOpen({
   // Making bus not repeat subjects
   jest.spyOn(bus, 'createEmitter' as any).mockImplementation(dummyCreateEmitter.bind(bus) as any);
 
-  const [, localVue] = installNewXPlugin();
   const containerWrapper = mount(
     {
       components: {
@@ -28,8 +26,8 @@ function renderBaseIdModalOpen({
       template
     },
     {
-      propsData: { modalId: id },
-      localVue
+      props: { modalId: id },
+      global: { plugins: [installNewXPlugin()] }
     }
   );
 
@@ -100,7 +98,7 @@ interface RenderBaseIdModalOpenOptions {
 
 interface RenderBaseIdModalOpenAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The modal id. */
   modalId: string;
   /** Clicks the button. */

diff --git a/packages/x-components/src/components/modals/__tests__/base-id-modal.spec.ts b/packages/x-components/src/components/modals/__tests__/base-id-modal.spec.ts
@@ -1,8 +1,9 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { DOMWrapper, mount, VueWrapper } from '@vue/test-utils';
+import Vue, { nextTick } from 'vue';
 import { getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
 import { XEvent } from '../../../wiring/events.types';
 import BaseIdModal from '../base-id-modal.vue';
+import { XPlugin } from '../../../plugins/index';
 
 /**
  * Mounts a {@link BaseIdModal} component with the provided options and offers an API to easily
@@ -16,25 +17,24 @@ function mountBaseIdModal({
   defaultSlot = `<span data-test="default-slot">Modal: ${modalId}</span>`,
   contentClass
 }: MountBaseIdModalOptions = {}): MountBaseIdModalAPI {
-  const [, localVue] = installNewXPlugin();
   const parent = document.createElement('div');
   document.body.appendChild(parent);
 
   const wrapper = mount(BaseIdModal, {
     attachTo: parent,
-    localVue,
-    propsData: { modalId, contentClass },
+    props: { modalId, contentClass },
     slots: {
       default: defaultSlot
-    }
+    },
+    global: { plugins: [installNewXPlugin()] }
   });
 
   return {
     wrapper,
     modalId,
     async emit(event: XEvent) {
-      wrapper.vm.$x.emit(event, modalId);
-      await localVue.nextTick();
+      XPlugin.bus.emit(event, modalId);
+      await nextTick();
     },
     async click(string) {
       await wrapper.get(getDataTestSelector(string))?.trigger('click');
@@ -45,7 +45,7 @@ function mountBaseIdModal({
     async fakeFocusIn() {
       jest.runAllTimers();
       document.body.dispatchEvent(new FocusEvent('focusin'));
-      await localVue.nextTick();
+      await nextTick();
     }
   };
 }
@@ -140,7 +140,7 @@ interface MountBaseIdModalOptions {
 
 interface MountBaseIdModalAPI {
   /** The wrapper for the modal component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** The modal id. */
   modalId: string;
   /** Emits the provided event. */
@@ -150,5 +150,5 @@ interface MountBaseIdModalAPI {
   /** Fakes a focusin event in another HTMLElement of the body. */
   fakeFocusIn: () => Promise<void>;
   /** Retrieves the modal content. */
-  getModalContent: () => Wrapper<Vue>;
+  getModalContent: () => DOMWrapper<Element>;
 }