From f9e716aee21f87d322a39597a75f674f1896259a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alberto=20Monedero=20Mart=C3=ADn?= Date: Mon, 19 Aug 2024 13:21:24 +0200 Subject: [PATCH] test(components) fix tests after vue3 update (#1599) Co-authored-by: Diego Pascual --- ...eate-directional-animation-factory.spec.ts | 7 +- .../__tests__/use-disable-animation.spec.ts | 31 +-- .../base-column-picker-dropdown.spec.ts | 48 ++-- .../__tests__/base-column-picker-list.spec.ts | 30 +-- .../currency/__tests__/base-currency.spec.ts | 10 +- .../base-events-close-button.spec.ts | 48 ++-- .../base-events-modal-open-button.spec.ts | 49 ++-- .../__tests__/base-events-modal.spec.ts | 29 ++- .../__tests__/base-id-modal-close.spec.ts | 41 +-- .../__tests__/base-id-modal-open.spec.ts | 10 +- .../modals/__tests__/base-id-modal.spec.ts | 22 +- .../modals/__tests__/close-main-modal.spec.ts | 31 ++- .../modals/__tests__/main-modal.spec.ts | 39 +-- .../modals/__tests__/open-main-modal.spec.ts | 31 ++- .../base-header-toggle-panel.spec.ts | 5 +- .../base-id-toggle-panel-button.spec.ts | 27 +- .../__tests__/base-id-toggle-panel.spec.ts | 16 +- .../panels/__tests__/base-tabs-panel.spec.ts | 64 +++-- .../__tests__/base-toggle-panel.spec.ts | 18 +- .../__tests__/base-result-add-to-cart.spec.ts | 15 +- .../base-result-current-price.spec.ts | 7 +- .../result/__tests__/base-result-link.spec.ts | 21 +- .../base-result-previous-price.spec.ts | 14 +- .../__tests__/base-result-rating.spec.ts | 22 +- ...ult-variants-provider-and-selector.spec.ts | 113 +++++---- .../scroll/__tests__/base-scroll.spec.ts | 27 +- .../__tests__/base-suggestion.spec.ts | 33 +-- .../__tests__/base-suggestions.spec.ts | 32 +-- .../__tests__/use-alias-api.spec.ts | 15 +- .../__tests__/use-debounce.spec.ts | 2 +- .../composables/__tests__/use-getter.spec.ts | 19 +- .../composables/__tests__/use-state.spec.ts | 18 +- .../composables/__tests__/use-x-bus.spec.ts | 35 ++- .../plugins/__tests__/x-plugin-alias.spec.ts | 175 ------------- .../__tests__/x-plugin-emitters.spec.ts | 64 ++--- .../plugins/__tests__/x-plugin-mixin.spec.ts | 235 ------------------ .../__tests__/x-plugin-search-adapter.spec.ts | 7 +- .../src/plugins/__tests__/x-plugin.spec.ts | 156 ++++++++---- .../__tests__/vuex-watchers-hack.spec.ts | 45 ++-- .../__tests__/operators-testing-utils.ts | 13 +- .../src/wiring/__tests__/utils.ts | 9 +- 41 files changed, 620 insertions(+), 1013 deletions(-) delete mode 100644 packages/x-components/src/plugins/__tests__/x-plugin-alias.spec.ts delete mode 100644 packages/x-components/src/plugins/__tests__/x-plugin-mixin.spec.ts diff --git a/packages/x-components/src/components/animations/__tests__/create-directional-animation-factory.spec.ts b/packages/x-components/src/components/animations/__tests__/create-directional-animation-factory.spec.ts index 16f78d8752..edb88c5d53 100644 --- a/packages/x-components/src/components/animations/__tests__/create-directional-animation-factory.spec.ts +++ b/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 { return wrapper.setProps({ open: true }); }, - getContentWrapper(): Wrapper { + getContentWrapper(): DOMWrapper { return wrapper.find(getDataTestSelector('animation-content')); } }; @@ -43,5 +42,5 @@ describe('testing animation abstract factory', () => { interface RenderApi { open: () => void | Promise; - getContentWrapper: () => Wrapper; + getContentWrapper: () => DOMWrapper; } diff --git a/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts b/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts index 91a642a215..33a09a2542 100644 --- a/packages/x-components/src/components/animations/__tests__/use-disable-animation.spec.ts +++ b/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; } 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..44398a9071 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,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 = ` ` }: { 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', () => { diff --git a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts b/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts index 9c852c1936..e329eabc18 100644 --- a/packages/x-components/src/components/column-picker/__tests__/base-column-picker-list.spec.ts +++ b/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 ?? ''} ` }: 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,7 +56,7 @@ 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]') @@ -65,6 +64,9 @@ function render({ } 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): 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'); }); }); diff --git a/packages/x-components/src/components/currency/__tests__/base-currency.spec.ts b/packages/x-components/src/components/currency/__tests__/base-currency.spec.ts index 040abb128d..20192918b3 100644 --- a/packages/x-components/src/components/currency/__tests__/base-currency.spec.ts +++ b/packages/x-components/src/components/currency/__tests__/base-currency.spec.ts @@ -1,8 +1,8 @@ -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 { +function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): VueWrapper { return mount( { components: { BaseCurrency }, @@ -10,7 +10,7 @@ function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapp props: ['value', 'format'] }, { - propsData: { + props: { value, format } @@ -18,7 +18,7 @@ function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapp ); } -function renderInjectedBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapper { +function renderInjectedBaseCurrency({ value, format }: RenderBaseCurrencyOptions): VueWrapper { const Provider = defineComponent({ setup() { const providedFormat = ref('$i,iii.ddd'); diff --git a/packages/x-components/src/components/modals/__tests__/base-events-close-button.spec.ts b/packages/x-components/src/components/modals/__tests__/base-events-close-button.spec.ts index 2888480826..f53a9beebb 100644 --- a/packages/x-components/src/components/modals/__tests__/base-events-close-button.spec.ts +++ b/packages/x-components/src/components/modals/__tests__/base-events-close-button.spec.ts @@ -1,8 +1,9 @@ -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 BaseEventsModalClose from '../base-events-modal-close.vue'; +import { XPlugin } from '../../../plugins/index'; /** * Renders the {@link BaseEventsModalClose} with the provided options. @@ -11,36 +12,39 @@ import BaseEventsModalClose from '../base-events-modal-close.vue'; * @returns An small API to test the component. */ function renderBaseEventsModalClose({ - template = '', + template = '', closingEvent }: RenderBaseEventsModalCloseOptions = {}): RenderBaseEventsModalCloseAPI { - const [, localVue] = installNewXPlugin(); - const containerWrapper = mount( - { - components: { - BaseEventsModalClose - }, - template + const modalComponent = defineComponent({ + components: { + BaseEventsModalClose }, - { propsData: { closingEvent }, localVue } - ); - - const wrapper = containerWrapper.findComponent(BaseEventsModalClose); + props: { + closingEvent: { + type: String + } + }, + template + }); + const wrapper = mount(modalComponent, { + global: { plugins: [installNewXPlugin()] }, + props: { closingEvent } + }); return { - wrapper, + wrapper: wrapper.findComponent(BaseEventsModalClose), async click() { - wrapper.trigger('click'); - await localVue.nextTick(); + await wrapper.trigger('click'); + await nextTick(); } }; } describe('testing Close Button component', () => { it('emits UserClickedCloseEventsModal by default when clicked', async () => { - const { wrapper, click } = renderBaseEventsModalClose(); + const { click } = renderBaseEventsModalClose(); const listener = jest.fn(); - wrapper.vm.$x.on('UserClickedCloseEventsModal').subscribe(listener); + XPlugin.bus.on('UserClickedCloseEventsModal').subscribe(listener); await click(); @@ -48,11 +52,11 @@ describe('testing Close Button component', () => { }); it('emits the defined closingEvent when clicked', async () => { - const { wrapper, click } = renderBaseEventsModalClose({ + const { click } = renderBaseEventsModalClose({ closingEvent: 'UserClickedAFilter' }); const listener = jest.fn(); - wrapper.vm.$x.on('UserClickedAFilter').subscribe(listener); + XPlugin.bus.on('UserClickedAFilter').subscribe(listener); await click(); @@ -77,7 +81,7 @@ interface RenderBaseEventsModalCloseOptions { interface RenderBaseEventsModalCloseAPI { /** The wrapper for the modal component. */ - wrapper: Wrapper; + wrapper: VueWrapper; /** Clicks the button. */ click: () => Promise; } 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 index 6e54e1ccdf..862772b14c 100644 --- 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,9 +1,9 @@ -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. * @@ -11,36 +11,39 @@ import BaseEventsModalOpen from '../base-events-modal-open.vue'; * @returns An small API to test the component. */ function renderBaseEventsModalOpen({ - template = '', + template = '', 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(); @@ -48,11 +51,11 @@ describe('testing Open Button component', () => { }); 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: 'Open' + template: 'Open' }); expect(wrapper.text()).toEqual('Open'); @@ -77,7 +80,7 @@ interface RenderBaseEventsModalOpenOptions { interface RenderBaseEventsModalOpenAPI { /** The wrapper for the modal component. */ - wrapper: Wrapper; + wrapper: VueWrapper; /** Clicks the button. */ click: () => Promise; } 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 index bb00b4caac..39fa42acd6 100644 --- 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,8 +37,8 @@ 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')); @@ -47,7 +46,7 @@ function mountBaseEventsModal({ 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,7 +169,7 @@ interface MountBaseEventsModalOptions { interface MountBaseEventsModalAPI { /** The wrapper for the modal component. */ - wrapper: Wrapper; + wrapper: VueWrapper; /** Fakes a click on the modal overlay. */ clickModalOverlay: () => Promise; /** Emits the provided event. */ @@ -178,5 +177,5 @@ interface MountBaseEventsModalAPI { /** Fakes a focusin event in another HTMLElement of the body. */ fakeFocusIn: () => Promise; /** Retrieves the modal content. */ - getModalContent: () => Wrapper; + getModalContent: () => DOMWrapper; } 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 index 6ee98d3f9d..cc7ef01f79 100644 --- 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 = `` + template = `` }: 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: 'Close' + template: 'Close' }); 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: ` + template: `