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 ca0b628a6..e83f3a432 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 b62ed0931..c2d29383b 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 };
}
});