From 8d33f25e27a93bd0029e46bdbc7a54344f5a8085 Mon Sep 17 00:00:00 2001 From: Diego Pascual <diegopf@users.noreply.github.com> Date: Wed, 14 Aug 2024 17:10:16 +0200 Subject: [PATCH] fix: adjust to new vue render function API --- .../labels/__tests__/base-price-label.spec.ts | 5 ++--- .../base-rating-filter-label.spec.ts | 19 +++++++++------- .../labels/base-price-filter-label.vue | 22 +++++++------------ 3 files changed, 21 insertions(+), 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 index 0c0f98711a..8801224f04 100644 --- 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/packages/x-components/src/components/filters/labels/__tests__/base-rating-filter-label.spec.ts b/packages/x-components/src/components/filters/labels/__tests__/base-rating-filter-label.spec.ts index 0baf21f899..cc32ce4487 100644 --- a/packages/x-components/src/components/filters/labels/__tests__/base-rating-filter-label.spec.ts +++ b/packages/x-components/src/components/filters/labels/__tests__/base-rating-filter-label.spec.ts @@ -1,6 +1,5 @@ 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'; @@ -8,7 +7,7 @@ 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 index 048330fc5e..fbdc5e6d1f 100644 --- 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,23 +64,19 @@ : 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; @@ -88,8 +84,6 @@ return h('span', { class: 'x-price-filter-label' }, children); }; - - return render; } }); </script>