Ana içeriğe atla

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);
  });
});





Yorumlar

Bu blogdaki popüler yayınlar

Babamın durumu

Babam Mart 2017 de zatüreden hastanede yatmıştı. Bu sırada ciğerlerde bir kanser görülmüş. Bu kanserin ne olduğu ile ilgili tetkikler de başlamış. Zatüreden sonra hemen kanser ile ilgili işlemlere yoğunlaşıldı. Kalçada görülen bir kitle vardı. Ona da baktılar ama temiz çıktı. Kanser tedavisi olan kemoterapi hemen başladı. 14 haziranda ilk kemoterapi dozunu aldı. İlk günler iyiydi. 19 hazirandan itibaren durumu kötülemeye başlamış. En son 21 Haziran gecesi çok kötü olunca önce Torbalı Devlet Hastanesine götürüldü. Burada vücudundaki sodyum'un çok azalmış olmasından dolayı hemen sodyum takviyesi yapıldı. Sodyum takviyesi ancak bir oranda etkili olduktan sonra yine kötü duruma geri dönüş yapmış. Bu yüzden Bozyaka araştırma hastanesine sevkedildi. Bozyaka da önce dahiliye yoğun bakıma alındı. Ancak burada bir süre kalbi durmuş ve kalp masajı ile geri getirmişler. Sonrada genel yoğun bakıma aldılar.
Şu an yoğun bakımda hipotermi durumunda tutuluyor. Bu uygulanan tedavilerden biri. Diğer…

Azure Cosmos DB Emulator Çalışmıyor.

Merhaba, Bugün Azure Cosmos DB'ye bir göz attım. Kullanımını anlamak için kendi bilgisayarımıza bir emulator(Azure Cosmos DB Emulator) kurabiliyoruz. Bunu kurup çalıştırdığımda DocumentDB.StartupEntryPoint.exe'nin hata verdiğini gördüm. Hatanın detayını eventviewer'dan şöyle gördüm:

Git'te GitCredentialWinStore ile ilgili alınan hatanın çözümü

Git kurulumundan sonra remote(sunucu) ile ilgili işlemler yaptığınızda session açık olsada tekrar tekrar kullanıcı adı ve şifre soruyor ve mesaj ekranında aşağıdaki gibi bir hata alıyorsanız:
"C:\Program Files (x86)\GitExtensions\GitCredentialWinStore\git-credential-winstore.exe" erase: C:\Program Files (x86)\GitExtensions\GitCredentialWinStore\git-credential-winstore.exe: No such file or directory bu durumda  git'in şifre saklama sisteminde bir problem oluştuğunu görmekteyiz. Bunun çözümü olarak öncelikle https://github.com/Microsoft/Git-Credential-Manager-for-Windows adresinden Windows için git şifre yönetim aracını indirmeniz ve kurmanız gerekiyor. Dosyanın tam indirme linki :
https://github.com/Microsoft/Git-Credential-Manager-for-Windows/releases
şeklindedir. Güncel versiyonu buradan indirip kurduktan sonra GIT BASH ile 2 satırlık bir işlem yapmamız gerekiyor.

1. öncelikle git'in geçerli şifre yöneticisini siliyoruz :

git config --global --unset credential.helper