JavaScript geliştirme UI TDD İlkeleri kullanarak

SORU

18 EYLÜL 2008, PERŞEMBE

JavaScript geliştirme UI TDD İlkeleri kullanarak

Bir sürü sorun JavaScript UI geliştirirken düzgün TDD ilkelerini takip etmek için en iyi yolu bulmak için geçirdim. Bu konuda gitmek için en iyi yolu nedir?

İşlevsel visual ayırmak için en iyisidir? Görsel unsurları ilk geliştirmek ve test yazma ve işlevsellik için kod sonra mı?

CEVAP

19 EYLÜL 2008, Cuma

Geçmişte Javascript ile bazı TDD yaptım ve yapmam gerekeni Birim ve Entegrasyon testleri arasında ayrım yapma. Selenyum, genel site, sunucu çıktısı ile, post, ajax çağrıları, tüm yedekler test edecek. Ama birim testi için, bunların hiçbirisi önemli değil.

Sizin istediğiniz şey ile etkileşim olacak UI ve senaryon. Bunun için kullanacağınız bir araç temelde bir HTML belgesi, sayfada bazı Javascript fonksiyonları ile alır ve sayfanın bağlamda onları yürüten JsUnit,. O yüzden yapacağın şey fonksiyonları ile bu sayfada. dışarı HTML de dahil olmak üzere. Oradan,alay HTML izole birimi, komut ve testleri UI bileşenleri ile senaryo etkileşimi test edebilirsiniz.

Biraz öyle, hadi küçük bir test yapalım bakalım kafa karıştırıcı olabilir. Bazı TDD sağlar bir bileşen yüklendikten sonra, öğeleri listesinden Lİ içeriğine göre renkli olduğunu varsayalım.

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 olduğu çok aşamalı bir süreç, o yüzden bizim kontrol için birden çok örnek lazım.

yourcontrol.js (Adım 1)

function ColorCtrl( id ) {
 /* Fail! */    
}

yourcontrol.js (adım 2)

function ColorCtrl( id ) {
    $$("#mockList li").forEach(function(item, index) {
        item.setStyle("backgrond-color", item.getText());
    });
    /* Success! */
}

Muhtemelen ağrı noktası burada görebilirsiniz, alay senin burada HTML sunucu denetimleri ne olacak yapısı ile senkronize sayfada tutmak gerekir. Ama JavaScript ile TDD göre para için iyi bir sistem değil.

Bunu Paylaş: