0Pricing
Vue Academy · Ders

Kullanıcı Etkileşimlerini ve Olayları Test Etme

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() ve asenkron flushPromises().

Kullanıcı Etkileşimlerini ve Olayları Test Etme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Kullanıcı Davranışını Taklit Etme

Testler yalnızca oluşturmayı değil, kullanıcının yaptıklarını da taklit etmelidir: düğmelere tıklamak, giriş alanlarına yazmak ve formları göndermek. @vue/test-utils wrapper'ları DOM olaylarını göndermek ve ardından Vue'yu güncellemek için işlevler sunar.

Tıklama Olayları için trigger

wrapper.trigger("click") öğe üzerinde bir tıklama olayı oluşturur. DOM'u güncellediği için bir promise döndürür; doğrulamaların sonucu görebilmesi için bunu await ile bekleyin.

const button = wrapper.get("button")
await button.trigger("click")
expect(wrapper.text()).toContain("Clicked once")

Testler Neden Zaman Uyumsuzdur

Vue, DOM'u zaman uyumsuz olarak günceller. Bir etkileşimden sonra yeni durum bir sonraki güncelleme döngüsüne kadar görünmez. trigger sonucunu beklemek, doğrulama yapmadan önce DOM'un kararlı hale gelmesini sağlar.

it("increments on click", async () => {
  const wrapper = mount(Counter)
  await wrapper.get("button").trigger("click")
  expect(wrapper.get(".count").text()).toBe("1")
})

Giriş Alanları için setValue

Bir alana yazmak için giriş alanının wrapper'ı üzerinde wrapper.setValue(value) kullanın. Bu işlem değeri ayarlar ve input olayını göndererek v-model değerinin güncellenmesini sağlar.

const input = wrapper.get("input")
await input.setValue("hello@example.com")
expect(input.element.value).toBe("hello@example.com")

Onay Kutuları ve Seçim Kutuları

setValue, öğeye göre uyarlanır: onay kutuları için bir boolean, seçim kutusu içinse seçenek değerini geçirin.

await wrapper.get("input[type=checkbox]").setValue(true)
await wrapper.get("select").setValue("tr")

Yayımlanan Olayları Doğrulama

Bileşenler üst bileşenlerle yayımlanan olaylar aracılığıyla iletişim kurar. wrapper.emitted(), bileşenin yayımladığı her olayı ada göre anahtarlanmış bir kayıt olarak döndürür.

await wrapper.get("button").trigger("click")
expect(wrapper.emitted()).toHaveProperty("submit")

Yayımlanan Payload'ları İnceleme

wrapper.emitted("name"), yayımlanan olayların argüman dizilerinden oluşan bir dizi döndürür. İlk yayımlamanın ilk argümanı emitted("name")[0][0] değeridir.

await wrapper.get("button").trigger("click")
const events = wrapper.emitted("submit")
expect(events).toHaveLength(1)
expect(events[0][0]).toEqual({ email: "a@b.com" })

Form Gönderme Testi

Parçaları birleştirin: bir alanı doldurun, formu gönderin ve ardından yayımlanan payload değerini doğrulayın.

it("emits submit with the email", async () => {
  const wrapper = mount(LoginForm)
  await wrapper.get("input").setValue("a@b.com")
  await wrapper.get("form").trigger("submit.prevent")
  expect(wrapper.emitted("submit")[0][0]).toEqual({ email: "a@b.com" })
})

Bileşenlerde Zaman Uyumsuz İşlemler

Birçok işleyici API'leri çağırır ve promise çözümlendiğinde durumu günceller. Doğrulamanız çalıştığında mikro görev henüz çalışmamış olabilir; bu nedenle beklemeniz gerekir.

async function load() {
  loading.value = true
  data.value = await fetchData()
  loading.value = false
}

flushPromises

Test Utils'teki flushPromises, bekleyen tüm mikro görevleri (then geri çağrılarını) çözümler. Zaman uyumsuz bir işlemi tetikledikten sonra bunu bekleyin; böylece çözümlenen promise'ler ve bunların sonucundaki DOM güncellemeleri uygulanır.

import { flushPromises } from "@vue/test-utils"

await wrapper.get("button").trigger("click")
await flushPromises()
expect(wrapper.text()).toContain("Loaded")

Zaman Uyumsuz Testleri Birleştirme

İzlenecek düzen şudur: bağlayın, etkileşimde bulunun, await flushPromises() kullanın ve doğrulayın. Baştan sona await kullanabilmek için test işlevini async olarak işaretleyin.

it("shows results after fetch", async () => {
  const wrapper = mount(SearchBox)
  await wrapper.get("input").setValue("vue")
  await wrapper.get("form").trigger("submit.prevent")
  await flushPromises()
  expect(wrapper.findAll("li")).toHaveLength(2)
})

Hızlı Kontrol

Etkileşim testlerini anlayıp anlamadığınızı kontrol edin.

Özet

Etkileşimleri ve olayları test etmeyi öğrendiniz:

  • trigger("click") olayları oluşturur; Vue zaman uyumsuz güncellediği için bunu bekleyin.
  • setValue giriş, onay kutusu ve seçim kutusu değerlerini ayarlar; v-model için input olaylarını oluşturur.
  • wrapper.emitted() yayımlanan olayları kaydeder; emitted("name")[0][0] ilk payload değerini okur.
  • Zaman uyumsuz işleyiciler için doğrulama yapmadan önce await flushPromises() kullanın.
  • await kullanabilmek için testleri async olarak işaretleyin.

Sıkça Sorulan Sorular

“Kullanıcı Etkileşimlerini ve Olayları Test Etme” dersi ücretsiz mi?

Evet — “Kullanıcı Etkileşimlerini ve Olayları Test Etme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Kullanıcı Etkileşimlerini ve Olayları Test Etme” dersinde ne öğreneceğim?

wrapper.trigger('click'), setValue(), wrapper.vm.$emit() ve asenkron flushPromises(). Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Kullanıcı Etkileşimlerini ve Olayları Test Etme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Vue Projeleri için Vitest Kurulumu
  2. Bileşenleri Bağlama ve Sorgulama
  3. Kullanıcı Etkileşimlerini ve Olayları Test Etme
  4. Composable'ları, Store'ları ve API'leri Taklit Etme
← Vue Academy Sayfasına Dön