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..e83f3a432f 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,5 +1,6 @@ -import { Dictionary } from '@empathyco/x-utils'; -import { mount, Wrapper } from '@vue/test-utils'; +import { DeepPartial, Dictionary } from '@empathyco/x-utils'; +import { createLocalVue, mount, Wrapper } from '@vue/test-utils'; +import Vuex, { Store } from 'vuex'; import Vue from 'vue'; import { installNewXPlugin } from '../../../../__tests__/utils'; import { getXComponentXModuleName, isXComponent } from '../../../../components'; @@ -7,53 +8,49 @@ 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'; - -describe('testing snippet config extra params component', () => { - function renderSnippetConfigExtraParams({ - values, - excludedExtraParams - }: RenderSnippetConfigExtraParamsOptions = {}): RenderSnippetConfigExtraParamsApi { - XPlugin.resetInstance(); - const [, localVue] = installNewXPlugin(); - XPlugin.registerXModule(extraParamsXModule); - const snippetConfig = Vue.observable({ warehouse: 1234, callbacks: {} }); - - const wrapper = mount( - { - template: ` - - `, - components: { - SnippetConfigExtraParams - }, - props: ['values', 'excludedExtraParams'], - provide() { - return { - snippetConfig - }; - } - }, - { - localVue, - propsData: { - values, - excludedExtraParams - } - } - ); - - function setSnippetConfig(newValue: Dictionary): Promise { - Object.assign(snippetConfig, newValue); - return localVue.nextTick(); +import { RootXStoreState } from '../../../../store/index'; +import { SnippetConfig } from '../../../../x-installer/index'; + +function renderSnippetConfigExtraParams({ + values = {}, + excludedExtraParams = ['callbacks', 'productId', 'uiLang'] +}: RenderSnippetConfigExtraParamsOptions = {}): RenderSnippetConfigExtraParamsApi { + const snippetConfig = Vue.observable({ warehouse: 1234, callbacks: {} }); + const localVue = createLocalVue(); + localVue.use(Vuex); + + const store = new Store>({}); + installNewXPlugin({ store }, localVue); + XPlugin.registerXModule(extraParamsXModule); + + const extraParamsProvidedCallback: jest.Mock = jest.fn(); + XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); + + const wrapper = mount(SnippetConfigExtraParams, { + localVue, + store, + provide: { + snippetConfig + }, + propsData: { + values, + excludedExtraParams } + }); - return { - wrapper: wrapper.findComponent(SnippetConfigExtraParams), - setSnippetConfig - }; + async function setSnippetConfig(newValue: Dictionary): Promise { + Object.assign(snippetConfig, newValue); + await Vue.nextTick(); } + return { + wrapper: wrapper.findComponent(SnippetConfigExtraParams), + setSnippetConfig, + extraParamsProvidedCallback + }; +} + +describe('testing snippet config extra params component', () => { it('is an XComponent which has an XModule', () => { const { wrapper } = renderSnippetConfigExtraParams(); expect(isXComponent(wrapper.vm)).toEqual(true); @@ -62,10 +59,8 @@ describe('testing snippet config extra params component', () => { // eslint-disable-next-line max-len it('emits the ExtraParamsProvided event when the component is loaded, when the values prop changes, and when the snippet config changes', async () => { - const { wrapper, setSnippetConfig } = renderSnippetConfigExtraParams(); - const extraParamsProvidedCallback = jest.fn(); - - wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); + const { wrapper, setSnippetConfig, extraParamsProvidedCallback } = + renderSnippetConfigExtraParams(); expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload>]>( 1, @@ -95,11 +90,9 @@ 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' } }); - - const extraParamsProvidedCallback = jest.fn(); - - wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); + const { extraParamsProvidedCallback } = renderSnippetConfigExtraParams({ + values: { scope: 'mobile' } + }); expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload>]>( 1, @@ -111,10 +104,7 @@ 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 extraParamsProvidedCallback = jest.fn(); - - wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); + const { setSnippetConfig, extraParamsProvidedCallback } = renderSnippetConfigExtraParams(); expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload>]>( 1, @@ -138,10 +128,7 @@ describe('testing snippet config extra params component', () => { }); it('not includes the callback configuration as extra params', () => { - const { wrapper } = renderSnippetConfigExtraParams(); - const extraParamsProvidedCallback = jest.fn(); - - wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); + const { extraParamsProvidedCallback } = renderSnippetConfigExtraParams(); expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload>]>( 1, @@ -152,7 +139,7 @@ describe('testing snippet config extra params component', () => { }); it('allows to configure excluded params', () => { - const { wrapper } = renderSnippetConfigExtraParams({ + const { extraParamsProvidedCallback } = renderSnippetConfigExtraParams({ values: { xEngineId: 'motive', currency: 'EUR' @@ -160,9 +147,6 @@ describe('testing snippet config extra params component', () => { excludedExtraParams: ['currency', 'warehouse', 'callbacks'] }); - const extraParamsProvidedCallback = jest.fn(); - wrapper.vm.$x.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback); - expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload>]>( 1, expect.objectContaining({ @@ -190,5 +174,9 @@ interface RenderSnippetConfigExtraParamsApi { /** The wrapper for the snippet config component. */ wrapper: Wrapper; /** Helper method to change the snippet config. */ - setSnippetConfig: (newSnippetConfig: Dictionary) => void | Promise; + setSnippetConfig: ( + newSnippetConfig: Dictionary + ) => void | Promise /** Jest mock function for the ExtraParamsProvided callback. */; + /** Jest mock function for the ExtraParamsProvided callback. */ + extraParamsProvidedCallback: jest.Mock; } diff --git a/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue b/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue index b62ed09319..c2d29383bd 100644 --- a/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue +++ b/packages/x-components/src/x-modules/extra-params/components/snippet-config-extra-params.vue @@ -35,13 +35,13 @@ }, setup(props) { const snippetConfig = inject('snippetConfig') as SnippetConfig; - const extraParams = ref({}); + const extraParams = ref>({}); watch( [() => snippetConfig, () => props.values], () => { forEach({ ...props.values, ...snippetConfig }, (name, value) => { - if (!props.excludedExtraParams.includes(name)) { + if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) { extraParams.value = { ...extraParams.value, [name]: value }; } });