<template>  <span>    <VSelect           :class="selectComputedClass"      :options="props.options"      :label="props.label"      :searchable="false"      :clearable="false"      :model-value="value"      @option:selected="setSelectedValue"    />    <ArrowUpIcon      v-if="sortType"           :size="10"      data-testid="sort-by-icon"      :class="computedClass"      @click="sort"    />  </span></template><script setup lang="ts">  import { SortType } from 'vue3-easy-data-table';  import ArrowUpIcon from 'vue-material-design-icons/ArrowUp.vue';  import { computed } from 'vue';  import { VenaSelectOptionGeneric } from './types';  interface VenaSelectOptionAll extends VenaSelectOptionGeneric<null> {    title: 'All';    key: null;  }  export type VenaSelectOption<T = string | number> =    | VenaSelectOptionGeneric<T>    | VenaSelectOptionAll;  const emit = defineEmits(['change', 'sort']);  type VenaSelectProps = {    options: VenaSelectOption[];    defaultOption?: VenaSelectOption;    label: string;    sortType?: SortType;    value?: string | number | null;    border?: boolean;    labelPrefix?: string;  };  const props = defineProps<VenaSelectProps>();  const computedClass = computed(() => ({    'vena-select__sort-by--desc': props.sortType === 'desc',  }));  const selectComputedClass = computed(() => ({    'vena-select--border': props.border,  }));  const setSelectedValue = (option: Record<string, string>) => {    emit('change', option);  };  const sort = () => {    const newSortType = props.sortType === 'desc' ? 'asc' : 'desc';    emit('sort', newSortType);  };  const value = computed(() => {    const selectedOption =      props.options.find(        (option: VenaSelectOption) => option.key === props.value      )?.title ||      props.defaultOption?.title ||      'All';    return props.labelPrefix      ? `${props.labelPrefix}${selectedOption}`      : selectedOption;  });</script><style lang="scss">  @import './index.scss';</style>

      const { html } = render(VenaSelect, {        global: {          components: {            VSelect: VueSelect,          },        },        props: {          label: 'title',          options: [            { key: 'name', title: 'Capability' },            { key: 'effectiveness', title: 'Effectiveness' },          ],          sortType: 'asc',        },      });      await flushPromises();      await nextTick()      expect(html()).toMatchSnapshot();    });

<span><div dir="auto"><div role="combobox" aria-expanded="false" aria-owns="vs1__listbox" aria-label="Search for option"><div><span>All<!----></span><input readonly="" aria-autocomplete="list" aria-labelledby="vs1__combobox" aria-controls="vs1__listbox" type="search" autocomplete="off"></div><div><button type="button" title="Clear Selected" aria-label="Clear Selected"><svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">      <path d="M6.895455 5l2.842897-2.842898c.348864-.348863.348864-.914488 0-1.263636L9.106534.261648c-.348864-.348864-.914489-.348864-1.263636 0L5 3.104545 2.157102.261648c-.348863-.348864-.914488-.348864-1.263636 0L.261648.893466c-.348864.348864-.348864.914489 0 1.263636L3.104545 5 .261648 7.842898c-.348864.348863-.348864.914488 0 1.263636l.631818.631818c.348864.348864.914773.348864 1.263636 0L5 6.895455l2.842898 2.842897c.348863.348864.914772.348864 1.263636 0l.631818-.631818c.348864-.348864.348864-.914489 0-1.263636L6.895455 5z"></path>    </svg></button><svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" role="presentation">    <path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z"></path>  </svg>  <div>Loading...</div></div></div><transition-stub name="vs__fade" appear="false" persisted="false" css="true">  <ul role="listbox"></ul></transition-stub></div><span data-testid="sort-by-icon" aria-hidden="true" role="img"><svg fill="currentColor" width="10" height="10" viewBox="0 0 24 24"><path d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"><!--v-if--></path></svg></span></span>"