feat: migrate suggestions and currency components to vue 3 syntax (#1159

)

EMP-529

packages/x-components/src/components/currency/__tests__/base-currency.spec.ts

@@ -1,26 +1,31 @@
 import { mount, Wrapper } from '@vue/test-utils';
-import Component from 'vue-class-component';
-import Vue from 'vue';
+import Vue, { defineComponent, provide, ref } from 'vue';
 import BaseCurrency from '../base-currency.vue';
-import { XProvide } from '../../decorators/injection.decorators';
 
-function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapper<BaseCurrency> {
-  return mount(BaseCurrency, {
-    propsData: {
-      value,
-      format
+function renderBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapper<Vue> {
+  return mount(
+    {
+      components: { BaseCurrency },
+      template: `<BaseCurrency :value="value" :format="format"/>`,
+      props: ['value', 'format']
+    },
+    {
+      propsData: {
+        value,
+        format
+      }
     }
-  });
+  );
 }
 
-function renderInjectedBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapper<any> {
-  @Component({
-    template: '<div><slot /></div>'
-  })
-  class Provider extends Vue {
-    @XProvide('currencyFormat')
-    public providedFormat = '$i,iii.ddd';
-  }
+function renderInjectedBaseCurrency({ value, format }: RenderBaseCurrencyOptions): Wrapper<Vue> {
+  const Provider = defineComponent({
+    setup() {
+      const providedFormat = ref('$i,iii.ddd');
+      provide('currencyFormat', providedFormat.value);
+    },
+    template: '<div><slot/></div>'
+  });
 
   return mount(
     {

packages/x-components/src/components/currency/base-currency.vue

@@ -3,10 +3,8 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { computed, defineComponent, inject } from 'vue';
   import { currencyFormatter } from '../../utils/currency-formatter';
-  import { XInject } from '../decorators/injection.decorators';
 
   /**
    * Renders the value received as a property which always must be a JavaScript number, with the
@@ -46,57 +44,62 @@
    *
    * @public
    */
-  @Component
-  export default class BaseCurrency extends Vue {
-    /**
-     * Numeric value to be formatted.
-     *
-     * @remarks Pass the value with 'v-bind:value' (or ':value' shortcut) instead of plain string.
-     * @remarks Be careful using numbers under Number.MAX_SAFE_INTEGER to avoid unexpected errors.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected value!: number;
-
-    /**
-     * The format as string.
-     *
-     * @public
-     */
-    @Prop()
-    protected format?: string;
-
-    /**
-     * The injected format as string.
-     *
-     * @public
-     */
-    @XInject('currencyFormat')
-    public injectedFormat!: string;
-
-    /**
-     * A format which can be passed through prop or injected.
-     *
-     * @returns A format as string.
-     *
-     * @internal
-     */
-    protected get renderedFormat(): string {
-      return this.format ?? this.injectedFormat ?? 'i.iii,dd';
+  export default defineComponent({
+    props: {
+      /**
+       * Numeric value to be formatted.
+       *
+       * @remarks Pass the value with 'v-bind:value' (or ':value' shortcut) instead of plain string.
+       * @remarks Be careful using numbers under Number.MAX_SAFE_INTEGER to avoid unexpected errors.
+       *
+       * @public
+       */
+      value: {
+        type: Number,
+        required: true
+      },
+
+      /**
+       * The format as string.
+       *
+       * @public
+       */
+      format: {
+        type: String
+      }
+    },
+
+    setup(props) {
+      /**
+       * The injected format as string.
+       *
+       * @public
+       */
+      const injectedFormat = inject<string>('currencyFormat', 'i.iii,dd');
+
+      /**
+       * A format which can be passed through prop or injected.
+       *
+       * @returns A format as string.
+       *
+       * @internal
+       */
+      const renderedFormat = computed<string>(() => props.format ?? injectedFormat);
+
+      /**
+       * Returns the formatted result as string.
+       *
+       * @returns Formatted number.
+       *
+       * @internal
+       */
+      const currency = computed<string>(() => currencyFormatter(props.value, renderedFormat.value));
+
+      return {
+        currency
+      };
     }
-
-    /**
-     * Returns the formatted result as string.
-     *
-     * @returns Formatted number.
-     *
-     * @internal
-     */
-    protected get currency(): string {
-      return currencyFormatter(this.value, this.renderedFormat);
-    }
-  }
+  });
 </script>
 
 <docs lang="mdx">

packages/x-components/src/components/suggestions/__tests__/base-suggestion.spec.ts

@@ -18,14 +18,23 @@ function renderBaseSuggestion({
 }: BaseSuggestionOptions = {}): BaseSuggestionAPI {
   const [, localVue] = installNewXPlugin();
   const emit = jest.spyOn(XPlugin.bus, 'emit');
-  const wrapper = mount(BaseSuggestion, {
-    localVue,
-    propsData: {
-      query,
-      suggestion,
-      suggestionSelectedEvents
+  const wrapper = mount(
+    {
+      components: { BaseSuggestion },
+      props: ['query', 'suggestion', 'suggestionSelectedEvents'],
+      template:
+        '<BaseSuggestion :query="query" :suggestion="suggestion" ' +
+        ':suggestion-selected-events="suggestionSelectedEvents" />'
+    },
+    {
+      localVue,
+      propsData: {
+        query,
+        suggestion,
+        suggestionSelectedEvents
+      }
     }
-  });
+  );
 
   const wireMetadata = expect.objectContaining<Partial<WireMetadata>>({
     target: wrapper.element
@@ -155,6 +164,8 @@ interface BaseSuggestionOptions {
   suggestion?: Suggestion;
   /** The events to emit when selecting a suggestion. */
   suggestionSelectedEvents?: Partial<XEventsTypes>;
+
+  template?: string;
 }
 
 /**