WordPress Geliştirmede Jest ile Jquery’yi test edin
Kısa süre önce, Test React uygulamaları ve WordPress eklentisini test etmek için bir dizi Phunit kullanımı hakkında bir dizi gönderi yazdım. Yeni kodları test etmeyi ve test edilebilecek şekilde yazmayı içerir. Eski kod tabanında testlerin benimsenmesi ile ilgili karmaşık şeylerden biri, kodun genellikle testi daha zorlaştıracak şekilde yazılmasıdır. Bu makalede, JQuery tarafından test edilmenin iki zor yolunu göreceğim. İlk olarak, kodunuzu yapay olarak jQuery’nin kendisinden izole etmek için bir yapay nasıl kullanacağınızı göstereceğim. Sonra tıklamada çalışan kod ve Ajax istekleri yapmak için kullanılan kod ile bir örnek vereceğim.
Jest’e Hızlı Giriş Birim testi ile ilgili karmaşık şeylerden biri, tüm kodların DOM veya WordPress kancaları gibi küresel sistemlerden mükemmel bir şekilde yazılamamasıdır. Yapay Kütüphane, mevcut testlerle kapsanmayan yapay bir sistemi silmenize yardımcı olur. Örneğin, 10UP/WP_MOCK, WordPress eklentisi ateşini bir test taklidi ile değiştirmek için kullanılabilir. Bu makale Jquery’yi jest ile test etmekle ilgilidir. Jest Facebook tarafından geliştirildi ve genellikle React uygulamasını test etmek için kullanılır, ancak diğer test kütüphaneleriyle kullanılabilir. Jest’in en büyük özelliklerinden biri onunla alay etme yeteneğidir. Jest Jesses’in en basit kullanımı, bir işlevin kaç kez çağrıldığını hesaplamaktır. Testiniz diğer işlevleri çağıran bir işlev ise, yalnızca işlevin çağrıldığını bilmeniz gerekir.
Öğe satırını alan işlev için teste bakalım ve ardından her öğeye aynı şeyi uygulayalım. Bu snippet’te, UpdatePost () için yayın dizisine devam etmek için işlevi kullanan Bitms – Test için İşlevler – ve UpdatePosts () güncellemeleri var. Bu makalenin ilerleyen saatlerinde, jquery.ajax () çağrısını nasıl test edeceğimi göreceğim. Şimdilik, güncellemeyi sağlamaktan endişe duyuyorum () bir geri çağrı gönderiyorum: Şimdi, teste bakalım. Şu anda yapay bir gönderi bile vermeyeceğim, sadece üç öğeli bir dizi ve daha sonra üç kez çağrıldığım arka çağrıyı doğruladı:
Buradaki anahtar satır 4. satırdır. Bu satırda, jest.fn () kullanarak “Geri Arama” adlı bir işlev yaptım. Sonuç olarak, geri çağrı.mocks.calls.length kullanarak çağrı süresini hesaplayabilirim. İşlevimin birkaç kez çağrıldığını test etti. Bana doğru verileri aldığını göstermedi. Bu nedenle, jest.fn () adlı yardımcı program işlevini kullanabiliriz:
Önceden Ayrı Endişeler Eski kod tabanında testi benimsemek için en büyük engellerden biri, kodunuzun test edilmesi kolay olmayabilir. İzole birim testi yapılmayabilir. Cypress.io veya benzeri gibi bir tarayıcı otomasyon çerçevesiyle DOM testi yazabilirsiniz. Dom’u test etmek için Dom-Testing-Library gibi bir şey de kullanabilirsiniz.
Ancak basit bir yeniden düzenleyici, iş mantığınızı DOM olay sisteminden izole edebilir. Aşağıda, JQuery’nin tıklama olayına bağlanması ve ardından duruma göre sınıfları eklemek veya silmek için kullanıldığı bir örnek: DOM’un tamamını veya bir kısmını oluşturabilir, tıklamaları simüle edebilir, ardından DOM öğesinin doğru sınıfa sahip olup olmadığını test edebilirsiniz. Yavaştır ve kodunuzun değil, jQuery’nin sorumluluğunu olan birçok şeyi test eder. İş mantığınız sizin işletmeniz, bağlama sisteminiz ve jQuery etkinlikleri göndermektir. Yukarıda gösterdiğim kod görüntüleri birçok şey yaptı, tek sorumluluk ilkesinin ihlali. İki işleve bölünelim. Bir işlev JQuery’yi bağımlılık olarak alır ve iş mantığını çalıştırır. Başka bir işlevin sorumluluğu, ilk işlevdeki izole edilmiş izole mantığı JQuery olay sistemine bağlamaktır.
Şimdi bu işlevi iş mantığımla nasıl test edeceğinizi görelim. JQuery’ye işleve bağımlılık olarak devam ettiğimiz için, orada herhangi bir işlevi kaçırabiliriz. Şakalar gibi. Çünkü bu işlevin etkilerini test etmeyeceğimiz için – doğru DOM öğelerinden sınıflar ekleyin ve silin – yalnızca işlevin çağrıldığını bilmemiz gerekir. Daha önce gösterdiğim temel sahte bu test için yeterli değildi. Bunu iki nedenden dolayı söylüyorum. Birincisi, bir yapıcısı yoktur, bu nedenle aslında test etmediğimiz jQuery yapıcı çağrıları hatalara neden olur. İkincisi, ayrı yöntemlere yönelik çağrıları hesaplayabilmeliyiz.
İlk sorunu çözen ancak ikincisini çözen testler aşağıdadır:
Bu doğru yapıcı ile mezun olacak. Ancak, bildiğimiz bu iki nesne yönteminin dendiğidir. Hangisi? Bilmiyoruz ve bu önemlidir, çünkü testlerimizde Removeclass’ın çağrıldığından emin olmalıyız, ancak AddClass değil. Test ettiğimiz iş mantığı bu. Çözüm, bu yöntemleri kendi değişkenlerine koymaktır, kontrol edebiliriz: Şimdi iş mantığının doğru işlevin çağrılacağını test ediyoruz. Etkiyi test etmiyoruz, sadece mantığımızı. Görev elde edilir.
Etkinliğin bağlanması ne olacak? Etkinliğin gerçek bağlarını gerçekten tartışmadım. Umurumda değil. Neden? Niye? İlk olarak, orada sorun yaşayacağımdan gerçekten şüpheliyim. Varsa, gerçek web sitelerine karşı oluşturulan ve jQuery düzgün çalışmazsa ve etkinliğimin bağlanmasına daha fazla güvenen kullanıcı etkileşimlerini simüle eden bir kabul testi ve entegrasyon testi ile ortaya çıkacak büyük bir sorundur. Test için yapacağım yapay olay. İş mantığı test edilirse, iyiyim.
JQuery Ajax’ı Jest ile test ederek HTTP isteklerini içeren herhangi bir şeyi test ederek karmaşık olabilir. Önce yan etkilerden kurtulmak önemlidir. Jquery.ajax () API’sinden ayrı iş mantığını kırmak benzer test stratejilerine izin verebilir. Bu Ajax JQuery’nin üç geri çağrıyla kullanımını düşünün:
Bu oldukça yaygın, bir süre önce yazdığım bir şeyden kopyaladım. Bu kodu test etmeyi düşünmenin bir yolu, onu olduğu gibi bırakmaktır, ancak yangını alay etmenin bir yolunu bulmaktır. Yangın kendi testi ile kaplısa ve Jquery Ajax’ın kendi testi olması benim için mantıklı değil. Tersine, üç işlev olarak düşünün: İşte kullanabileceğimiz üç işlev. Onları işlevlere izole etmek, tekrar kullanılabilecekleri anlamına gelir, ki bu çok iyidir. Ayrıca, iki küresel bağımlılığa devam edebiliriz – jQuery ve gidonlar işlevlere. Bu tür bir işlev yalnızca tasarıma dayanmaz. Bu bağlamdaki “saf” terimi, yan etkileri olmayan işlev anlamına gelir. Bu işlevler, küresel ateşin kapsamını kolayca değiştirebilirsek, global kapsama yangını kullanarak DOM’u değiştirir ve sorun yoktur. Aşağıda, yalnızca yapay nesnedeki doğru işlevin çağrıldığını kontrol eden bir testtir. Tek bir yerde – hata fonksiyonu argümanı – Doğru değerin bu yönteme aktarıldığından endişeliyim, bu yüzden Jest’in beklemesi ile kontrol ediyorum. Mocketing yaptığım başka bir işlev, çağrıldıkları sürece işlev gördüklerine inanıyorum. Onları doğru sırayla aramak benim işim, doğru verilerle demek benim işim, yaptıkları şey benim işim değil.
Yangının isteği ne olacak?
Çoğu için, olayı bağlamaya verdiğim nedenleri umursamıyorum. API’nın sonu kendi izole testlerini alır. Ayrıca, kabul testi var. Bir yangın müşterisi inşa ediyorsam, yapay bir yanıtla test etmem gerekiyor. Bunun için Ajax’ın isteği için alaycı bir kütüphane kullanacağım. Bazı nedenlerle jQuery.ajax () ‘dan daha almayı tercih ediyorum – bir tarayıcıya inşa edildi ve sunucuda birlikte çalıştı ve bunun için çok yararlı olan alaycı bir kitaplık var. Buraya yangın getirme için bir birim testinin nasıl yazılacağı hakkında biraz yazdım. Bu makalede eğlenerek, Jest’in şakaları hakkında çok şey tartıştım. Jest’in şakası hakkında daha fazla bilgi edinmek istiyorsanız, bu yazıyı tavsiye ederim. JavaScript’i test ederek amacım, ihtiyacım olan jestin üzerinde birkaç ek katman kullanmak. Testi sadece jest ile yapabilirsem. Çok uzakta olabilir, kodu yeniden aktarabilir veya çok fazla alay yazabilir, bu da koddaki değişikliklerle eşleşecek şekilde değiştirilmesi gerekir, böylece testi yapma noktasını ortadan kaldırır. Bulması zor olan ve PHP testlerinin yazılmasından çok farklı bir dengedir, burada birim testinin izole edildiği ve bazı sınıfların birbirine nasıl bağlandığını içeren entegrasyon testleri API veritabanını veya geri kalanını tanımlamak için gereken her şey olmalıdır veya Kimsenin hiçbir sorunu olmayan iş mantığını ele alan sınıfın bir sorunu yoktur. Yalnızca tarayıcıda JavaScript kullanan bir uygulamada tartıştığımız UI testi daha karmaşıktır.
