Ana içeriğe atla

Vue.js Unit Test için mount ve shallowMount farkı

Vue.js Unit Test için mount ve shallowMount farkı

mount and shallowMount difference for Vue.js Unit Test


Vue.js ile unit test yazmak istediğinizde karşımıza 2 yardımcı(helper) metod çıkıyor. Bunlardan ilki mount  : Bu metod komponent'imizin test edebileceğimiz bir örneğini sağlarken, bu komponent'in içindeki bütün alt komponent'leri de oluşturmaktadir. Yani iç içe kullandığımız bütün komponent'lerimiz oluşturulup kullanıma sunulmaktadır. mount ile dökümandaki bir örneği aşağıda görebilirsiniz :

When you want to write a unit test with Vue.js, we can use 2 helper methods. The first of these is "mount": While this method provides an instance of our component that we can test, it also creates all the sub-components inside this component. In other words, all components that we use nested are created and made available. Here is an example of the document with mount:

import { mount } from '@vue/test-utils';
import Foo from './Foo.vue';

describe('Foo', () => {
  it('renders a div', () => {
    const wrapper = mount(Foo);
    expect(wrapper.contains('div')).toBe(true);
  });
}); 
 
Burada Foo ismindeki komponent'imiz içindeki bütün alt komponent'lerle beraber oluşturulup kullanıma sunulur. Büyük bir iş sürecini test etmek istediğimizde kullanabileceğimiz bir yöntem.

Here, the component called Foo is created with all sub components in it. A method we can use when we want to test a large business process.

shallowMount : Bu metod mount metoduna çok benzemekle beraber, farklı olarak, sadece çalışılan komponent'i oluşturup, alt komponent'leri "-stub" son eki ile isimlendirip aynı bırakır. Örnek olarak kendi kodumdan şöyle bir örnek verebilirim :

shallowMount: This method is very similar to the mount method. Unlike, this method generates only the main component. This method changes names the sub-components with the suffix "-stub". But this method does not create an instance for sub components. For example, let me share a part of my own code:
<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 vuetify ile geliştirdiğim bir komponent görünmektedir. Bu komponent'i shallowMount ile oluşturduğumuzda şöyle bir sonuç alıyoruz :

Here I see a component I developed with vuetify. When we create this component with shallowMount, we get a result:

<div>
    &nbsp;
    <v-tooltip-stub opendelay="200" 
                    closedelay="200" 
                    contentclass="" 
                    fixed="true" 
                    top="true" 
                    maxwidth="auto" 
                    nudgebottom="0" 
                    nudgeleft="0" 
                    nudgeright="0" 
                    nudgetop="0" 
                    nudgewidth="0" 
                    debounce="0" 
                    tag="span">
        <v-icon-stub>
            fa-ink
        </v-icon-stub>
        <span>Deneme</span>
    </v-tooltip-stub>
</div>

Dikkat edebileceğiniz gibi, v-tooltip komponent'i v-tooltip-stub olarak, v-icon komponent'i de v-icon-stub olarak aynen korunmuş durumdadır. mount metodunu kullanmış olsaydık, bu komponentlerin de render edilmiş hallerini çıktıda görecektik.

As you may notice, the v-tooltip component is v-tooltip-stub, and the v-icon component is protected as v-icon-stub. If we had used the mount method, we would see the rendered version of these components in the output.

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