Blank.js | Paul Galvin's SharePoint alanı

Intro

Birim test keşfetmek olmuştur ve online Office SharePoint için yeni bir SharePoint uygulaması üzerinde çalışmak için JavaScript test kapsamı 365 Suite. Bana açık araştırma yolları açtı Qunit.js ve sonra da sağ, Hedef Blanket.js.

QUnit birim testleri ayarlamak ve grup onları modüller edeyim. Bir modül ilgili testleri düzenlemek için basit bir yol olduğunu. (Bunu gerektiği gibi kullanarak emin değilim, Ama benim için şu ana kadar tanımladığınız testleri küçük kümesiyle defa çalışıyor).

Blanket.js Qunit ile entegre ve o-ecek göstermek beni-e doğru-ve daha da önemlisi – aslında test çalışması sırasında yürütülen değil gerçek satır JavaScript. Bu "kapsam"-diğerleri olmayan çalıştırılır satırı testi ile kaplıdır..

Kadar iyi test çalışmalarını ayarlama ve kapsam görüntüleme arasında, Biz bizim kod hataları gizlenmiş riskini azaltabilir. İyi zamanlar.

Qunit

Projeyi Visual Studio var varsayarak kurmak, JavaScript paketi indirerek başlangıç http://qunitjs.com. JavaScript ve karşılık gelen CSS çözümünüze eklemelisiniz. Benim şuna benzer:

Şekil 1

Gördüğünüz gibi, I was istimal 1.13.0 o zaman bu blog yazısı yazdı.. Download ve CSS dosyası eklemek unutmayın.

Bu yoldan çekilin, bir çeşit test bandı oluşturun ve Qunit bit için sonraki adımdır. "QuizUtil.js" denilen "gösterildiği gibi QuizUtil_test.html" adı verilen bir HTML sayfası oluşturan bir komut dosyası işlevleri bir sürü test ediyorum:

Şekil 2

İşte kod:

<!DOCTYPE HTML>
<HTML xmlns"http =://www.w3.org/ 1999/xhtml">
<kafa>
    <Başlık>QuizUtil testi ile Qunit</Başlık>
    <bağlantı rel"stil sayfası =" href="../CSS/qunit-1.13.0.css" />
    <komut dosyası türü= text/javascript"" src="QuizUtil.js" veri-kapak></komut dosyası>
    <komut dosyası türü ="text/javascript" src ="qunit-1.13.0.js"></komut dosyası>
    <komut dosyası türü ="text/javascript" src ="blanket.min.js"></komut dosyası>

    <komut dosyası>
        modülü("getIDFromLookup");
        test("QuizUtil getIDFromLookupField", işlevi () {
            var goodValue = "1;#Paul Galvin";

            eşit(getIDFromLookupField(goodValue) + 1, 2), "Kimliği [" + goodValue + "] + 1 2-meli var olmak";
            eşit(getIDFromLookupField(Tanımsız), Tanımsız, "Tanımsız giriş bağımsız değişkeni tanımsız sonuç döndürmelidir.");
            eşit(getIDFromLookupField(""), Tanımsız, "Boş giriş bağımsız değişkeni tanımsız bir değeri döndürür.");
            eşit(getIDFromLookupField("gobbledigood3-thq;dkvn ada;skfja sdjfbvubvqrubqer0873407t534piutheqw;VN"), Tanımsız,"Her zaman sonuç üstü açık bir tamsayıya dönmesi gerekir");
            eşit(getIDFromLookupField("2;#bir başka kişi"), "2", "Kontrol [2;#bir başka kişi].");
            eşit(getIDFromLookupField("9834524;#uzun değeri"), "9834524", "Büyük bir değer test.");
            notEqual(getIDFromLookupField("5;#kimse", 6), 6, "Bir notEqual test (5 eşit değildir 6 Bu örnek için: [5;#kimse]");

        });

        modülü("htmlEscape");
        test("QuizUtil htmlEscape()", işlevi () {
            eşit(htmlEscape("<"), "&lt;", "Kaçan bir küçüktür işleci ('<')");
            eşit(htmlEscape("<div class =  "someclass">Bazı metin</div>"), "&lt;div class =&quot;SomeClass&quot;&gt;Bazı metin&lt;/div&gt;", "Daha karmaşık sınama dizesi.");
        });

        modülü("getDateAsCaml");
        test("QuizUtil getDateAsCaml()", işlevi () {
            eşit(getDateAsCaml(Yeni Tarihi("12/31/2013")), "2013-12-31T:00:00:00", "Sabit kodlanmış Tarih testi: [12/31/2013]");
            eşit(getDateAsCaml(Yeni Tarihi("01/05/2014")), "2014-01-05T:00:00:00", "Sabit kodlanmış Tarih testi: [01/05/2014]");
            eşit(getDateAsCaml(Yeni Tarihi("01/31/2014")), "2014-01-31T:00:00:00", "Sabit kodlanmış Tarih testi: [01/31/2014]");
            eşit(getTodayAsCaml(), getDateAsCaml(Yeni Tarihi()), "getTodayAsCaml() getDateAsCaml eşit olmalıdır(Yeni Tarih())");
            eşit(getDateAsCaml("saçmalık değeri"), Tanımsız, "Tarihi bir saçmalık değerinin elde etmeye çalışmak.");
            eşit(getDateAsCaml(Tanımsız), Tanımsız, "Tarihi elde etmeye çalışmak [Tanımsız] Tarih.");
        });

        modülü("getParameterByName");
        test("QuizUtil getParameterByName (sorgu dizesi)", işlevi () {
            eşit(getParameterByName(Tanımsız), Tanımsız, "Elde etmeye çalışmak tanımsız parametresi tanımsız dönmek.");
            eşit(getParameterByName("mevcut değil"), Tanımsız, "Biz parametre yok biliyorum parametre değeri elde etmeye çalışmak.");

        });

        modülü("Tanımlama bilgileri");
        test("QuizUtil çeşitli tanımlama işlevleri.", işlevi () {
            eşit(setCookie("testi", "1", -1), getCookieValue("testi"), "Get set kurabiye çalışması gerekir.");
            eşit(setCookie("anycookie", "1", -1), TRUE, "Geçerli bir pişirme ayarı 'true' döndürür.");
            eşit(setCookie("çılgın tanımlama bilgisi adı !@#$%"%\^&*(()?/><.,", "1", -1), TRUE, "Kötü tanımlama bilgisi adı ayarlama 'false' a dönmelidir.");
            eşit(setCookie(Tanımsız, "1", -1), Tanımsız, "Geçen tanımlama bilgisi adı olarak tanımlanmamış.");
            eşit(getCookieValue("mevcut değil"), "", "Tanımlama bilgisi testi yok.");
        });

    </komut dosyası>
</kafa>
<vücut>
    <div kimliği"qunit ="></div>
    <div kimliği"qunit-fikstür ="></div>

</vücut>
</HTML>

Orada birçok şey oluyor burada:

Kodumu başvurma (QuizUtil.js)
Başvuru Qunity.js
Bazı modüller tanımlama (getIDFromLookup, Tanımlama bilgileri, ve diğerleri)
Yerleştirerek bir <div> ID "qunit" mı.

O zaman, Bu sayfa yukarı çekin ve böyle bir şey almak:

Şekil 3

Üstünde bakarsanız, birkaç seçenek var, ikisi de ilginç:

Testler geçti gizle: Çok açık. Sadece sorun alanları ve yığılmayı değil bir sürü görmek göz yardımcı olabilir.
Modülü: (damla aşağı): Bu testler sadece bu gruplara testlerin istediğiniz aşağı süzer.

Testler kendilerini – birkaç yorum gelince:

Bu öyle ki ilk etapta test edilebilir kodunuzu yazmanız gerektiğini söylemeye gerek yok. Aracı kullanarak bu disiplin uygulamak yardımcı olabilir. Örneğin, "GetTodayAsCaml adında bir işlevi vardı.()”. Hiçbir giriş bağımsız değişkeni alır bu yana bu çok test edilebilir değildir ve eşitlik için sınamak için, sürekli geçerli tarihin yansıtması için test kodu güncelleştirmeniz gerekir. Ben bir veri giriş parametresi ekleyerek daha sonra geçerli tarihten bugüne CAML biçimde istediğim zaman geçirmeden refactored.
Kendi test Qunit framework belgeleri ve oldukça sağlam görünüyor. Eşitlik için sınama gibi basit şeyler yapabilirsiniz ve ayrıca ajax tarzı telefon desteği vardır ("gerçek" veya alay senin favori mocker kullanma).
Sürecinden de kenar durumlarda – ne "Tanımsız" ile olur düşünmek için zorlar veya null bir işlev geçirilir. Bu senaryolar dışarı test ölü basit kolaylaştırır. İyi malzeme.

Blanket.js ile kapsama

Blanket.js, testlerinizi ders sırasında yürütmek gerçek kod satırlarının takip ederek Qunit tamamlar. O bütünleşmek sağ Qunit bile olsa tamamen ayrı bir app 's, o güzel oyun-bir kesintisiz app var gibi görünüyor.

Bu blanket.js eylem olduğunu:

Şekil 4

Şekil 5

(Aslında üst "kapsamı etkinleştir" onay kutusunu tıklamanız gerekiyor [bkz: şekil 3] Bunu etkinleştirmek için.)

Şekilde vurgulanan satırlar 5 herhangi benim testleri tarafından yürütülen değil, Yani tam kapsama istiyorsanız idam etmelerine neden test hazırlamak gerekir..

Aşağıdaki adımları uygulayarak çalışma blanket.js olsun:

Download http://blanketjs.org/.
Projenize eklemek
Test koşum sayfanızı güncelleştirin (Benim durumumda QuizUtil_test.html) aşağıdaki gibi:
1. Başvuru kodu
2. Süslemeleri, <komut dosyası> Bu şekilde başvuru:

    <komut dosyası türü= text/javascript"" src="QuizUtil.js" veri-kapak></komut dosyası>

Blanket.js kadar "gizli veri" özniteliğini seçer ve sihrini yok. Qunit kanca, UI "kapsamı etkinleştir" seçeneği eklemek için güncelleştirir ve voila!

Özet (TL; DR)

Qunit test çalışmalarınızı yazmak için kullanın..

Download o
Projenize eklemek
Bir test koşum sayfa yazmak
Testlerinizi oluşturmak
- Refactor kodunuzu test edilebilir olması için bir kısmını
- Yaratıcı olun! Çatlak gibi düşünüyorum, imkansız senaryoları ve zaten test.

Blanket.js kapsama sağlamak için kullanın.

Qunit çalıştığından emin olun
Blanket.js indirmek ve projenize eklemek
Test koşum sayfanıza ekleme:
- Blanket.js bir başvuru ekleyin
- Bir "gizli veri" özniteliğini ekleyin, <komut dosyası> etiket
Qunit testler.

Asla bunları daha önce yaptım ve bir avuç saat çalışan bazı temel şeyler vardı.

Mutlu test!

</sonunda>

Benim blog abone.

Heyecan beni izleyin http://www.twitter.com/pagalvin

Paul Galvin's SharePoint alanı

Etiket Arşivleri: Blank.js

Nasıl Yapılır: Birim testi ve Test kapsamındaki QUnit.js ve Blanket.js ile bir Office için Yapılandır 365 SharePoint uygulaması

Intro

Qunit

Blanket.js ile kapsama

Özet (TL; DR)