fix: adjust to new vue render function API (#1596)

empathyco · Aug 14, 2024 · 7ec2b97 · 7ec2b97
1 parent 40f6f66
commit 7ec2b97
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 25 deletions.
diff --git a/packages/x-components/src/components/filters/labels/__tests__/base-price-label.spec.ts b/packages/x-components/src/components/filters/labels/__tests__/base-price-label.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { NumberRangeFilter } from '@empathyco/x-types';
 import { getNumberRangeFilterStub } from '../../../../__stubs__/filters-stubs.factory';
 import BasePriceFilterLabel from '../base-price-filter-label.vue';
@@ -10,7 +9,7 @@ function renderBasePriceLabel({
   lessThan = 'Less than {max}',
   from = 'More than {min}',
   fromTo = 'From {min} to {max}'
-}: RenderBasePriceLabelOptions): Wrapper<Vue> {
+}: RenderBasePriceLabelOptions): VueWrapper {
   return mount(
     {
       components: { BasePriceFilterLabel },

diff --git a/...ges/x-components/src/components/filters/labels/__tests__/base-rating-filter-label.spec.ts b/...ges/x-components/src/components/filters/labels/__tests__/base-rating-filter-label.spec.ts
@@ -1,14 +1,13 @@
 import { SimpleFilter } from '@empathyco/x-types';
-import Vue from 'vue';
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { getSimpleFilterStub } from '../../../../__stubs__/filters-stubs.factory';
 import { getDataTestSelector } from '../../../../__tests__/utils';
 import BaseRatingFilterLabel from '../base-rating-filter-label.vue';
 
 function renderBaseRatingLabel({
   template = '<BaseRatingFilterLabel :filter="filter"/>',
   filter = getSimpleFilterStub({ label: '3' })
-}: RenderBaseRatingLabelOptions = {}): Wrapper<Vue> {
+}: RenderBaseRatingLabelOptions = {}): VueWrapper {
   return mount(
     {
       components: { BaseRatingFilterLabel },
@@ -37,23 +36,27 @@ describe('testing Base Rating Filter Label component', () => {
     const widthFilledWrapper = `${(parseFloat(value) * 100) / max}%`;
     const wrapper = renderBaseRatingLabel({ filter });
 
-    expect(wrapper.find(getDataTestSelector('rating-filled')).element.style.width).toEqual(
-      widthFilledWrapper
-    );
+    expect(
+      (wrapper.find(getDataTestSelector('rating-filled')).element as HTMLElement).style.width
+    ).toEqual(widthFilledWrapper);
   });
 
   it('renders the default value 0 if the filter label is a negative number', () => {
     const filter = getSimpleFilterStub({ label: '-2' });
     const wrapper = renderBaseRatingLabel({ filter });
 
-    expect(wrapper.find(getDataTestSelector('rating-filled')).element.style.width).toEqual('0%');
+    expect(
+      (wrapper.find(getDataTestSelector('rating-filled')).element as HTMLElement).style.width
+    ).toEqual('0%');
   });
 
   it('renders the default value 0 if the filter label is a not valid number string', () => {
     const filter = getSimpleFilterStub({ label: 'abc' });
     const wrapper = renderBaseRatingLabel({ filter });
 
-    expect(wrapper.find(getDataTestSelector('rating-filled')).element.style.width).toEqual('0%');
+    expect(
+      (wrapper.find(getDataTestSelector('rating-filled')).element as HTMLElement).style.width
+    ).toEqual('0%');
   });
 
   it('renders the content overriding rating-icon-filled slot', () => {

diff --git a/packages/x-components/src/components/filters/labels/base-price-filter-label.vue b/packages/x-components/src/components/filters/labels/base-price-filter-label.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { computed, defineComponent, h, PropType, VNode } from 'vue';
+  import { computed, defineComponent, h, PropType } from 'vue';
   import { RangeValue } from '@empathyco/x-types';
   import BaseCurrency from '../../currency/base-currency.vue';
 
@@ -64,32 +64,26 @@
           : props.fromTo;
       });
 
-      const render = (): VNode => {
+      return () => {
         const labelParts = label.value.split(/({min}|{max})/);
 
         const children = labelParts.map(partMessage => {
           if (partMessage === '{min}') {
-            return h('BaseCurrency', {
-              props: {
-                value: props.filter.range.min,
-                format: props.format
-              }
+            return h(BaseCurrency, {
+              value: props.filter.range.min as number,
+              format: props.format
             });
           } else if (partMessage === '{max}') {
-            return h('BaseCurrency', {
-              props: {
-                value: props.filter.range.max,
-                format: props.format
-              }
+            return h(BaseCurrency, {
+              value: props.filter.range.max as number,
+              format: props.format
             });
           }
           return partMessage;
         });
 
         return h('span', { class: 'x-price-filter-label' }, children);
       };
-
-      return render;
     }
   });
 </script>