test: adjust some tests

empathyco · Aug 19, 2024 · 978fc8f · 978fc8f
1 parent 79e136f
commit 978fc8f
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 52 deletions.
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
@@ -15,8 +15,6 @@ function render({
       </template>
     </Empathize>`
 } = {}) {
-  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
@@ -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<unknown>): 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<Dictionary<unknown>>]>({
       eventPayload: { warehouse: 1234 },
@@ -56,5 +56,5 @@ describe('testing extra params component', () => {
 
 interface RenderExtraParamsApi {
   /** The wrapper for the extra params component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }
diff --git a/...omponents/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts b/...omponents/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 = `<RenderlessExtraParam :name="name" />`,
-  name = 'warehouse',
-  params = {}
-} = {}) {
-  installNewXPlugin({ initialXModules: [extraParamsXModule] });
-  resetXExtraParamStateWith(XPlugin.store, { params });
-
-  const wrapper = mount({
-    template,
-    components: {
-      RenderlessExtraParam
+function render({ template = `<RenderlessExtraParam :name="name" />`, 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<Dictionary<unknown>>]>(
       {

diff --git a/...nents/src/x-modules/extra-params/components/__tests__/snippet-config-extra-params.spec.ts b/...nents/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,27 +43,28 @@ describe('testing snippet config extra params component', () => {
 
     function setSnippetConfig(newValue: Dictionary<unknown>): Promise<void> {
       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
   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);
+    XPlugin.bus.on('ExtraParamsProvided', true).subscribe(extraParamsProvidedCallback);
 
     expect(extraParamsProvidedCallback).toHaveBeenNthCalledWith<[WirePayload<Dictionary<unknown>>]>(
       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<Dictionary<unknown>>]>(
       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<Dictionary<unknown>>]>(
       1,
@@ -123,25 +122,29 @@ 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<Dictionary<unknown>>]>(
-      2,
+      3,
       expect.objectContaining({
         eventPayload: { warehouse: 45678 }
       })
     );
   });
 
   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<Dictionary<unknown>>]>(
       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<Dictionary<unknown>>]>(
       1,
@@ -188,7 +191,7 @@ interface RenderSnippetConfigExtraParamsOptions {
 
 interface RenderSnippetConfigExtraParamsApi {
   /** The wrapper for the snippet config component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
   /** Helper method to change the snippet config. */
   setSnippetConfig: (newSnippetConfig: Dictionary<unknown>) => void | Promise<void>;
 }