fix(extra-params): give more priority to values prop over params stat…

…e in the ExtraParamsProvided payload

packages/x-components/src/x-modules/extra-params/components/__tests__/extra-params.spec.ts

@@ -1,37 +1,62 @@
 import { Dictionary } from '@empathyco/x-utils';
-import { mount, VueWrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
+import { ref } 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 ExtraParams from '../extra-params.vue';
+import { useState } from '../../../../composables/index';
 
-describe('testing extra params component', () => {
-  function renderExtraParams(values: Dictionary<unknown>): RenderExtraParamsApi {
-    XPlugin.resetInstance();
-    XPlugin.registerXModule(extraParamsXModule);
-
-    const wrapper = mount(ExtraParams, {
-      props: {
-        values
-      },
-      global: {
-        plugins: [installNewXPlugin()]
-      }
-    });
+jest.mock('../../../../composables/use-state', () => ({
+  useState: jest.fn().mockReturnValue({
+    params: ref({})
+  })
+}));
 
-    return {
-      wrapper
-    };
-  }
+function renderExtraParams(values: Dictionary<unknown>) {
+  const wrapper = mount(ExtraParams, {
+    props: { values },
+    global: { plugins: [installNewXPlugin()] }
+  });
+
+  return { wrapper };
+}
 
+describe('testing extra params component', () => {
   it('is an XComponent which has an XModule', () => {
     const { wrapper } = renderExtraParams({ warehouse: 1234 });
+
     expect(isXComponent(wrapper.vm)).toEqual(true);
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('extraParams');
   });
 
+  it('emits the ExtraParamsProvided event on init with params state and props values', () => {
+    // Set extra-params in the store to check values prop has more priority in the merge
+    (useState as jest.Mock).mockReturnValueOnce({
+      params: ref({ area: 'gijon', currency: 'EUR' })
+    });
+    renderExtraParams({ area: 'uk', lang: 'en' });
+
+    const extraParamsInitializedCallback = jest.fn();
+    XPlugin.bus.on('ExtraParamsInitialized', true).subscribe(extraParamsInitializedCallback);
+    expect(extraParamsInitializedCallback).toHaveBeenCalledTimes(1);
+    expect(extraParamsInitializedCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>(
+      {
+        eventPayload: { area: 'uk', lang: 'en' },
+        metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
+      }
+    );
+
+    const extraParamsProvidedCallback = jest.fn();
+    XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
+    expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(1);
+    expect(extraParamsProvidedCallback).toHaveBeenCalledWith<[WirePayload<Dictionary<unknown>>]>({
+      eventPayload: { area: 'uk', lang: 'en', currency: 'EUR' },
+      metadata: { moduleName: 'extraParams', location: 'none', replaceable: true }
+    });
+  });
+
   it('emits the ExtraParamsProvided event when the values change', async () => {
     const { wrapper } = renderExtraParams({ warehouse: 1234 });
     const extraParamsProvidedCallback = jest.fn();
@@ -53,8 +78,3 @@ describe('testing extra params component', () => {
     expect(extraParamsProvidedCallback).toHaveBeenCalledTimes(2);
   });
 });
-
-interface RenderExtraParamsApi {
-  /** The wrapper for the extra params component. */
-  wrapper: VueWrapper;
-}

packages/x-components/src/x-modules/extra-params/components/extra-params.vue

@@ -26,7 +26,7 @@
       const $x = use$x();
 
       $x.emit('ExtraParamsInitialized', { ...props.values });
-      $x.emit('ExtraParamsProvided', { ...props.values, ...params.value });
+      $x.emit('ExtraParamsProvided', { ...params.value, ...props.values });
 
       watch(
         () => props.values,