Vue Unit Test ile alt komponent olaylarının(events) testi

Vue Unit Test ile alt komponent olaylarının(events) testi

Testing of sub-component events with Vue Unit Test

Vue.js, Vuetify ve typescript ile geliştirdiğimiz komponentlerimiz için unit test yazmak istediğimizde karşımıza çıkan bir sorundan bahsetmek istiyorum. Hazırladığımız komponent içinde yeralan bir icon (vuetify v-icon komponenti) üzerinde yazmış olduğumuz @click event'ının tetiklenmesi gerekiyor. Bunu jest kullandığımız unit testimizde nasıl tetikleriz diye düşündüm. Araştırma yaptım. Ancak önerilen yöntemler maalesef sonuç vermedi. Önce kodlara bir bakalım :

I would like to talk about a problem that we encountered when we wanted to write a unit test for our components we developed with Vue.js, Vuetify and typescript. We need to trigger the @click event that we wrote on an icon in the component we prepared. I thought about how to trigger this in our unit test, which we used as a "Jest". I did research. However, the recommended methods did not yield results. Let's look at the codes first:

Vue Komponent'imiz: Our Vue Component:

<template>
  <div v-if="isVisible">
    &nbsp;
    <v-tooltip top v-if="!!custom.tooltip">
      <v-icon slot="activator" @click.stop="customClicked">{{ custom.icon }}</v-icon>
      <span>{{ custom.tooltip | translate }}</span>
    </v-tooltip>
    <v-icon v-else @click.stop="customClicked">{{ custom.icon }}</v-icon>
  </div>
</template>
<script lang="ts">

... 

Burada ben çözümü komponent'in üzerindeki event'i tetiklemek yerine, event için atanmış customClicked metodunu tetiklemek olarak buldum. v-icon component'i üzerindeki @click event'ının çalışcağından emin olduğumuz için bu mantıklı bir yaklaşım olmakta.

Here I found the solution as triggering the customClicked method assigned to the event instead of triggering the event on the component. This is a logical approach because we're confident that the @click event on the v-icon component will work.

Test Kodumuz: Our Test Code:

import { shallowMount } from '@vue/test-utils';
import CustomCommandColumn from 'custom-command-column.vue';
import Vue from 'vue';
import Vuetify from 'vuetify';
 
describe('custom-command-column-with-action-url', () => {
  Vue.use(Vuetify);
  const routerUrls: any[] = [];
  const actionUrl = '/deneme/deneme';
 
  const $router = {
    push: (url: string) => {
      routerUrls.push(url);
      return;
    },
  };
 
  const c = shallowMount(CustomCommandColumn, {
    propsData:
    {
      row: {},
      custom: {
        key: 'cc1',
        icon: 'fa-ink',
        tooltip: '`Deneme',
        actionUrl,
      },
    },
    mocks: {
      $router,
    },
  });
 
  it('Simple use with tooltip', () => {
    const vm: any = c.vm;
    expect(vm.isVisible).toBe(true);
    expect(vm.custom.icon).toBe('fa-ink');
    expect(c.find('v-tooltip-stub v-icon-stub').exists()).toBe(true);
    vm.customClicked({});
    expect(routerUrls.some((r: string) => r === actionUrl)).toBe(true);
  });
});