diff --git a/packages/x-components/src/x-modules/empathize/components/__tests__/empathize.spec.ts b/packages/x-components/src/x-modules/empathize/components/__tests__/empathize.spec.ts index a0efee4fcb..e294705a93 100644 --- a/packages/x-components/src/x-modules/empathize/components/__tests__/empathize.spec.ts +++ b/packages/x-components/src/x-modules/empathize/components/__tests__/empathize.spec.ts @@ -15,8 +15,6 @@ function render({ ` } = {}) { - installNewXPlugin(); - const parent = document.createElement('div'); document.body.appendChild(parent); @@ -27,9 +25,12 @@ function render({ }, { attachTo: parent, - propsData: { + props: { eventsToOpenEmpathize, eventsToCloseEmpathize + }, + global: { + plugins: [installNewXPlugin()] } } ); diff --git a/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts b/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts index a226e19003..8391b3eafd 100644 --- a/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts +++ b/packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts @@ -1,6 +1,5 @@ import { Dictionary } from '@empathyco/x-utils'; -import { mount, Wrapper } from '@vue/test-utils'; -import Vue from 'vue'; +import { mount, VueWrapper } from '@vue/test-utils'; import { installNewXPlugin } from '../../../../__tests__/utils'; import { getXComponentXModuleName, isXComponent } from '../../../../components'; import { XPlugin } from '../../../../plugins'; @@ -11,14 +10,15 @@ import ExtraParams from '../extra-params.vue'; describe('testing extra params component', () => { function renderExtraParams(values: Dictionary): RenderExtraParamsApi { XPlugin.resetInstance(); - const [, localVue] = installNewXPlugin(); XPlugin.registerXModule(extraParamsXModule); const wrapper = mount(ExtraParams, { - propsData: { + props: { values }, - localVue + global: { + plugins: [installNewXPlugin()] + } }); return { @@ -36,7 +36,7 @@ describe('testing extra params component', () => { const { wrapper } = renderExtraParams({ warehouse: 1234 }); const extraParamsProvidedCallback = jest.fn(); - wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); + XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); expect(extraParamsProvidedCallback).toHaveBeenCalledWith<[WirePayload>]>({ eventPayload: { warehouse: 1234 }, @@ -56,5 +56,5 @@ describe('testing extra params component', () => { interface RenderExtraParamsApi { /** The wrapper for the extra params component. */ - wrapper: Wrapper; + wrapper: VueWrapper; } diff --git a/packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts b/packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts index 07e2471fc0..afc0e90258 100644 --- a/packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts +++ b/packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts @@ -6,23 +6,22 @@ import { XPlugin } from '../../../../plugins'; import { WirePayload } from '../../../../wiring'; import { extraParamsXModule } from '../../x-module'; import RenderlessExtraParam from '../renderless-extra-param.vue'; -import { resetXExtraParamStateWith } from './utils'; -function render({ - template = ``, - name = 'warehouse', - params = {} -} = {}) { - installNewXPlugin({ initialXModules: [extraParamsXModule] }); - resetXExtraParamStateWith(XPlugin.store, { params }); - - const wrapper = mount({ - template, - components: { - RenderlessExtraParam +function render({ template = ``, name = 'warehouse' } = {}) { + const wrapper = mount( + { + template, + components: { + RenderlessExtraParam + }, + data: () => ({ name }) }, - data: () => ({ name }) - }); + { + global: { + plugins: [installNewXPlugin({ initialXModules: [extraParamsXModule] })] + } + } + ); return { wrapper: wrapper.findComponent(RenderlessExtraParam) @@ -58,8 +57,7 @@ describe('testing RenderlessExtraParam component', () => { XPlugin.bus.on('UserChangedExtraParams', true).subscribe(userChangedExtraParamsCallback); expect(userChangedExtraParamsCallback).toHaveBeenCalledTimes(0); - - wrapper.find(getDataTestSelector('custom-slot')).element.click(); + wrapper.find(getDataTestSelector('custom-slot')).trigger('click'); expect(userChangedExtraParamsCallback).toHaveBeenCalledWith<[WirePayload>]>( { diff --git a/packages/x-components/src/x-modules/extra-params/components/__tests__/snippet-config-extra-params.spec.ts b/packages/x-components/src/x-modules/extra-params/components/__tests__/snippet-config-extra-params.spec.ts index ca0b628a6e..fd231a23ff 100644 --- a/packages/x-components/src/x-modules/extra-params/components/__tests__/snippet-config-extra-params.spec.ts +++ b/packages/x-components/src/x-modules/extra-params/components/__tests__/snippet-config-extra-params.spec.ts @@ -1,11 +1,10 @@ import { Dictionary } from '@empathyco/x-utils'; -import { mount, Wrapper } from '@vue/test-utils'; -import Vue from 'vue'; +import { mount, VueWrapper } from '@vue/test-utils'; +import { reactive, nextTick } from 'vue'; import { installNewXPlugin } from '../../../../__tests__/utils'; import { getXComponentXModuleName, isXComponent } from '../../../../components'; import { XPlugin } from '../../../../plugins'; import { WirePayload } from '../../../../wiring'; -import { extraParamsXModule } from '../../x-module'; import SnippetConfigExtraParams from '../snippet-config-extra-params.vue'; import { SnippetConfig } from '../../../../x-installer/api/api.types'; @@ -14,10 +13,7 @@ describe('testing snippet config extra params component', () => { values, excludedExtraParams }: RenderSnippetConfigExtraParamsOptions = {}): RenderSnippetConfigExtraParamsApi { - XPlugin.resetInstance(); - const [, localVue] = installNewXPlugin(); - XPlugin.registerXModule(extraParamsXModule); - const snippetConfig = Vue.observable({ warehouse: 1234, callbacks: {} }); + const snippetConfig = reactive({ warehouse: 1234, callbacks: {} }); const wrapper = mount( { @@ -35,8 +31,10 @@ describe('testing snippet config extra params component', () => { } }, { - localVue, - propsData: { + global: { + plugins: [installNewXPlugin()] + }, + props: { values, excludedExtraParams } @@ -45,19 +43,20 @@ describe('testing snippet config extra params component', () => { function setSnippetConfig(newValue: Dictionary): Promise { Object.assign(snippetConfig, newValue); - return localVue.nextTick(); + return nextTick(); } return { - wrapper: wrapper.findComponent(SnippetConfigExtraParams), + wrapper, setSnippetConfig }; } it('is an XComponent which has an XModule', () => { const { wrapper } = renderSnippetConfigExtraParams(); - expect(isXComponent(wrapper.vm)).toEqual(true); - expect(getXComponentXModuleName(wrapper.vm)).toEqual('extraParams'); + const component = wrapper.findComponent(SnippetConfigExtraParams); + expect(isXComponent(component.vm)).toEqual(true); + expect(getXComponentXModuleName(component.vm)).toEqual('extraParams'); }); // eslint-disable-next-line max-len @@ -65,7 +64,7 @@ describe('testing snippet config extra params component', () => { const { wrapper, setSnippetConfig } = renderSnippetConfigExtraParams(); const extraParamsProvidedCallback = jest.fn(); - wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); + XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload>]>( 1, @@ -95,11 +94,11 @@ describe('testing snippet config extra params component', () => { // eslint-disable-next-line max-len it('emits the ExtraParamsProvided event with the values from the snippet config and the extra params', () => { - const { wrapper } = renderSnippetConfigExtraParams({ values: { scope: 'mobile' } }); + renderSnippetConfigExtraParams({ values: { scope: 'mobile' } }); const extraParamsProvidedCallback = jest.fn(); - wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); + XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload>]>( 1, @@ -111,10 +110,10 @@ describe('testing snippet config extra params component', () => { // eslint-disable-next-line max-len it('does not emit ExtraParamsProvided when any no extra params in the snippet config changes', async () => { - const { wrapper, setSnippetConfig } = renderSnippetConfigExtraParams(); + const { setSnippetConfig } = renderSnippetConfigExtraParams(); const extraParamsProvidedCallback = jest.fn(); - wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); + XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload>]>( 1, @@ -123,14 +122,18 @@ describe('testing snippet config extra params component', () => { }) ); - await setSnippetConfig({ uiLang: 'es' }); + await setSnippetConfig({ warehouse: 1234 }); expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(1); + await setSnippetConfig({ uiLang: 'es' }); + + expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(2); + await setSnippetConfig({ warehouse: 45678 }); expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload>]>( - 2, + 3, expect.objectContaining({ eventPayload: { warehouse: 45678 } }) @@ -138,10 +141,10 @@ describe('testing snippet config extra params component', () => { }); it('not includes the callback configuration as extra params', () => { - const { wrapper } = renderSnippetConfigExtraParams(); + renderSnippetConfigExtraParams(); const extraParamsProvidedCallback = jest.fn(); - wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); + XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload>]>( 1, @@ -152,7 +155,7 @@ describe('testing snippet config extra params component', () => { }); it('allows to configure excluded params', () => { - const { wrapper } = renderSnippetConfigExtraParams({ + renderSnippetConfigExtraParams({ values: { xEngineId: 'motive', currency: 'EUR' @@ -161,7 +164,7 @@ describe('testing snippet config extra params component', () => { }); const extraParamsProvidedCallback = jest.fn(); - wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); + XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload>]>( 1, @@ -188,7 +191,7 @@ interface RenderSnippetConfigExtraParamsOptions { interface RenderSnippetConfigExtraParamsApi { /** The wrapper for the snippet config component. */ - wrapper: Wrapper; + wrapper: VueWrapper; /** Helper method to change the snippet config. */ setSnippetConfig: (newSnippetConfig: Dictionary) => void | Promise; }