test(auto-progress-bar): fix test after Vue3 update

packages/x-components/package.json

@@ -120,7 +120,7 @@
     "rollup-plugin-delete": "~2.0.0",
     "rollup-plugin-styles": "~4.0.0",
     "rollup-plugin-typescript2": "~0.36.0",
-    "rollup-plugin-vue": "~5.1.9",
+    "rollup-plugin-vue": "~6.0.0",
     "sass": "~1.70.0",
     "start-server-and-test": "~2.0.0",
     "tailwindcss": "~3.4.0",

packages/x-components/src/__tests__/utils.ts

@@ -1,7 +1,6 @@
 import { deepMerge } from '@empathyco/x-deep-merge';
 import { DeepPartial, Dictionary } from '@empathyco/x-utils';
-import { createLocalVue, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
+import { VueWrapper } from '@vue/test-utils';
 import { Store } from 'vuex';
 import {
   XComponentsAdapter,
@@ -69,7 +68,7 @@ export function getDataTestSelector(dataTest: string): string {
  *
  * @returns The wrappers matching the searched test data id.
  */
-export function findTestDataById(wrapper: Wrapper<Vue>, testDataId: string): WrapperArray<Vue> {
+export function findTestDataById(wrapper: VueWrapper, testDataId: string) {
   return wrapper.findAll(getDataTestSelector(testDataId));
 }
 
@@ -194,16 +193,16 @@ function mergeStates<State extends Dictionary>(
  */
 export function installNewXPlugin(
   options: Partial<XPluginOptions> = {},
-  localVue: typeof Vue = createLocalVue(),
+  localVue = undefined,
   bus = new XDummyBus()
-): [XPlugin, typeof Vue] {
+): [XPlugin, undefined] {
   XPlugin.resetInstance();
   const xPlugin = new XPlugin(bus);
-  const installOptions: XPluginOptions = {
-    adapter: XComponentsAdapterDummy,
-    ...options
-  };
-  localVue.use(xPlugin, installOptions);
+  // const installOptions: XPluginOptions = {
+  //   adapter: XComponentsAdapterDummy,
+  //   ...options
+  // };
+  // localVue.use(xPlugin, installOptions);
   return [xPlugin, localVue];
 }
 

packages/x-components/src/components/__tests__/auto-progress-bar.spec.ts

@@ -1,74 +1,41 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { getDataTestSelector } from '../../__tests__/utils';
 import AutoProgressBar from '../auto-progress-bar.vue';
 
-function renderAutoProgressBar({
-  template = '<AutoProgressBar :durationInSeconds="durationInSeconds" :isLoading="isLoading"/>',
-  durationInSeconds = 1,
-  isLoading = true
-}: RenderBaseAutoProgressBarOptions = {}): RenderAutoProgressBarAPI {
-  const wrapper = mount(
-    {
-      components: { AutoProgressBar },
-      template
-    },
-    {
-      data() {
-        return {
-          durationInSeconds,
-          isLoading
-        };
-      }
-    }
-  );
+function render({ durationInSeconds = 1, isLoading = true } = {}) {
+  const wrapper = mount({
+    components: { AutoProgressBar },
+    data: () => ({ durationInSeconds, isLoading }),
+    template: '<AutoProgressBar :durationInSeconds="durationInSeconds" :isLoading="isLoading"/>'
+  });
 
   return {
-    wrapper
+    wrapper,
+    getProgressBarEl: () => wrapper.find(getDataTestSelector('progress-bar')),
+    getProgressBarLineEl: () => wrapper.find(getDataTestSelector('progress-bar-line'))
   };
 }
 
 describe('testing AutoProgressBar component', () => {
   it('renders a progress bar component', () => {
-    const { wrapper } = renderAutoProgressBar();
+    const { getProgressBarEl } = render();
 
-    expect(wrapper.find(getDataTestSelector('progress-bar')).exists()).toBe(true);
+    expect(getProgressBarEl().exists()).toBe(true);
   });
 
   it("doesn't render a progress bar component when is not loading", async () => {
-    const { wrapper } = renderAutoProgressBar();
+    const { wrapper, getProgressBarEl } = render();
 
-    expect(wrapper.find(getDataTestSelector('progress-bar')).exists()).toBe(true);
+    expect(getProgressBarEl().exists()).toBe(true);
 
     await wrapper.setData({ isLoading: false });
 
-    expect(wrapper.find(getDataTestSelector('progress-bar')).exists()).toBe(false);
+    expect(getProgressBarEl().exists()).toBe(false);
   });
 
   it('render a progress bar component with an animation', () => {
-    const { wrapper } = renderAutoProgressBar({ durationInSeconds: 2.5 });
+    const { getProgressBarLineEl } = render({ durationInSeconds: 2.5 });
 
-    expect(wrapper.find(getDataTestSelector('progress-bar-line')).attributes().style).toBe(
-      'animation-duration: 2.5s;'
-    );
+    expect(getProgressBarLineEl().attributes().style).toBe('animation-duration: 2.5s;');
   });
 });
-
-/**
- * Options to configure how the progress bar component should be rendered.
- */
-interface RenderBaseAutoProgressBarOptions {
-  /** The template to render.*/
-  template?: string;
-  /** The duration in seconds of the animation. */
-  durationInSeconds?: number;
-  /** A flag indicating if the progress bar is loading. */
-  isLoading?: boolean;
-}
-
-/**
- * Options to configure how the progress bar component should be rendered.
- */
-interface RenderAutoProgressBarAPI {
-  /** The wrapper for the progress bar component. */
-  wrapper: Wrapper<Vue>;
-}

packages/x-components/src/plugins/x-emitters.ts

@@ -6,6 +6,7 @@ import { AnySimpleStateSelector, AnyStateSelector } from '../store/utils/store-e
 import { XEventPayload, XEventsTypes } from '../wiring/events.types';
 import { WireMetadata } from '../wiring/wiring.types';
 import { AnyXModule } from '../x-modules/x-modules.types';
+import { WatchOptionsBase } from 'vue';
 
 /**
  * Registers the store emitters, making them emit the event when the part of the state selected
@@ -57,14 +58,15 @@ export function registerStoreEmitters(
  */
 function normalizeStateSelector(
   stateSelector: AnySimpleStateSelector | AnyStateSelector
-): Required<AnyStateSelector> {
+): Required<Omit<AnyStateSelector, keyof WatchOptionsBase>> {
   const selectorOptions = isSimpleSelector(stateSelector)
     ? { selector: stateSelector }
     : stateSelector;
 
   return {
     deep: false,
     immediate: false,
+    once: false,
     filter: () => true,
     metadata: {
       replaceable: true