How to test v-slot template in Vuetify 3 autocomplete component? In the second template there is a dropdown, thus what is visible when I open the dropdown. The Items which I pass in the autocomplete will be visible in the dropdown. However how to test with vitest?
<template>
<v-card
height="300px"
title="Benutzersuche"
subtitle="Gib bitte den Namen des Unternehmens, die Kundennummer oder die Terminal ID ein."
class="elevated-card mx-5 mt-5"
>
<v-row class="d-flex justify-start">
<v-col cols="12">
<v-toolbar class="height-header rounded-t-xl" color="white">
<v-col>
<v-autocomplete
ref="CustomerSupportAutocomplete"
:items="items"
class="flex-full-width mt-7"
density="comfortable"
placeholder="Suche..."
:persistent-placeholder="true"
append-inner-icon="mdi-magnify"
variant="outlined"
no-filter
item-props
item-value="value"
item-title="text"
@update:search="updateForCustomerSearch"
>
<template v-slot:item="{ item }">
<v-list>
<v-list-item class="d-flex flex-row pointer" @click="changePage">
<v-list-item-title>Geschäftsname: {{ item.value.businessName }}</v-list-item-title>
<v-list-item-subtitle>PLZ: {{ item.value.zipCode }}</v-list-item-subtitle>
<v-list-item-subtitle>Stadt:{{ item.value.city }}</v-list-item-subtitle>
<v-list-item-subtitle>id: {{ item.value.id }}</v-list-item-subtitle>
</v-list-item>
</v-list>
</template>
</v-autocomplete>
</v-col>
</v-toolbar>
</v-col>
</v-row>
</v-card>
</template>
How do I test the v-slot: Item part of this component with vitest?
describe('CustomerSupportOverview', () => {
let wrapper: VueWrapper<any>;
let vm: any;
beforeEach(() => {
const mockCustomerDataService = new CustomerDataService() as any;
const marketsList = { page: 42, items: ['a', 'b'] };
mockCustomerDataService.getMarkets.mockReturnValueOnce(marketsList);
wrapper = mount(CustomerSupportOverview, {
global: {
plugins: [vuetifyMock, i18n],
mocks: {
$router: routerMock,
$showMessage: vi.fn(),
$showError: vi.fn(),
},
},
data: () => ({
customerDataService: mockCustomerDataService,
items: [{ id: 1 }],
}),
propsData: {
items: [{ id: 1 }],
},
slots: {
scoped: `<template #scoped="params"><div>Just a plain {{ params.boolean }} {{ params.string }}</div></template>`,
},
});
vm = wrapper.vm;
});
afterEach(() => {
vi.clearAllMocks();
});
it('should test the v-slot part', () => {
.....
});
Research the web and could not find any solution. I spend almost a day and could not find any solution.