Vue.js Forms & Unit Testing Eğitimi

Eğitim Hakkında

Form veri bağlamadan doğrulama ve Vitest ile bileşen testine kadar uçtan uca akış

Vue.js: Working With Forms & Unit Testing Eğitimi, Vue uygulamalarında form yönetimini ve test yazımını bir arada öğretir. Katılımcılar v-model ile form veri bağlamayı, girdi türlerini, doğrulama ve hata yönetimini, erişilebilir form tasarımını öğrenir. Program Vitest ve Vue Test Utils ile bileşen testi, kullanıcı etkileşimi simülasyonu, mock kullanımı ve form davranışlarının test edilmesi konularıyla gerçek bir form uygulaması üzerinde tamamlanır.

Süre ve Format

3 Gün. Her gün dört modül; form yönetimi ve test konuları gerçek bir form uygulaması üzerinde adım adım kurulup test edilir.

Seviye

Orta Seviye — form yönetimi, doğrulama, erişilebilirlik ve Vitest ile bileşen test ustalığı

Öğrenme Metodu

Her modülde yazılan form ve bileşen kodu Vitest ile test edilir; test sonuçları ve kullanıcı etkileşimleri birlikte incelenir.

Neden Bu Eğitim?

📝Güvenilir formlar

v-model ve doğrulama kalıplarıyla kullanıcı girdisini güvenle toplayan, hataları net gösteren ve erişilebilir formlar tasarlarsınız.

🧪Güvenli test

Vitest ve Vue Test Utils ile bileşenlerinizi test ederek değişikliklerin mevcut davranışı bozmadığından emin olursunuz.

♿Erişilebilirlik

Etiket, hata mesajı ve odak yönetimini doğru kurarak formlarınızı klavye ve ekran okuyucu kullanıcıları için erişilebilir yaparsınız.

Anahtar Konular

vue.js eğitimivue form eğitimivue unit testvitest eğitimivue test utilsvue form doğrulamaveevalidate eğitimiön yüz test eğitimivue v-modelvue kursu

“Test edilmemiş bir form, kullanıcıya verilmemiş bir sözdür; doğrulama ve testler güveni koda yerleştiren asıl adımlardır.”

Ön Koşullar

Eğitimden verim almak için faydalı olacak bilgi ve geliştirme ortamı

1

Vue temelleri

Bileşen, reaktivite ve template sözdizimi gibi temel Vue konularına aşinalık beklenir; eğitim bu bilgi üzerine kurulur.

2

JavaScript bilgisi

Fonksiyon, nesne ve async işlemler gibi modern JavaScript konularını bilmek form ve test örnekleri için gereklidir.

3

HTML form bilgisi

input, select ve label gibi temel HTML form elemanlarına aşinalık, form konularını daha hızlı kavramanızı sağlar.

4

Node ve editör

Node.js kurulu bir ortam ve VS Code gibi bir editör, Vue projesini ve testleri çalıştırmak için yeterlidir.

Eğitim İçeriği

Programın gün gün akışı aşağıdadır. Bir güne tıklayarak o günün modüllerini ve içeriklerini görebilirsiniz.

Günün hedefiKatılımcı, v-model ile farklı girdi türlerini forma bağlar, değiştiricilerle veriyi dönüştürür ve dinamik form alanlarını yöneterek sağlam bir form temeli kurar.

Modül 1

v-model ile Form Bağlama

Metin girdilerini v-model ile reaktif state'e bağlama
checkbox ve radio girdilerinin v-model ile yönetimi
select ve çoklu seçim alanlarının bağlanması
Birden fazla alanı tek bir reaktif form nesnesinde toplama
textarea ve sayı girdilerinde veri tipine dikkat
Form state'inin tek kaynaktan yönetilmesinin önemi

Modül 2

v-model Değiştiricileri

trim değiştiricisiyle baştaki ve sondaki boşlukları temizleme
number değiştiricisiyle girdiyi otomatik sayıya çevirme
lazy değiştiricisiyle change olayında güncelleme yapma
Özel bileşenlerde v-model değiştirici desteği ekleme
defineModel ile değiştirici mantığının yönetimi
Değiştiricilerin veri tutarlılığına katkısı

Modül 3

Dinamik ve Tekrarlı Alanlar

v-for ile dinamik form alanı listesi oluşturma
Alan ekleme ve silme işlemlerinin reaktif yönetimi
Tekrarlı alanlarda benzersiz key kullanımının önemi
İç içe nesne ve dizi form yapılarının bağlanması
Koşullu alanlarla forma bağlı gösterim mantığı
Dinamik formlarda state'in tutarlı tutulması

Modül 4

Form Gönderimi ve State

submit.prevent ile varsayılan gönderim davranışını durdurma
Form verisini toplayıp API'ye gönderme akışı
Gönderim sırasında yükleniyor ve devre dışı durum yönetimi
Başarı ve hata sonrası kullanıcıya geri bildirim verme
Form sıfırlama ve başlangıç durumuna döndürme
Çift gönderimi önleyen durum kontrolü

Günün hedefiKatılımcı, form alanlarını doğrular, hata mesajlarını kullanıcıya net gösterir ve etiket, odak ve ARIA ilkeleriyle erişilebilir formlar tasarlayarak kullanıcı deneyimini güçlendirir.

Modül 1

Form Doğrulama Temelleri

Zorunlu alan, uzunluk ve biçim doğrulama kuralları yazma
Anlık (blur) ve gönderimde doğrulama stratejileri
computed ile türetilmiş doğrulama durumu üretme
Alan bazında hata durumunun reaktif tutulması
E-posta ve parola gibi gerçek alan doğrulamaları
Doğrulama mantığının composable'a taşınması

Modül 2

Hata Yönetimi ve Geri Bildirim

Hata mesajlarını ilgili alanın yanında gösterme
Birden fazla hatanın öncelik ve sırayla sunumu
Geçerli ve geçersiz alanlar için görsel durum tasarımı
Sunucu taraflı doğrulama hatalarının forma yansıtılması
Gönderim engellendiğinde ilk hatalı alana odaklanma
Kullanıcı dostu ve açıklayıcı hata metinleri yazma

Modül 3

Erişilebilir Form Tasarımı

label ve for ilişkisiyle girdilerin doğru etiketlenmesi
aria-invalid ve aria-describedby ile hata bildirimi
Klavye ile gezinme ve mantıklı odak sırası kurma
Hata özetinin ekran okuyucuya canlı bölge ile iletilmesi
Zorunlu alanların görsel ve anlamsal işaretlenmesi
Renk dışında ipuçlarıyla durum bildirmenin önemi

Modül 4

Doğrulama Kütüphaneleri

VeeValidate ile bildirime dayalı form doğrulama kurulumu
Zod ve şema tabanlı doğrulamanın Vue ile kullanımı
Şema doğrulamasıyla form ve tip güvenliğinin birleşmesi
Kütüphane ile elle doğrulama arasında seçim kriterleri
Doğrulama şemasının yeniden kullanılabilir tasarımı
Asenkron doğrulama ile sunucu tabanlı kontroller

Günün hedefiKatılımcı, Vitest ve Vue Test Utils ile bileşen testleri yazar, kullanıcı etkileşimlerini simüle eder, mock kullanır ve form davranışlarını test ederek güvenilir bir test akışı tamamlar.

Modül 1

Vitest Kurulumu ve Temelleri

Vitest kurulumu ve Vue projesiyle yapılandırılması
describe, it ve expect ile temel test yapısı yazma
Eşleştiriciler (matchers) ile beklentileri doğrulama
beforeEach ve afterEach ile test ortamı hazırlama
Watch modunda testleri sürekli çalıştırma
Test kapsamı (coverage) raporunun okunması

Modül 2

Vue Test Utils ile Bileşen Testi

mount ve shallowMount ile bileşeni test ortamına yükleme
find ve get ile DOM elemanlarına erişim
Props aktararak bileşen çıktısını doğrulama
Yayılan (emitted) olayların test edilmesi
Koşullu render ve metin içeriğinin doğrulanması
wrapper API ile bileşen durumunun incelenmesi

Modül 3

Kullanıcı Etkileşimi Testi

setValue ile form girdilerine değer atama ve test etme
trigger ile tıklama, gönderim ve klavye olayı simülasyonu
nextTick ile DOM güncellemesini bekleyip doğrulama
Doğrulama hatalarının ekranda göründüğünün test edilmesi
Form gönderiminde doğru verinin iletildiğini doğrulama
Yükleniyor ve devre dışı durumlarının test edilmesi

Modül 4

Mock ve Asenkron Testler

vi.fn ve vi.mock ile fonksiyon ve modül taklidi oluşturma
API çağrılarını mock'layarak ağdan bağımsız test
Asenkron işlemlerin ve promise sonuçlarının test edilmesi
Composable'ların izole şekilde test edilmesi
Zamanlayıcıları sahte zamanla (fake timers) test etme
Güvenilir ve kararlı bir test paketinin tamamlanması

Eğitim Kazanımları

Program sonunda katılımcılar:

✅

Form veri bağlama

v-model ile metin, seçim ve onay girdilerini bağlar, form verisini tek bir reaktif kaynaktan düzenli şekilde yönetebilirsiniz.

✅

Dinamik form yönetimi

Alan ekleme, silme ve koşullu gösterimle dinamik ve tekrarlı form alanlarını tutarlı bir state ile yönetebilirsiniz.

✅

Form doğrulama

Zorunlu alan, biçim ve uzunluk kurallarıyla form doğrulamayı kurar, VeeValidate veya Zod gibi araçları kullanabilirsiniz.

✅

Hata yönetimi

Hata mesajlarını alan bazında net gösterir, sunucu hatalarını forma yansıtır ve ilk hatalı alana odaklanmayı sağlayabilirsiniz.

✅

Erişilebilir formlar

Etiket, ARIA ve odak yönetimiyle klavye ve ekran okuyucu kullanıcıları için erişilebilir formlar tasarlayabilirsiniz.

✅

Vitest ile test

Vitest kurup describe ve expect ile temel testler yazarak bileşenlerinizin davranışını güvenle doğrulayabilirsiniz.

✅

Etkileşim testi

Vue Test Utils ile tıklama, girdi ve gönderim gibi kullanıcı etkileşimlerini simüle ederek form davranışlarını test edebilirsiniz.

✅

Mock ve asenkron test

API çağrılarını ve modülleri mock'layarak asenkron işlemleri izole eder, kararlı ve güvenilir bir test paketi kurabilirsiniz.

Kimler İçin Uygundur?

Vue temellerini bilen ve form ile test konularını derinleştirmek isteyen ön yüz geliştiriciler
güvenilir formlar kurmak isteyen arayüz geliştiricileri
bileşen testi süreçlerini kurmak isteyen web ekipleri için uygundur

Sıkça Sorulan Sorular

Bu eğitim kimler için uygundur?

Vue temellerini bilen ve form ile test konularını derinleştirmek isteyen ön yüz geliştiriciler, güvenilir formlar kurmak isteyen arayüz geliştiricileri ve bileşen testi süreçlerini kurmak isteyen web ekipleri için uygundur.

Eğitim kaç gün sürüyor ve nasıl işleniyor?

Eğitim üç gün sürer ve her gün dört modül içerir. Form yönetimi ve test konuları gerçek bir form uygulaması üzerinde uygulamalı işlenir; yazılan her form ve bileşen Vitest ile test edilerek davranışları doğrulanır.

Katılmak için hangi ön bilgiler gerekli?

Bileşen ve reaktivite gibi temel Vue konularına, modern JavaScript'e ve input, select, label gibi temel HTML form elemanlarına aşinalık beklenir. Node.js kurulu bir ortam ve bir kod editörü örnekler için yeterlidir.

Hangi test araçları kullanılıyor?

Eğitimde test aracı olarak Vitest ve bileşen testleri için Vue Test Utils kullanılır. Kullanıcı etkileşimi simülasyonu, emitted olay doğrulama, mock ve asenkron test konuları bu araçlarla uygulamalı olarak işlenir.

Eğitim sonunda sertifika veriliyor mu?

Programı tamamlayan katılımcılar Digital Vizyon Akademi Katılım ve Başarı Sertifikası alır. Sertifika, katılımcının Vue form yönetimi ve test konularını tamamladığını belgeler.

Sertifikalandırma

Bu eğitim Digital Vizyon Akademi Başarı Sertifikası ile tamamlanır.

Eğitim başında “Ön Test”, bitiminde “Son Test” uygulanarak gelişim ölçümlenir. Değerlendirme formunu dolduran katılımcılar sertifikalarını alır. Sertifikanızın geçerliliğini Sertifika Sorgulama sayfasından doğrulayabilirsiniz.

Örnek Sertifika

VUE.JS: WORKING WITH FORMS & UNIT TESTING EĞİTİMİ

Eğitim Hakkında

Neden Bu Eğitim?

Anahtar Konular

Ön Koşullar

Eğitim İçeriği

v-model ile Form Bağlama

v-model Değiştiricileri

Dinamik ve Tekrarlı Alanlar

Form Gönderimi ve State

Form Doğrulama Temelleri

Hata Yönetimi ve Geri Bildirim

Erişilebilir Form Tasarımı

Doğrulama Kütüphaneleri

Vitest Kurulumu ve Temelleri

Vue Test Utils ile Bileşen Testi

Kullanıcı Etkileşimi Testi

Mock ve Asenkron Testler

Eğitim Kazanımları

Kimler İçin Uygundur?

Sıkça Sorulan Sorular

Sertifikalandırma

Eğitim Bilgileri

Bu Eğitimle Birlikte Tercih Edilenler

Comprehensive Vue.js Eğitimi

İleri Seviye Vue.JS Eğitimi

Laravel and Vue.JS Eğitimi

Nuxt.JS and Vue.JS Eğitimi

Quasar Framework and Vue.JS Eğitimi

Vue.JS Giriş Eğitimi