From 97d3e2827282e1692018e1d9274cb722b52a01c5 Mon Sep 17 00:00:00 2001 From: acondal Date: Mon, 30 Sep 2024 13:29:40 +0200 Subject: [PATCH 1/3] fix: check if extraParams are really changing --- .../components/snippet-config-extra-params.vue | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) 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..c3715848a6 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,16 +35,25 @@ }, setup(props) { const snippetConfig = inject('snippetConfig') as SnippetConfig; - const extraParams = ref({}); + const extraParams = ref>({}); + const initialExtraParams = ref>({}); watch( [() => snippetConfig, () => props.values], () => { + const newExtraParams: Record = {}; + forEach({ ...props.values, ...snippetConfig }, (name, value) => { if (!props.excludedExtraParams.includes(name)) { - extraParams.value = { ...extraParams.value, [name]: value }; + newExtraParams[name] = value; } }); + + // Check if extraParams are really changing to avoid event emission if they don't + if (JSON.stringify(newExtraParams) !== JSON.stringify(initialExtraParams.value)) { + extraParams.value = newExtraParams; + initialExtraParams.value = newExtraParams; + } }, { deep: true, From d60636a865e4e36c08ea506c80c9ee949b7f5a57 Mon Sep 17 00:00:00 2001 From: acondal Date: Mon, 30 Sep 2024 13:36:39 +0200 Subject: [PATCH 2/3] test: refactor tests to avoid repeating stuff --- .../snippet-config-extra-params.spec.ts | 122 ++++++++---------- 1 file changed, 55 insertions(+), 67 deletions(-) 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; } From 1c8e58a265b5f3954ee95234985b2ee3a9299551 Mon Sep 17 00:00:00 2001 From: acondal Date: Wed, 2 Oct 2024 17:19:01 +0200 Subject: [PATCH 3/3] feat: update workaround checking params value --- .../components/snippet-config-extra-params.vue | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) 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 c3715848a6..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,25 +35,16 @@ }, setup(props) { const snippetConfig = inject('snippetConfig') as SnippetConfig; - const extraParams = ref>({}); - const initialExtraParams = ref>({}); + const extraParams = ref>({}); watch( [() => snippetConfig, () => props.values], () => { - const newExtraParams: Record = {}; - forEach({ ...props.values, ...snippetConfig }, (name, value) => { - if (!props.excludedExtraParams.includes(name)) { - newExtraParams[name] = value; + if (!props.excludedExtraParams.includes(name) && extraParams.value[name] !== value) { + extraParams.value = { ...extraParams.value, [name]: value }; } }); - - // Check if extraParams are really changing to avoid event emission if they don't - if (JSON.stringify(newExtraParams) !== JSON.stringify(initialExtraParams.value)) { - extraParams.value = newExtraParams; - initialExtraParams.value = newExtraParams; - } }, { deep: true,