CCTDD: Cypress Bileşen Test Odaklı Tasarım
Last updated
Last updated
kitabının Türkçe çevirisidir.
Cypress Bileşen Testi ile TDD (Test Driven Design) uygulamanın, mühendisliğimizi bir üst seviyeye taşıyabileceğine inanıyorum.
Bu kitapta Angular'ın Kahramanlar Turu'nu (Tour of Heroes), Cypress, React ve TS kullanarak bileşen test odaklı bir şekilde yeniden oluşturacağız. Bileşenleri oluşturduktan sonra, TDD'nin yönlendirme, durum yönetimi ve Cypress e2e testi ile nasıl uygulanabileceğini inceleyeceğiz. Ayrıca Cypress ile API e2e testi hakkında bilgi edineceğiz ve UI entegrasyon testlerinin nerede yer alacağını göreceğiz.
Gereksinim özellikleri için kullanacağız. Kitabın ilk yarısında, bileşenlerimizi mühendislik için Cypress bileşen testi ile test odaklı tasarım yaklaşımını kullanacağız. Önce alt bileşenler üzerinde çalışacağız ve yol kat edeceğiz. Tıklama olayı işleyicileri için karar vermemiz gereken zamana kadar console.log kullanacağız.
Daha sonraki bölümlerde durum ve yönlendirmeye değindiğimizde, Cypress e2e testi TDD için daha alakalı hale gelecek ve bileşen test paketi, uygulamamızın hala beklendiği gibi çalıştığı konusunda bize güvence sağlayacaktır.
Her bölümde TDD'nin Kırmızı Yeşil Düzenleme döngülerini açıkça yakalayacak ve Cypress bileşen testinin React Testing Library'ye (RTL) 1:1 kıyaslaması ile bir özet ve anahtar noktalarla sona ereceğiz. Her kod örneği, kopyalanabilir ve tekrarlanabilir sonuçlar vermek için tasarlanmıştır, ancak okuyucunun kodu kopyalamak yerine yazıp kademeli olarak iyileştirmesi teşvik edilir. Son bir uyarı; erken bölümlerde, dosyaları ve kodları daha sonra büyük ölçüde yeniden düzenlemekten kaçınmak için, uygulamanın son sürümüyle daha uyumlu olacak şekilde bazı kararlar alabiliriz.
Yıllar önce John Papa, Angular, Vue ve ReactJS'de aynı uygulamayı oluşturdu, ne yazık ki React versiyonu eski ve React topluluğu olarak meta değişikliklerinin ne sıklıkta yapıldığını biliyoruz. Yaklaşım, Vue ve Angular'dan gelen okuyuculara Cypress bileşen testleri yazarken 1:1 karşılaştırmalar yapma ve hatta bu çerçevelerden birinde bu alıştırmayı yeniden yapma olanağı sunar.
Bu içeriğin gözden geçirenlerine çok teşekkürler; , , ve sürekli olarak Epic React ofis saatleri boyunca soruları yanıtladığı için.
Bu kitabın içeriğine ilham veren kaynaklar şunlardır:
Karşılaştırma ve zıtlıklar yapmak, yeni teknolojileri öğrenmenin harika bir yoludur. Bu tarzda yapılan çok fazla kaynak yoktur. Örneğin bu içerikte Kahramanlar, bileşenler arasında durumu iletmek için React özelliklerini kullanırken, benzerleri olan Kötüler ise React context API'sini kullanmaktadır.
Bu, günlük olarak güncellenen ve geliştirilen canlı bir kitaptır. Redux aynası, Redux Toolkit aynası, X-State aynası ekleyebiliriz, belki bir gün uygulamayı NextJs'e taşıyabiliriz. Gelecekte daha fazla bölüm görmeyi ve birlikte ön uç geliştirme hakkında daha fazla bilgi edinmeyi bekleyin.
Talimatlar için, oluşturduğunuz depoyu https://github.com/muratkeremozcan/tour-of-heroes-react-cypress-ts olarak kabul edeceğiz, burada uygulamanın son sürümünü bulabilirsiniz. Örnekler yarn kullanır ve tercihe bağlı olarak npm kullanılabilir.
Bir sağlamlık kontrolü için, komutları teker teker çalıştıracağız.
&
Yukarıdaki tüm konular için başlatabilir veya bir açabilirsiniz.
Yeni bir depo oluşturmak için bu kullanın. Depo, React, TS, Cypress (e2e & ct), GHA ile CI mimarisi, Jest, ESLint, Prettier, Renovate, Husky, Lint-staged ve yeni bir projeye başlamadan önce sahip olmak istediğiniz çoğu şeyi içerecektir. Yeni depoyu klonlayın ve yükleyin.