JavaScript'te kullanıcı arayüzünü geliştirirken TDD ilkelerini doğru şekilde izlemenin en iyi yolunu bulmaya çalışırken çok fazla sorunla karşılaştım. Bu konuda gitmenin en iyi yolu nedir?TDD İlkeleri'ni kullanarak JavaScript'te Kullanıcı Arayüzü Geliştirme
Görselleri işlevselden ayırmak en iyisidir? Önce görsel öğeleri geliştirir, daha sonra testleri yazar ve sonra işlevsellik için kod yazar mı?
geçmişte JavaScript bazı TDD yapılır ve yapmam gereken buydu ettik Birim ve Entegrasyon testleri arasındaki ayrımı yapmak.Selenium, sunucunuzun çıktısı, geri gönderimleri, ajax çağrıları, tüm bunları içeren genel sitenizi test edecektir. Ama birim testi için bunların hiçbiri önemli değil.
İstediğiniz, etkileşim kurduğunuz kullanıcı arabirimi ve komut dosyanızdır. Bunun için kullanacağınız araç temel olarak JsUnit, HTML belgesini alır, sayfadaki bazı Javascript işlevleri ile bunları sayfa bağlamında yürütür. Yani, yapacağınız şey sayfadaki Stubbed out HTML'yi fonksiyonlarınızla birlikte içeriyor. Buradan, senaryonun etkileşimini, sahte HTML'nin, ünitenizin ve testlerin yalıtılmış ünitesindeki UI bileşenleri ile test edebilirsiniz.
Bu biraz kafa karıştırıcı olabilir, bu yüzden biraz test yapıp yapamayacağımızı görelim. Bir bileşen yüklendikten sonra, bir öğe listesinin LI'nin içeriğine bağlı olarak renklendiğini varsaymak için bazı TDD'ye izin verir. Bizim kontrolü için, birden fazla örnek gerekir böylece
tests.html
<html>
<head>
<script src="jsunit.js"></script>
<script src="mootools.js"></script>
<script src="yourcontrol.js"></script>
</head>
<body>
<ul id="mockList">
<li>red</li>
<li>green</li>
</ul>
</body>
<script>
function testListColor() {
assertNotEqual($$("#mockList li")[0].getStyle("background-color", "red"));
var colorInst = new ColorCtrl("mockList");
assertEqual($$("#mockList li")[0].getStyle("background-color", "red"));
}
</script>
</html>
Açıkçası TDD, çok adımlı bir süreçtir.
yourcontrol.js (step1)
function ColorCtrl(id) {
/* Fail! */
}
yourcontrol.js Muhtemelen size sahte HTML tutmak zorunda ağrı noktası burada görebilirsiniz
function ColorCtrl(id) {
$$("#mockList li").forEach(function(item, index) {
item.setStyle("backgrond-color", item.getText());
});
/* Success! */
}
(adım2) Burada, sunucu kontrolünüzün yapısının yapısıyla uyumlu bir sayfada. Ama size TDD'ing için JavaScript ile güzel bir sistem sunuyor.
Bu, Google Web Araç Seti'ne geçiş yapmamın birincil nedenidir ... Java geliştirir ve test eder ve derlenmiş JavaScript'in çeşitli tarayıcılarda düzgün bir şekilde çalışacağına dair makul bir beklentim vardır. TDD esas olarak bir birim test fonksiyonu olduğundan, projenin çoğu derleme ve dağıtımdan önce geliştirilebilir ve test edilebilir.
Tümleştirme ve İşlevsel test paketleri, sonuçta ortaya çıkan kodun bir test sunucusuna yerleştirildikten sonra beklendiği gibi çalıştığını doğrular.
Hiç bir zaman TDDed UI kodu kullanmadım. Geldiğimiz en yakın kişi gerçekten UI kodunu uygulama mantığından mümkün olduğunca ayırmaktı. Model-kontrol-denetleyici modelinin kullanışlı olmasının bir nedeni budur - model ve kontrolör çok fazla sorun olmadan ve çok karmaşık hale gelmeden TDDed olabilir.
Deneyimlerime göre, kullanıcı kabul etme testlerimiz için her zaman görüş ayrıldı (web uygulamaları yazdık ve UAT'lerimiz Java'nın HttpUnit'i kullanıyordu). Ancak, bu seviyede, TDD ile arzu ettiğimiz izolasyonda test etme özelliği olmadan gerçekten bir entegrasyon testi. Bu kurulumdan önce, önce bizim denetleyici/model testleri/kodu, ardından UI ve karşılık gelen UAT'yi yazmak zorundaydık. Bununla birlikte, son zamanlarda yazdığım Swing GUI kodunda, GUI kodunu ilk önce ön uç tasarımını keşfetmek için denetleyici/model/API'ye eklemeden önce taslakları ile yazıyorum. YMMV burada olsa.
Tekrarlamak gerekirse, verebileceğim tek öneri, şüphelendiğiniz şeydir - UI kodunuzu mümkün olduğunca mantığınızdan ayırın ve bunları TDD'ye ayırın.
Sadece üzerinde çalıştığım yeni bir projede Javascript TDD yapmaya başlamak üzereyim. Mevcut planım, ünite testini yapmak için qunit'u kullanmaktır. Testler geliştirilirken, test sayfası tarayıcıda basitçe taranarak çalıştırılabilir.
Sürekli entegrasyon için (ve tüm tarayıcılarda testlerin çalışmasını sağlayarak), her bir tarayıcıda test kablo demetini otomatik olarak yüklemek ve sonucu okumak için kullanacağım. Bu testler, kaynak kontrolü için her kontrolte çalıştırılacaktır.
Ayrıca, testlerin kod kapsamı analizini almak için JSCoverage kullanıyorum. Bu da Selenium ile otomatikleştirilecek.
Şu anda bu ayarın ortasındayım. Kurulumunu yaptıktan sonra bu cevabı daha ayrıntılı bilgilerle güncelleyeceğim.
Test araçları:
Ayrıca bkz: ben test edilebilir arayüzleri yazmak için çok uygun olduğunu MVP mimarisini buldum JavaScript unit test tools for TDD
. Presenter ve Model sınıflarınız sadece% 100 ünite test edilebilir. Yalnızca (Selenyum vb) UI testi için
Not (dilsiz, ince tabaka sadece o Presenter olaylar yangınları olmalıdır) Görünüm endişelenmenize gerek olduğunu kullanıyorum bahsediyorum içinde Tamamen UI bağlamında MVP, sunucu tarafına geçmeden. Kullanıcı arayüzünüz, tamamen istemci tarafında yaşayan kendi Sunum Yapan ve Modeline sahip olabilir. Model, Model durumu bilgisi tutarken ve arka uça (ayrı bir Modele sahip olabileceğiniz bir portal) bir portal sağlarken, Kullanıcı arabirimi etkileşim/doğrulama vb. Mantığını yönlendirir.
Ayrıca, Presenter First TDD tekniğine de göz atmalısınız.
Yaptığım şey, beklediğimi alıp alamayacağımı görmek için Dom'u kesiyor. Bunun harika bir yan etkisi, testlerinizi hızlı hale getirirken uygulamanızı da hızlı bir hale getirmenizdir.
JavaScript tdd ile son derece yardımcı olacak bir açık kaynak araç seti yayınladım. Kutunun dışında çalışan bir omurga uygulaması sağlayan bir çok açık kaynak araçlarının bir bileşimidir.
Çalıştırmak için tek komutlar sağlar: dev web sunucusu, jasmine tek tarayıcı test koşucusu, jasmine js-test-driver çoklu tarayıcı test koşucusu ve JavaScript ve CSS için birleştirme/minleştirme.Ayrıca, üretim hata ayıklaması için uygulamanızın ulaşmamış bir sürümünü çıkarır, gidon şablonlarınızı önceden derler ve uluslararasılaştırmayı destekler.
Kurulum gerekli değil. Sadece işe yarıyor.