JavaScript araçları ve test
Bir ön yüz projesini Vite ile kurar, lint ve biçimlendirme ekler, birim ve uçtan uca testler yazar ve bağımlılıkları güvenle yönetirsin.
Seviye 301 · 16 ders · 15 pratik lab
Dersler
Proje kurulumu
- Vite ile proje kurmak
- Paketleyici ne yapar: modül grafiği ve çıktılar
- Geliştirme sunucusu ve anında yenileme
- Üretim derlemesi ve kaynak eşlemeleri
- Kısa görev: çok sayfalı Vite projesi
Kod kalitesi
- ESLint kuralları ve yapılandırması
- Prettier ile tutarlı biçim
- Commit öncesi denetimler
- Bağımlılıkları denetlemek ve güncellemek
- Kısa görev: projeye kalite kapısı kur
Test
- Vitest ile birim test
- Sahte nesneler ve sahte zamanlayıcılar
- DOM testleri
- Playwright ile uçtan uca test
- Kapsam ölçümü ve ne anlama geldiği
- Bitirme görevi: test edilmiş ve paketlenmiş bir uygulama
Pratik lablar
- Üretim derlemesinin boyutunu incele: Bir Vite projesinin üretim çıktısını alıp her dosyanın ne kadar yer kapladığını listele.
- Kaynak haritasıyla hatayı geri izle: Küçültülmüş çıktıda görülen bir hata satırını kaynak haritasıyla özgün dosyaya ve satıra eşle.
- Rapor sayfasını ayrı parçaya böl: Nadiren açılan rapor sayfasını dinamik import ile ayrı parçaya ayırıp ilk yük boyutunu düşür.
- ESLint uyarılarını kural kapatmadan temizle: Kullanılmayan değişken ve == uyarıları veren bir dosyayı hiçbir kuralı kapatmadan temizle.
- Ekip için tek biçim kuralı koy: Karışık girintili bir projeye Prettier ekleyip ESLint ile çakışmayacak şekilde ayarla.
- Hatalı kodu commit'te durdur: Lint ve testleri yalnızca değişen dosyalarda çalıştıran bir pre-commit kancası kur ve hatalı bir commit dene.
- Bağımlılık açıklarını ayır: npm audit çıktısını okuyup hangi açığın doğrudan, hangisinin dolaylı bağımlılıktan geldiğini ayır.
- Kırmadan güvenli sürüme yükselt: Açığı olan bir paketi küçük sürüm adımlarıyla yükseltip testlerin geçtiğini doğrula.
- Dolaylı bağımlılığı zorla sabitle: Üst paketi güncellenmediği için açık kalan dolaylı bağımlılığı overrides ile güvenli sürüme sabitle.
- Fiyat fonksiyonuna birim testi yaz: İndirim ve KDV uygulayan fonksiyon için sınır değerleri de kapsayan Vitest testleri yaz.
- Döviz servisini taklitle test et: Döviz servisini çağıran modülü gerçek ağa çıkmadan taklit nesneyle test et.
- Zamanlayıcılı kodu sahte saatle test et: Otuz dakika hareketsizlikte oturumu kapatan kodu sahte zamanlayıcılarla saniyeler içinde test et.
- Kapsam raporundaki boşluğu kapat: Kapsam raporunda hiç çalışmamış görünen hata dalını bulup ona test yaz.
- Akordeon bileşenini DOM testinden geçir: Akordeonun açılıp kapanmasını jsdom ortamında kullanıcı gibi tıklayarak test et.
- Ödeme akışına uçtan uca test yaz: Sepete ekleme, adres girme ve onay adımlarını Playwright ile gerçek tarayıcıda baştan sona test et.
Kurs hakkında
Bir ön yüz projesini Vite ile kurar, lint ve biçimlendirme ekler, birim ve uçtan uca testler yazar ve bağımlılıkları güvenle yönetirsin.
Ne öğreneceksin
- Proje kurulumu
- Kod kalitesi
- Test
Ön koşullar
Aynı yolun 101 ve 201 düzeyindeki konularına hâkim olmalısın.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux terminalinde geçer. Kurulum gerekmez; lab her derste temiz başlar.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs 301 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.