How to test v-slot template in Vuetify 3 autocomplete component with Vitest?

104 views Asked by At

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.

0

There are 0 answers