WordPress Geliştirme için React Unit Testi ile Başlayarak

Vue Vue vs React’i ilk gördüğümde Vuejs’i seçtim.Bunun bir nedeni, React sınıfının karmaşıklığı ve yaşam döngüsü olayı nedeniyle Vue’nin daha iyi bir seçim olduğunu hissetmemdir.Bir çerçeve geliştirmeye yardımcı olacak birçok ek komplikasyon olduğunu, ancak HTML VUE gibi şablonların sadeliğini ve açısal gibi iki yollu veriyi bağlamayı tercih ediyorum.Gutenberg ile çalışmak reaksiyonu yeniden okumama neden olduğu için, React’in birçok yönden çok daha basit olabileceğini buldum, çünkü bileşenlerimin çoğu için küçük ve saf işlevler kullanmaya devam edebilirim.
React’ten sevdiğim bir şey, tek bir sorumluluk ilkesini takip ettiğinizde test etmenin ve yeniden şekillendirmenin ne kadar kolay olduğudur. Bu yazı serisi, kod yazarken debriyaj ve uyumdan kaçınma konusunda meta düzeydedir. React bileşenini pratik bir örnek olarak kullanıyorum, böylece React’i öğreniyorsunuz. Arkadaşım Carl, WordPress PHP projesinde ve benzeri bir uyum ve güçlü debriyajın nasıl gerçekleştiği hakkında çok iyi bir yazı yazdı. Bu serideki önceki yazımda test odaklı bir şekilde tepki vermenin temellerini tartıştım. Bu serinin geri kalanında, WordPress API dinlenmesinden başlayarak React’in WordPress ile kullanımını tartışacağım ve sonra tepki vereceğim. WordPress Rest API’dan yayınları görüntüleyen ve düzenleyen küçük bir uygulamanın oluşturulmasından geçeceğim. Aslında WordPress Rest API’sına bağlamayacağım. Bu önemli. Bir yangın isteği yaparak başlardım ve daha sonra görüntülemek için JavaScript yazıyordum. Bu aklımda gerçekten geriye doğru ve WordPress ön uçının sunucudan ayrılmasını önlüyor.
Test verileriyle başlayarak, neredeyse veya tam kod kapsamı ile kod geliştirmeye zorlandım. Ayrıca, yangını yönlendirmek için kovboy kodosundan çok daha hızlı olduğunu ve tarayıcıyı istedikleri zaman yenilemesi gerektiğini düşünüyorum. Burada öğrettiğim ön uç geliştirme aşaması, HTML’yi bir rakip olarak JavaScript ile yaparak, HTML’nin tasarım-bir web tarayıcısı gerektirmediğini doğrulayan bir rakip olarak yapıyor. Evet, uçtan uca başsız bir tarayıcı ile test etmek, kullanmasam da faydalı olabilir. Ama niyetim sadece kötü bir test değil, tarayıcının gösterilmesine güvenmek. Bence daha hızlı ve daha fazlası korunabilen geliştirme kalıplarını zorlayan bir tarayıcı yerine bir test kullanarak. Bu yöntemi geliştirerek kod çıktımı önemli ölçüde artırdım ve yazdıklarıma daha fazla güveniyorum. Buna ek olarak, bu kodla uzun vadede yaşamak zorunda olduğumu bilerek, bu standardı uygulamak ve zaman zaman bir artışı ölçmek için kıyafet ve iklim kodlarına sahip olmak benim için önemlidir. ES6 Sınıfı PHP ile başlarsanız, benim yaptığım gibi, varsayılan olarak nesne yönelimli dil değildir, sınıfları nesne yönelimli programlama ile birleştirebilirsiniz. Bu yanlış fark. Örneğin, JavaScript’te ilkel veri türlerini – dizeler, tamsayı, dizi – vb. Tedavi edebiliriz. Bir nesne olarak ve hatta prototipi değiştirerek işlevselliğini genişletin.

Bu, klasik bir miras aracılığıyla, geçersiz kılma yöntemiyle PHP’de sınıfı genişletme şeklimizden farklı olan prototipal bir kalıtımdır. JavaScript’in sınıfa dayalı dil tarafından tanımlanan formda bir “yöntemi” yoktur. JavaScript’te, özellik şeklinde nesnelere herhangi bir işlev eklenebilir. Kalıtımlı işlevler, yukarıda gösterildiği gibi mülkün gölgesi de dahil olmak üzere diğer özelliklerle aynı hareket eder (bu durumda, bir yedek yöntem biçimi). Mozilla Geliştirici Ağı Şahsen, bir prototip mirasını klasik bir mirastan çok daha zor buluyorum. ECMAScript 6, JavaScript’e sözdizimsel şeker olarak sınıflandırır. Bilgisayar biliminde, şeker sözdizimi, okumayı veya ifşa edilmesini kolaylaştırmak için tasarlanmış bir programlama dilinde bir sözdizimidir. Dili insan kullanımı için “daha tatlı” yapar: işler daha net, daha özlü veya bazı insanlar tarafından sevilebilecek alternatif bir tarzda ifade edilebilir. Wikipedia, vurgum. Sınıf JavaScript’te mevcut olduğunda çok deliydim, ancak onlarla daha fazla zaman geçirdikten sonra, özellikle React bileşenini geliştirdikten sonra, tutumlu kullanılması gerektiğini hissettim. Saf işlev ve test edilebilirliğim React.component’i genişletmemeniz gerektiğini iddia etmiyor, bu yararlı, ancak her zaman işlevsel küçük bir bileşene varsayılan olarak. Neden? Niye? Bunlar saf bir işlevdir – gelen argüman, çıktı, yan etki yoktur. Saf fonksiyonun test edilmesi kolaydır. Varsayılan olarak yan etkileri yoktur, bu da gerçek birim testi için bir koşuldur.
Aşağıda, koleksiyondaki yazının başlığını değiştiren saf olmayan bir işlevdir: Diyorum ki, bu kapsamda yer almayan değişken yayınları değiştirmek için saf değil. Bu nedenle, yayın değişkenlerinin modifikasyonu bu fonksiyonun yan etkileridir. Bu işlev için bir test yazarsam, küresel olarak alay etmeliyim, kim iyi, ama bu, testin kontrolünün dışındaki unsurları içerdiğini düşünerek bir şey olduğunu kanıtlıyor mu? biraz. Test edilebilecek saf fonksiyonlara geri dönelim. Gönderi dizisini değiştirmemiz gerekiyor. Dizi işlevine enjekte ederek, gönderme dizisini değiştirmekten devam eden gönderim dizisini değiştirmeye geçeriz.
İşlevinin izole edilebilmesi için bağımlılık enjeksiyonu ilkesini uyguladım. Yazılım mühendisliğinde, bağımlılık enjeksiyonu, bir nesnenin (veya statik yöntem) diğer nesnelerin bağımlılıklarını sağladığı bir tekniktir. Bağımlılıklar kullanılabilecek nesnelerdir (hizmet). Enjeksiyon, onu kullanacak bağımlı nesneye (istemci) bağımlılığın aktarılmasıdır. Bağımlılık Enjeksiyonu – Wikipedia Bağımlılık enjeksiyonunun ana faydalarından biri, test sırasında yapay veriler enjekte edebilmemizdir. Küresel olarak alay etmek ve doğru olmasını ummak yerine, tam işlevi gerçekte kullanıldığı gibi test ediyoruz.
Evet, sınıf yöntemlerini de test edebiliriz. Tartışacağım, ama bu daha karmaşık. Komplikasyonların ne zaman orantılı olduğunu tartışacağım, ancak ilk ne zaman olmadığını görelim. Bileşen biriminin test edilmesine hızlı giriş, Java ile reaksiyona girer, ancak JavaScript uygulamasını test etmek için birçok seçenek olsa da, Jest, Facebook tarafından React düşünerek yapılan. Daha önce hiç bir JavaScript testi yazmamış olsanız bile, bu testin hemen çalışmaya değer olduğunu düşünüyorum. JavaScript işlevlerini nasıl yazacağınızı biliyorsanız, jest ile testler yazabilirsiniz. Test ayarlarında yürüyelim ve ilk testinizi yazalım. Bu yazı devam ettiğinde, geliştirme yönlendirmesi için testleri kullanarak örnek uygulamaya daha fazla özellik ekleyeceğiz. Bu, küçük olandan başlamamıza ve bir katın karmaşıklığını bir seferde oluşturmamıza izin verecek, testle süreçte dağınık bir şey olmamasını sağlıyoruz. İlk testi çalıştırın, yeni bir React uygulaması oluşturalım, bir geliştirici ile. Sunucu ve testi çalıştırmak için ihtiyacımız olan her şey. WordPress’in arka planından türetilen, kulağa zor geliyor, ancak geliştirici dostu bir çerçeve gibi, bu React ile kolay. Cidden, düğümler, NPM ve iplik yüklerseniz üç komut.
Bittiğinde, terminaliniz yerel dev sunucunuz için size URL gösterecektir. Varsayılan uygulamaya sahip terminalimin ve tarayıcımın ekran görüntüleri.

Varsayılan olarak, Create-React-App bir test ekler. Aynı dizinde başka bir terminal açın ve test gözlemcilerini başlatın:
Test jest kullanılarak çalıştırılıyor. Create-React-App, küresel olarak jest yüklediğinizi varsayar. Komut işe yaramazsa, projenize Jest veya Jest-Cli yüklemeyin. Bunun yerine, NPM’yi kullanarak küresel olarak yükleyin: Terminal şöyle görünecektir:
Bu, temel olarak uygulamanın kurulumunun hatalara neden olup olmadığını içeren bir testtir. İyi bir yakalama resepsiyon testidir, ancak istediğimiz ve çalıştırdığımız izole birim testi türü değil, testi çalıştırıp çalıştırmadığımızı bize gösterir. Jest’in oldukça basit bir ateşi var. Daha pratik bir şeye geçmeden önce bir testle bir dizi teste bakalım.
Test paketi açıklanan işlevle belirlenir. Kapanıştaki her şey bir dizi testin parçası olarak kabul edilir. Testi test devresine ayarlamak, okumayı kolaylaştırır ve tüm devreden geçebilir veya devreye belirli bir hazırlık veya yıkım işlevi ekleyebilirsiniz. Test serisinde, bir testi izole etmek için BT işlevini () kullanıyoruz. Her ikisi de argümanları tanımlar hem de kabul eder. Birincisi, test veya test devresini açıklayan bir iptir, ikincisi testi gerçekleştiren işlevdir. Metaforu şu şekilde düşünün: “Bir grup özelliği açıklayın, belirli bir özelliği var.”